diff --git a/db.json b/db.json
index 59b3013b..85e542ef 100644
--- a/db.json
+++ b/db.json
@@ -1 +1 @@
-{"meta":{"version":1,"warehouse":"3.0.2"},"models":{"Asset":[{"_id":"source/CNAME","path":"CNAME","modified":0,"renderable":0},{"_id":"source/browserconfig.xml","path":"browserconfig.xml","modified":0,"renderable":0},{"_id":"source/embark-logo.svg","path":"embark-logo.svg","modified":0,"renderable":0},{"_id":"source/favicon.ico","path":"favicon.ico","modified":0,"renderable":0},{"_id":"source/robots.txt","path":"robots.txt","modified":0,"renderable":0},{"_id":"source/coverage-files.png","path":"coverage-files.png","modified":0,"renderable":0},{"_id":"source/coverage-report.png","path":"coverage-report.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/bamboo.png","path":"plugins/thumbnails/bamboo.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/fortune.jpg","path":"plugins/thumbnails/fortune.jpg","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/haml.png","path":"plugins/thumbnails/haml.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/pug.png","path":"plugins/thumbnails/pug.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/remix copy.png","path":"plugins/thumbnails/remix copy.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/remix.png","path":"plugins/thumbnails/remix.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/solidity.png","path":"plugins/thumbnails/solidity.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/solium.png","path":"plugins/thumbnails/solium.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/status.png","path":"plugins/thumbnails/status.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/angular.png","path":"templates/thumbnails/angular.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/bamboo.png","path":"templates/thumbnails/bamboo.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/react.png","path":"templates/thumbnails/react.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/sggc.png","path":"templates/thumbnails/sggc.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/typescript.png","path":"templates/thumbnails/typescript.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/vortex.png","path":"templates/thumbnails/vortex.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/vuejs.png","path":"templates/thumbnails/vuejs.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/vyper.png","path":"templates/thumbnails/vyper.png","modified":0,"renderable":0},{"_id":"source/tutorials/infura_guide/api-keys.png","path":"tutorials/infura_guide/api-keys.png","modified":0,"renderable":0},{"_id":"source/tutorials/infura_guide/lift-off.jpg","path":"tutorials/infura_guide/lift-off.jpg","modified":0,"renderable":0},{"_id":"themes/embark/source/css/embark.scss","path":"css/embark.scss","modified":0,"renderable":1},{"_id":"themes/embark/source/js/index.js","path":"js/index.js","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_debugger_controls.png","path":"assets/images/cockpit_debugger_controls.png","modified":0,"renderable":0},{"_id":"source/assets/images/crystal-thread-test.png","path":"assets/images/crystal-thread-test.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/mythx.png","path":"plugins/thumbnails/mythx.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_1.png","path":"assets/images/token_factory_1/page_1.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_2.png","path":"assets/images/token_factory_1/page_2.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_3.png","path":"assets/images/token_factory_1/page_3.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_4.png","path":"assets/images/token_factory_1/page_4.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_5.png","path":"assets/images/token_factory_1/page_5.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_1.png","path":"assets/images/token_factory_2/page_1.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_2.png","path":"assets/images/token_factory_2/page_2.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_3.png","path":"assets/images/token_factory_2/page_3.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_4.png","path":"assets/images/token_factory_2/page_4.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_5.png","path":"assets/images/token_factory_2/page_5.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_6.png","path":"assets/images/token_factory_2/page_6.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_7.png","path":"assets/images/token_factory_2/page_7.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/icons/app-window-search-text.svg","path":"assets/icons/app-window-search-text.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-down-1.svg","path":"assets/icons/arrow-down-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-left-1.svg","path":"assets/icons/arrow-left-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-right-1.svg","path":"assets/icons/arrow-right-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-up-1.svg","path":"assets/icons/arrow-up-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/browser-gauge.svg","path":"assets/icons/browser-gauge.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/check.svg","path":"assets/icons/check.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/close.svg","path":"assets/icons/close.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/computer-bug-search.svg","path":"assets/icons/computer-bug-search.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/copy-paste.svg","path":"assets/icons/copy-paste.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/crypto-currency-bitcoin-circle.svg","path":"assets/icons/crypto-currency-bitcoin-circle.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/github.svg","path":"assets/icons/github.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/list-to-do.svg","path":"assets/icons/list-to-do.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/module.svg","path":"assets/icons/module.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/navigation-menu.svg","path":"assets/icons/navigation-menu.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/notes-paper-text.svg","path":"assets/icons/notes-paper-text.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/paginate-filter-video-alternate.svg","path":"assets/icons/paginate-filter-video-alternate.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/pen-write-paper.svg","path":"assets/icons/pen-write-paper.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/pie-line-graph.svg","path":"assets/icons/pie-line-graph.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/rating-star.svg","path":"assets/icons/rating-star.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/search-bar.svg","path":"assets/icons/search-bar.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/symbols.html","path":"assets/icons/symbols.html","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/symbols.svg","path":"assets/icons/symbols.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/tag-new-circle.svg","path":"assets/icons/tag-new-circle.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/twitter.svg","path":"assets/icons/twitter.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/Nimbus.svg","path":"assets/images/Nimbus.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-120x120-precomposed.png","path":"assets/images/apple-touch-icon-120x120-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-152x152-precomposed.png","path":"assets/images/apple-touch-icon-152x152-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-180x180-precomposed.png","path":"assets/images/apple-touch-icon-180x180-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-60x60-precomposed.png","path":"assets/images/apple-touch-icon-60x60-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-76x76-precomposed.png","path":"assets/images/apple-touch-icon-76x76-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-precomposed.png","path":"assets/images/apple-touch-icon-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/company-flexdapps.svg","path":"assets/images/company-flexdapps.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/company-giveth.svg","path":"assets/images/company-giveth.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/company-status.svg","path":"assets/images/company-status.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/dots.png","path":"assets/images/dots.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/favicon-16.png","path":"assets/images/favicon-16.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/favicon-32.png","path":"assets/images/favicon-32.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/keycard-logo-negative.svg","path":"assets/images/keycard-logo-negative.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/logo-negative.svg","path":"assets/images/logo-negative.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/logo.svg","path":"assets/images/logo.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/rocket-start.svg","path":"assets/images/rocket-start.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/status-logo.svg","path":"assets/images/status-logo.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/README.md","path":"js/linkjuice/README.md","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/gulpfile.js","path":"js/linkjuice/gulpfile.js","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/package.json","path":"js/linkjuice/package.json","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_dashboard_release.png","path":"assets/images/cockpit_dashboard_release.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_editor_release.png","path":"assets/images/cockpit_editor_release.png","modified":0,"renderable":0},{"_id":"source/assets/images/nimble-creating-app.png","path":"assets/images/nimble-creating-app.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/bg-hexagons.png","path":"assets/images/bg-hexagons.png","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_contracts_view.gif","path":"assets/images/cockpit_contracts_view.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_selective_deployment.gif","path":"assets/images/cockpit_selective_deployment.gif","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/console_2.png","path":"assets/images/token_factory_1/console_2.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/tool-screenshot.png","path":"assets/images/tool-screenshot.png","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/src/linkjuice.js","path":"js/linkjuice/src/linkjuice.js","modified":0,"renderable":1},{"_id":"source/assets/images/nim-crystal-header-img_NEW.jpg","path":"assets/images/nim-crystal-header-img_NEW.jpg","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/console_2.png","path":"assets/images/token_factory_2/console_2.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_dashboard.png","path":"assets/images/cockpit_dashboard.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_dashboard_dark.png","path":"assets/images/cockpit_dashboard_dark.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/console_1.png","path":"assets/images/token_factory_1/console_1.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_explorer_block.png","path":"assets/images/cockpit_explorer_block.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/console_1.png","path":"assets/images/token_factory_2/console_1.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","path":"assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/cli-tool.png","path":"assets/images/cli-tool.png","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_explorer_overview.png","path":"assets/images/cockpit_explorer_overview.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/EMBARK_MODULAR.png","path":"assets/images/EMBARK_MODULAR.png","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_explorer_contracts_detail.gif","path":"assets/images/cockpit_explorer_contracts_detail.gif","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/EMBARK_FRAMEWORK.png","path":"assets/images/EMBARK_FRAMEWORK.png","modified":0,"renderable":1},{"_id":"source/assets/images/embark-dashboard.png","path":"assets/images/embark-dashboard.png","modified":0,"renderable":0},{"_id":"source/assets/images/website_release.png","path":"assets/images/website_release.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_explorer_transactions.gif","path":"assets/images/cockpit_explorer_transactions.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_suggestions.gif","path":"assets/images/cockpit_suggestions.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_using_debugger.gif","path":"assets/images/cockpit_using_debugger.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_search.gif","path":"assets/images/cockpit_search.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_explorer_account.gif","path":"assets/images/cockpit_explorer_account.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_editor.gif","path":"assets/images/cockpit_editor.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_enter_debugger.gif","path":"assets/images/cockpit_enter_debugger.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_navigation.gif","path":"assets/images/cockpit_navigation.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_change_theme.gif","path":"assets/images/cockpit_change_theme.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_dashboard_contracts.gif","path":"assets/images/cockpit_dashboard_contracts.gif","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/dashboard.png","path":"assets/images/token_factory_1/dashboard.png","modified":0,"renderable":0},{"_id":"source/assets/images/web3-js-diagram.png","path":"assets/images/web3-js-diagram.png","modified":0,"renderable":0},{"_id":"source/assets/images/embark-header_blank.jpg","path":"assets/images/embark-header_blank.jpg","modified":0,"renderable":0},{"_id":"source/assets/images/web3-article-header.png","path":"assets/images/web3-article-header.png","modified":0,"renderable":0}],"Cache":[{"_id":"source/CNAME","hash":"fbac6d19ee04b9b7f4b3085544d024ec900c633c","modified":1579288027510},{"_id":"source/browserconfig.xml","hash":"f54412705ab9eb69b544f438c9a1e15ae57f27c0","modified":1579287603896},{"_id":"source/embark-logo.svg","hash":"af5b81d96dd4f7e4e65851e53866da7883daf52e","modified":1579287603900},{"_id":"source/favicon.ico","hash":"96b9a549337c2bec483c2879eeafa4d1f8748fed","modified":1579287603900},{"_id":"source/index.md","hash":"0a8e37f1549e24d127e9b65773ae00826d0b53c6","modified":1579287603900},{"_id":"source/robots.txt","hash":"7e49dfd97319f5dd7cdaea8518cf43e0e8d01e5a","modified":1579287603900},{"_id":"themes/embark/package.json","hash":"162acd2d930b76e2aca9114110e08110892db77e","modified":1579467413031},{"_id":"source/coverage-files.png","hash":"e9b0f9b1f09dc16409266dfbc1223f274dd63cbc","modified":1579287603896},{"_id":"source/_data/authors.yml","hash":"3250f13e4e2b6659b36e0932fe5b247fb8f4a4de","modified":1579287603592},{"_id":"source/_data/categories.yml","hash":"3c7131ed69c491243da443abca694a5c33d281b6","modified":1579287603592},{"_id":"source/_data/languages.yml","hash":"74e55635eb66bb12833e42f0d1057b03beb65bcf","modified":1579287603592},{"_id":"source/_data/menu.yml","hash":"bf3d8f131b64deb519c503acad1d98c260c7bef8","modified":1579288101159},{"_id":"source/_data/plugins.yml","hash":"250b7281973f7c96b773150c5215edffcabc8297","modified":1579287603592},{"_id":"source/_data/sidebar.yml","hash":"0ea60cee0c8cfd15952164e2c4f0f7ac5baff74b","modified":1579287603592},{"_id":"source/_data/templates.yml","hash":"bb1ad150c7145d71cb0c8cc79bf11313e5336044","modified":1579467412647},{"_id":"source/_data/tutorials.yml","hash":"6546e52f28f25f5eed82a13390ff7dc1e40d8f9b","modified":1579287603592},{"_id":"source/_data/versions.yml","hash":"e67950c3480c00a3da7728648542cfef802a656f","modified":1579467412647},{"_id":"source/_posts/2017-06-28-embark-2-5-released.md","hash":"5d149e9a2abea4c7ab621dfc846e8e15e67d0e54","modified":1579287936382},{"_id":"source/_posts/2017-10-25-embark-2-6-released.md","hash":"960e06e89708a2c7efb4e2833f3330e50df4ca5c","modified":1579287936382},{"_id":"source/_posts/2018-05-04-embark-3-0-released.md","hash":"96d9c51b2958bb133fabb45fb8adf82643352efb","modified":1579467412648},{"_id":"source/_posts/2018-06-20-embark-3-1-released.md","hash":"cbfe0ade135b7adcfe7d8ccb44b9651f5ac9571d","modified":1579287936386},{"_id":"source/_posts/2018-09-27-how-to-create-a-token-factory-with-embark-part-1.md","hash":"b92b23dcd959f9ad706a08d6a669000d0e8c73f9","modified":1579467412649},{"_id":"source/_posts/2018-10-27-how-to-create-a-token-factory-with-embark-part-2.md","hash":"2801c0fd796b136fff5d275de5581d3950eb8bb1","modified":1579467412649},{"_id":"source/_posts/2019-01-23-building-smart-contract-only-dapps.md","hash":"07ee6e18303761d241359b84d5ca49a895ae3f54","modified":1579287936386},{"_id":"source/_posts/2019-01-28-running-embark-tests-on-a-continuous-integration-server.md","hash":"b9b5affc2764a4b92fee15c6bd12201ee4d6c7c4","modified":1579287936386},{"_id":"source/_posts/2019-02-04-building-a-decentralized-reddit-with-embark-part-1.md","hash":"57de8cfef3e845f2bd86d01c01efc1fcc8bf23fe","modified":1579287936386},{"_id":"source/_posts/2019-02-11-building-a-decentralized-reddit-with-embark-part-2.md","hash":"3aa3e6ef8fbb7c57f07ee3b0738ccf3791e792c5","modified":1579287936386},{"_id":"source/_posts/2019-02-18-building-a-decentralized-reddit-with-embark-part-3.md","hash":"f985d4e255f1b4794ae75dbf6cecc6375b2b8a52","modified":1579287936394},{"_id":"source/_posts/2019-03-18-upgrading-to-embark-4.md","hash":"273625d93b803e0b9d447dfb669c94d7c54744e7","modified":1579467412651},{"_id":"source/_posts/2019-03-19-introducing-embark-4.md","hash":"50072eac21af7cd032c33cd410fbb743010caa34","modified":1579287936394},{"_id":"source/_posts/2019-07-23-whats-new-in-embark-4.1.md","hash":"314ccfcf29600a751720d27f397e3ea1cbfa5d3c","modified":1579467412652},{"_id":"source/_posts/2019-11-18-nim-vs-crystal-part-1-performance-interoperability.md","hash":"22c1e00430cf3e46211ee0b77dd9217ffcea6dff","modified":1579287936394},{"_id":"source/_posts/2019-11-21-nim-vs-crystal-part-2-threading-tooling.md","hash":"307509171f13c6fa9e47627d1f79bd8dde494e4d","modified":1579287936402},{"_id":"source/_posts/2019-11-28-nim-vs-crystal-part-3-cryto-dapps-p2p.md","hash":"3aded116db278f1fd187152731ef786b5ca3b216","modified":1579287936402},{"_id":"source/_posts/2019-12-09-web3-what-are-your-options.md","hash":"52309d265c0c7f970bf33e6c54ca683be9bda152","modified":1580395967138},{"_id":"source/_posts/2020-01-09-take-back-the-web-hackathon.md","hash":"b40dfd06e176be35860fe7679b059773f94c8e63","modified":1579287936418},{"_id":"source/_posts/2020-01-13-announcing-embark-5.md","hash":"86e13a2296e1363a47f19e0dfc356194f7f1bd1b","modified":1579467412653},{"_id":"source/chat/index.md","hash":"f4e76f80e3bcf796e5c06080b745129f389de4b6","modified":1579287603896},{"_id":"source/community/index.md","hash":"abc586bb9afa334aefcc6da5f995be6fced6fced","modified":1579287603896},{"_id":"source/coverage-report.png","hash":"4f2e52ad838258e4e7ee03f2cfd4bdd9be2c4046","modified":1579287603896},{"_id":"source/docs/bamboo.md","hash":"d6dda7ef34b47d759f4cbce3f993ae16d8e9cbd0","modified":1579467413006},{"_id":"source/docs/blockchain_accounts_configuration.md","hash":"2418ac7cdbb8e02d7f3dcbba489de45ad54b4824","modified":1579287603896},{"_id":"source/docs/blockchain_configuration.md","hash":"f6623133b83ee1ab652773b8f2a58e437f5b953a","modified":1579467413007},{"_id":"source/docs/cockpit_dashboard.md","hash":"53e5bc1ffdf3e247d4cc7e97e9f56af96f6e8d56","modified":1579287603896},{"_id":"source/docs/cockpit_deployment.md","hash":"b9c0a1e9bdb4ae6e3ee192d3b8ab90d42a302264","modified":1579287603896},{"_id":"source/docs/cockpit_editor.md","hash":"099d331e041671790bbc212d752d37b832868504","modified":1579287603896},{"_id":"source/docs/cockpit_explorer.md","hash":"b887c079e3442c4e48ea518de30c282186983c45","modified":1579287603896},{"_id":"source/docs/cockpit_introduction.md","hash":"e6c36e3bb3fae88eed1d17860a85ba0366b50009","modified":1579287603896},{"_id":"source/docs/cockpit_utils.md","hash":"9ed2f52f1a0b15fed6fc61e685558e1ed242cd1e","modified":1579287603896},{"_id":"source/docs/configuration.md","hash":"906896808f07737b17f5d8afd3aa713c22952349","modified":1579287603896},{"_id":"source/docs/console_commands.md","hash":"2855fb1b8ee0429e402450ed4d9f38dd2e145cb5","modified":1579287603896},{"_id":"source/docs/contracts_configuration.md","hash":"574ac3d6d2ac48282a8c60ea86d5f2a445426fb1","modified":1579287603896},{"_id":"source/docs/contracts_deployment.md","hash":"87cba365f821abd91399fd773048a02a0c897607","modified":1579287603896},{"_id":"source/docs/contracts_imports.md","hash":"a4d6267182dff8c7dc2a096bbda08bc9c45cbd96","modified":1579287603896},{"_id":"source/docs/contracts_javascript.md","hash":"336454607755a5580e0c36f3d9c60ddcf20318d4","modified":1579287603896},{"_id":"source/docs/contracts_testing.md","hash":"ccaa64628ab2ce6b42013a461a65c07668f4bb5f","modified":1579287603896},{"_id":"source/docs/contributing.md","hash":"5559d38ec006e0e67ee4a56dc657b0d44a08edb0","modified":1579467413009},{"_id":"source/docs/create_project.md","hash":"9650c8422979e82d7c91cb5f308dcd1895c27099","modified":1579467413009},{"_id":"source/docs/creating_plugins.md","hash":"2be705b9646c4041eb7d50a6b1641131f79bd497","modified":1579287603900},{"_id":"source/docs/dashboard.md","hash":"d24645009374a2a4dff4ddbb72bb85ff885d80a2","modified":1579287603900},{"_id":"source/docs/embark_commands.md","hash":"39cd9d4622035b3f2b82dc8fee5eab25cabe82a2","modified":1579287603900},{"_id":"source/docs/environments.md","hash":"c71903c0fd3349b905c8d6c659211fde5c6732e8","modified":1579287603900},{"_id":"source/docs/faq.md","hash":"8154c0047d7de4d63f6337769e7ead2542ffd9aa","modified":1579287603900},{"_id":"source/docs/index.md","hash":"f1870f73da1edb4a5b7a8aacb508e183ea88f7e5","modified":1579287603900},{"_id":"source/docs/installation.md","hash":"df32deb65494ea88439b710c0398d5074a5d2456","modified":1579467413010},{"_id":"source/docs/installing_embarkjs.md","hash":"cf7a19d5f0262f9da14ca33a45a32303c8874694","modified":1579287603900},{"_id":"source/docs/installing_plugins.md","hash":"4575e3c53d3a55d184d10ffb4900b59cf718390e","modified":1579287603900},{"_id":"source/docs/javascript_usage.md","hash":"70a188d16a66e2a1e2b524f04b140bbc3b397367","modified":1579287603900},{"_id":"source/docs/messages_configuration.md","hash":"bb298e851d786cbcb8431bb12bc24f81f9cb3de5","modified":1579287603900},{"_id":"source/docs/messages_javascript.md","hash":"57884a9cc96813469d1c097f08e95e56e62af2aa","modified":1579287603900},{"_id":"source/docs/migrating_from_3.x.md","hash":"707aa9b83492393615b16eb9bde367a0f99f1bf2","modified":1579287603900},{"_id":"source/docs/naming_configuration.md","hash":"a80f6e0dd9f3bb25ead13dc2cb2ab79799f38766","modified":1579287603900},{"_id":"source/docs/naming_javascript.md","hash":"5118e7571f0721579981f68c9ea9c8d127126a08","modified":1579287603900},{"_id":"source/docs/overview.md","hash":"3d4555bb0449f36d7283a9a1b8fdb10c5e1d8d5a","modified":1579467413012},{"_id":"source/docs/pipeline_and_webpack.md","hash":"2d4168eb25766e4558546043538283e87ec916ce","modified":1579287603900},{"_id":"source/docs/plugin_reference.md","hash":"ffc8755b9fee5db7123b120ca0430edb0129bb22","modified":1579287603900},{"_id":"source/docs/quick_start.md","hash":"c7944c6c0344696dc9a47f11a83f98b892ae2f87","modified":1579287603900},{"_id":"source/docs/running_apps.md","hash":"0519272706734c5f9e2184a9680e192e56a2ca47","modified":1579287603900},{"_id":"source/docs/sending_and_receiving_messages.md","hash":"3fe8e66233492f4fb312dcb90cc7ba74ba689ce4","modified":1579287603900},{"_id":"source/docs/smart_contract_objects.md","hash":"7e72a5d62e915d680ad7ed0adbd7c758eafa5a6b","modified":1579287603900},{"_id":"source/docs/solidity.md","hash":"2a8c16ac8c2d049b9d7d91f530b0dddd0f9d73b2","modified":1579287603900},{"_id":"source/docs/storage_configuration.md","hash":"bd275b61fe3b7cc3577f9d30e25d3e7ad7a76795","modified":1579287603900},{"_id":"source/docs/storage_deployment.md","hash":"2f31438f49648a497ffbae160e509bde0c9609ec","modified":1579287603900},{"_id":"source/docs/storage_javascript.md","hash":"f3996b2415cf4a277681f1708b06fe186a54ab2f","modified":1579287603900},{"_id":"source/docs/structure.md","hash":"507a4a506daa32ec5a49fd19f15b6100cf673c13","modified":1579287603900},{"_id":"source/docs/cockpit_debugger.md","hash":"f38a1789e23c0bfad66c116c38aaf6448365adb1","modified":1579287603896},{"_id":"source/docs/troubleshooting.md","hash":"ee789578225703a04e94e6eca209a694e39b02f3","modified":1579467413015},{"_id":"source/docs/using_storages.md","hash":"fcaa4c3846c063bc7f46afdf9f8c780f96125ede","modified":1579287603900},{"_id":"source/docs/using_the_console.md","hash":"1281c1d98732e0f173a865428b06a30da4dc9d76","modified":1579287603900},{"_id":"source/docs/vyper.md","hash":"987e6ad8e86fe7470c4db19a633179aa5b0a2acb","modified":1579287603900},{"_id":"source/docs/web3js.md","hash":"9ad98e255c60ba532b992fae75e903cdff981d60","modified":1579287603900},{"_id":"source/docs/webpack.md","hash":"012cdad1030fb7c45f47d0433ae56c963f635717","modified":1579287603900},{"_id":"source/docs/what_dapp.md","hash":"79502dafd6e70b81e69c6b0aee073f0dac5b1623","modified":1579287603900},{"_id":"source/docs/working_with_name_systems.md","hash":"c972b4ce78f98bb46bf7a245fb811be06d31e4c4","modified":1579287603900},{"_id":"source/news/index.md","hash":"0a8e37f1549e24d127e9b65773ae00826d0b53c6","modified":1579287603900},{"_id":"source/plugins/index.md","hash":"c500bda064f243bfb33b4dffbdf1cb4349bf0bd4","modified":1579287603900},{"_id":"source/templates/index.md","hash":"180f034b05fe0a621c3ccb05f87bf9ab6fde2978","modified":1579287603900},{"_id":"source/tutorials/infura_guide.md","hash":"4e9497c9737522860adc286e126e0f3d1d92cdf0","modified":1579287603904},{"_id":"themes/embark/languages/en.yml","hash":"aa8783506c3f4a09fd4d33bca0bc923fe09f4538","modified":1579287603904},{"_id":"themes/embark/layout/archive.swig","hash":"bbfbbbd37bd047ba20c9b68b036bdbeacbd47482","modified":1579287603904},{"_id":"themes/embark/layout/blog-post.swig","hash":"90595b22104a46c2fc32c25ff484855131df321e","modified":1579287603904},{"_id":"themes/embark/layout/blog.swig","hash":"96bfe880cf8e35c83f66281322ee1d0075161121","modified":1579287603904},{"_id":"themes/embark/layout/community.swig","hash":"feabc52f006a70402a4949c1782a7901a78c4cf3","modified":1579467413027},{"_id":"themes/embark/layout/docs-landing.swig","hash":"9b3cc62579713f7b4211010d66ad17f8f0c99d79","modified":1579287603904},{"_id":"themes/embark/layout/docs.swig","hash":"ca3eeb67eed027298adb8b979be6fda92a18a90c","modified":1579467413027},{"_id":"themes/embark/layout/index.swig","hash":"41aef7f9bffbc8ffe1b3419e596d69169c45692d","modified":1579287603904},{"_id":"themes/embark/layout/layout.swig","hash":"df1f72a8acb309f689760ba9a1ab293c4b1e86b0","modified":1580395967408},{"_id":"themes/embark/layout/page.swig","hash":"21801a7f37e340e45a30bfa5ccf122182d2adc5d","modified":1579287603904},{"_id":"themes/embark/layout/plugins.swig","hash":"b848b10690be2a83276026797e1c333a00596f0b","modified":1579287603904},{"_id":"themes/embark/scripts/checklist.js","hash":"9bb1f40b63fc1673655dac1b3205d5e597833536","modified":1579287603904},{"_id":"themes/embark/scripts/code.js","hash":"1ab08ac667d6ba3442305d6f117a5faa3032055d","modified":1579287603904},{"_id":"themes/embark/scripts/docs_paginator.js","hash":"38632311c2623fee67afc0cee307a17125871743","modified":1579287603904},{"_id":"themes/embark/scripts/is_quickstart.js","hash":"24bdbf644884697d7182c558d45b3fa18113176c","modified":1579287603904},{"_id":"themes/embark/scripts/notification.js","hash":"6dbbccb55c1940dac32140001b1afb19e59af819","modified":1579287603904},{"_id":"themes/embark/scripts/toc.js","hash":"0150d62da68310989db7c9cb74711f1031a7e62c","modified":1579287603904},{"_id":"source/plugins/thumbnails/bamboo.png","hash":"b7c9f4d84aa7d6642e4a822a7b66042ab2d33710","modified":1579287603900},{"_id":"source/plugins/thumbnails/fortune.jpg","hash":"f041a2bc22e374dd833e4b56066e7d3bf20d49f6","modified":1579287603900},{"_id":"source/plugins/thumbnails/haml.png","hash":"19c468e7d07eed1ddadc38818b8f9c350ebf8511","modified":1579287603900},{"_id":"source/plugins/thumbnails/pug.png","hash":"774bb436243175c41b9e4c51558a02e2262a7e47","modified":1579287603900},{"_id":"source/plugins/thumbnails/remix copy.png","hash":"0654c1ca096d7336391d50ffc27c64aa30a37b85","modified":1579287603900},{"_id":"source/plugins/thumbnails/remix.png","hash":"c288a89299382837bde8ce248b2d1265dff49083","modified":1579287603900},{"_id":"source/plugins/thumbnails/solidity.png","hash":"860e6c14fe1fc7799de218b11dbdda5cb73123d3","modified":1579287603900},{"_id":"source/plugins/thumbnails/solium.png","hash":"a8e525113fb9dff400e71b9762f537f82cfdb7ac","modified":1579287603900},{"_id":"source/plugins/thumbnails/status.png","hash":"452ce074cb13ffa9be473c7001c675b6b35f3780","modified":1579287603900},{"_id":"source/templates/thumbnails/angular.png","hash":"e50350df2526f0abf0a8d2e808085c24f2273662","modified":1579287603900},{"_id":"source/templates/thumbnails/bamboo.png","hash":"b7c9f4d84aa7d6642e4a822a7b66042ab2d33710","modified":1579287603900},{"_id":"source/templates/thumbnails/react.png","hash":"a6d33dab3a85a4d7004246e39a704869a6319306","modified":1579287603904},{"_id":"source/templates/thumbnails/sggc.png","hash":"f2742e7865280a840ccb8de8a466e7571947ec9a","modified":1579287603904},{"_id":"source/templates/thumbnails/typescript.png","hash":"bc3c71f25fc966f00c23df3222cde74c6e70c06d","modified":1579287603904},{"_id":"source/templates/thumbnails/vortex.png","hash":"ca5675313297535b416158e7a6b775bbe59f3a56","modified":1579287603904},{"_id":"source/templates/thumbnails/vuejs.png","hash":"85cb9bd3cf15f02dc2b44fbc9dffc2737c6a985b","modified":1579287603904},{"_id":"source/templates/thumbnails/vyper.png","hash":"ecbc1f9ce334685b0a1d9ec6da3ad98a69758f6e","modified":1579287603904},{"_id":"source/tutorials/infura_guide/api-keys.png","hash":"9ef67096142c2cd4dff7e391f2664e335d347517","modified":1579287603904},{"_id":"source/tutorials/infura_guide/lift-off.jpg","hash":"90d8d7604930e30d01aff8c1513412a75e8f4a58","modified":1579287603904},{"_id":"themes/embark/layout/partial/checklist.swig","hash":"a038b0b62e56710637ab3c67d180a27c08e5d18b","modified":1579287603904},{"_id":"themes/embark/layout/partial/checklist_item.swig","hash":"215f6e6f1d7e280990e86abdd56a98cc3c68a95a","modified":1579287603904},{"_id":"themes/embark/layout/partial/code.swig","hash":"7e2fba9a0ef75f26e19c5542ab61d5a951eeb2f5","modified":1579287603904},{"_id":"themes/embark/layout/partial/contributor-box.swig","hash":"5efb1e4b5584b26d37281c11282580ca46e9d879","modified":1579287603904},{"_id":"themes/embark/layout/partial/coverbox.swig","hash":"4346c1cec4aa2ac3455553266b9fc79a1f892c8f","modified":1579287603904},{"_id":"themes/embark/layout/partial/event-box.swig","hash":"b9cf7362d527eba61484ab709c01e4a612237e73","modified":1579287603904},{"_id":"themes/embark/layout/partial/footer.swig","hash":"0b0078e1db5f15f98ccc929121f32eb383f3f821","modified":1579467413030},{"_id":"themes/embark/layout/partial/head.swig","hash":"18fa0064c87fa85d6f12289204a76dbb2e12fa50","modified":1579287603904},{"_id":"themes/embark/layout/partial/header-blog.swig","hash":"2bb97428887b5a9f4d72c0393063ab9550d47a96","modified":1580234110678},{"_id":"themes/embark/layout/partial/header.swig","hash":"c007d93180cde8587c0d1412ea8c31545cabaa9d","modified":1580234110679},{"_id":"themes/embark/layout/partial/heading.swig","hash":"3a3a0760c31be524ba0208ed24cb0894481a2597","modified":1579287603904},{"_id":"themes/embark/layout/partial/notification.swig","hash":"bb1fdae3eb87feb344571a3d8636ea7daf166cd6","modified":1579287603904},{"_id":"themes/embark/layout/partial/paginator.swig","hash":"6f862b18625d7c824fbc32a6228e34686acf4fc7","modified":1579287603904},{"_id":"themes/embark/layout/partial/spotbox.swig","hash":"6f321dab798da2ca02623fa6dcc54cce7a30d13d","modified":1579287603904},{"_id":"themes/embark/layout/partial/universebox.swig","hash":"66bb32ae4f6821b449ddff58a790fc918cb21b29","modified":1579287603904},{"_id":"themes/embark/layout/partial/whisperbox-alternative.swig","hash":"7cb78c69cb4b058de3de13ef5485258f0e1f63fd","modified":1579287603904},{"_id":"themes/embark/layout/partial/whisperbox.swig","hash":"3c6e94cc8774d72cfb30218003f4a266772d238d","modified":1579287603904},{"_id":"themes/embark/source/css/_shame.scss","hash":"3558db6b81dd7b76e71c49d3260edddd57fa8dc7","modified":1579287603916},{"_id":"themes/embark/source/css/embark.scss","hash":"7ffcd12e49bffde3b86a34e8c4f6dff463741717","modified":1579287603916},{"_id":"themes/embark/source/js/index.js","hash":"cb46b90689c0ac59988a81d4d231ae2d4b9d3806","modified":1579287603916},{"_id":"source/assets/images/cockpit_debugger_controls.png","hash":"ba68f8b39e0d745e39a26d0bd8c9c3bfea5ad8c5","modified":1579287603664},{"_id":"source/assets/images/crystal-thread-test.png","hash":"4e8aa7ac613a332960de0117141ed1e33b14d9f1","modified":1579287603792},{"_id":"source/plugins/thumbnails/mythx.png","hash":"7d1972d98ddd2bc13afbb0049d45f157d8cdf675","modified":1579287603900},{"_id":"source/assets/images/token_factory_1/page_1.png","hash":"6babcba0bca8fc8a48a0eed7045396f9c3fb55af","modified":1579287603876},{"_id":"source/assets/images/token_factory_1/page_2.png","hash":"4fa5a22eb63587f424a2742e7f14f39e6e6e4c9d","modified":1579287603880},{"_id":"source/assets/images/token_factory_1/page_3.png","hash":"08a8a87009da0594ac5c763e269082ed489c9b31","modified":1579287603880},{"_id":"source/assets/images/token_factory_1/page_4.png","hash":"78a3cbea0a3a686847fa7024a634bc28b38e7c08","modified":1579287603880},{"_id":"source/assets/images/token_factory_1/page_5.png","hash":"1938ae333249ead32842d39f36dc7d7742e97a95","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_1.png","hash":"d0c1bdc7478dcc4878239b2924107df50608d97a","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_2.png","hash":"238f769f8834d36a088f6352d5e8b056d339fa7d","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_3.png","hash":"8eca458e6e78457f268142f45542c2a919ab07af","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_4.png","hash":"92dd82374e8ccd6f258481fc69ebdc2aa16c0532","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_5.png","hash":"ea35b940330be24051ac278a8ad6d239a93c3fd5","modified":1579287603884},{"_id":"source/assets/images/token_factory_2/page_6.png","hash":"b672160f850fcd590050dfbc268ec03c1027072f","modified":1579287603884},{"_id":"source/assets/images/token_factory_2/page_7.png","hash":"da58b3365e3b6841ffdcfbf6c5b8a6152daa9a49","modified":1579287603884},{"_id":"themes/embark/source/assets/icons/app-window-search-text.svg","hash":"a7658278c51714beb9a4aa378074b0f1a2a3811a","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-down-1.svg","hash":"cf919e204adc66907e541c5a32a6cdb8bd86e9d7","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-left-1.svg","hash":"6a5b3fe7927e03320be668170011aba2d461d1af","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-right-1.svg","hash":"5948e9eda884b948d0c668ae51f99509d2cfa631","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-up-1.svg","hash":"e4e31a2af62c2838e1871dfd72203b9a94ae8ae9","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/browser-gauge.svg","hash":"4ab8c84f8c5cc2ece1a2847ef8d9f2c9b842609f","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/check.svg","hash":"94cb2741b66a54d22bbacdf65c5bbf1f4de59c4a","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/close.svg","hash":"07c332a892c2b2a107bf53a055425064006b7161","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/computer-bug-search.svg","hash":"720717cc34ce43565de8ab4a360603c2c55092a7","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/copy-paste.svg","hash":"6a11ff19bd04cf7774d7155a535eb68be3dbb592","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/crypto-currency-bitcoin-circle.svg","hash":"6feceaadc9ee12a3e457d94a3d548a3d82213b92","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/github.svg","hash":"6b9fba84ce16f0f8278ca4eb00ced1c5b13109f4","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/list-to-do.svg","hash":"6954c1ea40469c5548ff8c3daba91ea3e883dab4","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/module.svg","hash":"cf1284f20a532fc451ba6cd443ff1534e63b6779","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/navigation-menu.svg","hash":"d6b4d9e2da8849ac362bcb8d634725b921ebf46c","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/notes-paper-text.svg","hash":"fc8a3304cfc24437597a565290c6b1095fa365f7","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/paginate-filter-video-alternate.svg","hash":"a2953dbbdcd49ce07a7aa90be9803d5e44a77688","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/pen-write-paper.svg","hash":"a2828e87d8ea6f6d965a1aae8ab450c3bba19564","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/pie-line-graph.svg","hash":"d8a9dad5f7377b12b3130d964f7fe3d03de80d1a","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/rating-star.svg","hash":"961c6f9cf48e662267cdfb609e89f3234e1c84c0","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/search-bar.svg","hash":"6e3dfc910fda432935eaf7a6170bf1f6be8c7a21","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/symbols.html","hash":"d13ca80e28788a3fffb404dd5dff6225139b38a9","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/symbols.svg","hash":"d34c6846fa16190a9e264d9f1cbf40e12ae8f410","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/tag-new-circle.svg","hash":"3a155bcde805c6101d431c08a093a5ffed37dfeb","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/twitter.svg","hash":"90e4959062ea5bc14eb10f182c1c9859dcc0b168","modified":1579287603904},{"_id":"themes/embark/source/assets/images/Nimbus.svg","hash":"f0ea3f6a1804fc951901bdf3c3ec84ebcbcfb1b3","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-120x120-precomposed.png","hash":"2b599bbb36131a537d0a2db417eefd8cb2a348f7","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-152x152-precomposed.png","hash":"8f2800d891c5e1374cef4f3fcd26575f46748e5c","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-180x180-precomposed.png","hash":"451e3cfad6ebe9dad9eb35af1d7c113b2f76f143","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-60x60-precomposed.png","hash":"aa89e00d7671bfa8add7afc2ee25e84cf93319b3","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-76x76-precomposed.png","hash":"99cd68afb86ecab681c217b0eeffed8163f228e6","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-precomposed.png","hash":"451e3cfad6ebe9dad9eb35af1d7c113b2f76f143","modified":1579287603912},{"_id":"themes/embark/source/assets/images/company-flexdapps.svg","hash":"ae7686cb0c918a69b497774fba8829cb3df89858","modified":1579287603916},{"_id":"themes/embark/source/assets/images/company-giveth.svg","hash":"8d611a8a4c94e2bb13da7661195cb44d3ee163f4","modified":1579287603916},{"_id":"themes/embark/source/assets/images/company-status.svg","hash":"5729e8db16b262cb6c3ca91113500b1895f24768","modified":1579287603916},{"_id":"themes/embark/source/assets/images/dots.png","hash":"2f22dcbbe2b643819e263bc292732d0875e9f24e","modified":1579287603916},{"_id":"themes/embark/source/assets/images/favicon-16.png","hash":"db9d7be08c2096635e4acd9f00fb56c04aafa7a5","modified":1579287603916},{"_id":"themes/embark/source/assets/images/favicon-32.png","hash":"b841b7f468325cab45486b1a25343e0f0654ef0d","modified":1579287603916},{"_id":"themes/embark/source/assets/images/keycard-logo-negative.svg","hash":"b93278634ae78c759a0439a7d8c275889ae90e8f","modified":1579287603916},{"_id":"themes/embark/source/assets/images/logo-negative.svg","hash":"2eb5bdd4eb9aac594e7fcbb7ff0fb7456d6c1fd1","modified":1579287603916},{"_id":"themes/embark/source/assets/images/logo.svg","hash":"0bc239291c9f4732df92ed67b5f80d7392d9920a","modified":1579287603916},{"_id":"themes/embark/source/assets/images/rocket-start.svg","hash":"1c2121ac58f2ea3916de10a4667518b653ce83a7","modified":1579287603916},{"_id":"themes/embark/source/assets/images/status-logo.svg","hash":"80e9ac5ea6f37880927c680f66d41f2acd751873","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color-brand.scss","hash":"1fb90cf4cd3da1241355f85a5185e0aa31dc5263","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color-layout.scss","hash":"4ec42cab6f2b425240cb7254bdb7c81d13dc7198","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color-semantic.scss","hash":"434b52490937e1471d95a143b70381a2f4bb619c","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color.scss","hash":"c9ff601899d050f74893a8eb7d5d2df42cb5a217","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-inset.scss","hash":"6fe46f2345b2420307f4d67eff32036055795272","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-squish.scss","hash":"940d65a07b14673ffd3da63a75937c3125981e91","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-stack.scss","hash":"a8a2c86786d30bfd8bd2c8d3ac180ea7003cc725","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-stretch-inset.scss","hash":"eecce95964b8897de6054fb5fc5eab3a676094b6","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.border.scss","hash":"b15fd59a3abba1a570659792270550c6f3cbeb88","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-brand.scss","hash":"bf20393b0cce0cf2847cc897fa559fce66d42d2b","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-layout.scss","hash":"a8b5170ae33e09a75f6f845a4873ca63f408adb0","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-palette.scss","hash":"903b152e109e80753a4051b1d19ba0726d19da8b","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.forms.scss","hash":"b1dde72a9cdba6355472369155b38dea4f1bef77","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.indecies.scss","hash":"3c394d06e65163811e8d884286235d202d0f3403","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-semantic.scss","hash":"262bcab015c3f323b375e6dee538a212a60426ad","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.layout.scss","hash":"3e67200fb9444187aab60a1282549b0075437877","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.links.scss","hash":"65637c528bfd48c7b023fc94e28358fc58c0a8f6","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.misc.scss","hash":"e7bf80f32564301cc1e41ccfdba1ee1749ae525c","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.spacing.scss","hash":"8cf54f8146fad87f59d45ec053df7f1ff8345cbe","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.typography.scss","hash":"3e3b83e8fe1d28c9ad156fa33555ae8674c746cc","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.border.scss","hash":"a9b21ea9d1cf2bf5877c1c9c50c4fe4996b69ff0","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.box-shadow.scss","hash":"ec0081d8b10eeb945eebf744742ea6417c384b8c","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.breakpoint.scss","hash":"7b261864e28b0ec16781bc24065450caf2b70abe","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.clearfix.scss","hash":"266582ce0ffe5eb0622868370dc9ac8e6acea737","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.column.scss","hash":"c588b90cb648c979a391658ed337e00daecdb271","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.list-reset.scss","hash":"406d4d60d370decc9d7f3d5a8eb3308bb8fae6c8","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.overlay.scss","hash":"b1cf5a920ba83db93aa649f2ddf98ef858bb1bce","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.placeholder.scss","hash":"baf73d8af13039931a6f0b8b22279c3f1bfdf267","modified":1579287603916},{"_id":"themes/embark/source/css/02-generic/_generic.box-sizing.scss","hash":"26b7b6efad6435f49a808080ca987f123bf2ab8e","modified":1579287603916},{"_id":"themes/embark/source/css/02-generic/_generic.reset.scss","hash":"8a50750b05184887d7290f2360ce72a94e84ca64","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.buttons.scss","hash":"4842d392957b128f686eea568d896efb45f9f834","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.forms.scss","hash":"f45be318ebb22533e8e266b2eebe43ddb0937bf4","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.headings.scss","hash":"de758429ddb890d33564356af3ca61debc2ef155","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.images.scss","hash":"0a52090c19650caf47b7f848b28786e8eddb89d5","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.links.scss","hash":"f2e98137d2d3ca5092c73f70cc4e28ad393b039f","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.lists.scss","hash":"a388a10af8a7ca3f0b6ec74fe0efdb9e2296aacb","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.tables.scss","hash":"81d33b10eecfb74e8ddbeb150c8f497dbfcff11f","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.typography.scss","hash":"44d0622de4f290e6d2c8ed34cfd750e056bf6711","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.buttonbar.scss","hash":"8f6bc88ec9125075b147f1477b439e6e9413b42b","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.distances.scss","hash":"c21f0844a596e8410fb594c0d97eb2e12b22f8f4","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.footer.scss","hash":"366eafaf766cd95a5b195b914cee0c4d227b104d","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.grid.scss","hash":"da7c0ebf630f220f858044f4edceadea9abbfd12","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.guided-content.scss","hash":"3a6d8159ce5c47e2a72d00184aa28719285303e3","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.head-up.scss","hash":"b50eaa3fab38d2e9f1230a12f8542917cdc172e5","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.header.scss","hash":"471289d74d223952cb5eab924854aa79df0622e6","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.heading.scss","hash":"7579f117e65d258c46aaa437f07f9f092b2db596","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.list-bare.scss","hash":"767f64a9bd40b16cf72efefe731fecebc2565fa8","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.list-inline.scss","hash":"1b36ae3bb253a87edb4db15f9b875e10ba146906","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.media.scss","hash":"332888a05a775f5b7f550f2d58c9ff329cfaaef1","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.overlap.scss","hash":"4a0ae3a2032bc450d3d4693d92b49965ecbc6620","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.standard-page.scss","hash":"ab662003b9c21f5da3fdde6f66d70e8aa82dd8d8","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.avatars.scss","hash":"c2dbff38e210486f01e9fcd8703329f773129545","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.boxes.scss","hash":"5d3fcd7009b24671f56fbb3c6c1884157b056a3e","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.button.scss","hash":"c43f5627dd9a80e64f024b9f484d9a7a833febc8","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.checklist.scss","hash":"29f16754036ca4fcec731597a416c98787a744d2","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.guide.scss","hash":"cdafd26c3ee6c739f9bbfce0125645a0b7b3bd0a","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.headings.scss","hash":"5f583822f762f99d00187935d933770972294413","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.highlight.scss","hash":"69476a68de00e2e290fa84fffdec9b99f7459acf","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.icons.scss","hash":"4ddbc047a971df8f6878e173bdbc79db8d67f8d4","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.links.scss","hash":"59ad321a05677c8716fbace182288551ea04530b","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.logos.scss","hash":"afa93ec0d91281c5bb3e4b0f3685b65217a07514","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.meta.scss","hash":"e0edb9b8a27121f70302608a4ae3ef51d7a809c1","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.navigations.scss","hash":"2a03188aac7dc518f519139ec44566bcebf6c51e","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.notifications.scss","hash":"c43dcef42e77778a863ebf39835814b363703ba7","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.tags.scss","hash":"0296364650db159da3659e9c8659d1ba46d3f455","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.links.scss","hash":"0876483cf965935ddf3264de0cc947a9b5240093","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.list-reset.scss","hash":"621869acabfcf504dad7983ef7770919d9aa39e4","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.text.scss","hash":"451861b375641c6efbfa22e1e0b398feed1aa7b8","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.visibility.scss","hash":"83eff52a70c64c2c2c6da20765ad9f2c94bca71f","modified":1579287603916},{"_id":"themes/embark/source/js/linkjuice/.babelrc","hash":"7224f35c4916aa40abdd0f9597b7997015d83533","modified":1579287603916},{"_id":"themes/embark/source/js/linkjuice/.editorconfig","hash":"62e8da92cc4bedb619b57f573fe8b931cce190a6","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/.gitignore","hash":"3f33fc2aefbc0b8c9650ad620d14aa5e3c8e4604","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/.jshintrc","hash":"1725359358cfcb1a42b09c8441cea8322803a2a2","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/README.md","hash":"f15e54a42ccce6a7830526e4c70504c0d604daaa","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/gulpfile.js","hash":"c160dfead280a588086115a45a895549b99ed458","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/package.json","hash":"28edd71a4c5ef266af83c60d68a85883755c1a3e","modified":1579287603920},{"_id":"source/assets/images/cockpit_dashboard_release.png","hash":"096b0b893f3d467919edd968ce827985e1f233f0","modified":1579287603664},{"_id":"source/assets/images/cockpit_editor_release.png","hash":"c912dcedf5db89e08e491d1b49f7b07795bdcf21","modified":1579287603680},{"_id":"source/assets/images/nimble-creating-app.png","hash":"30bdcea82d2a7e7b063dfeca277438ae9a9a44f4","modified":1579287603808},{"_id":"themes/embark/source/assets/images/bg-hexagons.png","hash":"d2a3d73d939c8d6a34f04741231739d25d81c1a8","modified":1579287603912},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-inline.scss","hash":"fc62e3c3e377d2db64a809986900e99e79fd10ba","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-index.scss","hash":"2f2f39faafa8d4b216be83c6fd4b25a030e39fc8","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-font-size.scss","hash":"006929f9ec36f9253467851dce1b3de5479c6b9e","modified":1579287603916},{"_id":"source/assets/images/cockpit_contracts_view.gif","hash":"999f406795198c3d8651e61d7e0b251f7320d98c","modified":1579287603632},{"_id":"source/assets/images/cockpit_selective_deployment.gif","hash":"1d9e6e6a5d1c98da71e316c7cfb4ac7aff6c5708","modified":1579287603768},{"_id":"source/assets/images/nim-crystal-header_blank.jpg","hash":"9da5d1642a4ad2ba3af71504589a5ced42a4ab8f","modified":1579287603808},{"_id":"source/assets/images/token_factory_1/console_2.png","hash":"82a4f8163e92edc66a14726a97e6f3d586fc5ec9","modified":1579287603808},{"_id":"themes/embark/source/assets/images/tool-screenshot.png","hash":"9cfaabed43e1453cdf1edb60238f2aeaa3b7ad07","modified":1579287603916},{"_id":"themes/embark/source/js/linkjuice/src/linkjuice.js","hash":"c9145e827c4a9c35575911407b9a7e65c48ae858","modified":1579287603920},{"_id":"source/assets/images/nim-crystal-header-img_NEW.jpg","hash":"f0716491dd88db1d137c915879e66694844ea334","modified":1579287603804},{"_id":"source/assets/images/token_factory_2/console_2.png","hash":"4efdab7b54dacafc83854b6dc7d73addf9fe8ade","modified":1579287603880},{"_id":"source/assets/images/cockpit_dashboard.png","hash":"aa995f3517e692402819dc004010c9f45960a7a5","modified":1579287603636},{"_id":"source/assets/images/cockpit_dashboard_dark.png","hash":"69148b6547065adcd5583118286f74aff9a29889","modified":1579287603660},{"_id":"source/assets/images/token_factory_1/console_1.png","hash":"fd0c379505c036ad151b01a5a28b610df190d3d6","modified":1579287603808},{"_id":"source/assets/images/cockpit_explorer_block.png","hash":"e9f398fc9eacf99b3e64997c3724ec541875e144","modified":1579287603724},{"_id":"source/assets/images/token_factory_2/console_1.png","hash":"9d35e99618f0ff90911672eaf7765a48ab84f94e","modified":1579287603880},{"_id":"themes/embark/source/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","hash":"9d767c14d82980b184cb6d9a1746f986c21cec8e","modified":1579287603908},{"_id":"themes/embark/source/assets/images/cli-tool.png","hash":"21fa930acb0a5259f9f35b37d14bc4b11fd9120d","modified":1579287603916},{"_id":"source/assets/images/cockpit_explorer_overview.png","hash":"86a94110f1ae3fe956a5efb1b165902c63fa35d8","modified":1579287603736},{"_id":"themes/embark/source/assets/images/EMBARK_MODULAR.png","hash":"38677401713a7583c44d97e59eb5bcc3c8fb8386","modified":1579287603912},{"_id":"source/assets/images/cockpit_explorer_contracts_detail.gif","hash":"2464c474ba42193ca58df7288c2afc81608657c0","modified":1579287603732},{"_id":"themes/embark/source/assets/images/EMBARK_FRAMEWORK.png","hash":"6113f59cb45baf50f78c13684f366b3b2ba11239","modified":1579287603908},{"_id":"source/assets/images/embark-dashboard.png","hash":"fbfa1764086f3c436172bc8c812452a99c8d8f79","modified":1579287603800},{"_id":"source/assets/images/website_release.png","hash":"4625f3ee3f58fae5d2c2dc7b10fc8d2547c6a448","modified":1579287603896},{"_id":"source/assets/images/cockpit_explorer_transactions.gif","hash":"fd74abafca81d5a2986f57d72147b228b06f075d","modified":1579287603744},{"_id":"source/assets/images/cockpit_suggestions.gif","hash":"2e004a561dda70e22effa1af96315bb9d2314758","modified":1579287603784},{"_id":"source/assets/images/cockpit_using_debugger.gif","hash":"72acc4d2ab4f9b342749519b69455e30fd4e24c0","modified":1579287603792},{"_id":"source/assets/images/cockpit_search.gif","hash":"c797eb599b822ca56f57cfa882967f23b27d62f9","modified":1579287603768},{"_id":"source/assets/images/cockpit_explorer_account.gif","hash":"a9c557a12ff36090c6a41c265bbd8eb9285de657","modified":1579287603716},{"_id":"source/assets/images/cockpit_editor.gif","hash":"3ce64fcf60098d6954d4a021ef4d2f2c20e1dc46","modified":1579287603676},{"_id":"source/assets/images/cockpit_enter_debugger.gif","hash":"f3374c1898aba97acb7d53779d4e8fc9643d2dff","modified":1579287603696},{"_id":"source/assets/images/cockpit_navigation.gif","hash":"7ed00581b8752de847a7e7e2d2c6e47bc961614a","modified":1579287603756},{"_id":"source/assets/images/cockpit_change_theme.gif","hash":"fe6c1c931e3db5c069a158bf7da7fd732d0f39bc","modified":1579287603632},{"_id":"source/assets/images/cockpit_dashboard_contracts.gif","hash":"1792d363902a2ec8f26f7596bffc4431461f2fee","modified":1579287603660},{"_id":"source/assets/images/token_factory_1/dashboard.png","hash":"bfb37f6fe22c28ac3cfa10b100e2db47acf5f6ca","modified":1579287603876},{"_id":"source/.DS_Store","hash":"388ff7bec88d20496fcfb7869ca9aefb6d504b1b","modified":1580238088484},{"_id":"source/_posts/2020-01-27-web-app-security-frontend-to-backend.md","hash":"d69fe3a5216e37c06390e3f1b0ee141cb288047b","modified":1580237771508},{"_id":"source/_posts/2020-01-28-embark-5-1.md","hash":"d4aad91d8ffac95ef4637f7965107469888f6e04","modified":1580234109597},{"_id":"source/assets/.DS_Store","hash":"663ccef78538c09fc70cf73b359272828aef3132","modified":1580237849355},{"_id":"source/assets/images/web3-js-diagram.png","hash":"5cc26458f47462ce25a80abca52a4cc2e90de9e4","modified":1578640785567},{"_id":"source/assets/images/embark-header_blank.jpg","hash":"9da5d1642a4ad2ba3af71504589a5ced42a4ab8f","modified":1580234110379},{"_id":"source/assets/images/web3-article-header.png","hash":"48e3fc72598773913bbfbde2f13c3feca8008578","modified":1578640785563},{"_id":"source/_posts/2020-01-30-dapp-frontend-security.md","hash":"79159d525961c5fc9601e47e11fcccfcc7fb7314","modified":1580395967141},{"_id":"source/_posts/2020-01-29-subspace-1-2.md","hash":"755e9286ca8c69e06ffca1f21b18aaf874fe4cea","modified":1580395967140}],"Category":[{"name":"announcements","_id":"ck5ijm3qp00057heg5kpz32j7"},{"name":"tutorials","_id":"ck5ijm3r7000n7heg18or2163"},{"name":"releases","parent":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5y92ljz0001zf0ebip59hx1"}],"Data":[{"_id":"authors","data":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}}},{"_id":"categories","data":{"tutorials":"Tutorials","announcements":"Announcements"}},{"_id":"languages","data":{"en":"English"}},{"_id":"plugins","data":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}]},{"_id":"menu","data":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"}},{"_id":"sidebar","data":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}}},{"_id":"templates","data":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}]},{"_id":"tutorials","data":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}]},{"_id":"versions","data":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}],"Page":[{"title":"blog.header.title","tagline":"blog.header.tagline","layout":"blog","_content":"","source":"index.md","raw":"title: blog.header.title\ntagline: blog.header.tagline\nlayout: blog\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"index.html","comments":1,"_id":"ck5ijm3ml00007heg4oeo64fj","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Chat","layout":"chat","_content":"\n<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n","source":"chat/index.md","raw":"title: Chat\nlayout: chat\n---\n\n<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"chat/index.html","comments":1,"_id":"ck5ijm3qm00027hegfm15h31m","content":"<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n"},{"title":"community_page.header.title","tagline":"community_page.header.tagline","link":{"text":"community_page.header.link","href":"https://gitter.im/embark-framework/Lobby"},"layout":"community","_content":"","source":"community/index.md","raw":"title: community_page.header.title\ntagline: community_page.header.tagline\nlink:\n  text: community_page.header.link\n  href: https://gitter.im/embark-framework/Lobby\nlayout: community\n---\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"community/index.html","comments":1,"_id":"ck5ijm3qo00047heg1ev79kfc","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Bamboo Documentation","_content":"\nThe documentation for Bamboo can be found [here](https://github.com/pirapira/bamboo)\n\nTo use Bamboo with Embark you will need to first install the [embark-bamboo](https://github.com/embarklabs/embark-bamboo) plugin\n\n","source":"docs/bamboo.md","raw":"title: Bamboo Documentation\n---\n\nThe documentation for Bamboo can be found [here](https://github.com/pirapira/bamboo)\n\nTo use Bamboo with Embark you will need to first install the [embark-bamboo](https://github.com/embarklabs/embark-bamboo) plugin\n\n","date":"2020-01-19T20:56:53.006Z","updated":"2020-01-19T20:56:53.006Z","path":"docs/bamboo.html","_id":"ck5ijm3qs00077heg6vu1ep31","comments":1,"layout":"page","content":"<p>The documentation for Bamboo can be found <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<p>To use Bamboo with Embark you will need to first install the <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">embark-bamboo</a> plugin</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The documentation for Bamboo can be found <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<p>To use Bamboo with Embark you will need to first install the <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">embark-bamboo</a> plugin</p>\n"},{"title":"Accounts Blockchain configuration","layout":"docs","_content":"\nIn our [guide on configuring a blockchain client](/docs/blockchain_configuration.html), we've configured accounts in several places.\n\nThis parameter let's us customize what the `accounts` will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.\n\n## Accounts parameters\n\n```\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n```\n\nThe `accounts` configuration is an array of objects, where each object represents one or more account.\n\nEmbark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.\n\n{% notification danger 'Using production keys' %}\nBe careful when using production keys and mnemonics (ie the account where you have real money).\n\nWe recommend using [environment variables](https://www.schrodinger.com/kb/1842) for plain text values like `privateKey` and `mnemonic` and to put the files for `privateKeyFile` and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)\n{% endnotification %}\n\n### Parameter descriptions\n\n- **nodeAccounts**: The actual node accounts, that get created and unlocked by the client\n  - Can be enabled by setting it to `true`\n  - **numAddresses**: Number of addresses you want from the node. Defaults to `1`\n  - **password**: Password file where the password to create and unlock the accounts is. This is required\n- **privateKey**: Private key string\n- **privateKeyFile**: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to `random` to generate a random account (useful when testing)\n  - **password**: Password string for the keystore\n- **mnemonic**: 12 word mnemonic\n  - **addressIndex**: Index where to start getting the addresses. Defaults to `0`\n  - **numAddresses**: Number of addresses to get. Defaults to `1`\n  - **hdpath**: HD derivation path. Defaults to `\"m/44'/60'/0'/0/\"`\n\n{% notification info 'Accounts order' %}\nThe order in the accounts array is important. This means that using `nodeAccounts` first, as above, will set the node's account as the `defaultAccount` for deployment.\n{% endnotification %}\n\n### Configuring account balance for development\n\nWhen in development, we can specify the balance of each account using the `balance` option:\n\n```\nmodule.exports = {\n  development: {\n      deployment: {\n        accounts: [\n          {\n            mnemonic: \"12 word mnemonic\",\n            balance: \"5 ether\"\n          }\n        ]\n      }\n  }\n}\n```\n\nBalances can be specified using [human readable units](/docs/contracts_configuration.html#Human-readable-Ether-units) such as \"5 ether\" or \"200 finney\". If no unit is specified the value will be in Wei.\n","source":"docs/blockchain_accounts_configuration.md","raw":"title: Accounts Blockchain configuration\nlayout: docs\n---\n\nIn our [guide on configuring a blockchain client](/docs/blockchain_configuration.html), we've configured accounts in several places.\n\nThis parameter let's us customize what the `accounts` will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.\n\n## Accounts parameters\n\n```\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n```\n\nThe `accounts` configuration is an array of objects, where each object represents one or more account.\n\nEmbark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.\n\n{% notification danger 'Using production keys' %}\nBe careful when using production keys and mnemonics (ie the account where you have real money).\n\nWe recommend using [environment variables](https://www.schrodinger.com/kb/1842) for plain text values like `privateKey` and `mnemonic` and to put the files for `privateKeyFile` and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)\n{% endnotification %}\n\n### Parameter descriptions\n\n- **nodeAccounts**: The actual node accounts, that get created and unlocked by the client\n  - Can be enabled by setting it to `true`\n  - **numAddresses**: Number of addresses you want from the node. Defaults to `1`\n  - **password**: Password file where the password to create and unlock the accounts is. This is required\n- **privateKey**: Private key string\n- **privateKeyFile**: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to `random` to generate a random account (useful when testing)\n  - **password**: Password string for the keystore\n- **mnemonic**: 12 word mnemonic\n  - **addressIndex**: Index where to start getting the addresses. Defaults to `0`\n  - **numAddresses**: Number of addresses to get. Defaults to `1`\n  - **hdpath**: HD derivation path. Defaults to `\"m/44'/60'/0'/0/\"`\n\n{% notification info 'Accounts order' %}\nThe order in the accounts array is important. This means that using `nodeAccounts` first, as above, will set the node's account as the `defaultAccount` for deployment.\n{% endnotification %}\n\n### Configuring account balance for development\n\nWhen in development, we can specify the balance of each account using the `balance` option:\n\n```\nmodule.exports = {\n  development: {\n      deployment: {\n        accounts: [\n          {\n            mnemonic: \"12 word mnemonic\",\n            balance: \"5 ether\"\n          }\n        ]\n      }\n  }\n}\n```\n\nBalances can be specified using [human readable units](/docs/contracts_configuration.html#Human-readable-Ether-units) such as \"5 ether\" or \"200 finney\". If no unit is specified the value will be in Wei.\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/blockchain_accounts_configuration.html","comments":1,"_id":"ck5ijm3qu00097hegey92ab6f","content":"<p>In our <a href=\"/docs/blockchain_configuration.html\">guide on configuring a blockchain client</a>, we’ve configured accounts in several places.</p>\n<p>This parameter let’s us customize what the <code>accounts</code> will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.</p>\n<h2 id=\"Accounts-parameters\"><a href=\"#Accounts-parameters\" class=\"headerlink\" title=\"Accounts parameters\"></a>Accounts parameters</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: true,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    password: &quot;config&#x2F;development&#x2F;devpassword&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: &quot;path&#x2F;to&#x2F;file&quot;,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: &quot;0&quot;,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    hdpath: &quot;m&#x2F;44&#39;&#x2F;60&#39;&#x2F;0&#39;&#x2F;0&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>accounts</code> configuration is an array of objects, where each object represents one or more account.</p>\n<p>Embark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.</p>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Using production keys</strong></p>\n  <p><p>Be careful when using production keys and mnemonics (ie the account where you have real money).</p>\n<p>We recommend using <a href=\"https://www.schrodinger.com/kb/1842\" target=\"_blank\" rel=\"noopener\">environment variables</a> for plain text values like <code>privateKey</code> and <code>mnemonic</code> and to put the files for <code>privateKeyFile</code> and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><ul>\n<li><strong>nodeAccounts</strong>: The actual node accounts, that get created and unlocked by the client<ul>\n<li>Can be enabled by setting it to <code>true</code></li>\n<li><strong>numAddresses</strong>: Number of addresses you want from the node. Defaults to <code>1</code></li>\n<li><strong>password</strong>: Password file where the password to create and unlock the accounts is. This is required</li>\n</ul>\n</li>\n<li><strong>privateKey</strong>: Private key string</li>\n<li><strong>privateKeyFile</strong>: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to <code>random</code> to generate a random account (useful when testing)<ul>\n<li><strong>password</strong>: Password string for the keystore</li>\n</ul>\n</li>\n<li><strong>mnemonic</strong>: 12 word mnemonic<ul>\n<li><strong>addressIndex</strong>: Index where to start getting the addresses. Defaults to <code>0</code></li>\n<li><strong>numAddresses</strong>: Number of addresses to get. Defaults to <code>1</code></li>\n<li><strong>hdpath</strong>: HD derivation path. Defaults to <code>&quot;m/44&#39;/60&#39;/0&#39;/0/&quot;</code></li>\n</ul>\n</li>\n</ul>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Accounts order</strong></p>\n  <p><p>The order in the accounts array is important. This means that using <code>nodeAccounts</code> first, as above, will set the node’s account as the <code>defaultAccount</code> for deployment.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Configuring-account-balance-for-development\"><a href=\"#Configuring-account-balance-for-development\" class=\"headerlink\" title=\"Configuring account balance for development\"></a>Configuring account balance for development</h3><p>When in development, we can specify the balance of each account using the <code>balance</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">      deployment: &#123;</span><br><span class=\"line\">        accounts: [</span><br><span class=\"line\">          &#123;</span><br><span class=\"line\">            mnemonic: &quot;12 word mnemonic&quot;,</span><br><span class=\"line\">            balance: &quot;5 ether&quot;</span><br><span class=\"line\">          &#125;</span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Balances can be specified using <a href=\"/docs/contracts_configuration.html#Human-readable-Ether-units\">human readable units</a> such as “5 ether” or “200 finney”. If no unit is specified the value will be in Wei.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In our <a href=\"/docs/blockchain_configuration.html\">guide on configuring a blockchain client</a>, we’ve configured accounts in several places.</p>\n<p>This parameter let’s us customize what the <code>accounts</code> will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.</p>\n<h2 id=\"Accounts-parameters\"><a href=\"#Accounts-parameters\" class=\"headerlink\" title=\"Accounts parameters\"></a>Accounts parameters</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: true,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    password: &quot;config&#x2F;development&#x2F;devpassword&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: &quot;path&#x2F;to&#x2F;file&quot;,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: &quot;0&quot;,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    hdpath: &quot;m&#x2F;44&#39;&#x2F;60&#39;&#x2F;0&#39;&#x2F;0&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>accounts</code> configuration is an array of objects, where each object represents one or more account.</p>\n<p>Embark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.</p>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Using production keys</strong></p>\n  <p><p>Be careful when using production keys and mnemonics (ie the account where you have real money).</p>\n<p>We recommend using <a href=\"https://www.schrodinger.com/kb/1842\" target=\"_blank\" rel=\"noopener\">environment variables</a> for plain text values like <code>privateKey</code> and <code>mnemonic</code> and to put the files for <code>privateKeyFile</code> and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><ul>\n<li><strong>nodeAccounts</strong>: The actual node accounts, that get created and unlocked by the client<ul>\n<li>Can be enabled by setting it to <code>true</code></li>\n<li><strong>numAddresses</strong>: Number of addresses you want from the node. Defaults to <code>1</code></li>\n<li><strong>password</strong>: Password file where the password to create and unlock the accounts is. This is required</li>\n</ul>\n</li>\n<li><strong>privateKey</strong>: Private key string</li>\n<li><strong>privateKeyFile</strong>: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to <code>random</code> to generate a random account (useful when testing)<ul>\n<li><strong>password</strong>: Password string for the keystore</li>\n</ul>\n</li>\n<li><strong>mnemonic</strong>: 12 word mnemonic<ul>\n<li><strong>addressIndex</strong>: Index where to start getting the addresses. Defaults to <code>0</code></li>\n<li><strong>numAddresses</strong>: Number of addresses to get. Defaults to <code>1</code></li>\n<li><strong>hdpath</strong>: HD derivation path. Defaults to <code>&quot;m/44&#39;/60&#39;/0&#39;/0/&quot;</code></li>\n</ul>\n</li>\n</ul>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Accounts order</strong></p>\n  <p><p>The order in the accounts array is important. This means that using <code>nodeAccounts</code> first, as above, will set the node’s account as the <code>defaultAccount</code> for deployment.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Configuring-account-balance-for-development\"><a href=\"#Configuring-account-balance-for-development\" class=\"headerlink\" title=\"Configuring account balance for development\"></a>Configuring account balance for development</h3><p>When in development, we can specify the balance of each account using the <code>balance</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">      deployment: &#123;</span><br><span class=\"line\">        accounts: [</span><br><span class=\"line\">          &#123;</span><br><span class=\"line\">            mnemonic: &quot;12 word mnemonic&quot;,</span><br><span class=\"line\">            balance: &quot;5 ether&quot;</span><br><span class=\"line\">          &#125;</span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Balances can be specified using <a href=\"/docs/contracts_configuration.html#Human-readable-Ether-units\">human readable units</a> such as “5 ether” or “200 finney”. If no unit is specified the value will be in Wei.</p>\n"},{"title":"Cockpit Dashboard","layout":"docs","_content":"\nThe first view we're getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let's get right to it and take a look!\n\n## Overview\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard.png)\n\nThe dashboard is separated into different sections, which each of them having a certain responsibility. Here's a brief overview of what these are.\n\n- **Navigation & Search** - At the very top we have the navigation and search. Those are self explanatory, but we'll talk a bit more about search features in a few moments.\n- **Available Services** - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.\n- **Interactive Console** - This is the Cockpit equivalent of Embark's [Interactive Console](/docs/using_the_console.html).\n- **Deployed Smart Contracts** - The current status of deployed Smart Contracts. Again, very similar to Embark's [Dashboard](/docs/dashboard.html).\n\n## Navigation & Search\n\nWe can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.\n\n![Cockpit Navigation](/assets/images/cockpit_navigation.gif)\n\nCockpit's search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we're searching for a deployed Smart Contract, entering the name of the Smart Contract works too:\n\n![Cockpit Search](/assets/images/cockpit_search.gif)\n\n## Available Services\n\nAs mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. \n\nThe components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.\n\n## Interactive Console\n\nThis is an equivalent to Embark's [Interactive Console](/docs/using_the_console.html) just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called **Smart Suggestions**. \n\nWhen typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!\n\n![Cockpit Smart Suggestions](/assets/images/cockpit_suggestions.gif)\n\n## Deployed Smart Contracts\n\nAs the name suggests, this sections lists all of our application's deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit's [Explorer](/docs/cockpit_explorer.html).\n\n![Cockpit Dashboard Contracts](/assets/images/cockpit_dashboard_contracts.gif)\n\n## Changing Dark and Light theme\n\nAnother thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.\n\nToggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:\n\n![Cockpit change theme](/assets/images/cockpit_change_theme.gif)\n\n","source":"docs/cockpit_dashboard.md","raw":"title: Cockpit Dashboard\nlayout: docs\n---\n\nThe first view we're getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let's get right to it and take a look!\n\n## Overview\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard.png)\n\nThe dashboard is separated into different sections, which each of them having a certain responsibility. Here's a brief overview of what these are.\n\n- **Navigation & Search** - At the very top we have the navigation and search. Those are self explanatory, but we'll talk a bit more about search features in a few moments.\n- **Available Services** - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.\n- **Interactive Console** - This is the Cockpit equivalent of Embark's [Interactive Console](/docs/using_the_console.html).\n- **Deployed Smart Contracts** - The current status of deployed Smart Contracts. Again, very similar to Embark's [Dashboard](/docs/dashboard.html).\n\n## Navigation & Search\n\nWe can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.\n\n![Cockpit Navigation](/assets/images/cockpit_navigation.gif)\n\nCockpit's search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we're searching for a deployed Smart Contract, entering the name of the Smart Contract works too:\n\n![Cockpit Search](/assets/images/cockpit_search.gif)\n\n## Available Services\n\nAs mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. \n\nThe components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.\n\n## Interactive Console\n\nThis is an equivalent to Embark's [Interactive Console](/docs/using_the_console.html) just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called **Smart Suggestions**. \n\nWhen typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!\n\n![Cockpit Smart Suggestions](/assets/images/cockpit_suggestions.gif)\n\n## Deployed Smart Contracts\n\nAs the name suggests, this sections lists all of our application's deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit's [Explorer](/docs/cockpit_explorer.html).\n\n![Cockpit Dashboard Contracts](/assets/images/cockpit_dashboard_contracts.gif)\n\n## Changing Dark and Light theme\n\nAnother thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.\n\nToggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:\n\n![Cockpit change theme](/assets/images/cockpit_change_theme.gif)\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_dashboard.html","comments":1,"_id":"ck5ijm3qw000c7hegdljfdyw4","content":"<p>The first view we’re getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let’s get right to it and take a look!</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p><img src=\"/assets/images/cockpit_dashboard.png\" alt=\"Cockpit Dashboard\"></p>\n<p>The dashboard is separated into different sections, which each of them having a certain responsibility. Here’s a brief overview of what these are.</p>\n<ul>\n<li><strong>Navigation &amp; Search</strong> - At the very top we have the navigation and search. Those are self explanatory, but we’ll talk a bit more about search features in a few moments.</li>\n<li><strong>Available Services</strong> - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.</li>\n<li><strong>Interactive Console</strong> - This is the Cockpit equivalent of Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a>.</li>\n<li><strong>Deployed Smart Contracts</strong> - The current status of deployed Smart Contracts. Again, very similar to Embark’s <a href=\"/docs/dashboard.html\">Dashboard</a>.</li>\n</ul>\n<h2 id=\"Navigation-amp-Search\"><a href=\"#Navigation-amp-Search\" class=\"headerlink\" title=\"Navigation &amp; Search\"></a>Navigation &amp; Search</h2><p>We can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.</p>\n<p><img src=\"/assets/images/cockpit_navigation.gif\" alt=\"Cockpit Navigation\"></p>\n<p>Cockpit’s search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we’re searching for a deployed Smart Contract, entering the name of the Smart Contract works too:</p>\n<p><img src=\"/assets/images/cockpit_search.gif\" alt=\"Cockpit Search\"></p>\n<h2 id=\"Available-Services\"><a href=\"#Available-Services\" class=\"headerlink\" title=\"Available Services\"></a>Available Services</h2><p>As mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. </p>\n<p>The components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.</p>\n<h2 id=\"Interactive-Console\"><a href=\"#Interactive-Console\" class=\"headerlink\" title=\"Interactive Console\"></a>Interactive Console</h2><p>This is an equivalent to Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a> just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called <strong>Smart Suggestions</strong>. </p>\n<p>When typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!</p>\n<p><img src=\"/assets/images/cockpit_suggestions.gif\" alt=\"Cockpit Smart Suggestions\"></p>\n<h2 id=\"Deployed-Smart-Contracts\"><a href=\"#Deployed-Smart-Contracts\" class=\"headerlink\" title=\"Deployed Smart Contracts\"></a>Deployed Smart Contracts</h2><p>As the name suggests, this sections lists all of our application’s deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit’s <a href=\"/docs/cockpit_explorer.html\">Explorer</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_contracts.gif\" alt=\"Cockpit Dashboard Contracts\"></p>\n<h2 id=\"Changing-Dark-and-Light-theme\"><a href=\"#Changing-Dark-and-Light-theme\" class=\"headerlink\" title=\"Changing Dark and Light theme\"></a>Changing Dark and Light theme</h2><p>Another thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.</p>\n<p>Toggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:</p>\n<p><img src=\"/assets/images/cockpit_change_theme.gif\" alt=\"Cockpit change theme\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The first view we’re getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let’s get right to it and take a look!</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p><img src=\"/assets/images/cockpit_dashboard.png\" alt=\"Cockpit Dashboard\"></p>\n<p>The dashboard is separated into different sections, which each of them having a certain responsibility. Here’s a brief overview of what these are.</p>\n<ul>\n<li><strong>Navigation &amp; Search</strong> - At the very top we have the navigation and search. Those are self explanatory, but we’ll talk a bit more about search features in a few moments.</li>\n<li><strong>Available Services</strong> - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.</li>\n<li><strong>Interactive Console</strong> - This is the Cockpit equivalent of Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a>.</li>\n<li><strong>Deployed Smart Contracts</strong> - The current status of deployed Smart Contracts. Again, very similar to Embark’s <a href=\"/docs/dashboard.html\">Dashboard</a>.</li>\n</ul>\n<h2 id=\"Navigation-amp-Search\"><a href=\"#Navigation-amp-Search\" class=\"headerlink\" title=\"Navigation &amp; Search\"></a>Navigation &amp; Search</h2><p>We can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.</p>\n<p><img src=\"/assets/images/cockpit_navigation.gif\" alt=\"Cockpit Navigation\"></p>\n<p>Cockpit’s search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we’re searching for a deployed Smart Contract, entering the name of the Smart Contract works too:</p>\n<p><img src=\"/assets/images/cockpit_search.gif\" alt=\"Cockpit Search\"></p>\n<h2 id=\"Available-Services\"><a href=\"#Available-Services\" class=\"headerlink\" title=\"Available Services\"></a>Available Services</h2><p>As mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. </p>\n<p>The components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.</p>\n<h2 id=\"Interactive-Console\"><a href=\"#Interactive-Console\" class=\"headerlink\" title=\"Interactive Console\"></a>Interactive Console</h2><p>This is an equivalent to Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a> just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called <strong>Smart Suggestions</strong>. </p>\n<p>When typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!</p>\n<p><img src=\"/assets/images/cockpit_suggestions.gif\" alt=\"Cockpit Smart Suggestions\"></p>\n<h2 id=\"Deployed-Smart-Contracts\"><a href=\"#Deployed-Smart-Contracts\" class=\"headerlink\" title=\"Deployed Smart Contracts\"></a>Deployed Smart Contracts</h2><p>As the name suggests, this sections lists all of our application’s deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit’s <a href=\"/docs/cockpit_explorer.html\">Explorer</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_contracts.gif\" alt=\"Cockpit Dashboard Contracts\"></p>\n<h2 id=\"Changing-Dark-and-Light-theme\"><a href=\"#Changing-Dark-and-Light-theme\" class=\"headerlink\" title=\"Changing Dark and Light theme\"></a>Changing Dark and Light theme</h2><p>Another thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.</p>\n<p>Toggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:</p>\n<p><img src=\"/assets/images/cockpit_change_theme.gif\" alt=\"Cockpit change theme\"></p>\n"},{"title":"Deploying with Cockpit","layout":"docs","_content":"\nCockpit offers an additional deployment experience that enables developers to deploy their application's Smart Contracts in an **iterative** and **selective** fashion. In this guide we'll take a closer look at how this works.\n\n## Viewing Smart Contracts\n\nWhen entering the deployment view, the first thing we see is the status of all our application's deployed contracts, similar to [Embark's dashboard](/docs/dashboard.html).\n\nNext to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. \n\nClicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.\n\n![Cockpit Contract View](/assets/images/cockpit_contracts_view.gif)\n\n## Selective deployment\n\nWith the deployment view, it's possible to selectively deploy any of our application's Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on [managing accounts](/docs/blockchain_accounts_configuration.html).\n\nHowever, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.\n\nTo make this work, we need to have Metamask setup, and activate the \"Injected Web3\" switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: \n\n![Cockpit Selective Deployment](/assets/images/cockpit_selective_deployment.gif)\n","source":"docs/cockpit_deployment.md","raw":"title: Deploying with Cockpit\nlayout: docs\n---\n\nCockpit offers an additional deployment experience that enables developers to deploy their application's Smart Contracts in an **iterative** and **selective** fashion. In this guide we'll take a closer look at how this works.\n\n## Viewing Smart Contracts\n\nWhen entering the deployment view, the first thing we see is the status of all our application's deployed contracts, similar to [Embark's dashboard](/docs/dashboard.html).\n\nNext to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. \n\nClicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.\n\n![Cockpit Contract View](/assets/images/cockpit_contracts_view.gif)\n\n## Selective deployment\n\nWith the deployment view, it's possible to selectively deploy any of our application's Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on [managing accounts](/docs/blockchain_accounts_configuration.html).\n\nHowever, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.\n\nTo make this work, we need to have Metamask setup, and activate the \"Injected Web3\" switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: \n\n![Cockpit Selective Deployment](/assets/images/cockpit_selective_deployment.gif)\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_deployment.html","comments":1,"_id":"ck5ijm3qz000e7heg6asods5b","content":"<p>Cockpit offers an additional deployment experience that enables developers to deploy their application’s Smart Contracts in an <strong>iterative</strong> and <strong>selective</strong> fashion. In this guide we’ll take a closer look at how this works.</p>\n<h2 id=\"Viewing-Smart-Contracts\"><a href=\"#Viewing-Smart-Contracts\" class=\"headerlink\" title=\"Viewing Smart Contracts\"></a>Viewing Smart Contracts</h2><p>When entering the deployment view, the first thing we see is the status of all our application’s deployed contracts, similar to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>.</p>\n<p>Next to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. </p>\n<p>Clicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.</p>\n<p><img src=\"/assets/images/cockpit_contracts_view.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Selective-deployment\"><a href=\"#Selective-deployment\" class=\"headerlink\" title=\"Selective deployment\"></a>Selective deployment</h2><p>With the deployment view, it’s possible to selectively deploy any of our application’s Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on <a href=\"/docs/blockchain_accounts_configuration.html\">managing accounts</a>.</p>\n<p>However, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.</p>\n<p>To make this work, we need to have Metamask setup, and activate the “Injected Web3” switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: </p>\n<p><img src=\"/assets/images/cockpit_selective_deployment.gif\" alt=\"Cockpit Selective Deployment\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Cockpit offers an additional deployment experience that enables developers to deploy their application’s Smart Contracts in an <strong>iterative</strong> and <strong>selective</strong> fashion. In this guide we’ll take a closer look at how this works.</p>\n<h2 id=\"Viewing-Smart-Contracts\"><a href=\"#Viewing-Smart-Contracts\" class=\"headerlink\" title=\"Viewing Smart Contracts\"></a>Viewing Smart Contracts</h2><p>When entering the deployment view, the first thing we see is the status of all our application’s deployed contracts, similar to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>.</p>\n<p>Next to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. </p>\n<p>Clicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.</p>\n<p><img src=\"/assets/images/cockpit_contracts_view.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Selective-deployment\"><a href=\"#Selective-deployment\" class=\"headerlink\" title=\"Selective deployment\"></a>Selective deployment</h2><p>With the deployment view, it’s possible to selectively deploy any of our application’s Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on <a href=\"/docs/blockchain_accounts_configuration.html\">managing accounts</a>.</p>\n<p>However, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.</p>\n<p>To make this work, we need to have Metamask setup, and activate the “Injected Web3” switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: </p>\n<p><img src=\"/assets/images/cockpit_selective_deployment.gif\" alt=\"Cockpit Selective Deployment\"></p>\n"},{"title":"Cockpit Editor","layout":"docs","_content":"\nCockpit comes with a web-based code editor that enables us to change our application's source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.\n\n## Additional features for Smart Contract files\n\nWhen opening a Smart Contract source file in Cockpit's editor, we'll get additional features and options to work with. These features are **Interact**, **Details** and **Transactions**, very similar to the ones we've discussed in [Exploring Smart Contracts](/docs/cockpit_explorer.html#Exploring-Smart-Contracts).\n\nCockpit will open up dedicated view for each of these in another in-pane window as shown below:\n\n\n![Cockpit Navigation](/assets/images/cockpit_editor.gif)\n\n","source":"docs/cockpit_editor.md","raw":"title: Cockpit Editor\nlayout: docs\n---\n\nCockpit comes with a web-based code editor that enables us to change our application's source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.\n\n## Additional features for Smart Contract files\n\nWhen opening a Smart Contract source file in Cockpit's editor, we'll get additional features and options to work with. These features are **Interact**, **Details** and **Transactions**, very similar to the ones we've discussed in [Exploring Smart Contracts](/docs/cockpit_explorer.html#Exploring-Smart-Contracts).\n\nCockpit will open up dedicated view for each of these in another in-pane window as shown below:\n\n\n![Cockpit Navigation](/assets/images/cockpit_editor.gif)\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_editor.html","comments":1,"_id":"ck5ijm3r2000i7heg6nkq7sik","content":"<p>Cockpit comes with a web-based code editor that enables us to change our application’s source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.</p>\n<h2 id=\"Additional-features-for-Smart-Contract-files\"><a href=\"#Additional-features-for-Smart-Contract-files\" class=\"headerlink\" title=\"Additional features for Smart Contract files\"></a>Additional features for Smart Contract files</h2><p>When opening a Smart Contract source file in Cockpit’s editor, we’ll get additional features and options to work with. These features are <strong>Interact</strong>, <strong>Details</strong> and <strong>Transactions</strong>, very similar to the ones we’ve discussed in <a href=\"/docs/cockpit_explorer.html#Exploring-Smart-Contracts\">Exploring Smart Contracts</a>.</p>\n<p>Cockpit will open up dedicated view for each of these in another in-pane window as shown below:</p>\n<p><img src=\"/assets/images/cockpit_editor.gif\" alt=\"Cockpit Navigation\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Cockpit comes with a web-based code editor that enables us to change our application’s source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.</p>\n<h2 id=\"Additional-features-for-Smart-Contract-files\"><a href=\"#Additional-features-for-Smart-Contract-files\" class=\"headerlink\" title=\"Additional features for Smart Contract files\"></a>Additional features for Smart Contract files</h2><p>When opening a Smart Contract source file in Cockpit’s editor, we’ll get additional features and options to work with. These features are <strong>Interact</strong>, <strong>Details</strong> and <strong>Transactions</strong>, very similar to the ones we’ve discussed in <a href=\"/docs/cockpit_explorer.html#Exploring-Smart-Contracts\">Exploring Smart Contracts</a>.</p>\n<p>Cockpit will open up dedicated view for each of these in another in-pane window as shown below:</p>\n<p><img src=\"/assets/images/cockpit_editor.gif\" alt=\"Cockpit Navigation\"></p>\n"},{"title":"Cockpit Explorer","layout":"docs","_content":"\nThe Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. \n\n## Overview\n\nIn the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:\n\n![Cockpit Explorer Overview](/assets/images/cockpit_explorer_overview.png)\n\n## Viewing Accounts\n\nAccount detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.\n\nThis makes it very convenient to find transactions, if we're aiming to find any that belong to a certain account.\n![Cockpit Contract View](/assets/images/cockpit_explorer_account.gif)\n\n## Viewing Blocks\n\nBlocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.\n\n![Cockpit Explorer Block](/assets/images/cockpit_explorer_block.png)\n\n## Viewing Transactions\n\nIt's no surprise that Cockpit's Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_transactions.gif)\n\n## Exploring Smart Contracts\n\nWe can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:\n\n- **Interact** - Call methods on your Smart Contract instance\n- **Details** - View the ABI and byte code of your Smart Contract\n- **Transactions** - List and explore all transactions and events associated with that Smart Contract instnace\n\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_contracts_detail.gif)\n\n","source":"docs/cockpit_explorer.md","raw":"title: Cockpit Explorer\nlayout: docs\n---\n\nThe Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. \n\n## Overview\n\nIn the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:\n\n![Cockpit Explorer Overview](/assets/images/cockpit_explorer_overview.png)\n\n## Viewing Accounts\n\nAccount detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.\n\nThis makes it very convenient to find transactions, if we're aiming to find any that belong to a certain account.\n![Cockpit Contract View](/assets/images/cockpit_explorer_account.gif)\n\n## Viewing Blocks\n\nBlocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.\n\n![Cockpit Explorer Block](/assets/images/cockpit_explorer_block.png)\n\n## Viewing Transactions\n\nIt's no surprise that Cockpit's Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_transactions.gif)\n\n## Exploring Smart Contracts\n\nWe can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:\n\n- **Interact** - Call methods on your Smart Contract instance\n- **Details** - View the ABI and byte code of your Smart Contract\n- **Transactions** - List and explore all transactions and events associated with that Smart Contract instnace\n\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_contracts_detail.gif)\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_explorer.html","comments":1,"_id":"ck5ijm3r5000l7hegcvmc7q55","content":"<p>The Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. </p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>In the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:</p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer Overview\"></p>\n<h2 id=\"Viewing-Accounts\"><a href=\"#Viewing-Accounts\" class=\"headerlink\" title=\"Viewing Accounts\"></a>Viewing Accounts</h2><p>Account detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.</p>\n<p>This makes it very convenient to find transactions, if we’re aiming to find any that belong to a certain account.<br><img src=\"/assets/images/cockpit_explorer_account.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Viewing-Blocks\"><a href=\"#Viewing-Blocks\" class=\"headerlink\" title=\"Viewing Blocks\"></a>Viewing Blocks</h2><p>Blocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.</p>\n<p><img src=\"/assets/images/cockpit_explorer_block.png\" alt=\"Cockpit Explorer Block\"></p>\n<h2 id=\"Viewing-Transactions\"><a href=\"#Viewing-Transactions\" class=\"headerlink\" title=\"Viewing Transactions\"></a>Viewing Transactions</h2><p>It’s no surprise that Cockpit’s Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.</p>\n<p><img src=\"/assets/images/cockpit_explorer_transactions.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Exploring-Smart-Contracts\"><a href=\"#Exploring-Smart-Contracts\" class=\"headerlink\" title=\"Exploring Smart Contracts\"></a>Exploring Smart Contracts</h2><p>We can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:</p>\n<ul>\n<li><strong>Interact</strong> - Call methods on your Smart Contract instance</li>\n<li><strong>Details</strong> - View the ABI and byte code of your Smart Contract</li>\n<li><strong>Transactions</strong> - List and explore all transactions and events associated with that Smart Contract instnace</li>\n</ul>\n<p><img src=\"/assets/images/cockpit_explorer_contracts_detail.gif\" alt=\"Cockpit Contract View\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. </p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>In the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:</p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer Overview\"></p>\n<h2 id=\"Viewing-Accounts\"><a href=\"#Viewing-Accounts\" class=\"headerlink\" title=\"Viewing Accounts\"></a>Viewing Accounts</h2><p>Account detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.</p>\n<p>This makes it very convenient to find transactions, if we’re aiming to find any that belong to a certain account.<br><img src=\"/assets/images/cockpit_explorer_account.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Viewing-Blocks\"><a href=\"#Viewing-Blocks\" class=\"headerlink\" title=\"Viewing Blocks\"></a>Viewing Blocks</h2><p>Blocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.</p>\n<p><img src=\"/assets/images/cockpit_explorer_block.png\" alt=\"Cockpit Explorer Block\"></p>\n<h2 id=\"Viewing-Transactions\"><a href=\"#Viewing-Transactions\" class=\"headerlink\" title=\"Viewing Transactions\"></a>Viewing Transactions</h2><p>It’s no surprise that Cockpit’s Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.</p>\n<p><img src=\"/assets/images/cockpit_explorer_transactions.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Exploring-Smart-Contracts\"><a href=\"#Exploring-Smart-Contracts\" class=\"headerlink\" title=\"Exploring Smart Contracts\"></a>Exploring Smart Contracts</h2><p>We can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:</p>\n<ul>\n<li><strong>Interact</strong> - Call methods on your Smart Contract instance</li>\n<li><strong>Details</strong> - View the ABI and byte code of your Smart Contract</li>\n<li><strong>Transactions</strong> - List and explore all transactions and events associated with that Smart Contract instnace</li>\n</ul>\n<p><img src=\"/assets/images/cockpit_explorer_contracts_detail.gif\" alt=\"Cockpit Contract View\"></p>\n"},{"title":"Introduction to Cockpit","layout":"docs","_content":"\nProbably one of Embark's most exciting features is its companion web interface Cockpit. With Cockpit, we're aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.\n\nThroughout the following sections we'll take a closer look at Cockpit's features and how we can use it to improve our developer experience when working with Embark!\n\n{% notification info 'A note on Cockpit availability' %}\nPlease note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.\n{% endnotification %}\n\n## What is Cockpit?\n\nCockpit is a web application that ships with Embark since version 4.0. It's an alternative and sometimes more powerful interface in comparison to [Embark's dashboard](/docs/dashboard.html), that connects to any existing Embark process. Since it's web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can't be found in Embark otherwise.\n\nSome of Cockpit's features are:\n\n- **Dashboard** - A highly interactive real-time dashboard with service monitoring and deployment status\n- **Selective Deployment** - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed\n- **Explorer** - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts\n- **Code Editor** - A web-based code editor, enabling changing your application's source on the fly\n- **Utilities** - Powerful utility tools, including ENS, a transaction decoder and more\n\nCockpit is actively developed and implements new features on a regular basis.\n\n## Starting Cockpit\n\nCockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on [running apps](/docs/running_apps.html), Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:\n\n```\nAccess the web backend with the following url: http://localhost:55555?token=xxxxx-xxxxx-xxxxx-xxxxx\n```\n\nNotice that `token` is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we're trying to access the same session through different browser instances, one instance won't be able to connect.\n\nWe can always generate a new token inside [Embark's interactive console](/docs/using_the_console.html) using the [`token` command](/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit).\n\n## Entering the Cockpit\n\nOnce Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let's explore what Cockpit has to offer in the following guides.\n\nBon Voyage! \n","source":"docs/cockpit_introduction.md","raw":"title: Introduction to Cockpit\nlayout: docs\n---\n\nProbably one of Embark's most exciting features is its companion web interface Cockpit. With Cockpit, we're aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.\n\nThroughout the following sections we'll take a closer look at Cockpit's features and how we can use it to improve our developer experience when working with Embark!\n\n{% notification info 'A note on Cockpit availability' %}\nPlease note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.\n{% endnotification %}\n\n## What is Cockpit?\n\nCockpit is a web application that ships with Embark since version 4.0. It's an alternative and sometimes more powerful interface in comparison to [Embark's dashboard](/docs/dashboard.html), that connects to any existing Embark process. Since it's web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can't be found in Embark otherwise.\n\nSome of Cockpit's features are:\n\n- **Dashboard** - A highly interactive real-time dashboard with service monitoring and deployment status\n- **Selective Deployment** - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed\n- **Explorer** - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts\n- **Code Editor** - A web-based code editor, enabling changing your application's source on the fly\n- **Utilities** - Powerful utility tools, including ENS, a transaction decoder and more\n\nCockpit is actively developed and implements new features on a regular basis.\n\n## Starting Cockpit\n\nCockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on [running apps](/docs/running_apps.html), Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:\n\n```\nAccess the web backend with the following url: http://localhost:55555?token=xxxxx-xxxxx-xxxxx-xxxxx\n```\n\nNotice that `token` is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we're trying to access the same session through different browser instances, one instance won't be able to connect.\n\nWe can always generate a new token inside [Embark's interactive console](/docs/using_the_console.html) using the [`token` command](/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit).\n\n## Entering the Cockpit\n\nOnce Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let's explore what Cockpit has to offer in the following guides.\n\nBon Voyage! \n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_introduction.html","comments":1,"_id":"ck5ijm3r7000o7heg5npzevk2","content":"<p>Probably one of Embark’s most exciting features is its companion web interface Cockpit. With Cockpit, we’re aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.</p>\n<p>Throughout the following sections we’ll take a closer look at Cockpit’s features and how we can use it to improve our developer experience when working with Embark!</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on Cockpit availability</strong></p>\n  <p><p>Please note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"What-is-Cockpit\"><a href=\"#What-is-Cockpit\" class=\"headerlink\" title=\"What is Cockpit?\"></a>What is Cockpit?</h2><p>Cockpit is a web application that ships with Embark since version 4.0. It’s an alternative and sometimes more powerful interface in comparison to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>, that connects to any existing Embark process. Since it’s web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can’t be found in Embark otherwise.</p>\n<p>Some of Cockpit’s features are:</p>\n<ul>\n<li><strong>Dashboard</strong> - A highly interactive real-time dashboard with service monitoring and deployment status</li>\n<li><strong>Selective Deployment</strong> - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed</li>\n<li><strong>Explorer</strong> - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts</li>\n<li><strong>Code Editor</strong> - A web-based code editor, enabling changing your application’s source on the fly</li>\n<li><strong>Utilities</strong> - Powerful utility tools, including ENS, a transaction decoder and more</li>\n</ul>\n<p>Cockpit is actively developed and implements new features on a regular basis.</p>\n<h2 id=\"Starting-Cockpit\"><a href=\"#Starting-Cockpit\" class=\"headerlink\" title=\"Starting Cockpit\"></a>Starting Cockpit</h2><p>Cockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on <a href=\"/docs/running_apps.html\">running apps</a>, Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Access the web backend with the following url: http:&#x2F;&#x2F;localhost:55555?token&#x3D;xxxxx-xxxxx-xxxxx-xxxxx</span><br></pre></td></tr></table></figure>\n\n<p>Notice that <code>token</code> is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we’re trying to access the same session through different browser instances, one instance won’t be able to connect.</p>\n<p>We can always generate a new token inside <a href=\"/docs/using_the_console.html\">Embark’s interactive console</a> using the <a href=\"/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit\"><code>token</code> command</a>.</p>\n<h2 id=\"Entering-the-Cockpit\"><a href=\"#Entering-the-Cockpit\" class=\"headerlink\" title=\"Entering the Cockpit\"></a>Entering the Cockpit</h2><p>Once Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let’s explore what Cockpit has to offer in the following guides.</p>\n<p>Bon Voyage! </p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Probably one of Embark’s most exciting features is its companion web interface Cockpit. With Cockpit, we’re aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.</p>\n<p>Throughout the following sections we’ll take a closer look at Cockpit’s features and how we can use it to improve our developer experience when working with Embark!</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on Cockpit availability</strong></p>\n  <p><p>Please note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"What-is-Cockpit\"><a href=\"#What-is-Cockpit\" class=\"headerlink\" title=\"What is Cockpit?\"></a>What is Cockpit?</h2><p>Cockpit is a web application that ships with Embark since version 4.0. It’s an alternative and sometimes more powerful interface in comparison to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>, that connects to any existing Embark process. Since it’s web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can’t be found in Embark otherwise.</p>\n<p>Some of Cockpit’s features are:</p>\n<ul>\n<li><strong>Dashboard</strong> - A highly interactive real-time dashboard with service monitoring and deployment status</li>\n<li><strong>Selective Deployment</strong> - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed</li>\n<li><strong>Explorer</strong> - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts</li>\n<li><strong>Code Editor</strong> - A web-based code editor, enabling changing your application’s source on the fly</li>\n<li><strong>Utilities</strong> - Powerful utility tools, including ENS, a transaction decoder and more</li>\n</ul>\n<p>Cockpit is actively developed and implements new features on a regular basis.</p>\n<h2 id=\"Starting-Cockpit\"><a href=\"#Starting-Cockpit\" class=\"headerlink\" title=\"Starting Cockpit\"></a>Starting Cockpit</h2><p>Cockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on <a href=\"/docs/running_apps.html\">running apps</a>, Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Access the web backend with the following url: http:&#x2F;&#x2F;localhost:55555?token&#x3D;xxxxx-xxxxx-xxxxx-xxxxx</span><br></pre></td></tr></table></figure>\n\n<p>Notice that <code>token</code> is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we’re trying to access the same session through different browser instances, one instance won’t be able to connect.</p>\n<p>We can always generate a new token inside <a href=\"/docs/using_the_console.html\">Embark’s interactive console</a> using the <a href=\"/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit\"><code>token</code> command</a>.</p>\n<h2 id=\"Entering-the-Cockpit\"><a href=\"#Entering-the-Cockpit\" class=\"headerlink\" title=\"Entering the Cockpit\"></a>Entering the Cockpit</h2><p>Once Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let’s explore what Cockpit has to offer in the following guides.</p>\n<p>Bon Voyage! </p>\n"},{"title":"Cockpit Utilities","layout":"docs","_content":"\n","source":"docs/cockpit_utils.md","raw":"title: Cockpit Utilities\nlayout: docs\n---\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_utils.html","comments":1,"_id":"ck5ijm3r9000q7heghpi5a61h","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Configuring Embark","layout":"docs","_content":"\nEmbark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we'll take a closer look at the basic configuration options provided by our application's `embark.json` file, which are mainly relevant for, but not restricted to, our application structure.\n\nFor configuration options related to connecting to a blockchain client, [deploying your Smart Contracts](contracts_configuration.html), [decentralized storage](storage_configuration.html), [Whisper](messages_configuration) or [ENS](naming_configuration.html), please head over to the dedicated configuration guides respectively.\n\n## Overview\n\nEvery application [created with Embark](create_project.html) comes with an `embark.json` file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here's what a freshly scaffolded `embark.json` file could look like:\n\n```\n{\n  \"contracts\": [\"contracts/**\"],\n  \"app\": {\n    \"js/dapp.js\": [\"app/dapp.js\"],\n    \"index.html\": \"app/index.html\",\n    \"images/\": [\"app/images/**\"]\n  },\n  \"buildDir\": \"dist/\",\n  \"generationDir\": \"embarkArtifacts\",\n  \"config\": \"config/\",\n  \"versions\": {\n    \"solc\": \"0.4.25\"\n  },\n  \"plugins\": {\n  },\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    }\n  }\n}\n```\n\nLet's look at the different options and learn what they do and mean.\n\n### contracts\n\nThis is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g `[\"contracts/**/*.sol\"]` will match all sol files inside any folders inside `contracts/`).\n\n### app\n\nEverything inside `app` configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.\n\nIn the key/value pairs of `app`, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.\n\n  - **js/dapp.js** - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (`app/dapp.js`).\n  - **index.html** - The entry point of our application (`app/index.html`)\n  - **images** - All image assets of our application that we can find in `app/images/`.\n\nChange these configurations as you need.\n\n### buildDir\n\nThe directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is `dist/`).\n\n{% notification info 'Important note:' %}\nWhen using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, `buildDir` should point at the same location as the complementary tool writes its distribution files to.\n\nThis is important so that Embark picks up the right files when doing things like [deploying your app](/docs/storage_deployment.html) on IPFS or Swarm.\n{% endnotification %}\n\n### generationDir\n\nA directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project's configuration. The default name of this directory is `embarkArtifacts`. To learn more about Embark Artifacts, head over to our guide on [Using EmbarkJS](/docs/javascript_usage.html).\n\n### config\n\nThis is the location of the configuration files. There are different options to configure those:\n\n* **A string** (e.g `\"config/\"`) - Will assume the directory in which the configuration files are located (`blockchain.js`, `contracts.js`, etc).\n* **An object**:\n  * Each property would configure the path of each configuration file\n  * Configuration properties can be set to false to disable the component/service in question\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\n\n### versions (3rd-party libraries)\n\nHere you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.\n\nCurrently, `solc` is the only library that can be specified in this way. It's possible to override the `solc` version in other configuration files such as `contracts.json` on a per environment basis.\n\n### plugins\n\nThis is a list of installed plugins. For more information on Plugins, head over to our [Plugins guide](/docs/installing_plugins.html).\n\n### options\n\nThe `options` property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the `solc` compiler, as well as options related to Embark's `reset` command:\n```\n...\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    },\n  }\n...\n```\n\n## Configuring Embark's reset command\n\nAs mentioned in the section above, it's possible to configure how Embark behaves when [resetting projects](/docs/running_apps.html#Resetting-apps). Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the `reset` option.\n\nIt comes with two properties:\n\n- **defaults** - Tells Embark whether it should reset the default files it usually resets or not\n- **files** - A list of files Embark should remove as well when resetting the project\n\nWith these two options we have full control over what files `reset` will remove.\n\n```\n...\n  \"options\": {\n    \"reset\": {\n      \"defaults\": true,\n      \"files\": [\"some/other/file\"]\n    }\n  }\n...\n```\n","source":"docs/configuration.md","raw":"title: Configuring Embark\nlayout: docs\n---\n\nEmbark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we'll take a closer look at the basic configuration options provided by our application's `embark.json` file, which are mainly relevant for, but not restricted to, our application structure.\n\nFor configuration options related to connecting to a blockchain client, [deploying your Smart Contracts](contracts_configuration.html), [decentralized storage](storage_configuration.html), [Whisper](messages_configuration) or [ENS](naming_configuration.html), please head over to the dedicated configuration guides respectively.\n\n## Overview\n\nEvery application [created with Embark](create_project.html) comes with an `embark.json` file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here's what a freshly scaffolded `embark.json` file could look like:\n\n```\n{\n  \"contracts\": [\"contracts/**\"],\n  \"app\": {\n    \"js/dapp.js\": [\"app/dapp.js\"],\n    \"index.html\": \"app/index.html\",\n    \"images/\": [\"app/images/**\"]\n  },\n  \"buildDir\": \"dist/\",\n  \"generationDir\": \"embarkArtifacts\",\n  \"config\": \"config/\",\n  \"versions\": {\n    \"solc\": \"0.4.25\"\n  },\n  \"plugins\": {\n  },\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    }\n  }\n}\n```\n\nLet's look at the different options and learn what they do and mean.\n\n### contracts\n\nThis is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g `[\"contracts/**/*.sol\"]` will match all sol files inside any folders inside `contracts/`).\n\n### app\n\nEverything inside `app` configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.\n\nIn the key/value pairs of `app`, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.\n\n  - **js/dapp.js** - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (`app/dapp.js`).\n  - **index.html** - The entry point of our application (`app/index.html`)\n  - **images** - All image assets of our application that we can find in `app/images/`.\n\nChange these configurations as you need.\n\n### buildDir\n\nThe directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is `dist/`).\n\n{% notification info 'Important note:' %}\nWhen using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, `buildDir` should point at the same location as the complementary tool writes its distribution files to.\n\nThis is important so that Embark picks up the right files when doing things like [deploying your app](/docs/storage_deployment.html) on IPFS or Swarm.\n{% endnotification %}\n\n### generationDir\n\nA directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project's configuration. The default name of this directory is `embarkArtifacts`. To learn more about Embark Artifacts, head over to our guide on [Using EmbarkJS](/docs/javascript_usage.html).\n\n### config\n\nThis is the location of the configuration files. There are different options to configure those:\n\n* **A string** (e.g `\"config/\"`) - Will assume the directory in which the configuration files are located (`blockchain.js`, `contracts.js`, etc).\n* **An object**:\n  * Each property would configure the path of each configuration file\n  * Configuration properties can be set to false to disable the component/service in question\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\n\n### versions (3rd-party libraries)\n\nHere you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.\n\nCurrently, `solc` is the only library that can be specified in this way. It's possible to override the `solc` version in other configuration files such as `contracts.json` on a per environment basis.\n\n### plugins\n\nThis is a list of installed plugins. For more information on Plugins, head over to our [Plugins guide](/docs/installing_plugins.html).\n\n### options\n\nThe `options` property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the `solc` compiler, as well as options related to Embark's `reset` command:\n```\n...\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    },\n  }\n...\n```\n\n## Configuring Embark's reset command\n\nAs mentioned in the section above, it's possible to configure how Embark behaves when [resetting projects](/docs/running_apps.html#Resetting-apps). Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the `reset` option.\n\nIt comes with two properties:\n\n- **defaults** - Tells Embark whether it should reset the default files it usually resets or not\n- **files** - A list of files Embark should remove as well when resetting the project\n\nWith these two options we have full control over what files `reset` will remove.\n\n```\n...\n  \"options\": {\n    \"reset\": {\n      \"defaults\": true,\n      \"files\": [\"some/other/file\"]\n    }\n  }\n...\n```\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/configuration.html","comments":1,"_id":"ck5ijm3ra000s7heg60xe14sp","content":"<p>Embark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we’ll take a closer look at the basic configuration options provided by our application’s <code>embark.json</code> file, which are mainly relevant for, but not restricted to, our application structure.</p>\n<p>For configuration options related to connecting to a blockchain client, <a href=\"contracts_configuration.html\">deploying your Smart Contracts</a>, <a href=\"storage_configuration.html\">decentralized storage</a>, <a href=\"messages_configuration\">Whisper</a> or <a href=\"naming_configuration.html\">ENS</a>, please head over to the dedicated configuration guides respectively.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Every application <a href=\"create_project.html\">created with Embark</a> comes with an <code>embark.json</code> file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here’s what a freshly scaffolded <code>embark.json</code> file could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;contracts&quot;: [&quot;contracts&#x2F;**&quot;],</span><br><span class=\"line\">  &quot;app&quot;: &#123;</span><br><span class=\"line\">    &quot;js&#x2F;dapp.js&quot;: [&quot;app&#x2F;dapp.js&quot;],</span><br><span class=\"line\">    &quot;index.html&quot;: &quot;app&#x2F;index.html&quot;,</span><br><span class=\"line\">    &quot;images&#x2F;&quot;: [&quot;app&#x2F;images&#x2F;**&quot;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;buildDir&quot;: &quot;dist&#x2F;&quot;,</span><br><span class=\"line\">  &quot;generationDir&quot;: &quot;embarkArtifacts&quot;,</span><br><span class=\"line\">  &quot;config&quot;: &quot;config&#x2F;&quot;,</span><br><span class=\"line\">  &quot;versions&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &quot;0.4.25&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s look at the different options and learn what they do and mean.</p>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts\"></a>contracts</h3><p>This is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g <code>[&quot;contracts/**/*.sol&quot;]</code> will match all sol files inside any folders inside <code>contracts/</code>).</p>\n<h3 id=\"app\"><a href=\"#app\" class=\"headerlink\" title=\"app\"></a>app</h3><p>Everything inside <code>app</code> configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.</p>\n<p>In the key/value pairs of <code>app</code>, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.</p>\n<ul>\n<li><strong>js/dapp.js</strong> - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (<code>app/dapp.js</code>).</li>\n<li><strong>index.html</strong> - The entry point of our application (<code>app/index.html</code>)</li>\n<li><strong>images</strong> - All image assets of our application that we can find in <code>app/images/</code>.</li>\n</ul>\n<p>Change these configurations as you need.</p>\n<h3 id=\"buildDir\"><a href=\"#buildDir\" class=\"headerlink\" title=\"buildDir\"></a>buildDir</h3><p>The directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is <code>dist/</code>).</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important note:</strong></p>\n  <p><p>When using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, <code>buildDir</code> should point at the same location as the complementary tool writes its distribution files to.</p>\n<p>This is important so that Embark picks up the right files when doing things like <a href=\"/docs/storage_deployment.html\">deploying your app</a> on IPFS or Swarm.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"generationDir\"><a href=\"#generationDir\" class=\"headerlink\" title=\"generationDir\"></a>generationDir</h3><p>A directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project’s configuration. The default name of this directory is <code>embarkArtifacts</code>. To learn more about Embark Artifacts, head over to our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>.</p>\n<h3 id=\"config\"><a href=\"#config\" class=\"headerlink\" title=\"config\"></a>config</h3><p>This is the location of the configuration files. There are different options to configure those:</p>\n<ul>\n<li><strong>A string</strong> (e.g <code>&quot;config/&quot;</code>) - Will assume the directory in which the configuration files are located (<code>blockchain.js</code>, <code>contracts.js</code>, etc).</li>\n<li><strong>An object</strong>:<ul>\n<li>Each property would configure the path of each configuration file</li>\n<li>Configuration properties can be set to false to disable the component/service in question</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"versions-3rd-party-libraries\"><a href=\"#versions-3rd-party-libraries\" class=\"headerlink\" title=\"versions (3rd-party libraries)\"></a>versions (3rd-party libraries)</h3><p>Here you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.</p>\n<p>Currently, <code>solc</code> is the only library that can be specified in this way. It’s possible to override the <code>solc</code> version in other configuration files such as <code>contracts.json</code> on a per environment basis.</p>\n<h3 id=\"plugins\"><a href=\"#plugins\" class=\"headerlink\" title=\"plugins\"></a>plugins</h3><p>This is a list of installed plugins. For more information on Plugins, head over to our <a href=\"/docs/installing_plugins.html\">Plugins guide</a>.</p>\n<h3 id=\"options\"><a href=\"#options\" class=\"headerlink\" title=\"options\"></a>options</h3><p>The <code>options</code> property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the <code>solc</code> compiler, as well as options related to Embark’s <code>reset</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-Embark’s-reset-command\"><a href=\"#Configuring-Embark’s-reset-command\" class=\"headerlink\" title=\"Configuring Embark’s reset command\"></a>Configuring Embark’s reset command</h2><p>As mentioned in the section above, it’s possible to configure how Embark behaves when <a href=\"/docs/running_apps.html#Resetting-apps\">resetting projects</a>. Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the <code>reset</code> option.</p>\n<p>It comes with two properties:</p>\n<ul>\n<li><strong>defaults</strong> - Tells Embark whether it should reset the default files it usually resets or not</li>\n<li><strong>files</strong> - A list of files Embark should remove as well when resetting the project</li>\n</ul>\n<p>With these two options we have full control over what files <code>reset</code> will remove.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;reset&quot;: &#123;</span><br><span class=\"line\">      &quot;defaults&quot;: true,</span><br><span class=\"line\">      &quot;files&quot;: [&quot;some&#x2F;other&#x2F;file&quot;]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we’ll take a closer look at the basic configuration options provided by our application’s <code>embark.json</code> file, which are mainly relevant for, but not restricted to, our application structure.</p>\n<p>For configuration options related to connecting to a blockchain client, <a href=\"contracts_configuration.html\">deploying your Smart Contracts</a>, <a href=\"storage_configuration.html\">decentralized storage</a>, <a href=\"messages_configuration\">Whisper</a> or <a href=\"naming_configuration.html\">ENS</a>, please head over to the dedicated configuration guides respectively.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Every application <a href=\"create_project.html\">created with Embark</a> comes with an <code>embark.json</code> file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here’s what a freshly scaffolded <code>embark.json</code> file could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;contracts&quot;: [&quot;contracts&#x2F;**&quot;],</span><br><span class=\"line\">  &quot;app&quot;: &#123;</span><br><span class=\"line\">    &quot;js&#x2F;dapp.js&quot;: [&quot;app&#x2F;dapp.js&quot;],</span><br><span class=\"line\">    &quot;index.html&quot;: &quot;app&#x2F;index.html&quot;,</span><br><span class=\"line\">    &quot;images&#x2F;&quot;: [&quot;app&#x2F;images&#x2F;**&quot;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;buildDir&quot;: &quot;dist&#x2F;&quot;,</span><br><span class=\"line\">  &quot;generationDir&quot;: &quot;embarkArtifacts&quot;,</span><br><span class=\"line\">  &quot;config&quot;: &quot;config&#x2F;&quot;,</span><br><span class=\"line\">  &quot;versions&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &quot;0.4.25&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s look at the different options and learn what they do and mean.</p>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts\"></a>contracts</h3><p>This is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g <code>[&quot;contracts/**/*.sol&quot;]</code> will match all sol files inside any folders inside <code>contracts/</code>).</p>\n<h3 id=\"app\"><a href=\"#app\" class=\"headerlink\" title=\"app\"></a>app</h3><p>Everything inside <code>app</code> configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.</p>\n<p>In the key/value pairs of <code>app</code>, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.</p>\n<ul>\n<li><strong>js/dapp.js</strong> - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (<code>app/dapp.js</code>).</li>\n<li><strong>index.html</strong> - The entry point of our application (<code>app/index.html</code>)</li>\n<li><strong>images</strong> - All image assets of our application that we can find in <code>app/images/</code>.</li>\n</ul>\n<p>Change these configurations as you need.</p>\n<h3 id=\"buildDir\"><a href=\"#buildDir\" class=\"headerlink\" title=\"buildDir\"></a>buildDir</h3><p>The directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is <code>dist/</code>).</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important note:</strong></p>\n  <p><p>When using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, <code>buildDir</code> should point at the same location as the complementary tool writes its distribution files to.</p>\n<p>This is important so that Embark picks up the right files when doing things like <a href=\"/docs/storage_deployment.html\">deploying your app</a> on IPFS or Swarm.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"generationDir\"><a href=\"#generationDir\" class=\"headerlink\" title=\"generationDir\"></a>generationDir</h3><p>A directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project’s configuration. The default name of this directory is <code>embarkArtifacts</code>. To learn more about Embark Artifacts, head over to our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>.</p>\n<h3 id=\"config\"><a href=\"#config\" class=\"headerlink\" title=\"config\"></a>config</h3><p>This is the location of the configuration files. There are different options to configure those:</p>\n<ul>\n<li><strong>A string</strong> (e.g <code>&quot;config/&quot;</code>) - Will assume the directory in which the configuration files are located (<code>blockchain.js</code>, <code>contracts.js</code>, etc).</li>\n<li><strong>An object</strong>:<ul>\n<li>Each property would configure the path of each configuration file</li>\n<li>Configuration properties can be set to false to disable the component/service in question</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"versions-3rd-party-libraries\"><a href=\"#versions-3rd-party-libraries\" class=\"headerlink\" title=\"versions (3rd-party libraries)\"></a>versions (3rd-party libraries)</h3><p>Here you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.</p>\n<p>Currently, <code>solc</code> is the only library that can be specified in this way. It’s possible to override the <code>solc</code> version in other configuration files such as <code>contracts.json</code> on a per environment basis.</p>\n<h3 id=\"plugins\"><a href=\"#plugins\" class=\"headerlink\" title=\"plugins\"></a>plugins</h3><p>This is a list of installed plugins. For more information on Plugins, head over to our <a href=\"/docs/installing_plugins.html\">Plugins guide</a>.</p>\n<h3 id=\"options\"><a href=\"#options\" class=\"headerlink\" title=\"options\"></a>options</h3><p>The <code>options</code> property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the <code>solc</code> compiler, as well as options related to Embark’s <code>reset</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-Embark’s-reset-command\"><a href=\"#Configuring-Embark’s-reset-command\" class=\"headerlink\" title=\"Configuring Embark’s reset command\"></a>Configuring Embark’s reset command</h2><p>As mentioned in the section above, it’s possible to configure how Embark behaves when <a href=\"/docs/running_apps.html#Resetting-apps\">resetting projects</a>. Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the <code>reset</code> option.</p>\n<p>It comes with two properties:</p>\n<ul>\n<li><strong>defaults</strong> - Tells Embark whether it should reset the default files it usually resets or not</li>\n<li><strong>files</strong> - A list of files Embark should remove as well when resetting the project</li>\n</ul>\n<p>With these two options we have full control over what files <code>reset</code> will remove.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;reset&quot;: &#123;</span><br><span class=\"line\">      &quot;defaults&quot;: true,</span><br><span class=\"line\">      &quot;files&quot;: [&quot;some&#x2F;other&#x2F;file&quot;]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n"},{"title":"Console Commands","layout":"docs","_content":"\nWith ``embark run`` there is a console at the bottom which can be used to interact with contracts or with embark itself. type ``help`` to see a list of available commands, more commands will be added with each version of Embark.\n\n### Interacting with contracts\nAfter contract deployment, you should be able to interact with the web3 object and the deployed contracts.\n\n### Other Available Commands\nSome commands available include:\n\n* ``version`` - see list of software & libraries and their respective versions\n* ``quit`` or ``exit`` - to immediatly exit (you can also use ctrl + c)\n* ``webserver start`` - start the dev webserver\n* ``webserver stop`` - stop the dev webserver\n* ``browser open`` - open a web browser and load your DApp from the dev webserver\n\n### Custom Commands\n\nIt's possible to extend Embark to include custom commands. See [how to create\na plugin](creating_plugins.html)\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n","source":"docs/console_commands.md","raw":"title: Console Commands\nlayout: docs\n---\n\nWith ``embark run`` there is a console at the bottom which can be used to interact with contracts or with embark itself. type ``help`` to see a list of available commands, more commands will be added with each version of Embark.\n\n### Interacting with contracts\nAfter contract deployment, you should be able to interact with the web3 object and the deployed contracts.\n\n### Other Available Commands\nSome commands available include:\n\n* ``version`` - see list of software & libraries and their respective versions\n* ``quit`` or ``exit`` - to immediatly exit (you can also use ctrl + c)\n* ``webserver start`` - start the dev webserver\n* ``webserver stop`` - stop the dev webserver\n* ``browser open`` - open a web browser and load your DApp from the dev webserver\n\n### Custom Commands\n\nIt's possible to extend Embark to include custom commands. See [how to create\na plugin](creating_plugins.html)\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/console_commands.html","comments":1,"_id":"ck5ijm3ra000u7heg555m76d6","content":"<p>With <code>embark run</code> there is a console at the bottom which can be used to interact with contracts or with embark itself. type <code>help</code> to see a list of available commands, more commands will be added with each version of Embark.</p>\n<h3 id=\"Interacting-with-contracts\"><a href=\"#Interacting-with-contracts\" class=\"headerlink\" title=\"Interacting with contracts\"></a>Interacting with contracts</h3><p>After contract deployment, you should be able to interact with the web3 object and the deployed contracts.</p>\n<h3 id=\"Other-Available-Commands\"><a href=\"#Other-Available-Commands\" class=\"headerlink\" title=\"Other Available Commands\"></a>Other Available Commands</h3><p>Some commands available include:</p>\n<ul>\n<li><code>version</code> - see list of software &amp; libraries and their respective versions</li>\n<li><code>quit</code> or <code>exit</code> - to immediatly exit (you can also use ctrl + c)</li>\n<li><code>webserver start</code> - start the dev webserver</li>\n<li><code>webserver stop</code> - stop the dev webserver</li>\n<li><code>browser open</code> - open a web browser and load your DApp from the dev webserver</li>\n</ul>\n<h3 id=\"Custom-Commands\"><a href=\"#Custom-Commands\" class=\"headerlink\" title=\"Custom Commands\"></a>Custom Commands</h3><p>It’s possible to extend Embark to include custom commands. See <a href=\"creating_plugins.html\">how to create<br>a plugin</a></p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With <code>embark run</code> there is a console at the bottom which can be used to interact with contracts or with embark itself. type <code>help</code> to see a list of available commands, more commands will be added with each version of Embark.</p>\n<h3 id=\"Interacting-with-contracts\"><a href=\"#Interacting-with-contracts\" class=\"headerlink\" title=\"Interacting with contracts\"></a>Interacting with contracts</h3><p>After contract deployment, you should be able to interact with the web3 object and the deployed contracts.</p>\n<h3 id=\"Other-Available-Commands\"><a href=\"#Other-Available-Commands\" class=\"headerlink\" title=\"Other Available Commands\"></a>Other Available Commands</h3><p>Some commands available include:</p>\n<ul>\n<li><code>version</code> - see list of software &amp; libraries and their respective versions</li>\n<li><code>quit</code> or <code>exit</code> - to immediatly exit (you can also use ctrl + c)</li>\n<li><code>webserver start</code> - start the dev webserver</li>\n<li><code>webserver stop</code> - stop the dev webserver</li>\n<li><code>browser open</code> - open a web browser and load your DApp from the dev webserver</li>\n</ul>\n<h3 id=\"Custom-Commands\"><a href=\"#Custom-Commands\" class=\"headerlink\" title=\"Custom Commands\"></a>Custom Commands</h3><p>It’s possible to extend Embark to include custom commands. See <a href=\"creating_plugins.html\">how to create<br>a plugin</a></p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n"},{"title":"Accounts & Deployment","layout":"docs","_content":"\nAccounts configuration has moved to the blockchain config. You can learn more [here](/docs/blockchain_accounts_configuration.html).\n\n## Deploying to Infura\n\nTo deploy to Infura or another endpoint, just use the blockchain `endpoint`. More details [here](/docs/blockchain_configuration.html)\n","source":"docs/contracts_deployment.md","raw":"title: Accounts & Deployment\nlayout: docs\n---\n\nAccounts configuration has moved to the blockchain config. You can learn more [here](/docs/blockchain_accounts_configuration.html).\n\n## Deploying to Infura\n\nTo deploy to Infura or another endpoint, just use the blockchain `endpoint`. More details [here](/docs/blockchain_configuration.html)\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_deployment.html","comments":1,"_id":"ck5ijm3rb000w7heg1uvb25hr","content":"<p>Accounts configuration has moved to the blockchain config. You can learn more <a href=\"/docs/blockchain_accounts_configuration.html\">here</a>.</p>\n<h2 id=\"Deploying-to-Infura\"><a href=\"#Deploying-to-Infura\" class=\"headerlink\" title=\"Deploying to Infura\"></a>Deploying to Infura</h2><p>To deploy to Infura or another endpoint, just use the blockchain <code>endpoint</code>. More details <a href=\"/docs/blockchain_configuration.html\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Accounts configuration has moved to the blockchain config. You can learn more <a href=\"/docs/blockchain_accounts_configuration.html\">here</a>.</p>\n<h2 id=\"Deploying-to-Infura\"><a href=\"#Deploying-to-Infura\" class=\"headerlink\" title=\"Deploying to Infura\"></a>Deploying to Infura</h2><p>To deploy to Infura or another endpoint, just use the blockchain <code>endpoint</code>. More details <a href=\"/docs/blockchain_configuration.html\">here</a></p>\n"},{"title":"Special Imports","layout":"docs","_content":"\nDepending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we'll discuss the various ways of importing Smart Contract source code in other Smart Contract files.\n\n{% notification info 'Scope of this guide' %}\nThe following features are currently only supported for Smart Contracts written in the Solidity programming language. If you're using another language, such as Vyper, these features may not be available.\n{% endnotification %}\n\n## Importing files\n\nIf using Solidity it's possible to import other Smart Contract files inside a source file from the application's folders that are not explicitly defined in the `deploy` property of `embark.json`.\n\n```\nimport \"another_folder/another_test.sol\";\n```\n\n## Importing from `node_modules`\n\nEmbark also supports convenient imports from installed `node_modules`. Just specify the package name including the path to the Solidity file you wish to import.\n\n```\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n```\n\n## Importing from remote paths\n\nSource files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):\n\n```\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\";\nimport \"bzz:/1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63\"\n```\n\n","source":"docs/contracts_imports.md","raw":"title: Special Imports\nlayout: docs\n---\n\nDepending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we'll discuss the various ways of importing Smart Contract source code in other Smart Contract files.\n\n{% notification info 'Scope of this guide' %}\nThe following features are currently only supported for Smart Contracts written in the Solidity programming language. If you're using another language, such as Vyper, these features may not be available.\n{% endnotification %}\n\n## Importing files\n\nIf using Solidity it's possible to import other Smart Contract files inside a source file from the application's folders that are not explicitly defined in the `deploy` property of `embark.json`.\n\n```\nimport \"another_folder/another_test.sol\";\n```\n\n## Importing from `node_modules`\n\nEmbark also supports convenient imports from installed `node_modules`. Just specify the package name including the path to the Solidity file you wish to import.\n\n```\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n```\n\n## Importing from remote paths\n\nSource files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):\n\n```\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\";\nimport \"bzz:/1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63\"\n```\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_imports.html","comments":1,"_id":"ck5ijm3rc000y7hega44j5ops","content":"<p>Depending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we’ll discuss the various ways of importing Smart Contract source code in other Smart Contract files.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Scope of this guide</strong></p>\n  <p><p>The following features are currently only supported for Smart Contracts written in the Solidity programming language. If you’re using another language, such as Vyper, these features may not be available.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Importing-files\"><a href=\"#Importing-files\" class=\"headerlink\" title=\"Importing files\"></a>Importing files</h2><p>If using Solidity it’s possible to import other Smart Contract files inside a source file from the application’s folders that are not explicitly defined in the <code>deploy</code> property of <code>embark.json</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;another_folder&#x2F;another_test.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-node-modules\"><a href=\"#Importing-from-node-modules\" class=\"headerlink\" title=\"Importing from node_modules\"></a>Importing from <code>node_modules</code></h2><p>Embark also supports convenient imports from installed <code>node_modules</code>. Just specify the package name including the path to the Solidity file you wish to import.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-remote-paths\"><a href=\"#Importing-from-remote-paths\" class=\"headerlink\" title=\"Importing from remote paths\"></a>Importing from remote paths</h2><p>Source files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&quot;;</span><br><span class=\"line\">import &quot;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&quot;;</span><br><span class=\"line\">import &quot;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\">import &quot;bzz:&#x2F;1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63&quot;</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Depending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we’ll discuss the various ways of importing Smart Contract source code in other Smart Contract files.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Scope of this guide</strong></p>\n  <p><p>The following features are currently only supported for Smart Contracts written in the Solidity programming language. If you’re using another language, such as Vyper, these features may not be available.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Importing-files\"><a href=\"#Importing-files\" class=\"headerlink\" title=\"Importing files\"></a>Importing files</h2><p>If using Solidity it’s possible to import other Smart Contract files inside a source file from the application’s folders that are not explicitly defined in the <code>deploy</code> property of <code>embark.json</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;another_folder&#x2F;another_test.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-node-modules\"><a href=\"#Importing-from-node-modules\" class=\"headerlink\" title=\"Importing from node_modules\"></a>Importing from <code>node_modules</code></h2><p>Embark also supports convenient imports from installed <code>node_modules</code>. Just specify the package name including the path to the Solidity file you wish to import.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-remote-paths\"><a href=\"#Importing-from-remote-paths\" class=\"headerlink\" title=\"Importing from remote paths\"></a>Importing from remote paths</h2><p>Source files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&quot;;</span><br><span class=\"line\">import &quot;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&quot;;</span><br><span class=\"line\">import &quot;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\">import &quot;bzz:&#x2F;1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63&quot;</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Smart Contracts in JavaScript","layout":"docs","_content":"\nIn order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.\n\nIn this guide we'll take a quick look how to make use of them!\n\n## Importing and using Smart Contracts\n\nEmbark will [automatically generate artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all configured Smart Contracts in our application, making them available to an application's front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:\n\n```\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill available as JavaScript object, after artifact generation and can be imported as:\n\n```\nimport { SimpleStorage } from './embarkArtifacts/contracts';\n```\n\nNotice that the exact path to the Smart Contract source is configured using the `generationDir` property in [Embark's configuration](/docs/configuration.html#generationDir).\n\nOnce imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you've installed.\n\n```\nSimpleStorage.methods.set(100).send();\n\nSimpleStorage.methods.get().call().then(value => {\n  console.log(value);\n});\n\nSimpleStorage.methods.storedData().call().then(value => {\n  console.log(value);\n});\n```\n","source":"docs/contracts_javascript.md","raw":"title: Smart Contracts in JavaScript\nlayout: docs\n---\n\nIn order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.\n\nIn this guide we'll take a quick look how to make use of them!\n\n## Importing and using Smart Contracts\n\nEmbark will [automatically generate artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all configured Smart Contracts in our application, making them available to an application's front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:\n\n```\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill available as JavaScript object, after artifact generation and can be imported as:\n\n```\nimport { SimpleStorage } from './embarkArtifacts/contracts';\n```\n\nNotice that the exact path to the Smart Contract source is configured using the `generationDir` property in [Embark's configuration](/docs/configuration.html#generationDir).\n\nOnce imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you've installed.\n\n```\nSimpleStorage.methods.set(100).send();\n\nSimpleStorage.methods.get().call().then(value => {\n  console.log(value);\n});\n\nSimpleStorage.methods.storedData().call().then(value => {\n  console.log(value);\n});\n```\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_javascript.html","comments":1,"_id":"ck5ijm3rd000z7heggz02alrd","content":"<p>In order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.</p>\n<p>In this guide we’ll take a quick look how to make use of them!</p>\n<h2 id=\"Importing-and-using-Smart-Contracts\"><a href=\"#Importing-and-using-Smart-Contracts\" class=\"headerlink\" title=\"Importing and using Smart Contracts\"></a>Importing and using Smart Contracts</h2><p>Embark will <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">automatically generate artifacts</a> for all configured Smart Contracts in our application, making them available to an application’s front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will available as JavaScript object, after artifact generation and can be imported as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; SimpleStorage &#125; from &#39;.&#x2F;embarkArtifacts&#x2F;contracts&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the exact path to the Smart Contract source is configured using the <code>generationDir</code> property in <a href=\"/docs/configuration.html#generationDir\">Embark’s configuration</a>.</p>\n<p>Once imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you’ve installed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.get().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.</p>\n<p>In this guide we’ll take a quick look how to make use of them!</p>\n<h2 id=\"Importing-and-using-Smart-Contracts\"><a href=\"#Importing-and-using-Smart-Contracts\" class=\"headerlink\" title=\"Importing and using Smart Contracts\"></a>Importing and using Smart Contracts</h2><p>Embark will <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">automatically generate artifacts</a> for all configured Smart Contracts in our application, making them available to an application’s front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will available as JavaScript object, after artifact generation and can be imported as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; SimpleStorage &#125; from &#39;.&#x2F;embarkArtifacts&#x2F;contracts&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the exact path to the Smart Contract source is configured using the <code>generationDir</code> property in <a href=\"/docs/configuration.html#generationDir\">Embark’s configuration</a>.</p>\n<p>Once imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you’ve installed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.get().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n"},{"title":"Creating apps with Embark","layout":"docs","_content":"\nOnce Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let's take a look!\n\n## Using the `demo` command\n\nAs discussed in our [quickstart guide](/docs/quick_start.html), the fastest way to get up and running with Embark is using its `demo` command. This will scaffold a new demo application and its needed environment in a folder called `embark_demo`. The demo application lets you play with Embark's APIs through a pre-built web interface.\n\n```\n$ embark demo\n```\n\n## Creating a new app\n\nIf you prefer starting entirely from scratch, while still getting a ready to use environment, Embark's `new` command has got you covered. Similar to the `demo` command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.\n\n{% notification info 'Quick tip: Smart Contract only apps' %}\nSmart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of `new` command's `--contracts-only` option, as described [here](create_project.html#Creating-“contracts-only”-apps).\n{% endnotification %}\n\n```\n$ embark new <YourDappName>\n```\n\n## Creating apps from templates\n\nAnother possible scenario to start from is taking advantage of a template. Embark [comes with templates](/templates) for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the `--template` option and either specify a supported template name, or a Git host URL.\n\nThe following example creates a new application from [Embark's TypeScript template](https://github.com/embarklabs/embark-typescript-template):\n\n```\n$ embark new <YourDAppName> --template typescript\n```\n\nTo learn more about supported templates, head over to our [templates](/templates) or look out for `embark-[template_name]-template` [repositories](https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=).\n\nTemplates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:\n\n```\n$ embark new <YourDAppName> --template https://github.com/embarklabs/embark-vue-template\n```\n\nIn fact, in case of GitHub, the same can be done with the username/repository shortcut:\n\n```\n$ embark new <YourDAppName> --template embarklabs/embark-vue-template\n```\n\nIt is even possible to specify the branch by appending a `#` and the branch name you're interested in:\n\n```\n$ embark new <YourDAppName> --template status-im/dappcon-workshop-dapp#start-here\n```\n\n## Creating \"contracts-only\" apps\n\nSometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the `--contracts-only` option.\n\nThe following command will create a project with all Embark services disabled except the blockchain service.\n\n```\n$ embark new <YourDAppName> --contracts-only\n```\n\nThis will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps [here](structure.html#Simple-template-structure).\n\n{% notification info 'A note on --simple' %}\nIn earlier versions of Embark the same could be achieved using the `--simple` option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n","source":"docs/create_project.md","raw":"title: Creating apps with Embark\nlayout: docs\n---\n\nOnce Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let's take a look!\n\n## Using the `demo` command\n\nAs discussed in our [quickstart guide](/docs/quick_start.html), the fastest way to get up and running with Embark is using its `demo` command. This will scaffold a new demo application and its needed environment in a folder called `embark_demo`. The demo application lets you play with Embark's APIs through a pre-built web interface.\n\n```\n$ embark demo\n```\n\n## Creating a new app\n\nIf you prefer starting entirely from scratch, while still getting a ready to use environment, Embark's `new` command has got you covered. Similar to the `demo` command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.\n\n{% notification info 'Quick tip: Smart Contract only apps' %}\nSmart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of `new` command's `--contracts-only` option, as described [here](create_project.html#Creating-“contracts-only”-apps).\n{% endnotification %}\n\n```\n$ embark new <YourDappName>\n```\n\n## Creating apps from templates\n\nAnother possible scenario to start from is taking advantage of a template. Embark [comes with templates](/templates) for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the `--template` option and either specify a supported template name, or a Git host URL.\n\nThe following example creates a new application from [Embark's TypeScript template](https://github.com/embarklabs/embark-typescript-template):\n\n```\n$ embark new <YourDAppName> --template typescript\n```\n\nTo learn more about supported templates, head over to our [templates](/templates) or look out for `embark-[template_name]-template` [repositories](https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=).\n\nTemplates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:\n\n```\n$ embark new <YourDAppName> --template https://github.com/embarklabs/embark-vue-template\n```\n\nIn fact, in case of GitHub, the same can be done with the username/repository shortcut:\n\n```\n$ embark new <YourDAppName> --template embarklabs/embark-vue-template\n```\n\nIt is even possible to specify the branch by appending a `#` and the branch name you're interested in:\n\n```\n$ embark new <YourDAppName> --template status-im/dappcon-workshop-dapp#start-here\n```\n\n## Creating \"contracts-only\" apps\n\nSometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the `--contracts-only` option.\n\nThe following command will create a project with all Embark services disabled except the blockchain service.\n\n```\n$ embark new <YourDAppName> --contracts-only\n```\n\nThis will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps [here](structure.html#Simple-template-structure).\n\n{% notification info 'A note on --simple' %}\nIn earlier versions of Embark the same could be achieved using the `--simple` option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n","date":"2020-01-19T20:56:53.009Z","updated":"2020-01-19T20:56:53.009Z","path":"docs/create_project.html","_id":"ck5ijm3rd00107heggjejgqmv","comments":1,"content":"<p>Once Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let’s take a look!</p>\n<h2 id=\"Using-the-demo-command\"><a href=\"#Using-the-demo-command\" class=\"headerlink\" title=\"Using the demo command\"></a>Using the <code>demo</code> command</h2><p>As discussed in our <a href=\"/docs/quick_start.html\">quickstart guide</a>, the fastest way to get up and running with Embark is using its <code>demo</code> command. This will scaffold a new demo application and its needed environment in a folder called <code>embark_demo</code>. The demo application lets you play with Embark’s APIs through a pre-built web interface.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-new-app\"><a href=\"#Creating-a-new-app\" class=\"headerlink\" title=\"Creating a new app\"></a>Creating a new app</h2><p>If you prefer starting entirely from scratch, while still getting a ready to use environment, Embark’s <code>new</code> command has got you covered. Similar to the <code>demo</code> command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick tip: Smart Contract only apps</strong></p>\n  <p><p>Smart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of <code>new</code> command’s <code>--contracts-only</code> option, as described <a href=\"create_project.html#Creating-“contracts-only”-apps\">here</a>.</p>\n</p>\n</div> \n\n\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDappName&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-apps-from-templates\"><a href=\"#Creating-apps-from-templates\" class=\"headerlink\" title=\"Creating apps from templates\"></a>Creating apps from templates</h2><p>Another possible scenario to start from is taking advantage of a template. Embark <a href=\"/templates\">comes with templates</a> for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the <code>--template</code> option and either specify a supported template name, or a Git host URL.</p>\n<p>The following example creates a new application from <a href=\"https://github.com/embarklabs/embark-typescript-template\" target=\"_blank\" rel=\"noopener\">Embark’s TypeScript template</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>To learn more about supported templates, head over to our <a href=\"/templates\">templates</a> or look out for <code>embark-[template_name]-template</code> <a href=\"https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=\" target=\"_blank\" rel=\"noopener\">repositories</a>.</p>\n<p>Templates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template https:&#x2F;&#x2F;github.com&#x2F;embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>In fact, in case of GitHub, the same can be done with the username/repository shortcut:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>It is even possible to specify the branch by appending a <code>#</code> and the branch name you’re interested in:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template status-im&#x2F;dappcon-workshop-dapp#start-here</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-“contracts-only”-apps\"><a href=\"#Creating-“contracts-only”-apps\" class=\"headerlink\" title=\"Creating “contracts-only” apps\"></a>Creating “contracts-only” apps</h2><p>Sometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the <code>--contracts-only</code> option.</p>\n<p>The following command will create a project with all Embark services disabled except the blockchain service.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --contracts-only</span><br></pre></td></tr></table></figure>\n\n<p>This will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps <a href=\"structure.html#Simple-template-structure\">here</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on --simple</strong></p>\n  <p><p>In earlier versions of Embark the same could be achieved using the <code>--simple</code> option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Once Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let’s take a look!</p>\n<h2 id=\"Using-the-demo-command\"><a href=\"#Using-the-demo-command\" class=\"headerlink\" title=\"Using the demo command\"></a>Using the <code>demo</code> command</h2><p>As discussed in our <a href=\"/docs/quick_start.html\">quickstart guide</a>, the fastest way to get up and running with Embark is using its <code>demo</code> command. This will scaffold a new demo application and its needed environment in a folder called <code>embark_demo</code>. The demo application lets you play with Embark’s APIs through a pre-built web interface.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-new-app\"><a href=\"#Creating-a-new-app\" class=\"headerlink\" title=\"Creating a new app\"></a>Creating a new app</h2><p>If you prefer starting entirely from scratch, while still getting a ready to use environment, Embark’s <code>new</code> command has got you covered. Similar to the <code>demo</code> command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick tip: Smart Contract only apps</strong></p>\n  <p><p>Smart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of <code>new</code> command’s <code>--contracts-only</code> option, as described <a href=\"create_project.html#Creating-“contracts-only”-apps\">here</a>.</p>\n</p>\n</div> \n\n\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDappName&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-apps-from-templates\"><a href=\"#Creating-apps-from-templates\" class=\"headerlink\" title=\"Creating apps from templates\"></a>Creating apps from templates</h2><p>Another possible scenario to start from is taking advantage of a template. Embark <a href=\"/templates\">comes with templates</a> for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the <code>--template</code> option and either specify a supported template name, or a Git host URL.</p>\n<p>The following example creates a new application from <a href=\"https://github.com/embarklabs/embark-typescript-template\" target=\"_blank\" rel=\"noopener\">Embark’s TypeScript template</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>To learn more about supported templates, head over to our <a href=\"/templates\">templates</a> or look out for <code>embark-[template_name]-template</code> <a href=\"https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=\" target=\"_blank\" rel=\"noopener\">repositories</a>.</p>\n<p>Templates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template https:&#x2F;&#x2F;github.com&#x2F;embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>In fact, in case of GitHub, the same can be done with the username/repository shortcut:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>It is even possible to specify the branch by appending a <code>#</code> and the branch name you’re interested in:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template status-im&#x2F;dappcon-workshop-dapp#start-here</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-“contracts-only”-apps\"><a href=\"#Creating-“contracts-only”-apps\" class=\"headerlink\" title=\"Creating “contracts-only” apps\"></a>Creating “contracts-only” apps</h2><p>Sometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the <code>--contracts-only</code> option.</p>\n<p>The following command will create a project with all Embark services disabled except the blockchain service.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --contracts-only</span><br></pre></td></tr></table></figure>\n\n<p>This will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps <a href=\"structure.html#Simple-template-structure\">here</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on --simple</strong></p>\n  <p><p>In earlier versions of Embark the same could be achieved using the <code>--simple</code> option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n"},{"title":"Creating Plugins","layout":"docs","_content":"\nIf you can't [find a plugin](/plugins) that fulfills your needs, it's probably a good time to think about creating your own. In this guide we'll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we'll dive into the available [Plugin APIs](/docs/plugin_reference.html).\n\n## Creating a plugin project\n\nA plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:\n\n```\n$ mkdir yourpluginname\n$ cd yourpluginname\n$ npm init\n```\n\nOnce that is done we can create an `index.js` file that contains the following code:\n\n```\nmodule.exports = function(embark) {\n  // plugin logic goes here\n}\n```\n\nThe `embark` object provides plenty of APIs to extend different functionalities of Embark, which can be found in the [Plugin Api Reference](plugin_reference.html). \n\n## Usecase examples\n\nSince the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:\n\n* Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with `addContractFile()`\n* Adding a Smart Contract configuration using `registerContractConfiguration()` (goes well with `addContractFile()`)\n* Adding a hook that's called before a Smart Contract's binary will be deployed using `beforeDeploy()`\n* Configure a custom provider for web3 initialization with `registerClientWeb3Provider()`\n* Create your own custom Smart Contract wrapper logic using `registerContractsGeneration()`\n* Adding a new command to Embark's interactive console using `registerConsoleCommand()`\n* Adding support for other compilers such as Viper, LLL, etc. using `embark.registerCompiler()`\n* Executing certain actions when Smart Contracts are deployed with `embark.events.on()`\n* Registering a service in Embark  - `registerServiceCheck()`\n\n","source":"docs/creating_plugins.md","raw":"title: Creating Plugins\nlayout: docs\n---\n\nIf you can't [find a plugin](/plugins) that fulfills your needs, it's probably a good time to think about creating your own. In this guide we'll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we'll dive into the available [Plugin APIs](/docs/plugin_reference.html).\n\n## Creating a plugin project\n\nA plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:\n\n```\n$ mkdir yourpluginname\n$ cd yourpluginname\n$ npm init\n```\n\nOnce that is done we can create an `index.js` file that contains the following code:\n\n```\nmodule.exports = function(embark) {\n  // plugin logic goes here\n}\n```\n\nThe `embark` object provides plenty of APIs to extend different functionalities of Embark, which can be found in the [Plugin Api Reference](plugin_reference.html). \n\n## Usecase examples\n\nSince the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:\n\n* Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with `addContractFile()`\n* Adding a Smart Contract configuration using `registerContractConfiguration()` (goes well with `addContractFile()`)\n* Adding a hook that's called before a Smart Contract's binary will be deployed using `beforeDeploy()`\n* Configure a custom provider for web3 initialization with `registerClientWeb3Provider()`\n* Create your own custom Smart Contract wrapper logic using `registerContractsGeneration()`\n* Adding a new command to Embark's interactive console using `registerConsoleCommand()`\n* Adding support for other compilers such as Viper, LLL, etc. using `embark.registerCompiler()`\n* Executing certain actions when Smart Contracts are deployed with `embark.events.on()`\n* Registering a service in Embark  - `registerServiceCheck()`\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/creating_plugins.html","comments":1,"_id":"ck5ijm3rh00117hegf0x15hmt","content":"<p>If you can’t <a href=\"/plugins\">find a plugin</a> that fulfills your needs, it’s probably a good time to think about creating your own. In this guide we’ll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we’ll dive into the available <a href=\"/docs/plugin_reference.html\">Plugin APIs</a>.</p>\n<h2 id=\"Creating-a-plugin-project\"><a href=\"#Creating-a-plugin-project\" class=\"headerlink\" title=\"Creating a plugin project\"></a>Creating a plugin project</h2><p>A plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir yourpluginname</span><br><span class=\"line\">$ cd yourpluginname</span><br><span class=\"line\">$ npm init</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can create an <code>index.js</code> file that contains the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; plugin logic goes here</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The <code>embark</code> object provides plenty of APIs to extend different functionalities of Embark, which can be found in the <a href=\"plugin_reference.html\">Plugin Api Reference</a>. </p>\n<h2 id=\"Usecase-examples\"><a href=\"#Usecase-examples\" class=\"headerlink\" title=\"Usecase examples\"></a>Usecase examples</h2><p>Since the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:</p>\n<ul>\n<li>Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with <code>addContractFile()</code></li>\n<li>Adding a Smart Contract configuration using <code>registerContractConfiguration()</code> (goes well with <code>addContractFile()</code>)</li>\n<li>Adding a hook that’s called before a Smart Contract’s binary will be deployed using <code>beforeDeploy()</code></li>\n<li>Configure a custom provider for web3 initialization with <code>registerClientWeb3Provider()</code></li>\n<li>Create your own custom Smart Contract wrapper logic using <code>registerContractsGeneration()</code></li>\n<li>Adding a new command to Embark’s interactive console using <code>registerConsoleCommand()</code></li>\n<li>Adding support for other compilers such as Viper, LLL, etc. using <code>embark.registerCompiler()</code></li>\n<li>Executing certain actions when Smart Contracts are deployed with <code>embark.events.on()</code></li>\n<li>Registering a service in Embark  - <code>registerServiceCheck()</code></li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>If you can’t <a href=\"/plugins\">find a plugin</a> that fulfills your needs, it’s probably a good time to think about creating your own. In this guide we’ll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we’ll dive into the available <a href=\"/docs/plugin_reference.html\">Plugin APIs</a>.</p>\n<h2 id=\"Creating-a-plugin-project\"><a href=\"#Creating-a-plugin-project\" class=\"headerlink\" title=\"Creating a plugin project\"></a>Creating a plugin project</h2><p>A plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir yourpluginname</span><br><span class=\"line\">$ cd yourpluginname</span><br><span class=\"line\">$ npm init</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can create an <code>index.js</code> file that contains the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; plugin logic goes here</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The <code>embark</code> object provides plenty of APIs to extend different functionalities of Embark, which can be found in the <a href=\"plugin_reference.html\">Plugin Api Reference</a>. </p>\n<h2 id=\"Usecase-examples\"><a href=\"#Usecase-examples\" class=\"headerlink\" title=\"Usecase examples\"></a>Usecase examples</h2><p>Since the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:</p>\n<ul>\n<li>Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with <code>addContractFile()</code></li>\n<li>Adding a Smart Contract configuration using <code>registerContractConfiguration()</code> (goes well with <code>addContractFile()</code>)</li>\n<li>Adding a hook that’s called before a Smart Contract’s binary will be deployed using <code>beforeDeploy()</code></li>\n<li>Configure a custom provider for web3 initialization with <code>registerClientWeb3Provider()</code></li>\n<li>Create your own custom Smart Contract wrapper logic using <code>registerContractsGeneration()</code></li>\n<li>Adding a new command to Embark’s interactive console using <code>registerConsoleCommand()</code></li>\n<li>Adding support for other compilers such as Viper, LLL, etc. using <code>embark.registerCompiler()</code></li>\n<li>Executing certain actions when Smart Contracts are deployed with <code>embark.events.on()</code></li>\n<li>Registering a service in Embark  - <code>registerServiceCheck()</code></li>\n</ul>\n"},{"title":"Using the dashboard","layout":"docs","_content":"\nEmbark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we'll take a closer look at the dashboard and its features.\n\n## Overview\n\nEmbark spins up the dashboard view automatically for us, whenever we run `embark run` inside an Embark project. Here's what it looks like:\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nThe dashboard is separated into different sections, each with their own responsibility. The sections are:\n\n- **Contracts** - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.\n\n- **Environment** - This is the name of the [environment](environments.html) we're running Embark in at the moment. If we don't specify an environment when running `embark run`, Embark will default to `development`.\n\n- **Status** - As mentioned, Embark watches for changes in our application's source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:\n\n  - **Compiling** - Compiles application's Smart Contracts\n  - **Building** - Builds application's front-end\n  - **Ready** - Ready and IDLE\n\n- **Available Services** - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.\n\n- **Logs and Console** - While the logs section simply prints out all of Embark's output, the console can be used to either interact with our application's Smart Contracts or Embark itself. Use the `help` command to get a list of all available commands supported by Embark's console, or head over to our guide on [Using the the console](/docs/using_the_console.html) to learn more.\n\n## Running without a dashboard\n\nEmbark can be run without spinning up the dashboard view using the `--nodashboard` option. Head over to our guide on [running apps](running_apps.html#Running-an-app-without-the-dashboard) for more information.\n\n","source":"docs/dashboard.md","raw":"title: Using the dashboard\nlayout: docs\n---\n\nEmbark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we'll take a closer look at the dashboard and its features.\n\n## Overview\n\nEmbark spins up the dashboard view automatically for us, whenever we run `embark run` inside an Embark project. Here's what it looks like:\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nThe dashboard is separated into different sections, each with their own responsibility. The sections are:\n\n- **Contracts** - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.\n\n- **Environment** - This is the name of the [environment](environments.html) we're running Embark in at the moment. If we don't specify an environment when running `embark run`, Embark will default to `development`.\n\n- **Status** - As mentioned, Embark watches for changes in our application's source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:\n\n  - **Compiling** - Compiles application's Smart Contracts\n  - **Building** - Builds application's front-end\n  - **Ready** - Ready and IDLE\n\n- **Available Services** - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.\n\n- **Logs and Console** - While the logs section simply prints out all of Embark's output, the console can be used to either interact with our application's Smart Contracts or Embark itself. Use the `help` command to get a list of all available commands supported by Embark's console, or head over to our guide on [Using the the console](/docs/using_the_console.html) to learn more.\n\n## Running without a dashboard\n\nEmbark can be run without spinning up the dashboard view using the `--nodashboard` option. Head over to our guide on [running apps](running_apps.html#Running-an-app-without-the-dashboard) for more information.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/dashboard.html","comments":1,"_id":"ck5ijm3ri00127heg8epn5ngz","content":"<p>Embark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we’ll take a closer look at the dashboard and its features.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Embark spins up the dashboard view automatically for us, whenever we run <code>embark run</code> inside an Embark project. Here’s what it looks like:</p>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<p>The dashboard is separated into different sections, each with their own responsibility. The sections are:</p>\n<ul>\n<li><p><strong>Contracts</strong> - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.</p>\n</li>\n<li><p><strong>Environment</strong> - This is the name of the <a href=\"environments.html\">environment</a> we’re running Embark in at the moment. If we don’t specify an environment when running <code>embark run</code>, Embark will default to <code>development</code>.</p>\n</li>\n<li><p><strong>Status</strong> - As mentioned, Embark watches for changes in our application’s source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:</p>\n<ul>\n<li><strong>Compiling</strong> - Compiles application’s Smart Contracts</li>\n<li><strong>Building</strong> - Builds application’s front-end</li>\n<li><strong>Ready</strong> - Ready and IDLE</li>\n</ul>\n</li>\n<li><p><strong>Available Services</strong> - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.</p>\n</li>\n<li><p><strong>Logs and Console</strong> - While the logs section simply prints out all of Embark’s output, the console can be used to either interact with our application’s Smart Contracts or Embark itself. Use the <code>help</code> command to get a list of all available commands supported by Embark’s console, or head over to our guide on <a href=\"/docs/using_the_console.html\">Using the the console</a> to learn more.</p>\n</li>\n</ul>\n<h2 id=\"Running-without-a-dashboard\"><a href=\"#Running-without-a-dashboard\" class=\"headerlink\" title=\"Running without a dashboard\"></a>Running without a dashboard</h2><p>Embark can be run without spinning up the dashboard view using the <code>--nodashboard</code> option. Head over to our guide on <a href=\"running_apps.html#Running-an-app-without-the-dashboard\">running apps</a> for more information.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we’ll take a closer look at the dashboard and its features.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Embark spins up the dashboard view automatically for us, whenever we run <code>embark run</code> inside an Embark project. Here’s what it looks like:</p>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<p>The dashboard is separated into different sections, each with their own responsibility. The sections are:</p>\n<ul>\n<li><p><strong>Contracts</strong> - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.</p>\n</li>\n<li><p><strong>Environment</strong> - This is the name of the <a href=\"environments.html\">environment</a> we’re running Embark in at the moment. If we don’t specify an environment when running <code>embark run</code>, Embark will default to <code>development</code>.</p>\n</li>\n<li><p><strong>Status</strong> - As mentioned, Embark watches for changes in our application’s source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:</p>\n<ul>\n<li><strong>Compiling</strong> - Compiles application’s Smart Contracts</li>\n<li><strong>Building</strong> - Builds application’s front-end</li>\n<li><strong>Ready</strong> - Ready and IDLE</li>\n</ul>\n</li>\n<li><p><strong>Available Services</strong> - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.</p>\n</li>\n<li><p><strong>Logs and Console</strong> - While the logs section simply prints out all of Embark’s output, the console can be used to either interact with our application’s Smart Contracts or Embark itself. Use the <code>help</code> command to get a list of all available commands supported by Embark’s console, or head over to our guide on <a href=\"/docs/using_the_console.html\">Using the the console</a> to learn more.</p>\n</li>\n</ul>\n<h2 id=\"Running-without-a-dashboard\"><a href=\"#Running-without-a-dashboard\" class=\"headerlink\" title=\"Running without a dashboard\"></a>Running without a dashboard</h2><p>Embark can be run without spinning up the dashboard view using the <code>--nodashboard</code> option. Head over to our guide on <a href=\"running_apps.html#Running-an-app-without-the-dashboard\">running apps</a> for more information.</p>\n"},{"title":"Embark CLI Commands","layout":"docs","_content":"\nThis is the Embark CLI command reference.\n\n## new\n\n```\n$ embark new dappName\n```\n\nCreates a new empty DApp project. If no `dappName` is provided, Embark will ask for the dappName.\n\nOption | Description\n--- | ---\n`--contracts-only` | create a barebones project meant only for contract development\n`--simple` | an alias for `--contracts-only`\n`--template` | download a template using a known name or a git host URL\n\nThe `--template` option supports several URL styles and shortcuts for git hosts:\n\n```\ngit@github.com:ghuser/repo_name\nhttps://github.com/ghuser/repo_name\ngithub:ghuser/repo_name\nghuser/repo_name\n```\n\nIt's possible to append a branch name to any of the above, for example:\n\n```\nhttps://github.com/ghuser/repo_name#branch_name\nghuser/repo_name#branch_name\n```\n\nBitbucket and GitLab URLs and shortcuts are also supported, for example:\n\n```\nbitbucket:bbuser/repo_name#branch_name\ngitlab:gluser/repo_name#branch_name\n```\n\nA short name can be used for templates maintained in the Embark GitHub organization, for example:\n\n```\n$ embark new --template typescript\n```\n\nPlease see our list of [officially supported templates](/templates/).\n\n## demo\n\n```\n$ embark demo\n```\n\nGenerates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.\n\n## build\n\n```\n$ embark build [environment]\n```\n\nDeploys and Builds the DApp at dist/. If no `environment` is provider embark will use `development` by default.\n\n## run\n\n```\n$ embark run [environment]\n```\n\nDeploys and Builds the DApp at `dist/`. By default will launch a dashboard and start a dev server at `http://localhost:8000/`. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the dev webserver (default: 8000)\n`-b`, `--host` | `host` to run the dev webserver (default: localhost)\n`--noserver` | disable the development webserver\n`--nodashboard` | simple mode, disables the dashboard\n`--nobrowser` | prevent the development webserver from automatically opening a web browser\n`--no-color` | no colors in case it's needed for compatbility purposes\n`--logfile` | `filename` to output logs (default: none)\n\n## eject-build-config\n\n```\n$ embark eject-build-config\n```\n\nCopies Embark's default `webpack.config.js` file into your DApp so that you can customize it. If a file named `webpack.config.js` is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.\n\n## blockchain\n\n```\n$ embark blockchain [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain node. If no `environment` is provider embark will use `development` by default.\n\nIf you want, you can skip the step of running `embark blockchain`, as `embark run`, `build` and `upload` now all start a blockchain node in a separate process if there is not one already started using the same configurations.\n\n## simulator\n\n```\n$ embark simulator [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain simulator. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the rpc simulator (default: 8545)\n`-h`, `--host` | `host` to run the rpc simulator (default: localhost)\n`-a`, `--accounts` | `num` of accounts to start the simulator (default: 10)\n`-e`, `--defaultBalanceEther` | `balance` in ether to assign each test account (default: 100)\n`-l`, `--gasLimit` | custom `gasLimit` (default: 8000000)\n\n## test\n\n```\n$ embark test [file]\n```\n\nRuns Tests. If `file` is not specified then it will run all the tests inside the `test/` directory.\n\nOption | Description\n--- | ---\n`-n`, `--node` | node for running the tests (default: vm)\n`-d`, `--gasDetails` | print the gas cost for each contract deployment when running the tests\n`-c`, `--coverage` | generate a coverage report after running the tests (vm only)\n\nThe `--node` option supports several values:\n\nValue | Description\n--- | ---\n`vm` | start and use an Ethereum simulator (ganache)\n`embark` | use the node of a running embark process\n`<endpoint>` | connect to and use the specified node\n\nExample of endpoint usage: `embark test --node ws://localhost:8556`\n\n## reset\n\n```\n$ embark reset\n```\n\nResets embarks state on this dapp including clearing cache.\n\n## upload\n\n```\n$ embark upload [platform] [environment]\n```\n\nUploads the DApp to a decentralized storage such as IPFS. `platform` can be `ipfs` or `swarm` or another parameter if supported by a plugin. If no `environment` is provider embark will use `development` by default.\n\n## graph\n\n```\n$ embark graph\n```\n\nGenerates documentation based on the smart contracts configured\n\n## version\n\n```\n$ embark version\n```\n\nDisplays version information.\n","source":"docs/embark_commands.md","raw":"title: Embark CLI Commands\nlayout: docs\n---\n\nThis is the Embark CLI command reference.\n\n## new\n\n```\n$ embark new dappName\n```\n\nCreates a new empty DApp project. If no `dappName` is provided, Embark will ask for the dappName.\n\nOption | Description\n--- | ---\n`--contracts-only` | create a barebones project meant only for contract development\n`--simple` | an alias for `--contracts-only`\n`--template` | download a template using a known name or a git host URL\n\nThe `--template` option supports several URL styles and shortcuts for git hosts:\n\n```\ngit@github.com:ghuser/repo_name\nhttps://github.com/ghuser/repo_name\ngithub:ghuser/repo_name\nghuser/repo_name\n```\n\nIt's possible to append a branch name to any of the above, for example:\n\n```\nhttps://github.com/ghuser/repo_name#branch_name\nghuser/repo_name#branch_name\n```\n\nBitbucket and GitLab URLs and shortcuts are also supported, for example:\n\n```\nbitbucket:bbuser/repo_name#branch_name\ngitlab:gluser/repo_name#branch_name\n```\n\nA short name can be used for templates maintained in the Embark GitHub organization, for example:\n\n```\n$ embark new --template typescript\n```\n\nPlease see our list of [officially supported templates](/templates/).\n\n## demo\n\n```\n$ embark demo\n```\n\nGenerates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.\n\n## build\n\n```\n$ embark build [environment]\n```\n\nDeploys and Builds the DApp at dist/. If no `environment` is provider embark will use `development` by default.\n\n## run\n\n```\n$ embark run [environment]\n```\n\nDeploys and Builds the DApp at `dist/`. By default will launch a dashboard and start a dev server at `http://localhost:8000/`. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the dev webserver (default: 8000)\n`-b`, `--host` | `host` to run the dev webserver (default: localhost)\n`--noserver` | disable the development webserver\n`--nodashboard` | simple mode, disables the dashboard\n`--nobrowser` | prevent the development webserver from automatically opening a web browser\n`--no-color` | no colors in case it's needed for compatbility purposes\n`--logfile` | `filename` to output logs (default: none)\n\n## eject-build-config\n\n```\n$ embark eject-build-config\n```\n\nCopies Embark's default `webpack.config.js` file into your DApp so that you can customize it. If a file named `webpack.config.js` is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.\n\n## blockchain\n\n```\n$ embark blockchain [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain node. If no `environment` is provider embark will use `development` by default.\n\nIf you want, you can skip the step of running `embark blockchain`, as `embark run`, `build` and `upload` now all start a blockchain node in a separate process if there is not one already started using the same configurations.\n\n## simulator\n\n```\n$ embark simulator [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain simulator. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the rpc simulator (default: 8545)\n`-h`, `--host` | `host` to run the rpc simulator (default: localhost)\n`-a`, `--accounts` | `num` of accounts to start the simulator (default: 10)\n`-e`, `--defaultBalanceEther` | `balance` in ether to assign each test account (default: 100)\n`-l`, `--gasLimit` | custom `gasLimit` (default: 8000000)\n\n## test\n\n```\n$ embark test [file]\n```\n\nRuns Tests. If `file` is not specified then it will run all the tests inside the `test/` directory.\n\nOption | Description\n--- | ---\n`-n`, `--node` | node for running the tests (default: vm)\n`-d`, `--gasDetails` | print the gas cost for each contract deployment when running the tests\n`-c`, `--coverage` | generate a coverage report after running the tests (vm only)\n\nThe `--node` option supports several values:\n\nValue | Description\n--- | ---\n`vm` | start and use an Ethereum simulator (ganache)\n`embark` | use the node of a running embark process\n`<endpoint>` | connect to and use the specified node\n\nExample of endpoint usage: `embark test --node ws://localhost:8556`\n\n## reset\n\n```\n$ embark reset\n```\n\nResets embarks state on this dapp including clearing cache.\n\n## upload\n\n```\n$ embark upload [platform] [environment]\n```\n\nUploads the DApp to a decentralized storage such as IPFS. `platform` can be `ipfs` or `swarm` or another parameter if supported by a plugin. If no `environment` is provider embark will use `development` by default.\n\n## graph\n\n```\n$ embark graph\n```\n\nGenerates documentation based on the smart contracts configured\n\n## version\n\n```\n$ embark version\n```\n\nDisplays version information.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/embark_commands.html","comments":1,"_id":"ck5ijm3ri00137heg9p19hso3","content":"<p>This is the Embark CLI command reference.</p>\n<h2 id=\"new\"><a href=\"#new\" class=\"headerlink\" title=\"new\"></a>new</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dappName</span><br></pre></td></tr></table></figure>\n\n<p>Creates a new empty DApp project. If no <code>dappName</code> is provided, Embark will ask for the dappName.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>--contracts-only</code></td>\n<td>create a barebones project meant only for contract development</td>\n</tr>\n<tr>\n<td><code>--simple</code></td>\n<td>an alias for <code>--contracts-only</code></td>\n</tr>\n<tr>\n<td><code>--template</code></td>\n<td>download a template using a known name or a git host URL</td>\n</tr>\n</tbody></table>\n<p>The <code>--template</code> option supports several URL styles and shortcuts for git hosts:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git@github.com:ghuser&#x2F;repo_name</span><br><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name</span><br><span class=\"line\">github:ghuser&#x2F;repo_name</span><br><span class=\"line\">ghuser&#x2F;repo_name</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to append a branch name to any of the above, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">ghuser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>Bitbucket and GitLab URLs and shortcuts are also supported, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">bitbucket:bbuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">gitlab:gluser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>A short name can be used for templates maintained in the Embark GitHub organization, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>Please see our list of <a href=\"/templates/\">officially supported templates</a>.</p>\n<h2 id=\"demo\"><a href=\"#demo\" class=\"headerlink\" title=\"demo\"></a>demo</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Generates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.</p>\n<h2 id=\"build\"><a href=\"#build\" class=\"headerlink\" title=\"build\"></a>build</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at dist/. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"run\"><a href=\"#run\" class=\"headerlink\" title=\"run\"></a>run</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at <code>dist/</code>. By default will launch a dashboard and start a dev server at <code>http://localhost:8000/</code>. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the dev webserver (default: 8000)</td>\n</tr>\n<tr>\n<td><code>-b</code>, <code>--host</code></td>\n<td><code>host</code> to run the dev webserver (default: localhost)</td>\n</tr>\n<tr>\n<td><code>--noserver</code></td>\n<td>disable the development webserver</td>\n</tr>\n<tr>\n<td><code>--nodashboard</code></td>\n<td>simple mode, disables the dashboard</td>\n</tr>\n<tr>\n<td><code>--nobrowser</code></td>\n<td>prevent the development webserver from automatically opening a web browser</td>\n</tr>\n<tr>\n<td><code>--no-color</code></td>\n<td>no colors in case it’s needed for compatbility purposes</td>\n</tr>\n<tr>\n<td><code>--logfile</code></td>\n<td><code>filename</code> to output logs (default: none)</td>\n</tr>\n</tbody></table>\n<h2 id=\"eject-build-config\"><a href=\"#eject-build-config\" class=\"headerlink\" title=\"eject-build-config\"></a>eject-build-config</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<p>Copies Embark’s default <code>webpack.config.js</code> file into your DApp so that you can customize it. If a file named <code>webpack.config.js</code> is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.</p>\n<h2 id=\"blockchain\"><a href=\"#blockchain\" class=\"headerlink\" title=\"blockchain\"></a>blockchain</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain node. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<p>If you want, you can skip the step of running <code>embark blockchain</code>, as <code>embark run</code>, <code>build</code> and <code>upload</code> now all start a blockchain node in a separate process if there is not one already started using the same configurations.</p>\n<h2 id=\"simulator\"><a href=\"#simulator\" class=\"headerlink\" title=\"simulator\"></a>simulator</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain simulator. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the rpc simulator (default: 8545)</td>\n</tr>\n<tr>\n<td><code>-h</code>, <code>--host</code></td>\n<td><code>host</code> to run the rpc simulator (default: localhost)</td>\n</tr>\n<tr>\n<td><code>-a</code>, <code>--accounts</code></td>\n<td><code>num</code> of accounts to start the simulator (default: 10)</td>\n</tr>\n<tr>\n<td><code>-e</code>, <code>--defaultBalanceEther</code></td>\n<td><code>balance</code> in ether to assign each test account (default: 100)</td>\n</tr>\n<tr>\n<td><code>-l</code>, <code>--gasLimit</code></td>\n<td>custom <code>gasLimit</code> (default: 8000000)</td>\n</tr>\n</tbody></table>\n<h2 id=\"test\"><a href=\"#test\" class=\"headerlink\" title=\"test\"></a>test</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test [file]</span><br></pre></td></tr></table></figure>\n\n<p>Runs Tests. If <code>file</code> is not specified then it will run all the tests inside the <code>test/</code> directory.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-n</code>, <code>--node</code></td>\n<td>node for running the tests (default: vm)</td>\n</tr>\n<tr>\n<td><code>-d</code>, <code>--gasDetails</code></td>\n<td>print the gas cost for each contract deployment when running the tests</td>\n</tr>\n<tr>\n<td><code>-c</code>, <code>--coverage</code></td>\n<td>generate a coverage report after running the tests (vm only)</td>\n</tr>\n</tbody></table>\n<p>The <code>--node</code> option supports several values:</p>\n<table>\n<thead>\n<tr>\n<th>Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>vm</code></td>\n<td>start and use an Ethereum simulator (ganache)</td>\n</tr>\n<tr>\n<td><code>embark</code></td>\n<td>use the node of a running embark process</td>\n</tr>\n<tr>\n<td><code>&lt;endpoint&gt;</code></td>\n<td>connect to and use the specified node</td>\n</tr>\n</tbody></table>\n<p>Example of endpoint usage: <code>embark test --node ws://localhost:8556</code></p>\n<h2 id=\"reset\"><a href=\"#reset\" class=\"headerlink\" title=\"reset\"></a>reset</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>Resets embarks state on this dapp including clearing cache.</p>\n<h2 id=\"upload\"><a href=\"#upload\" class=\"headerlink\" title=\"upload\"></a>upload</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload [platform] [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Uploads the DApp to a decentralized storage such as IPFS. <code>platform</code> can be <code>ipfs</code> or <code>swarm</code> or another parameter if supported by a plugin. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"graph\"><a href=\"#graph\" class=\"headerlink\" title=\"graph\"></a>graph</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark graph</span><br></pre></td></tr></table></figure>\n\n<p>Generates documentation based on the smart contracts configured</p>\n<h2 id=\"version\"><a href=\"#version\" class=\"headerlink\" title=\"version\"></a>version</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark version</span><br></pre></td></tr></table></figure>\n\n<p>Displays version information.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>This is the Embark CLI command reference.</p>\n<h2 id=\"new\"><a href=\"#new\" class=\"headerlink\" title=\"new\"></a>new</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dappName</span><br></pre></td></tr></table></figure>\n\n<p>Creates a new empty DApp project. If no <code>dappName</code> is provided, Embark will ask for the dappName.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>--contracts-only</code></td>\n<td>create a barebones project meant only for contract development</td>\n</tr>\n<tr>\n<td><code>--simple</code></td>\n<td>an alias for <code>--contracts-only</code></td>\n</tr>\n<tr>\n<td><code>--template</code></td>\n<td>download a template using a known name or a git host URL</td>\n</tr>\n</tbody></table>\n<p>The <code>--template</code> option supports several URL styles and shortcuts for git hosts:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git@github.com:ghuser&#x2F;repo_name</span><br><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name</span><br><span class=\"line\">github:ghuser&#x2F;repo_name</span><br><span class=\"line\">ghuser&#x2F;repo_name</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to append a branch name to any of the above, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">ghuser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>Bitbucket and GitLab URLs and shortcuts are also supported, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">bitbucket:bbuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">gitlab:gluser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>A short name can be used for templates maintained in the Embark GitHub organization, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>Please see our list of <a href=\"/templates/\">officially supported templates</a>.</p>\n<h2 id=\"demo\"><a href=\"#demo\" class=\"headerlink\" title=\"demo\"></a>demo</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Generates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.</p>\n<h2 id=\"build\"><a href=\"#build\" class=\"headerlink\" title=\"build\"></a>build</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at dist/. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"run\"><a href=\"#run\" class=\"headerlink\" title=\"run\"></a>run</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at <code>dist/</code>. By default will launch a dashboard and start a dev server at <code>http://localhost:8000/</code>. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the dev webserver (default: 8000)</td>\n</tr>\n<tr>\n<td><code>-b</code>, <code>--host</code></td>\n<td><code>host</code> to run the dev webserver (default: localhost)</td>\n</tr>\n<tr>\n<td><code>--noserver</code></td>\n<td>disable the development webserver</td>\n</tr>\n<tr>\n<td><code>--nodashboard</code></td>\n<td>simple mode, disables the dashboard</td>\n</tr>\n<tr>\n<td><code>--nobrowser</code></td>\n<td>prevent the development webserver from automatically opening a web browser</td>\n</tr>\n<tr>\n<td><code>--no-color</code></td>\n<td>no colors in case it’s needed for compatbility purposes</td>\n</tr>\n<tr>\n<td><code>--logfile</code></td>\n<td><code>filename</code> to output logs (default: none)</td>\n</tr>\n</tbody></table>\n<h2 id=\"eject-build-config\"><a href=\"#eject-build-config\" class=\"headerlink\" title=\"eject-build-config\"></a>eject-build-config</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<p>Copies Embark’s default <code>webpack.config.js</code> file into your DApp so that you can customize it. If a file named <code>webpack.config.js</code> is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.</p>\n<h2 id=\"blockchain\"><a href=\"#blockchain\" class=\"headerlink\" title=\"blockchain\"></a>blockchain</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain node. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<p>If you want, you can skip the step of running <code>embark blockchain</code>, as <code>embark run</code>, <code>build</code> and <code>upload</code> now all start a blockchain node in a separate process if there is not one already started using the same configurations.</p>\n<h2 id=\"simulator\"><a href=\"#simulator\" class=\"headerlink\" title=\"simulator\"></a>simulator</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain simulator. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the rpc simulator (default: 8545)</td>\n</tr>\n<tr>\n<td><code>-h</code>, <code>--host</code></td>\n<td><code>host</code> to run the rpc simulator (default: localhost)</td>\n</tr>\n<tr>\n<td><code>-a</code>, <code>--accounts</code></td>\n<td><code>num</code> of accounts to start the simulator (default: 10)</td>\n</tr>\n<tr>\n<td><code>-e</code>, <code>--defaultBalanceEther</code></td>\n<td><code>balance</code> in ether to assign each test account (default: 100)</td>\n</tr>\n<tr>\n<td><code>-l</code>, <code>--gasLimit</code></td>\n<td>custom <code>gasLimit</code> (default: 8000000)</td>\n</tr>\n</tbody></table>\n<h2 id=\"test\"><a href=\"#test\" class=\"headerlink\" title=\"test\"></a>test</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test [file]</span><br></pre></td></tr></table></figure>\n\n<p>Runs Tests. If <code>file</code> is not specified then it will run all the tests inside the <code>test/</code> directory.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-n</code>, <code>--node</code></td>\n<td>node for running the tests (default: vm)</td>\n</tr>\n<tr>\n<td><code>-d</code>, <code>--gasDetails</code></td>\n<td>print the gas cost for each contract deployment when running the tests</td>\n</tr>\n<tr>\n<td><code>-c</code>, <code>--coverage</code></td>\n<td>generate a coverage report after running the tests (vm only)</td>\n</tr>\n</tbody></table>\n<p>The <code>--node</code> option supports several values:</p>\n<table>\n<thead>\n<tr>\n<th>Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>vm</code></td>\n<td>start and use an Ethereum simulator (ganache)</td>\n</tr>\n<tr>\n<td><code>embark</code></td>\n<td>use the node of a running embark process</td>\n</tr>\n<tr>\n<td><code>&lt;endpoint&gt;</code></td>\n<td>connect to and use the specified node</td>\n</tr>\n</tbody></table>\n<p>Example of endpoint usage: <code>embark test --node ws://localhost:8556</code></p>\n<h2 id=\"reset\"><a href=\"#reset\" class=\"headerlink\" title=\"reset\"></a>reset</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>Resets embarks state on this dapp including clearing cache.</p>\n<h2 id=\"upload\"><a href=\"#upload\" class=\"headerlink\" title=\"upload\"></a>upload</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload [platform] [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Uploads the DApp to a decentralized storage such as IPFS. <code>platform</code> can be <code>ipfs</code> or <code>swarm</code> or another parameter if supported by a plugin. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"graph\"><a href=\"#graph\" class=\"headerlink\" title=\"graph\"></a>graph</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark graph</span><br></pre></td></tr></table></figure>\n\n<p>Generates documentation based on the smart contracts configured</p>\n<h2 id=\"version\"><a href=\"#version\" class=\"headerlink\" title=\"version\"></a>version</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark version</span><br></pre></td></tr></table></figure>\n\n<p>Displays version information.</p>\n"},{"title":"Understanding Environments","layout":"docs","_content":"\nEmbark comes with the concept of \"Environments\", which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we're sure the code is ready for prime time and can be deployed in a production environment.\n\nIn this guide we'll discuss how to take advantage of environments within various configuration files of our Embark application.\n\n## Default environment\n\nIn our guide covering [application structures](structure.html) in Embark, we've talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We'll dive more into what each configuration looks like in our guides on [configuring Smart Contracts](contracts_configuration.html), [configuring decentralized storages](storage_configuration.html) and [configuring communication channels](messages_configuration.html). For now, we'll focus on the concept of **default environments**.\n\nEnvironments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that `default` is a special environment that can be **extended** by other environments.\n\nLet's take a look at the `config/contracts.js` file that we've created in the [Quickstart](quick_start.html):\n\n```\nmodule.exports = {\n  default: {\n    dappConnection: [\n      \"$WEB3\",\n      \"ws://localhost:8546\",\n      \"http://localhost:8545\"\n    ],\n    gas: \"auto\",\n    deploy: {\n      SimpleStorage: {\n        args: [100]\n      }\n    }\n  }\n}\n```\n\nDon't get too overwhelmed by all the different options and what they mean. We'll discuss those in-depth in [configuring Smart Contracts](contracts_configuration.html) and `dappConneciton` [here](/docs/javascript_usage.html#Using-dappConnection). The important part here is that `contracts.js` exports an object that provides a `default` configuration. This configuration is the default environment and can be overwritten or extended by other environments. \n\nIf we execute `$ embark run`, Embark will use the `default` configuration to deploy our application's Smart Contracts.\n\n## Adding and extending environments\n\nAs mentioned earlier, the `default` environment can be easily extended and overwritten by other configurations. Let's say we had a `custom` environment as well, which should come with the same configuration as `default`, but deploy `SimpleStorage` with a different constructor parameter value. We can do that by simply introducing a configuration for `custom` and specify the options as we need:\n\n```\nmodule.exports = {\n  ...\n  custom: {\n    deploy: {\n      SimpleStorage: {\n        args: [200]\n      }\n    }\n  }\n}\n```\n\nNow, when running Embark with the `custom` environment as discussed in our guide on [Running applications](/docs/running_apps.html#Switching-environments), Embark will merge the `custom` configuration with `default` and use the resulting configuration object accordingly:\n\n```\n$ embark run custom\n```\n\n{% notification info Quick tip: %}\nNotice that Embark usually already provides an additional `development` configuration. As a matter of fact, when no environment is specified in `embark run`, Embark will use the `development` configuration. \n\nThis means that\n\n<pre>$ embark run</pre>\n\nis the same as\n\n<pre>$ embark run development</pre>\n\n{% endnotification %}\n\nIn the next chapter, we'll take a closer look at how our application can be configured using the `embark.json` configuration file.\n","source":"docs/environments.md","raw":"title: Understanding Environments\nlayout: docs\n---\n\nEmbark comes with the concept of \"Environments\", which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we're sure the code is ready for prime time and can be deployed in a production environment.\n\nIn this guide we'll discuss how to take advantage of environments within various configuration files of our Embark application.\n\n## Default environment\n\nIn our guide covering [application structures](structure.html) in Embark, we've talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We'll dive more into what each configuration looks like in our guides on [configuring Smart Contracts](contracts_configuration.html), [configuring decentralized storages](storage_configuration.html) and [configuring communication channels](messages_configuration.html). For now, we'll focus on the concept of **default environments**.\n\nEnvironments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that `default` is a special environment that can be **extended** by other environments.\n\nLet's take a look at the `config/contracts.js` file that we've created in the [Quickstart](quick_start.html):\n\n```\nmodule.exports = {\n  default: {\n    dappConnection: [\n      \"$WEB3\",\n      \"ws://localhost:8546\",\n      \"http://localhost:8545\"\n    ],\n    gas: \"auto\",\n    deploy: {\n      SimpleStorage: {\n        args: [100]\n      }\n    }\n  }\n}\n```\n\nDon't get too overwhelmed by all the different options and what they mean. We'll discuss those in-depth in [configuring Smart Contracts](contracts_configuration.html) and `dappConneciton` [here](/docs/javascript_usage.html#Using-dappConnection). The important part here is that `contracts.js` exports an object that provides a `default` configuration. This configuration is the default environment and can be overwritten or extended by other environments. \n\nIf we execute `$ embark run`, Embark will use the `default` configuration to deploy our application's Smart Contracts.\n\n## Adding and extending environments\n\nAs mentioned earlier, the `default` environment can be easily extended and overwritten by other configurations. Let's say we had a `custom` environment as well, which should come with the same configuration as `default`, but deploy `SimpleStorage` with a different constructor parameter value. We can do that by simply introducing a configuration for `custom` and specify the options as we need:\n\n```\nmodule.exports = {\n  ...\n  custom: {\n    deploy: {\n      SimpleStorage: {\n        args: [200]\n      }\n    }\n  }\n}\n```\n\nNow, when running Embark with the `custom` environment as discussed in our guide on [Running applications](/docs/running_apps.html#Switching-environments), Embark will merge the `custom` configuration with `default` and use the resulting configuration object accordingly:\n\n```\n$ embark run custom\n```\n\n{% notification info Quick tip: %}\nNotice that Embark usually already provides an additional `development` configuration. As a matter of fact, when no environment is specified in `embark run`, Embark will use the `development` configuration. \n\nThis means that\n\n<pre>$ embark run</pre>\n\nis the same as\n\n<pre>$ embark run development</pre>\n\n{% endnotification %}\n\nIn the next chapter, we'll take a closer look at how our application can be configured using the `embark.json` configuration file.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/environments.html","comments":1,"_id":"ck5ijm3rj00147hegebu2ckjy","content":"<p>Embark comes with the concept of “Environments”, which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we’re sure the code is ready for prime time and can be deployed in a production environment.</p>\n<p>In this guide we’ll discuss how to take advantage of environments within various configuration files of our Embark application.</p>\n<h2 id=\"Default-environment\"><a href=\"#Default-environment\" class=\"headerlink\" title=\"Default environment\"></a>Default environment</h2><p>In our guide covering <a href=\"structure.html\">application structures</a> in Embark, we’ve talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We’ll dive more into what each configuration looks like in our guides on <a href=\"contracts_configuration.html\">configuring Smart Contracts</a>, <a href=\"storage_configuration.html\">configuring decentralized storages</a> and <a href=\"messages_configuration.html\">configuring communication channels</a>. For now, we’ll focus on the concept of <strong>default environments</strong>.</p>\n<p>Environments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that <code>default</code> is a special environment that can be <strong>extended</strong> by other environments.</p>\n<p>Let’s take a look at the <code>config/contracts.js</code> file that we’ve created in the <a href=\"quick_start.html\">Quickstart</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    dappConnection: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;ws:&#x2F;&#x2F;localhost:8546&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">    gas: &quot;auto&quot;,</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [100]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Don’t get too overwhelmed by all the different options and what they mean. We’ll discuss those in-depth in <a href=\"contracts_configuration.html\">configuring Smart Contracts</a> and <code>dappConneciton</code> <a href=\"/docs/javascript_usage.html#Using-dappConnection\">here</a>. The important part here is that <code>contracts.js</code> exports an object that provides a <code>default</code> configuration. This configuration is the default environment and can be overwritten or extended by other environments. </p>\n<p>If we execute <code>$ embark run</code>, Embark will use the <code>default</code> configuration to deploy our application’s Smart Contracts.</p>\n<h2 id=\"Adding-and-extending-environments\"><a href=\"#Adding-and-extending-environments\" class=\"headerlink\" title=\"Adding and extending environments\"></a>Adding and extending environments</h2><p>As mentioned earlier, the <code>default</code> environment can be easily extended and overwritten by other configurations. Let’s say we had a <code>custom</code> environment as well, which should come with the same configuration as <code>default</code>, but deploy <code>SimpleStorage</code> with a different constructor parameter value. We can do that by simply introducing a configuration for <code>custom</code> and specify the options as we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  custom: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [200]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now, when running Embark with the <code>custom</code> environment as discussed in our guide on <a href=\"/docs/running_apps.html#Switching-environments\">Running applications</a>, Embark will merge the <code>custom</code> configuration with <code>default</code> and use the resulting configuration object accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run custom</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick</strong></p>\n  <p><p>Notice that Embark usually already provides an additional <code>development</code> configuration. As a matter of fact, when no environment is specified in <code>embark run</code>, Embark will use the <code>development</code> configuration. </p>\n<p>This means that</p>\n<pre>$ embark run</pre>\n\n<p>is the same as</p>\n<pre>$ embark run development</pre>\n</p>\n</div> \n\n\n\n<p>In the next chapter, we’ll take a closer look at how our application can be configured using the <code>embark.json</code> configuration file.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark comes with the concept of “Environments”, which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we’re sure the code is ready for prime time and can be deployed in a production environment.</p>\n<p>In this guide we’ll discuss how to take advantage of environments within various configuration files of our Embark application.</p>\n<h2 id=\"Default-environment\"><a href=\"#Default-environment\" class=\"headerlink\" title=\"Default environment\"></a>Default environment</h2><p>In our guide covering <a href=\"structure.html\">application structures</a> in Embark, we’ve talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We’ll dive more into what each configuration looks like in our guides on <a href=\"contracts_configuration.html\">configuring Smart Contracts</a>, <a href=\"storage_configuration.html\">configuring decentralized storages</a> and <a href=\"messages_configuration.html\">configuring communication channels</a>. For now, we’ll focus on the concept of <strong>default environments</strong>.</p>\n<p>Environments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that <code>default</code> is a special environment that can be <strong>extended</strong> by other environments.</p>\n<p>Let’s take a look at the <code>config/contracts.js</code> file that we’ve created in the <a href=\"quick_start.html\">Quickstart</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    dappConnection: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;ws:&#x2F;&#x2F;localhost:8546&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">    gas: &quot;auto&quot;,</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [100]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Don’t get too overwhelmed by all the different options and what they mean. We’ll discuss those in-depth in <a href=\"contracts_configuration.html\">configuring Smart Contracts</a> and <code>dappConneciton</code> <a href=\"/docs/javascript_usage.html#Using-dappConnection\">here</a>. The important part here is that <code>contracts.js</code> exports an object that provides a <code>default</code> configuration. This configuration is the default environment and can be overwritten or extended by other environments. </p>\n<p>If we execute <code>$ embark run</code>, Embark will use the <code>default</code> configuration to deploy our application’s Smart Contracts.</p>\n<h2 id=\"Adding-and-extending-environments\"><a href=\"#Adding-and-extending-environments\" class=\"headerlink\" title=\"Adding and extending environments\"></a>Adding and extending environments</h2><p>As mentioned earlier, the <code>default</code> environment can be easily extended and overwritten by other configurations. Let’s say we had a <code>custom</code> environment as well, which should come with the same configuration as <code>default</code>, but deploy <code>SimpleStorage</code> with a different constructor parameter value. We can do that by simply introducing a configuration for <code>custom</code> and specify the options as we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  custom: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [200]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now, when running Embark with the <code>custom</code> environment as discussed in our guide on <a href=\"/docs/running_apps.html#Switching-environments\">Running applications</a>, Embark will merge the <code>custom</code> configuration with <code>default</code> and use the resulting configuration object accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run custom</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick</strong></p>\n  <p><p>Notice that Embark usually already provides an additional <code>development</code> configuration. As a matter of fact, when no environment is specified in <code>embark run</code>, Embark will use the <code>development</code> configuration. </p>\n<p>This means that</p>\n<pre>$ embark run</pre>\n\n<p>is the same as</p>\n<pre>$ embark run development</pre>\n</p>\n</div> \n\n\n\n<p>In the next chapter, we’ll take a closer look at how our application can be configured using the <code>embark.json</code> configuration file.</p>\n"},{"title":"Frequently Asked Questions","layout":"docs","_content":"\nIf you're new to Embark you probably have a lot questions about what it can do and whether it supports the features you're looking for. Check out our frequently asked questions and don't hesitate to let us know if there's anything missing!\n\n#### Embark in one sentence?\n\nEmbark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).\n\n#### How does Embark differ from other tools?\n\nWhile Embark does have quite some things in common with tools like [Truffle](https://truffleframework.com/), it goes far beyond managing and deploying Smart Contracts, **if you want to**. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.\n\nWhether you want to purely focus on [building and deploying Smart Contracts](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.\n\n#### Can I use Embark purely for Smart Contract development?\n\nAbsolutely! Simply create your application using the `--contracts-only` option as discussed in our guide on [Creating Apps](create_project.html#Creating-“contracts-only”-apps) and you're good to go.\n\n[Embark's configurations](configuration.html) make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.\n\n#### Can Embark connect to a simulated blockchain like Ganache?\n\nYes it can! In fact, Embark comes with [ganache-cli](https://truffleframework.com/ganache) and batteries included. Simply run `embark simulator` to [spin up a simulated blockchain](running_apps.html#Using-the-blockchain-simulator). For more information, check out the dedicated [command reference](embark_commands.html#simulator).\n\n#### Is it Luri or Iuri?\n\n[Iuri](https://twitter.com/iurimatias), it is!\n","source":"docs/faq.md","raw":"title: Frequently Asked Questions\nlayout: docs\n---\n\nIf you're new to Embark you probably have a lot questions about what it can do and whether it supports the features you're looking for. Check out our frequently asked questions and don't hesitate to let us know if there's anything missing!\n\n#### Embark in one sentence?\n\nEmbark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).\n\n#### How does Embark differ from other tools?\n\nWhile Embark does have quite some things in common with tools like [Truffle](https://truffleframework.com/), it goes far beyond managing and deploying Smart Contracts, **if you want to**. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.\n\nWhether you want to purely focus on [building and deploying Smart Contracts](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.\n\n#### Can I use Embark purely for Smart Contract development?\n\nAbsolutely! Simply create your application using the `--contracts-only` option as discussed in our guide on [Creating Apps](create_project.html#Creating-“contracts-only”-apps) and you're good to go.\n\n[Embark's configurations](configuration.html) make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.\n\n#### Can Embark connect to a simulated blockchain like Ganache?\n\nYes it can! In fact, Embark comes with [ganache-cli](https://truffleframework.com/ganache) and batteries included. Simply run `embark simulator` to [spin up a simulated blockchain](running_apps.html#Using-the-blockchain-simulator). For more information, check out the dedicated [command reference](embark_commands.html#simulator).\n\n#### Is it Luri or Iuri?\n\n[Iuri](https://twitter.com/iurimatias), it is!\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/faq.html","comments":1,"_id":"ck5ijm3rk00157hegaau59e16","content":"<p>If you’re new to Embark you probably have a lot questions about what it can do and whether it supports the features you’re looking for. Check out our frequently asked questions and don’t hesitate to let us know if there’s anything missing!</p>\n<h4 id=\"Embark-in-one-sentence\"><a href=\"#Embark-in-one-sentence\" class=\"headerlink\" title=\"Embark in one sentence?\"></a>Embark in one sentence?</h4><p>Embark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).</p>\n<h4 id=\"How-does-Embark-differ-from-other-tools\"><a href=\"#How-does-Embark-differ-from-other-tools\" class=\"headerlink\" title=\"How does Embark differ from other tools?\"></a>How does Embark differ from other tools?</h4><p>While Embark does have quite some things in common with tools like <a href=\"https://truffleframework.com/\" target=\"_blank\" rel=\"noopener\">Truffle</a>, it goes far beyond managing and deploying Smart Contracts, <strong>if you want to</strong>. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.</p>\n<p>Whether you want to purely focus on <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">building and deploying Smart Contracts</a>, or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.</p>\n<h4 id=\"Can-I-use-Embark-purely-for-Smart-Contract-development\"><a href=\"#Can-I-use-Embark-purely-for-Smart-Contract-development\" class=\"headerlink\" title=\"Can I use Embark purely for Smart Contract development?\"></a>Can I use Embark purely for Smart Contract development?</h4><p>Absolutely! Simply create your application using the <code>--contracts-only</code> option as discussed in our guide on <a href=\"create_project.html#Creating-“contracts-only”-apps\">Creating Apps</a> and you’re good to go.</p>\n<p><a href=\"configuration.html\">Embark’s configurations</a> make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.</p>\n<h4 id=\"Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\"><a href=\"#Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\" class=\"headerlink\" title=\"Can Embark connect to a simulated blockchain like Ganache?\"></a>Can Embark connect to a simulated blockchain like Ganache?</h4><p>Yes it can! In fact, Embark comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">ganache-cli</a> and batteries included. Simply run <code>embark simulator</code> to <a href=\"running_apps.html#Using-the-blockchain-simulator\">spin up a simulated blockchain</a>. For more information, check out the dedicated <a href=\"embark_commands.html#simulator\">command reference</a>.</p>\n<h4 id=\"Is-it-Luri-or-Iuri\"><a href=\"#Is-it-Luri-or-Iuri\" class=\"headerlink\" title=\"Is it Luri or Iuri?\"></a>Is it Luri or Iuri?</h4><p><a href=\"https://twitter.com/iurimatias\" target=\"_blank\" rel=\"noopener\">Iuri</a>, it is!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>If you’re new to Embark you probably have a lot questions about what it can do and whether it supports the features you’re looking for. Check out our frequently asked questions and don’t hesitate to let us know if there’s anything missing!</p>\n<h4 id=\"Embark-in-one-sentence\"><a href=\"#Embark-in-one-sentence\" class=\"headerlink\" title=\"Embark in one sentence?\"></a>Embark in one sentence?</h4><p>Embark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).</p>\n<h4 id=\"How-does-Embark-differ-from-other-tools\"><a href=\"#How-does-Embark-differ-from-other-tools\" class=\"headerlink\" title=\"How does Embark differ from other tools?\"></a>How does Embark differ from other tools?</h4><p>While Embark does have quite some things in common with tools like <a href=\"https://truffleframework.com/\" target=\"_blank\" rel=\"noopener\">Truffle</a>, it goes far beyond managing and deploying Smart Contracts, <strong>if you want to</strong>. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.</p>\n<p>Whether you want to purely focus on <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">building and deploying Smart Contracts</a>, or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.</p>\n<h4 id=\"Can-I-use-Embark-purely-for-Smart-Contract-development\"><a href=\"#Can-I-use-Embark-purely-for-Smart-Contract-development\" class=\"headerlink\" title=\"Can I use Embark purely for Smart Contract development?\"></a>Can I use Embark purely for Smart Contract development?</h4><p>Absolutely! Simply create your application using the <code>--contracts-only</code> option as discussed in our guide on <a href=\"create_project.html#Creating-“contracts-only”-apps\">Creating Apps</a> and you’re good to go.</p>\n<p><a href=\"configuration.html\">Embark’s configurations</a> make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.</p>\n<h4 id=\"Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\"><a href=\"#Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\" class=\"headerlink\" title=\"Can Embark connect to a simulated blockchain like Ganache?\"></a>Can Embark connect to a simulated blockchain like Ganache?</h4><p>Yes it can! In fact, Embark comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">ganache-cli</a> and batteries included. Simply run <code>embark simulator</code> to <a href=\"running_apps.html#Using-the-blockchain-simulator\">spin up a simulated blockchain</a>. For more information, check out the dedicated <a href=\"embark_commands.html#simulator\">command reference</a>.</p>\n<h4 id=\"Is-it-Luri-or-Iuri\"><a href=\"#Is-it-Luri-or-Iuri\" class=\"headerlink\" title=\"Is it Luri or Iuri?\"></a>Is it Luri or Iuri?</h4><p><a href=\"https://twitter.com/iurimatias\" target=\"_blank\" rel=\"noopener\">Iuri</a>, it is!</p>\n"},{"title":"docs_landing_page.header.title","layout":"docs-landing","_content":"\n","source":"docs/index.md","raw":"title: docs_landing_page.header.title\nlayout: docs-landing\n---\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/index.html","comments":1,"_id":"ck5ijm3rk00167heg9sji3hx1","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Installation","layout":"docs","_content":"In this guide we'll cover all the different ways of installing Embark on your local machine, starting with prerequisites.\n\n## Prerequisites\n\nIn order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:\n\n- [Node](#Node)\n- [Ethereum Client](#Ethereum-Client-Optional)\n- [IPFS](#IPFS-Optional)\n\nOnce done, go ahead and [install Embark](#Installing-Embark).\n\n### Node\n\nPlease install [Node.js](http://nodejs.org/) in version 10.17.0 LTS or higher.\n\n{% notification info 'Quick Tip' %}\nWe recommend installing Node using the [Node Version Manager](https://github.com/creationix/nvm/blob/master/README.md).  This is because it makes it very easy to install different versions of Node in isolated environments that don't require users to [change their permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) when installing packages. Find instructions on how to install NVM [here](https://github.com/creationix/nvm/blob/master/README.md#install-script).\n\nOnce that is done, we can install and select a specific Node version or use the `--lts` option to get the latest version with long term support like this:\n\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre>\n{% endnotification %}\n\n### IPFS (Optional)\n\nIPFS can be used to distribute our application's content on the decentralized IPFS nodes. This can be skipped in case this isn't planned, however we do recommend it. Checkout IPFS' [installation guide](https://docs.ipfs.io/guides/guides/install/) to learn how to install IPFS on our local machine.\n\nTo verify that the installation was successful, simply run the following command:\n\n```\n$ ipfs --version\n```\n\nThis outputs something like\n\n```\n$ ipfs version 0.4.17\n```\n\n### Ethereum Client (Optional)\n\nEmbark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with [Ganache CLI](https://truffleframework.com/ganache), a blockchain node emulator, which is accessible via [Embark's simulator](embark_commands.html#simulator) command.\n\nIn case we want to run a real node, [geth](https://geth.ethereum.org/) is a pretty good one. Check out the [installation guide](https://ethereum.github.io/go-ethereum/install/) for our platform and verify our installation with:\n\n```\n$ geth version\n```\n\nWhich should result in an output that looks like this (note that the exact version numbers may be different):\n\n```\nGeth\nVersion: 1.8.15-stable\nGit Commit: 89451f7c382ad2185987ee369f16416f89c28a7d\nArchitecture: amd64\nProtocol Versions: [63 62]\nNetwork Id: 1\nGo Version: go1.10.4\nOperating System: darwin\nGOPATH=\nGOROOT=/Users/travis/.gimme/versions/go1.10.4.darwin.amd64\n```\n\n## Installing Embark\n\nAlright, let's install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, [submit an issue on  GitHub](https://github.com/embarklabs/embark/issues), or take a look at our [troubleshooting guide](troubleshooting.html).\n\nWe can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:\n\n```\n$ npm -g install embark\n```\n\nAfter that, `embark` should be available as a global command in our terminal of choice. Let's verify this by running the following command:\n\n```\n$ embark --version\n```\n\nAt the time of writing this guide, the output looked like this:\n\n```\n4.0.0\n```\n\nAwesome! We're all set up. If you're brand new to Embark, now would be a good time to take our [Quickstart](/docs/quick_start.html) in which you'll build your first application!\n","source":"docs/installation.md","raw":"title: Installation\nlayout: docs\n---\nIn this guide we'll cover all the different ways of installing Embark on your local machine, starting with prerequisites.\n\n## Prerequisites\n\nIn order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:\n\n- [Node](#Node)\n- [Ethereum Client](#Ethereum-Client-Optional)\n- [IPFS](#IPFS-Optional)\n\nOnce done, go ahead and [install Embark](#Installing-Embark).\n\n### Node\n\nPlease install [Node.js](http://nodejs.org/) in version 10.17.0 LTS or higher.\n\n{% notification info 'Quick Tip' %}\nWe recommend installing Node using the [Node Version Manager](https://github.com/creationix/nvm/blob/master/README.md).  This is because it makes it very easy to install different versions of Node in isolated environments that don't require users to [change their permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) when installing packages. Find instructions on how to install NVM [here](https://github.com/creationix/nvm/blob/master/README.md#install-script).\n\nOnce that is done, we can install and select a specific Node version or use the `--lts` option to get the latest version with long term support like this:\n\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre>\n{% endnotification %}\n\n### IPFS (Optional)\n\nIPFS can be used to distribute our application's content on the decentralized IPFS nodes. This can be skipped in case this isn't planned, however we do recommend it. Checkout IPFS' [installation guide](https://docs.ipfs.io/guides/guides/install/) to learn how to install IPFS on our local machine.\n\nTo verify that the installation was successful, simply run the following command:\n\n```\n$ ipfs --version\n```\n\nThis outputs something like\n\n```\n$ ipfs version 0.4.17\n```\n\n### Ethereum Client (Optional)\n\nEmbark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with [Ganache CLI](https://truffleframework.com/ganache), a blockchain node emulator, which is accessible via [Embark's simulator](embark_commands.html#simulator) command.\n\nIn case we want to run a real node, [geth](https://geth.ethereum.org/) is a pretty good one. Check out the [installation guide](https://ethereum.github.io/go-ethereum/install/) for our platform and verify our installation with:\n\n```\n$ geth version\n```\n\nWhich should result in an output that looks like this (note that the exact version numbers may be different):\n\n```\nGeth\nVersion: 1.8.15-stable\nGit Commit: 89451f7c382ad2185987ee369f16416f89c28a7d\nArchitecture: amd64\nProtocol Versions: [63 62]\nNetwork Id: 1\nGo Version: go1.10.4\nOperating System: darwin\nGOPATH=\nGOROOT=/Users/travis/.gimme/versions/go1.10.4.darwin.amd64\n```\n\n## Installing Embark\n\nAlright, let's install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, [submit an issue on  GitHub](https://github.com/embarklabs/embark/issues), or take a look at our [troubleshooting guide](troubleshooting.html).\n\nWe can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:\n\n```\n$ npm -g install embark\n```\n\nAfter that, `embark` should be available as a global command in our terminal of choice. Let's verify this by running the following command:\n\n```\n$ embark --version\n```\n\nAt the time of writing this guide, the output looked like this:\n\n```\n4.0.0\n```\n\nAwesome! We're all set up. If you're brand new to Embark, now would be a good time to take our [Quickstart](/docs/quick_start.html) in which you'll build your first application!\n","date":"2020-01-19T20:56:53.010Z","updated":"2020-01-19T20:56:53.010Z","path":"docs/installation.html","_id":"ck5ijm3rl00177hegaq8kaid6","comments":1,"content":"<p>In this guide we’ll cover all the different ways of installing Embark on your local machine, starting with prerequisites.</p>\n<h2 id=\"Prerequisites\"><a href=\"#Prerequisites\" class=\"headerlink\" title=\"Prerequisites\"></a>Prerequisites</h2><p>In order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:</p>\n<ul>\n<li><a href=\"#Node\">Node</a></li>\n<li><a href=\"#Ethereum-Client-Optional\">Ethereum Client</a></li>\n<li><a href=\"#IPFS-Optional\">IPFS</a></li>\n</ul>\n<p>Once done, go ahead and <a href=\"#Installing-Embark\">install Embark</a>.</p>\n<h3 id=\"Node\"><a href=\"#Node\" class=\"headerlink\" title=\"Node\"></a>Node</h3><p>Please install <a href=\"http://nodejs.org/\" target=\"_blank\" rel=\"noopener\">Node.js</a> in version 10.17.0 LTS or higher.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick Tip</strong></p>\n  <p><p>We recommend installing Node using the <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">Node Version Manager</a>.  This is because it makes it very easy to install different versions of Node in isolated environments that don’t require users to <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">change their permissions</a> when installing packages. Find instructions on how to install NVM <a href=\"https://github.com/creationix/nvm/blob/master/README.md#install-script\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Once that is done, we can install and select a specific Node version or use the <code>--lts</code> option to get the latest version with long term support like this:</p>\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre></p>\n</div> \n\n\n\n<h3 id=\"IPFS-Optional\"><a href=\"#IPFS-Optional\" class=\"headerlink\" title=\"IPFS (Optional)\"></a>IPFS (Optional)</h3><p>IPFS can be used to distribute our application’s content on the decentralized IPFS nodes. This can be skipped in case this isn’t planned, however we do recommend it. Checkout IPFS’ <a href=\"https://docs.ipfs.io/guides/guides/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> to learn how to install IPFS on our local machine.</p>\n<p>To verify that the installation was successful, simply run the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs --version</span><br></pre></td></tr></table></figure>\n\n<p>This outputs something like</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs version 0.4.17</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Ethereum-Client-Optional\"><a href=\"#Ethereum-Client-Optional\" class=\"headerlink\" title=\"Ethereum Client (Optional)\"></a>Ethereum Client (Optional)</h3><p>Embark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, a blockchain node emulator, which is accessible via <a href=\"embark_commands.html#simulator\">Embark’s simulator</a> command.</p>\n<p>In case we want to run a real node, <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">geth</a> is a pretty good one. Check out the <a href=\"https://ethereum.github.io/go-ethereum/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> for our platform and verify our installation with:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ geth version</span><br></pre></td></tr></table></figure>\n\n<p>Which should result in an output that looks like this (note that the exact version numbers may be different):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Geth</span><br><span class=\"line\">Version: 1.8.15-stable</span><br><span class=\"line\">Git Commit: 89451f7c382ad2185987ee369f16416f89c28a7d</span><br><span class=\"line\">Architecture: amd64</span><br><span class=\"line\">Protocol Versions: [63 62]</span><br><span class=\"line\">Network Id: 1</span><br><span class=\"line\">Go Version: go1.10.4</span><br><span class=\"line\">Operating System: darwin</span><br><span class=\"line\">GOPATH&#x3D;</span><br><span class=\"line\">GOROOT&#x3D;&#x2F;Users&#x2F;travis&#x2F;.gimme&#x2F;versions&#x2F;go1.10.4.darwin.amd64</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-Embark\"><a href=\"#Installing-Embark\" class=\"headerlink\" title=\"Installing Embark\"></a>Installing Embark</h2><p>Alright, let’s install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">submit an issue on  GitHub</a>, or take a look at our <a href=\"troubleshooting.html\">troubleshooting guide</a>.</p>\n<p>We can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm -g install embark</span><br></pre></td></tr></table></figure>\n\n<p>After that, <code>embark</code> should be available as a global command in our terminal of choice. Let’s verify this by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark --version</span><br></pre></td></tr></table></figure>\n\n<p>At the time of writing this guide, the output looked like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">4.0.0</span><br></pre></td></tr></table></figure>\n\n<p>Awesome! We’re all set up. If you’re brand new to Embark, now would be a good time to take our <a href=\"/docs/quick_start.html\">Quickstart</a> in which you’ll build your first application!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In this guide we’ll cover all the different ways of installing Embark on your local machine, starting with prerequisites.</p>\n<h2 id=\"Prerequisites\"><a href=\"#Prerequisites\" class=\"headerlink\" title=\"Prerequisites\"></a>Prerequisites</h2><p>In order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:</p>\n<ul>\n<li><a href=\"#Node\">Node</a></li>\n<li><a href=\"#Ethereum-Client-Optional\">Ethereum Client</a></li>\n<li><a href=\"#IPFS-Optional\">IPFS</a></li>\n</ul>\n<p>Once done, go ahead and <a href=\"#Installing-Embark\">install Embark</a>.</p>\n<h3 id=\"Node\"><a href=\"#Node\" class=\"headerlink\" title=\"Node\"></a>Node</h3><p>Please install <a href=\"http://nodejs.org/\" target=\"_blank\" rel=\"noopener\">Node.js</a> in version 10.17.0 LTS or higher.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick Tip</strong></p>\n  <p><p>We recommend installing Node using the <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">Node Version Manager</a>.  This is because it makes it very easy to install different versions of Node in isolated environments that don’t require users to <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">change their permissions</a> when installing packages. Find instructions on how to install NVM <a href=\"https://github.com/creationix/nvm/blob/master/README.md#install-script\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Once that is done, we can install and select a specific Node version or use the <code>--lts</code> option to get the latest version with long term support like this:</p>\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre></p>\n</div> \n\n\n\n<h3 id=\"IPFS-Optional\"><a href=\"#IPFS-Optional\" class=\"headerlink\" title=\"IPFS (Optional)\"></a>IPFS (Optional)</h3><p>IPFS can be used to distribute our application’s content on the decentralized IPFS nodes. This can be skipped in case this isn’t planned, however we do recommend it. Checkout IPFS’ <a href=\"https://docs.ipfs.io/guides/guides/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> to learn how to install IPFS on our local machine.</p>\n<p>To verify that the installation was successful, simply run the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs --version</span><br></pre></td></tr></table></figure>\n\n<p>This outputs something like</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs version 0.4.17</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Ethereum-Client-Optional\"><a href=\"#Ethereum-Client-Optional\" class=\"headerlink\" title=\"Ethereum Client (Optional)\"></a>Ethereum Client (Optional)</h3><p>Embark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, a blockchain node emulator, which is accessible via <a href=\"embark_commands.html#simulator\">Embark’s simulator</a> command.</p>\n<p>In case we want to run a real node, <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">geth</a> is a pretty good one. Check out the <a href=\"https://ethereum.github.io/go-ethereum/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> for our platform and verify our installation with:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ geth version</span><br></pre></td></tr></table></figure>\n\n<p>Which should result in an output that looks like this (note that the exact version numbers may be different):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Geth</span><br><span class=\"line\">Version: 1.8.15-stable</span><br><span class=\"line\">Git Commit: 89451f7c382ad2185987ee369f16416f89c28a7d</span><br><span class=\"line\">Architecture: amd64</span><br><span class=\"line\">Protocol Versions: [63 62]</span><br><span class=\"line\">Network Id: 1</span><br><span class=\"line\">Go Version: go1.10.4</span><br><span class=\"line\">Operating System: darwin</span><br><span class=\"line\">GOPATH&#x3D;</span><br><span class=\"line\">GOROOT&#x3D;&#x2F;Users&#x2F;travis&#x2F;.gimme&#x2F;versions&#x2F;go1.10.4.darwin.amd64</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-Embark\"><a href=\"#Installing-Embark\" class=\"headerlink\" title=\"Installing Embark\"></a>Installing Embark</h2><p>Alright, let’s install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">submit an issue on  GitHub</a>, or take a look at our <a href=\"troubleshooting.html\">troubleshooting guide</a>.</p>\n<p>We can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm -g install embark</span><br></pre></td></tr></table></figure>\n\n<p>After that, <code>embark</code> should be available as a global command in our terminal of choice. Let’s verify this by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark --version</span><br></pre></td></tr></table></figure>\n\n<p>At the time of writing this guide, the output looked like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">4.0.0</span><br></pre></td></tr></table></figure>\n\n<p>Awesome! We’re all set up. If you’re brand new to Embark, now would be a good time to take our <a href=\"/docs/quick_start.html\">Quickstart</a> in which you’ll build your first application!</p>\n"},{"title":"Configuring EmbarkJS","layout":"docs","_content":"\nEmbark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily & quickly build powerful Dapps that leverage different decentralized technologies.\nEmbark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained [below](#Connecting).\n\n### Connecting\n\nBefore using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.\n\nFor that, EmbarkJS provides the `Blockchain.connect()` function that receives a configuration object.\nLuckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is `embarkArtifacts/`, but you can change that in `embark.json` by changing `generationDir`.\n\nLet's see what that generated config file looks like at `embarkArtifacts/config/blockchain.json`:\n\n```\n{\n  \"dappConnection\": [\n    \"$WEB3\",\n    \"$EMBARK\",\n    \"ws://localhost:8546\"\n  ],\n  \"dappAutoEnable\": true,\n  \"warnIfMetamask\": true,\n  \"blockchainClient\": \"geth\"\n}\n```\n\n\n#### Connection parameters:\n\n- **dappConnection**: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at [the guide on EmbakJS](/docs/javascript_usage.html#Using-dappConnection).\n- **dappAutoEnable**: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.\n - Read more on it [below](#Provider)\n- **warnIfMetamask**: Is true when `isDev` is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.\n- **blockchainClient**: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.\n\n\n### Utilities\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n### Provider\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request account access. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\n...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  // Default value is true.\n  // dappAutoEnable: true,\n...\n```\n\n\nBy default, the value of `dappAutoEnable` is true which means that Embark will call `ethereum.enable` for you to request account access when the first page of the dapp is loaded.\n\nIf you want more control, you can set `dappAutoEnable` to false.\nThen, if you want to request account access, you can use the following code:\n\n```\n...\n  try {\n    const accounts = await EmbarkJS.enableEthereum();\n    // access granted\n  } catch() {\n    // access not granted\n  }\n...\n```\n\nThis will request account access and if the user grants access to his accounts, you will be able to make transaction calls.\n\n\n### Components\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","source":"docs/installing_embarkjs.md","raw":"title: Configuring EmbarkJS\nlayout: docs\n---\n\nEmbark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily & quickly build powerful Dapps that leverage different decentralized technologies.\nEmbark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained [below](#Connecting).\n\n### Connecting\n\nBefore using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.\n\nFor that, EmbarkJS provides the `Blockchain.connect()` function that receives a configuration object.\nLuckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is `embarkArtifacts/`, but you can change that in `embark.json` by changing `generationDir`.\n\nLet's see what that generated config file looks like at `embarkArtifacts/config/blockchain.json`:\n\n```\n{\n  \"dappConnection\": [\n    \"$WEB3\",\n    \"$EMBARK\",\n    \"ws://localhost:8546\"\n  ],\n  \"dappAutoEnable\": true,\n  \"warnIfMetamask\": true,\n  \"blockchainClient\": \"geth\"\n}\n```\n\n\n#### Connection parameters:\n\n- **dappConnection**: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at [the guide on EmbakJS](/docs/javascript_usage.html#Using-dappConnection).\n- **dappAutoEnable**: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.\n - Read more on it [below](#Provider)\n- **warnIfMetamask**: Is true when `isDev` is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.\n- **blockchainClient**: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.\n\n\n### Utilities\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n### Provider\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request account access. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\n...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  // Default value is true.\n  // dappAutoEnable: true,\n...\n```\n\n\nBy default, the value of `dappAutoEnable` is true which means that Embark will call `ethereum.enable` for you to request account access when the first page of the dapp is loaded.\n\nIf you want more control, you can set `dappAutoEnable` to false.\nThen, if you want to request account access, you can use the following code:\n\n```\n...\n  try {\n    const accounts = await EmbarkJS.enableEthereum();\n    // access granted\n  } catch() {\n    // access not granted\n  }\n...\n```\n\nThis will request account access and if the user grants access to his accounts, you will be able to make transaction calls.\n\n\n### Components\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/installing_embarkjs.html","comments":1,"_id":"ck5ijm3rm00187hege76085yd","content":"<p>Embark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily &amp; quickly build powerful Dapps that leverage different decentralized technologies.<br>Embark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained <a href=\"#Connecting\">below</a>.</p>\n<h3 id=\"Connecting\"><a href=\"#Connecting\" class=\"headerlink\" title=\"Connecting\"></a>Connecting</h3><p>Before using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.</p>\n<p>For that, EmbarkJS provides the <code>Blockchain.connect()</code> function that receives a configuration object.<br>Luckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is <code>embarkArtifacts/</code>, but you can change that in <code>embark.json</code> by changing <code>generationDir</code>.</p>\n<p>Let’s see what that generated config file looks like at <code>embarkArtifacts/config/blockchain.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;dappConnection&quot;: [</span><br><span class=\"line\">    &quot;$WEB3&quot;,</span><br><span class=\"line\">    &quot;$EMBARK&quot;,</span><br><span class=\"line\">    &quot;ws:&#x2F;&#x2F;localhost:8546&quot;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  &quot;dappAutoEnable&quot;: true,</span><br><span class=\"line\">  &quot;warnIfMetamask&quot;: true,</span><br><span class=\"line\">  &quot;blockchainClient&quot;: &quot;geth&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h4 id=\"Connection-parameters\"><a href=\"#Connection-parameters\" class=\"headerlink\" title=\"Connection parameters:\"></a>Connection parameters:</h4><ul>\n<li><strong>dappConnection</strong>: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at <a href=\"/docs/javascript_usage.html#Using-dappConnection\">the guide on EmbakJS</a>.</li>\n<li><strong>dappAutoEnable</strong>: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.<ul>\n<li>Read more on it <a href=\"#Provider\">below</a></li>\n</ul>\n</li>\n<li><strong>warnIfMetamask</strong>: Is true when <code>isDev</code> is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.</li>\n<li><strong>blockchainClient</strong>: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.</li>\n</ul>\n<h3 id=\"Utilities\"><a href=\"#Utilities\" class=\"headerlink\" title=\"Utilities\"></a>Utilities</h3><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Provider\"><a href=\"#Provider\" class=\"headerlink\" title=\"Provider\"></a>Provider</h3><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request account access. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  &#x2F;&#x2F; Default value is true.</span><br><span class=\"line\">  &#x2F;&#x2F; dappAutoEnable: true,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<p>By default, the value of <code>dappAutoEnable</code> is true which means that Embark will call <code>ethereum.enable</code> for you to request account access when the first page of the dapp is loaded.</p>\n<p>If you want more control, you can set <code>dappAutoEnable</code> to false.<br>Then, if you want to request account access, you can use the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">    &#x2F;&#x2F; access granted</span><br><span class=\"line\">  &#125; catch() &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; access not granted</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This will request account access and if the user grants access to his accounts, you will be able to make transaction calls.</p>\n<h3 id=\"Components\"><a href=\"#Components\" class=\"headerlink\" title=\"Components\"></a>Components</h3><ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily &amp; quickly build powerful Dapps that leverage different decentralized technologies.<br>Embark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained <a href=\"#Connecting\">below</a>.</p>\n<h3 id=\"Connecting\"><a href=\"#Connecting\" class=\"headerlink\" title=\"Connecting\"></a>Connecting</h3><p>Before using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.</p>\n<p>For that, EmbarkJS provides the <code>Blockchain.connect()</code> function that receives a configuration object.<br>Luckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is <code>embarkArtifacts/</code>, but you can change that in <code>embark.json</code> by changing <code>generationDir</code>.</p>\n<p>Let’s see what that generated config file looks like at <code>embarkArtifacts/config/blockchain.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;dappConnection&quot;: [</span><br><span class=\"line\">    &quot;$WEB3&quot;,</span><br><span class=\"line\">    &quot;$EMBARK&quot;,</span><br><span class=\"line\">    &quot;ws:&#x2F;&#x2F;localhost:8546&quot;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  &quot;dappAutoEnable&quot;: true,</span><br><span class=\"line\">  &quot;warnIfMetamask&quot;: true,</span><br><span class=\"line\">  &quot;blockchainClient&quot;: &quot;geth&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h4 id=\"Connection-parameters\"><a href=\"#Connection-parameters\" class=\"headerlink\" title=\"Connection parameters:\"></a>Connection parameters:</h4><ul>\n<li><strong>dappConnection</strong>: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at <a href=\"/docs/javascript_usage.html#Using-dappConnection\">the guide on EmbakJS</a>.</li>\n<li><strong>dappAutoEnable</strong>: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.<ul>\n<li>Read more on it <a href=\"#Provider\">below</a></li>\n</ul>\n</li>\n<li><strong>warnIfMetamask</strong>: Is true when <code>isDev</code> is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.</li>\n<li><strong>blockchainClient</strong>: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.</li>\n</ul>\n<h3 id=\"Utilities\"><a href=\"#Utilities\" class=\"headerlink\" title=\"Utilities\"></a>Utilities</h3><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Provider\"><a href=\"#Provider\" class=\"headerlink\" title=\"Provider\"></a>Provider</h3><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request account access. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  &#x2F;&#x2F; Default value is true.</span><br><span class=\"line\">  &#x2F;&#x2F; dappAutoEnable: true,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<p>By default, the value of <code>dappAutoEnable</code> is true which means that Embark will call <code>ethereum.enable</code> for you to request account access when the first page of the dapp is loaded.</p>\n<p>If you want more control, you can set <code>dappAutoEnable</code> to false.<br>Then, if you want to request account access, you can use the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">    &#x2F;&#x2F; access granted</span><br><span class=\"line\">  &#125; catch() &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; access not granted</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This will request account access and if the user grants access to his accounts, you will be able to make transaction calls.</p>\n<h3 id=\"Components\"><a href=\"#Components\" class=\"headerlink\" title=\"Components\"></a>Components</h3><ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n"},{"title":"Installing Plugins","layout":"docs","_content":"Embark offers a variety of [plugins](/plugins) you can choose from  and you can even [build your own](/docs/creating_plugins.html) to make Embark work with your tool of choice. Let's take a look at how to install and configure plugins for Embark.\n\n## Finding the right plugin\n\nBefore we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn't be too hard. Supported Embark plugins are listed on the [Plugins](/plugins) page. Sometimes it's also helpful to search for repositories on GitHub that have an `embark-` prefix.\n\n## Downloading plugins\n\nOnce we know what plugin we're interested in, it's really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.\n\nThe following command installs a plugin for the `solc` compiler:\n\n```\n$ npm install embark-solc --save\n```\n\nThis will also update our projects `package.json` as we're adding the plugin as a project dependency.\n\n## Configuring plugins\n\nAfter installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.\n\nTo configure a plugin, add a dedicated section to your project's `embark.json` file:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {}\n}\n...\n```\n\nOnce that is done, check out the available configuration options for your plugin of choice. The `embark-solc` plugin allows for configuring whether the plugin should generate binary output or not using the `outputBinary` option. \n\nThe following code sets activates this feature:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {\n    \"outputBinary\": true\n  }\n}\n...\n```\n\n","source":"docs/installing_plugins.md","raw":"title: Installing Plugins\nlayout: docs\n---\nEmbark offers a variety of [plugins](/plugins) you can choose from  and you can even [build your own](/docs/creating_plugins.html) to make Embark work with your tool of choice. Let's take a look at how to install and configure plugins for Embark.\n\n## Finding the right plugin\n\nBefore we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn't be too hard. Supported Embark plugins are listed on the [Plugins](/plugins) page. Sometimes it's also helpful to search for repositories on GitHub that have an `embark-` prefix.\n\n## Downloading plugins\n\nOnce we know what plugin we're interested in, it's really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.\n\nThe following command installs a plugin for the `solc` compiler:\n\n```\n$ npm install embark-solc --save\n```\n\nThis will also update our projects `package.json` as we're adding the plugin as a project dependency.\n\n## Configuring plugins\n\nAfter installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.\n\nTo configure a plugin, add a dedicated section to your project's `embark.json` file:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {}\n}\n...\n```\n\nOnce that is done, check out the available configuration options for your plugin of choice. The `embark-solc` plugin allows for configuring whether the plugin should generate binary output or not using the `outputBinary` option. \n\nThe following code sets activates this feature:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {\n    \"outputBinary\": true\n  }\n}\n...\n```\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/installing_plugins.html","comments":1,"_id":"ck5ijm3rm00197hegb39td76m","content":"<p>Embark offers a variety of <a href=\"/plugins\">plugins</a> you can choose from  and you can even <a href=\"/docs/creating_plugins.html\">build your own</a> to make Embark work with your tool of choice. Let’s take a look at how to install and configure plugins for Embark.</p>\n<h2 id=\"Finding-the-right-plugin\"><a href=\"#Finding-the-right-plugin\" class=\"headerlink\" title=\"Finding the right plugin\"></a>Finding the right plugin</h2><p>Before we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn’t be too hard. Supported Embark plugins are listed on the <a href=\"/plugins\">Plugins</a> page. Sometimes it’s also helpful to search for repositories on GitHub that have an <code>embark-</code> prefix.</p>\n<h2 id=\"Downloading-plugins\"><a href=\"#Downloading-plugins\" class=\"headerlink\" title=\"Downloading plugins\"></a>Downloading plugins</h2><p>Once we know what plugin we’re interested in, it’s really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.</p>\n<p>The following command installs a plugin for the <code>solc</code> compiler:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install embark-solc --save</span><br></pre></td></tr></table></figure>\n\n<p>This will also update our projects <code>package.json</code> as we’re adding the plugin as a project dependency.</p>\n<h2 id=\"Configuring-plugins\"><a href=\"#Configuring-plugins\" class=\"headerlink\" title=\"Configuring plugins\"></a>Configuring plugins</h2><p>After installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.</p>\n<p>To configure a plugin, add a dedicated section to your project’s <code>embark.json</code> file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, check out the available configuration options for your plugin of choice. The <code>embark-solc</code> plugin allows for configuring whether the plugin should generate binary output or not using the <code>outputBinary</code> option. </p>\n<p>The following code sets activates this feature:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;</span><br><span class=\"line\">    &quot;outputBinary&quot;: true</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark offers a variety of <a href=\"/plugins\">plugins</a> you can choose from  and you can even <a href=\"/docs/creating_plugins.html\">build your own</a> to make Embark work with your tool of choice. Let’s take a look at how to install and configure plugins for Embark.</p>\n<h2 id=\"Finding-the-right-plugin\"><a href=\"#Finding-the-right-plugin\" class=\"headerlink\" title=\"Finding the right plugin\"></a>Finding the right plugin</h2><p>Before we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn’t be too hard. Supported Embark plugins are listed on the <a href=\"/plugins\">Plugins</a> page. Sometimes it’s also helpful to search for repositories on GitHub that have an <code>embark-</code> prefix.</p>\n<h2 id=\"Downloading-plugins\"><a href=\"#Downloading-plugins\" class=\"headerlink\" title=\"Downloading plugins\"></a>Downloading plugins</h2><p>Once we know what plugin we’re interested in, it’s really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.</p>\n<p>The following command installs a plugin for the <code>solc</code> compiler:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install embark-solc --save</span><br></pre></td></tr></table></figure>\n\n<p>This will also update our projects <code>package.json</code> as we’re adding the plugin as a project dependency.</p>\n<h2 id=\"Configuring-plugins\"><a href=\"#Configuring-plugins\" class=\"headerlink\" title=\"Configuring plugins\"></a>Configuring plugins</h2><p>After installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.</p>\n<p>To configure a plugin, add a dedicated section to your project’s <code>embark.json</code> file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, check out the available configuration options for your plugin of choice. The <code>embark-solc</code> plugin allows for configuring whether the plugin should generate binary output or not using the <code>outputBinary</code> option. </p>\n<p>The following code sets activates this feature:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;</span><br><span class=\"line\">    &quot;outputBinary&quot;: true</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Using EmbarkJS","layout":"docs","_content":"\nIn order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called **EmbarkJS**. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.\n\n## Embark Artifacts\n\nFirst of all it's important to understand where EmbarkJS comes from. Whenever `embark run` is executed, Embark will generate the EmbarkJS library and put it in the configured `generationDir`, as discussed in [configuring Embark](/docs/configuration.html). This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.\n\nOther artifacts that Embark generates are:\n\n- Smart Contract ABIs\n- Bootstrapping code\n- Configuration data\n\nWe'll discuss these more in this guide.\n\n## Importing EmbarkJS\n\nOnce Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it's really just a matter of importing them accordingly.\n\nThe following code imports EmbarkJS:\n\n```\nimport EmbarkJS from './embarkArtifacts/embarkjs';\n```\n\n## Waiting for EmbarkJS to be ready\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n## Using `dappConnection`\n\nAfter reading the section above on `EmbarkJS.onReady`, you might be wondering where EmbarkJS establishes a connection.\n\nThe answer is: you decide! You can configure it using `dappConnection`, a config property you can find in the Smart Contract config (by default at `config/contracts.js`).\n\nYou will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.\n\nThe expressions used within `dappConnection` come with special semantics. Here's how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.\n\nIn the case of the Smart Contract config `dappConnection`, the one that is used to connect to the blockchain node and that is indirectly used in `EmbarkJS.onReady`, you will see two special entities: `$WEB3` and `$EMBARK`.\n\n- `$WEB3` tells EmbarkJS to connect to the browser's web3 instance. For example, Metamask or Status.\n- `$EMBARK` tells EmbarkJS to connect to Embark's wallet, implemented using a proxy in between the Dapp and the blockchain node.\n  - This let's you use you own accounts, as set up in your Blockchain config's `accounts` section\n    - If you don't use custom accounts, using `$EMBARK` is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the `dev` `miningMode`\n  - Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner\n  \nIf you want, you can also put a valid node URL in the `dappConnection` array. In that case, EmbarkJS will connect directly to the node, without using Embark's proxy.\nIt is, however, not recommended as you lose some of Embark's features, like the transaction logger.\n\nIf you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (`config/blockchain.js`) using the property `endpoint`.\nThen, using `$EMBARK` will use Embark's proxy, which in part will be connected to that endpoint.\n\n## Requesting account access\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request access to a DApp's user accounts. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\nmodule.exports = {\n  ...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  dappAutoEnable: true,\n  ...\n}\n```\n\nBy default, the value of `dappAutoEnable` is `true` which means that Embark will call `ethereum.enable` for us to request account access when the first page of the DApp is loaded.\n\nIf we want more control over when our application should request account access, we can set `dappAutoEnable` to false and make use of `EmbarkJS.enableEthereum()`.\n\nThis method will essentially cause our application to request account access, giving us full control over when this should happen.\n\n```\ntry {\n  const accounts = await EmbarkJS.enableEthereum();\n  // access granted\n} catch() {\n  // access not granted\n}\n```\n\n## Additional APIs\n\nThis guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we're achieving to build. Have a look at the dedicated guides to learn more:\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","source":"docs/javascript_usage.md","raw":"title: Using EmbarkJS\nlayout: docs\n---\n\nIn order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called **EmbarkJS**. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.\n\n## Embark Artifacts\n\nFirst of all it's important to understand where EmbarkJS comes from. Whenever `embark run` is executed, Embark will generate the EmbarkJS library and put it in the configured `generationDir`, as discussed in [configuring Embark](/docs/configuration.html). This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.\n\nOther artifacts that Embark generates are:\n\n- Smart Contract ABIs\n- Bootstrapping code\n- Configuration data\n\nWe'll discuss these more in this guide.\n\n## Importing EmbarkJS\n\nOnce Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it's really just a matter of importing them accordingly.\n\nThe following code imports EmbarkJS:\n\n```\nimport EmbarkJS from './embarkArtifacts/embarkjs';\n```\n\n## Waiting for EmbarkJS to be ready\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n## Using `dappConnection`\n\nAfter reading the section above on `EmbarkJS.onReady`, you might be wondering where EmbarkJS establishes a connection.\n\nThe answer is: you decide! You can configure it using `dappConnection`, a config property you can find in the Smart Contract config (by default at `config/contracts.js`).\n\nYou will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.\n\nThe expressions used within `dappConnection` come with special semantics. Here's how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.\n\nIn the case of the Smart Contract config `dappConnection`, the one that is used to connect to the blockchain node and that is indirectly used in `EmbarkJS.onReady`, you will see two special entities: `$WEB3` and `$EMBARK`.\n\n- `$WEB3` tells EmbarkJS to connect to the browser's web3 instance. For example, Metamask or Status.\n- `$EMBARK` tells EmbarkJS to connect to Embark's wallet, implemented using a proxy in between the Dapp and the blockchain node.\n  - This let's you use you own accounts, as set up in your Blockchain config's `accounts` section\n    - If you don't use custom accounts, using `$EMBARK` is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the `dev` `miningMode`\n  - Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner\n  \nIf you want, you can also put a valid node URL in the `dappConnection` array. In that case, EmbarkJS will connect directly to the node, without using Embark's proxy.\nIt is, however, not recommended as you lose some of Embark's features, like the transaction logger.\n\nIf you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (`config/blockchain.js`) using the property `endpoint`.\nThen, using `$EMBARK` will use Embark's proxy, which in part will be connected to that endpoint.\n\n## Requesting account access\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request access to a DApp's user accounts. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\nmodule.exports = {\n  ...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  dappAutoEnable: true,\n  ...\n}\n```\n\nBy default, the value of `dappAutoEnable` is `true` which means that Embark will call `ethereum.enable` for us to request account access when the first page of the DApp is loaded.\n\nIf we want more control over when our application should request account access, we can set `dappAutoEnable` to false and make use of `EmbarkJS.enableEthereum()`.\n\nThis method will essentially cause our application to request account access, giving us full control over when this should happen.\n\n```\ntry {\n  const accounts = await EmbarkJS.enableEthereum();\n  // access granted\n} catch() {\n  // access not granted\n}\n```\n\n## Additional APIs\n\nThis guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we're achieving to build. Have a look at the dedicated guides to learn more:\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/javascript_usage.html","comments":1,"_id":"ck5ijm3rn001a7hegd50edf60","content":"<p>In order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called <strong>EmbarkJS</strong>. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.</p>\n<h2 id=\"Embark-Artifacts\"><a href=\"#Embark-Artifacts\" class=\"headerlink\" title=\"Embark Artifacts\"></a>Embark Artifacts</h2><p>First of all it’s important to understand where EmbarkJS comes from. Whenever <code>embark run</code> is executed, Embark will generate the EmbarkJS library and put it in the configured <code>generationDir</code>, as discussed in <a href=\"/docs/configuration.html\">configuring Embark</a>. This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.</p>\n<p>Other artifacts that Embark generates are:</p>\n<ul>\n<li>Smart Contract ABIs</li>\n<li>Bootstrapping code</li>\n<li>Configuration data</li>\n</ul>\n<p>We’ll discuss these more in this guide.</p>\n<h2 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h2><p>Once Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it’s really just a matter of importing them accordingly.</p>\n<p>The following code imports EmbarkJS:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;embarkArtifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Waiting-for-EmbarkJS-to-be-ready\"><a href=\"#Waiting-for-EmbarkJS-to-be-ready\" class=\"headerlink\" title=\"Waiting for EmbarkJS to be ready\"></a>Waiting for EmbarkJS to be ready</h2><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-dappConnection\"><a href=\"#Using-dappConnection\" class=\"headerlink\" title=\"Using dappConnection\"></a>Using <code>dappConnection</code></h2><p>After reading the section above on <code>EmbarkJS.onReady</code>, you might be wondering where EmbarkJS establishes a connection.</p>\n<p>The answer is: you decide! You can configure it using <code>dappConnection</code>, a config property you can find in the Smart Contract config (by default at <code>config/contracts.js</code>).</p>\n<p>You will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.</p>\n<p>The expressions used within <code>dappConnection</code> come with special semantics. Here’s how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.</p>\n<p>In the case of the Smart Contract config <code>dappConnection</code>, the one that is used to connect to the blockchain node and that is indirectly used in <code>EmbarkJS.onReady</code>, you will see two special entities: <code>$WEB3</code> and <code>$EMBARK</code>.</p>\n<ul>\n<li><code>$WEB3</code> tells EmbarkJS to connect to the browser’s web3 instance. For example, Metamask or Status.</li>\n<li><code>$EMBARK</code> tells EmbarkJS to connect to Embark’s wallet, implemented using a proxy in between the Dapp and the blockchain node.<ul>\n<li>This let’s you use you own accounts, as set up in your Blockchain config’s <code>accounts</code> section<ul>\n<li>If you don’t use custom accounts, using <code>$EMBARK</code> is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the <code>dev</code> <code>miningMode</code></li>\n</ul>\n</li>\n<li>Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner</li>\n</ul>\n</li>\n</ul>\n<p>If you want, you can also put a valid node URL in the <code>dappConnection</code> array. In that case, EmbarkJS will connect directly to the node, without using Embark’s proxy.<br>It is, however, not recommended as you lose some of Embark’s features, like the transaction logger.</p>\n<p>If you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (<code>config/blockchain.js</code>) using the property <code>endpoint</code>.<br>Then, using <code>$EMBARK</code> will use Embark’s proxy, which in part will be connected to that endpoint.</p>\n<h2 id=\"Requesting-account-access\"><a href=\"#Requesting-account-access\" class=\"headerlink\" title=\"Requesting account access\"></a>Requesting account access</h2><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request access to a DApp’s user accounts. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  dappAutoEnable: true,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>By default, the value of <code>dappAutoEnable</code> is <code>true</code> which means that Embark will call <code>ethereum.enable</code> for us to request account access when the first page of the DApp is loaded.</p>\n<p>If we want more control over when our application should request account access, we can set <code>dappAutoEnable</code> to false and make use of <code>EmbarkJS.enableEthereum()</code>.</p>\n<p>This method will essentially cause our application to request account access, giving us full control over when this should happen.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">try &#123;</span><br><span class=\"line\">  const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">  &#x2F;&#x2F; access granted</span><br><span class=\"line\">&#125; catch() &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; access not granted</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Additional-APIs\"><a href=\"#Additional-APIs\" class=\"headerlink\" title=\"Additional APIs\"></a>Additional APIs</h2><p>This guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we’re achieving to build. Have a look at the dedicated guides to learn more:</p>\n<ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called <strong>EmbarkJS</strong>. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.</p>\n<h2 id=\"Embark-Artifacts\"><a href=\"#Embark-Artifacts\" class=\"headerlink\" title=\"Embark Artifacts\"></a>Embark Artifacts</h2><p>First of all it’s important to understand where EmbarkJS comes from. Whenever <code>embark run</code> is executed, Embark will generate the EmbarkJS library and put it in the configured <code>generationDir</code>, as discussed in <a href=\"/docs/configuration.html\">configuring Embark</a>. This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.</p>\n<p>Other artifacts that Embark generates are:</p>\n<ul>\n<li>Smart Contract ABIs</li>\n<li>Bootstrapping code</li>\n<li>Configuration data</li>\n</ul>\n<p>We’ll discuss these more in this guide.</p>\n<h2 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h2><p>Once Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it’s really just a matter of importing them accordingly.</p>\n<p>The following code imports EmbarkJS:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;embarkArtifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Waiting-for-EmbarkJS-to-be-ready\"><a href=\"#Waiting-for-EmbarkJS-to-be-ready\" class=\"headerlink\" title=\"Waiting for EmbarkJS to be ready\"></a>Waiting for EmbarkJS to be ready</h2><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-dappConnection\"><a href=\"#Using-dappConnection\" class=\"headerlink\" title=\"Using dappConnection\"></a>Using <code>dappConnection</code></h2><p>After reading the section above on <code>EmbarkJS.onReady</code>, you might be wondering where EmbarkJS establishes a connection.</p>\n<p>The answer is: you decide! You can configure it using <code>dappConnection</code>, a config property you can find in the Smart Contract config (by default at <code>config/contracts.js</code>).</p>\n<p>You will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.</p>\n<p>The expressions used within <code>dappConnection</code> come with special semantics. Here’s how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.</p>\n<p>In the case of the Smart Contract config <code>dappConnection</code>, the one that is used to connect to the blockchain node and that is indirectly used in <code>EmbarkJS.onReady</code>, you will see two special entities: <code>$WEB3</code> and <code>$EMBARK</code>.</p>\n<ul>\n<li><code>$WEB3</code> tells EmbarkJS to connect to the browser’s web3 instance. For example, Metamask or Status.</li>\n<li><code>$EMBARK</code> tells EmbarkJS to connect to Embark’s wallet, implemented using a proxy in between the Dapp and the blockchain node.<ul>\n<li>This let’s you use you own accounts, as set up in your Blockchain config’s <code>accounts</code> section<ul>\n<li>If you don’t use custom accounts, using <code>$EMBARK</code> is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the <code>dev</code> <code>miningMode</code></li>\n</ul>\n</li>\n<li>Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner</li>\n</ul>\n</li>\n</ul>\n<p>If you want, you can also put a valid node URL in the <code>dappConnection</code> array. In that case, EmbarkJS will connect directly to the node, without using Embark’s proxy.<br>It is, however, not recommended as you lose some of Embark’s features, like the transaction logger.</p>\n<p>If you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (<code>config/blockchain.js</code>) using the property <code>endpoint</code>.<br>Then, using <code>$EMBARK</code> will use Embark’s proxy, which in part will be connected to that endpoint.</p>\n<h2 id=\"Requesting-account-access\"><a href=\"#Requesting-account-access\" class=\"headerlink\" title=\"Requesting account access\"></a>Requesting account access</h2><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request access to a DApp’s user accounts. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  dappAutoEnable: true,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>By default, the value of <code>dappAutoEnable</code> is <code>true</code> which means that Embark will call <code>ethereum.enable</code> for us to request account access when the first page of the DApp is loaded.</p>\n<p>If we want more control over when our application should request account access, we can set <code>dappAutoEnable</code> to false and make use of <code>EmbarkJS.enableEthereum()</code>.</p>\n<p>This method will essentially cause our application to request account access, giving us full control over when this should happen.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">try &#123;</span><br><span class=\"line\">  const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">  &#x2F;&#x2F; access granted</span><br><span class=\"line\">&#125; catch() &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; access not granted</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Additional-APIs\"><a href=\"#Additional-APIs\" class=\"headerlink\" title=\"Additional APIs\"></a>Additional APIs</h2><p>This guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we’re achieving to build. Have a look at the dedicated guides to learn more:</p>\n<ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n"},{"title":"Configuring Messages with Whisper","layout":"docs","_content":"\nWith Embark it's very easy to connect to messaging channels using Whisper. In this guide we'll discuss how to set everything up to add messaging support to our applications.\n\n## Configuration basics\n\nBy default, Embark will check our preferred communication configuration in the file `config/communication.js`. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment (for more information about environments, check out [this guide](/docs/environments.html). Each of these options can be individually overridden on a per environment basis.\n\nHere's an example configuration:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    provider: 'whisper',\n    available_providers: ['whisper']\n  }\n}\n```\n\nAvailable options:\n\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`enabled` | boolean: `true/false` | To enable or completely disable communication support\n`provider` |  string: `whisper`  | Desired provider to automatically connect to in the dapp.\n`available_providers`  | array: `[\"whisper\"]` |  List of communication platforms to be supported in the dapp. This will affect what's available with the EmbarkJS library in the dapp so if you don't need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.\n\n","source":"docs/messages_configuration.md","raw":"title: Configuring Messages with Whisper\nlayout: docs\n---\n\nWith Embark it's very easy to connect to messaging channels using Whisper. In this guide we'll discuss how to set everything up to add messaging support to our applications.\n\n## Configuration basics\n\nBy default, Embark will check our preferred communication configuration in the file `config/communication.js`. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment (for more information about environments, check out [this guide](/docs/environments.html). Each of these options can be individually overridden on a per environment basis.\n\nHere's an example configuration:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    provider: 'whisper',\n    available_providers: ['whisper']\n  }\n}\n```\n\nAvailable options:\n\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`enabled` | boolean: `true/false` | To enable or completely disable communication support\n`provider` |  string: `whisper`  | Desired provider to automatically connect to in the dapp.\n`available_providers`  | array: `[\"whisper\"]` |  List of communication platforms to be supported in the dapp. This will affect what's available with the EmbarkJS library in the dapp so if you don't need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/messages_configuration.html","comments":1,"_id":"ck5ijm3ro001b7hege89ragpf","content":"<p>With Embark it’s very easy to connect to messaging channels using Whisper. In this guide we’ll discuss how to set everything up to add messaging support to our applications.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>By default, Embark will check our preferred communication configuration in the file <code>config/communication.js</code>. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment (for more information about environments, check out <a href=\"/docs/environments.html\">this guide</a>. Each of these options can be individually overridden on a per environment basis.</p>\n<p>Here’s an example configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    provider: &#39;whisper&#39;,</span><br><span class=\"line\">    available_providers: [&#39;whisper&#39;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Available options:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true/false</code></td>\n<td>To enable or completely disable communication support</td>\n</tr>\n<tr>\n<td><code>provider</code></td>\n<td>string: <code>whisper</code></td>\n<td>Desired provider to automatically connect to in the dapp.</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;whisper&quot;]</code></td>\n<td>List of communication platforms to be supported in the dapp. This will affect what’s available with the EmbarkJS library in the dapp so if you don’t need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.</td>\n</tr>\n</tbody></table>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With Embark it’s very easy to connect to messaging channels using Whisper. In this guide we’ll discuss how to set everything up to add messaging support to our applications.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>By default, Embark will check our preferred communication configuration in the file <code>config/communication.js</code>. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment (for more information about environments, check out <a href=\"/docs/environments.html\">this guide</a>. Each of these options can be individually overridden on a per environment basis.</p>\n<p>Here’s an example configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    provider: &#39;whisper&#39;,</span><br><span class=\"line\">    available_providers: [&#39;whisper&#39;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Available options:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true/false</code></td>\n<td>To enable or completely disable communication support</td>\n</tr>\n<tr>\n<td><code>provider</code></td>\n<td>string: <code>whisper</code></td>\n<td>Desired provider to automatically connect to in the dapp.</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;whisper&quot;]</code></td>\n<td>List of communication platforms to be supported in the dapp. This will affect what’s available with the EmbarkJS library in the dapp so if you don’t need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.</td>\n</tr>\n</tbody></table>\n"},{"title":"Messages in JavaScript","layout":"docs","_content":"\nEmbark's companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we'll take a closer look how this works.\n\nMake sure to read our guide in [using EmbarkJS](/docs/javascript.html) first.\n\n## Setting up EmbarkJS\n\nBy default Embark will initialize EmbarkJS with the provider configured at `config/communication.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Messages.setProvider('whisper')\n```\n\n## Listening to messages\n\nWe can subscribe to channels using the `listenTo()` method by specifying a list of channel topics like this:\n\n```\nEmbarkJS.Messages.listenTo({\n  topic: ['topic1', 'topic2']\n}).subscribe(message {\n  console.log('received: ' + message);\n});\n```\n\n`listenTo()` returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it's important to unsubscribe from it once we're no longer interested in the data. Otherwise we'll introduce memory leaks.\n\n## Sending messages\n\nSending messages can be done using the `sendMessage()` method and it's entirely up to use whether we want to send plain text messages or even objects.\n\n\nHere's how to send a plain text message to the `sometopic` topic:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: 'hello world'\n});\n```\n\nAnd this code snippet shows how to send an object structure:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: { msg: 'hello world' }\n});\n```\n\nNotice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.\n\n{% notification info 'On topic arrays:' %}\nArray of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g `[\"topic1\", [\"topic2\", \"topic3\"]]` => `topic1 AND (topic2 OR topic 3)`.\n{% endnotification %}\n\n","source":"docs/messages_javascript.md","raw":"title: Messages in JavaScript\nlayout: docs\n---\n\nEmbark's companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we'll take a closer look how this works.\n\nMake sure to read our guide in [using EmbarkJS](/docs/javascript.html) first.\n\n## Setting up EmbarkJS\n\nBy default Embark will initialize EmbarkJS with the provider configured at `config/communication.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Messages.setProvider('whisper')\n```\n\n## Listening to messages\n\nWe can subscribe to channels using the `listenTo()` method by specifying a list of channel topics like this:\n\n```\nEmbarkJS.Messages.listenTo({\n  topic: ['topic1', 'topic2']\n}).subscribe(message {\n  console.log('received: ' + message);\n});\n```\n\n`listenTo()` returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it's important to unsubscribe from it once we're no longer interested in the data. Otherwise we'll introduce memory leaks.\n\n## Sending messages\n\nSending messages can be done using the `sendMessage()` method and it's entirely up to use whether we want to send plain text messages or even objects.\n\n\nHere's how to send a plain text message to the `sometopic` topic:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: 'hello world'\n});\n```\n\nAnd this code snippet shows how to send an object structure:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: { msg: 'hello world' }\n});\n```\n\nNotice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.\n\n{% notification info 'On topic arrays:' %}\nArray of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g `[\"topic1\", [\"topic2\", \"topic3\"]]` => `topic1 AND (topic2 OR topic 3)`.\n{% endnotification %}\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/messages_javascript.html","comments":1,"_id":"ck5ijm3rp001c7heg49d3513w","content":"<p>Embark’s companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we’ll take a closer look how this works.</p>\n<p>Make sure to read our guide in <a href=\"/docs/javascript.html\">using EmbarkJS</a> first.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.setProvider(&#39;whisper&#39;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Listening-to-messages\"><a href=\"#Listening-to-messages\" class=\"headerlink\" title=\"Listening to messages\"></a>Listening to messages</h2><p>We can subscribe to channels using the <code>listenTo()</code> method by specifying a list of channel topics like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.listenTo(&#123;</span><br><span class=\"line\">  topic: [&#39;topic1&#39;, &#39;topic2&#39;]</span><br><span class=\"line\">&#125;).subscribe(message &#123;</span><br><span class=\"line\">  console.log(&#39;received: &#39; + message);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p><code>listenTo()</code> returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it’s important to unsubscribe from it once we’re no longer interested in the data. Otherwise we’ll introduce memory leaks.</p>\n<h2 id=\"Sending-messages\"><a href=\"#Sending-messages\" class=\"headerlink\" title=\"Sending messages\"></a>Sending messages</h2><p>Sending messages can be done using the <code>sendMessage()</code> method and it’s entirely up to use whether we want to send plain text messages or even objects.</p>\n<p>Here’s how to send a plain text message to the <code>sometopic</code> topic:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#39;hello world&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>And this code snippet shows how to send an object structure:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#123; msg: &#39;hello world&#39; &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On topic arrays:</strong></p>\n  <p><p>Array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code>.</p>\n</p>\n</div> \n\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark’s companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we’ll take a closer look how this works.</p>\n<p>Make sure to read our guide in <a href=\"/docs/javascript.html\">using EmbarkJS</a> first.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.setProvider(&#39;whisper&#39;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Listening-to-messages\"><a href=\"#Listening-to-messages\" class=\"headerlink\" title=\"Listening to messages\"></a>Listening to messages</h2><p>We can subscribe to channels using the <code>listenTo()</code> method by specifying a list of channel topics like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.listenTo(&#123;</span><br><span class=\"line\">  topic: [&#39;topic1&#39;, &#39;topic2&#39;]</span><br><span class=\"line\">&#125;).subscribe(message &#123;</span><br><span class=\"line\">  console.log(&#39;received: &#39; + message);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p><code>listenTo()</code> returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it’s important to unsubscribe from it once we’re no longer interested in the data. Otherwise we’ll introduce memory leaks.</p>\n<h2 id=\"Sending-messages\"><a href=\"#Sending-messages\" class=\"headerlink\" title=\"Sending messages\"></a>Sending messages</h2><p>Sending messages can be done using the <code>sendMessage()</code> method and it’s entirely up to use whether we want to send plain text messages or even objects.</p>\n<p>Here’s how to send a plain text message to the <code>sometopic</code> topic:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#39;hello world&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>And this code snippet shows how to send an object structure:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#123; msg: &#39;hello world&#39; &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On topic arrays:</strong></p>\n  <p><p>Array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code>.</p>\n</p>\n</div> \n\n\n\n"},{"title":"Migrating from Embark 3.x","layout":"docs","_content":"\nWith the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.\n\nIn this guide we'll discuss the few steps to take a project from Embark 3.2.x to 4.x.\n\n## Upgrading to v4\n\nIn order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:\n\n1. Adding a `generationDir` to the project's `embark.json`\n2. Updating \"magic\" EmbarkJS imports\n3. Installing a blockchain connector\n4. Updating blockchain account configurations\n\nLet's walk through them step by step!\n\n### Adding a `generationDir` to `embark.json`\n\nSince version 4, Embark generates project [specific artifacts](/docs/javascript_usage.html#Embark-Artifacts). We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we'll have to add a [`generationDir`](/docs/configuration.html#generationDir) property to our project's `embark.json` file.\n\n```\n...\n\"generationDir\": \"artifacts\"\n...\n```\n\nThe value of `generationDir` is the name of the folder in which we want Embark to generate artifacts. For new projects, `artifacts` is the default.\n\n### Updating \"magic\" EmbarkJS imports\n\nBefore version 4, EmbarkJS provided a couple of \"magic\" imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.\n\nThe EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we'll have to update our imports to point to the right location.\n\nFor EmbarkJS, replace this import:\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\n```\nwith\n```\nimport EmbarkJS from './artifacts/embarkjs';\n```\n\n{% notification info 'Attention!' %}\nNotice that the import path has to match the path we've specified in `generationDir` earlier.\n{% endnotification %}\n\nFor Smart Contract instances, replace:\n\n```\nimport CONTRACT_NAME from 'Embark/contracts/CONTRACT_NAME';\n```\n\nwith\n\n```\nimport CONTRACT_NAME from './artifacts/contracts/CONTRACT_NAME';\n```\n\n#### Remove web3 imports\n\nPrior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.\n\nRemove the following import from your application:\n\n```\nimport web3 from 'Embark/web3';\n```\n\n### Updating blockchain configurations\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the [Accounts Blockchain configuration guide](/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n\n- **account**: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as described in the docs\n- **simulatorMnemonic**: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config’s mnemonic account type](/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n\n## Updating to v5\n\nSummary:\n- Contract config\n  - Removed the deployment section (now all part of blockchain config)\n  - `contracts` renamed `deploy` to match `beforeDeploy` and `afterDeploy` and for tests\n- Blockchain config\n  - A lot of new defaults, so less that you need to configure [Source](/docs/blockchain_configuration.html#Common-Parameters)\n  - A lot of renamed parameters\n    - isDev: `miningMode: 'dev'`\n    - mineWhenNeeded: `miningMode: 'auto'`\n    - ethereumClientName: `client`\n  - New `endpoint` parameter that let's you connect to an external endpoint or configure more easily which local endpoint to start [Source](/docs/blockchain_configuration.html#Parameter-descriptions)\n  - Now is the only source for accounts [Source](/docs/blockchain_accounts_configuration.html)\n- Tests\n  - Can now configure module configuration\n    - Storage, namesystem (ENS) and communication modules can now be configured \n      - Configure them just like in the configuration files\n      - Tests default to the `test` environment\n      - Modules are turned off by default\n      - Config merges with `test` and `default` so no need to rewrite all the provider configs\n  - `deployement` section removed\n    - You can now configure the accounts and the endpoint in the `blockchain` section\n  - `contracts` renamed `deploy` and put inside the `contracts` section\n","source":"docs/migrating_from_3.x.md","raw":"title: Migrating from Embark 3.x\nlayout: docs\n---\n\nWith the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.\n\nIn this guide we'll discuss the few steps to take a project from Embark 3.2.x to 4.x.\n\n## Upgrading to v4\n\nIn order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:\n\n1. Adding a `generationDir` to the project's `embark.json`\n2. Updating \"magic\" EmbarkJS imports\n3. Installing a blockchain connector\n4. Updating blockchain account configurations\n\nLet's walk through them step by step!\n\n### Adding a `generationDir` to `embark.json`\n\nSince version 4, Embark generates project [specific artifacts](/docs/javascript_usage.html#Embark-Artifacts). We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we'll have to add a [`generationDir`](/docs/configuration.html#generationDir) property to our project's `embark.json` file.\n\n```\n...\n\"generationDir\": \"artifacts\"\n...\n```\n\nThe value of `generationDir` is the name of the folder in which we want Embark to generate artifacts. For new projects, `artifacts` is the default.\n\n### Updating \"magic\" EmbarkJS imports\n\nBefore version 4, EmbarkJS provided a couple of \"magic\" imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.\n\nThe EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we'll have to update our imports to point to the right location.\n\nFor EmbarkJS, replace this import:\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\n```\nwith\n```\nimport EmbarkJS from './artifacts/embarkjs';\n```\n\n{% notification info 'Attention!' %}\nNotice that the import path has to match the path we've specified in `generationDir` earlier.\n{% endnotification %}\n\nFor Smart Contract instances, replace:\n\n```\nimport CONTRACT_NAME from 'Embark/contracts/CONTRACT_NAME';\n```\n\nwith\n\n```\nimport CONTRACT_NAME from './artifacts/contracts/CONTRACT_NAME';\n```\n\n#### Remove web3 imports\n\nPrior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.\n\nRemove the following import from your application:\n\n```\nimport web3 from 'Embark/web3';\n```\n\n### Updating blockchain configurations\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the [Accounts Blockchain configuration guide](/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n\n- **account**: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as described in the docs\n- **simulatorMnemonic**: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config’s mnemonic account type](/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n\n## Updating to v5\n\nSummary:\n- Contract config\n  - Removed the deployment section (now all part of blockchain config)\n  - `contracts` renamed `deploy` to match `beforeDeploy` and `afterDeploy` and for tests\n- Blockchain config\n  - A lot of new defaults, so less that you need to configure [Source](/docs/blockchain_configuration.html#Common-Parameters)\n  - A lot of renamed parameters\n    - isDev: `miningMode: 'dev'`\n    - mineWhenNeeded: `miningMode: 'auto'`\n    - ethereumClientName: `client`\n  - New `endpoint` parameter that let's you connect to an external endpoint or configure more easily which local endpoint to start [Source](/docs/blockchain_configuration.html#Parameter-descriptions)\n  - Now is the only source for accounts [Source](/docs/blockchain_accounts_configuration.html)\n- Tests\n  - Can now configure module configuration\n    - Storage, namesystem (ENS) and communication modules can now be configured \n      - Configure them just like in the configuration files\n      - Tests default to the `test` environment\n      - Modules are turned off by default\n      - Config merges with `test` and `default` so no need to rewrite all the provider configs\n  - `deployement` section removed\n    - You can now configure the accounts and the endpoint in the `blockchain` section\n  - `contracts` renamed `deploy` and put inside the `contracts` section\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/migrating_from_3.x.html","comments":1,"_id":"ck5ijm3rp001d7hegbn1k2bi5","content":"<p>With the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.</p>\n<p>In this guide we’ll discuss the few steps to take a project from Embark 3.2.x to 4.x.</p>\n<h2 id=\"Upgrading-to-v4\"><a href=\"#Upgrading-to-v4\" class=\"headerlink\" title=\"Upgrading to v4\"></a>Upgrading to v4</h2><p>In order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:</p>\n<ol>\n<li>Adding a <code>generationDir</code> to the project’s <code>embark.json</code></li>\n<li>Updating “magic” EmbarkJS imports</li>\n<li>Installing a blockchain connector</li>\n<li>Updating blockchain account configurations</li>\n</ol>\n<p>Let’s walk through them step by step!</p>\n<h3 id=\"Adding-a-generationDir-to-embark-json\"><a href=\"#Adding-a-generationDir-to-embark-json\" class=\"headerlink\" title=\"Adding a generationDir to embark.json\"></a>Adding a <code>generationDir</code> to <code>embark.json</code></h3><p>Since version 4, Embark generates project <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">specific artifacts</a>. We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we’ll have to add a <a href=\"/docs/configuration.html#generationDir\"><code>generationDir</code></a> property to our project’s <code>embark.json</code> file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;generationDir&quot;: &quot;artifacts&quot;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The value of <code>generationDir</code> is the name of the folder in which we want Embark to generate artifacts. For new projects, <code>artifacts</code> is the default.</p>\n<h3 id=\"Updating-“magic”-EmbarkJS-imports\"><a href=\"#Updating-“magic”-EmbarkJS-imports\" class=\"headerlink\" title=\"Updating “magic” EmbarkJS imports\"></a>Updating “magic” EmbarkJS imports</h3><p>Before version 4, EmbarkJS provided a couple of “magic” imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.</p>\n<p>The EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we’ll have to update our imports to point to the right location.</p>\n<p>For EmbarkJS, replace this import:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;artifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Attention!</strong></p>\n  <p><p>Notice that the import path has to match the path we’ve specified in <code>generationDir</code> earlier.</p>\n</p>\n</div> \n\n\n\n<p>For Smart Contract instances, replace:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;Embark&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Remove-web3-imports\"><a href=\"#Remove-web3-imports\" class=\"headerlink\" title=\"Remove web3 imports\"></a>Remove web3 imports</h4><p>Prior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.</p>\n<p>Remove the following import from your application:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import web3 from &#39;Embark&#x2F;web3&#39;;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Updating-blockchain-configurations\"><a href=\"#Updating-blockchain-configurations\" class=\"headerlink\" title=\"Updating blockchain configurations\"></a>Updating blockchain configurations</h3><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><strong>account</strong>: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as described in the docs</li>\n<li><strong>simulatorMnemonic</strong>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s mnemonic account type</a>.</li>\n</ul>\n<h2 id=\"Updating-to-v5\"><a href=\"#Updating-to-v5\" class=\"headerlink\" title=\"Updating to v5\"></a>Updating to v5</h2><p>Summary:</p>\n<ul>\n<li>Contract config<ul>\n<li>Removed the deployment section (now all part of blockchain config)</li>\n<li><code>contracts</code> renamed <code>deploy</code> to match <code>beforeDeploy</code> and <code>afterDeploy</code> and for tests</li>\n</ul>\n</li>\n<li>Blockchain config<ul>\n<li>A lot of new defaults, so less that you need to configure <a href=\"/docs/blockchain_configuration.html#Common-Parameters\">Source</a></li>\n<li>A lot of renamed parameters<ul>\n<li>isDev: <code>miningMode: &#39;dev&#39;</code></li>\n<li>mineWhenNeeded: <code>miningMode: &#39;auto&#39;</code></li>\n<li>ethereumClientName: <code>client</code></li>\n</ul>\n</li>\n<li>New <code>endpoint</code> parameter that let’s you connect to an external endpoint or configure more easily which local endpoint to start <a href=\"/docs/blockchain_configuration.html#Parameter-descriptions\">Source</a></li>\n<li>Now is the only source for accounts <a href=\"/docs/blockchain_accounts_configuration.html\">Source</a></li>\n</ul>\n</li>\n<li>Tests<ul>\n<li>Can now configure module configuration<ul>\n<li>Storage, namesystem (ENS) and communication modules can now be configured <ul>\n<li>Configure them just like in the configuration files</li>\n<li>Tests default to the <code>test</code> environment</li>\n<li>Modules are turned off by default</li>\n<li>Config merges with <code>test</code> and <code>default</code> so no need to rewrite all the provider configs</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code>deployement</code> section removed<ul>\n<li>You can now configure the accounts and the endpoint in the <code>blockchain</code> section</li>\n</ul>\n</li>\n<li><code>contracts</code> renamed <code>deploy</code> and put inside the <code>contracts</code> section</li>\n</ul>\n</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.</p>\n<p>In this guide we’ll discuss the few steps to take a project from Embark 3.2.x to 4.x.</p>\n<h2 id=\"Upgrading-to-v4\"><a href=\"#Upgrading-to-v4\" class=\"headerlink\" title=\"Upgrading to v4\"></a>Upgrading to v4</h2><p>In order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:</p>\n<ol>\n<li>Adding a <code>generationDir</code> to the project’s <code>embark.json</code></li>\n<li>Updating “magic” EmbarkJS imports</li>\n<li>Installing a blockchain connector</li>\n<li>Updating blockchain account configurations</li>\n</ol>\n<p>Let’s walk through them step by step!</p>\n<h3 id=\"Adding-a-generationDir-to-embark-json\"><a href=\"#Adding-a-generationDir-to-embark-json\" class=\"headerlink\" title=\"Adding a generationDir to embark.json\"></a>Adding a <code>generationDir</code> to <code>embark.json</code></h3><p>Since version 4, Embark generates project <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">specific artifacts</a>. We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we’ll have to add a <a href=\"/docs/configuration.html#generationDir\"><code>generationDir</code></a> property to our project’s <code>embark.json</code> file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;generationDir&quot;: &quot;artifacts&quot;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The value of <code>generationDir</code> is the name of the folder in which we want Embark to generate artifacts. For new projects, <code>artifacts</code> is the default.</p>\n<h3 id=\"Updating-“magic”-EmbarkJS-imports\"><a href=\"#Updating-“magic”-EmbarkJS-imports\" class=\"headerlink\" title=\"Updating “magic” EmbarkJS imports\"></a>Updating “magic” EmbarkJS imports</h3><p>Before version 4, EmbarkJS provided a couple of “magic” imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.</p>\n<p>The EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we’ll have to update our imports to point to the right location.</p>\n<p>For EmbarkJS, replace this import:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;artifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Attention!</strong></p>\n  <p><p>Notice that the import path has to match the path we’ve specified in <code>generationDir</code> earlier.</p>\n</p>\n</div> \n\n\n\n<p>For Smart Contract instances, replace:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;Embark&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Remove-web3-imports\"><a href=\"#Remove-web3-imports\" class=\"headerlink\" title=\"Remove web3 imports\"></a>Remove web3 imports</h4><p>Prior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.</p>\n<p>Remove the following import from your application:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import web3 from &#39;Embark&#x2F;web3&#39;;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Updating-blockchain-configurations\"><a href=\"#Updating-blockchain-configurations\" class=\"headerlink\" title=\"Updating blockchain configurations\"></a>Updating blockchain configurations</h3><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><strong>account</strong>: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as described in the docs</li>\n<li><strong>simulatorMnemonic</strong>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s mnemonic account type</a>.</li>\n</ul>\n<h2 id=\"Updating-to-v5\"><a href=\"#Updating-to-v5\" class=\"headerlink\" title=\"Updating to v5\"></a>Updating to v5</h2><p>Summary:</p>\n<ul>\n<li>Contract config<ul>\n<li>Removed the deployment section (now all part of blockchain config)</li>\n<li><code>contracts</code> renamed <code>deploy</code> to match <code>beforeDeploy</code> and <code>afterDeploy</code> and for tests</li>\n</ul>\n</li>\n<li>Blockchain config<ul>\n<li>A lot of new defaults, so less that you need to configure <a href=\"/docs/blockchain_configuration.html#Common-Parameters\">Source</a></li>\n<li>A lot of renamed parameters<ul>\n<li>isDev: <code>miningMode: &#39;dev&#39;</code></li>\n<li>mineWhenNeeded: <code>miningMode: &#39;auto&#39;</code></li>\n<li>ethereumClientName: <code>client</code></li>\n</ul>\n</li>\n<li>New <code>endpoint</code> parameter that let’s you connect to an external endpoint or configure more easily which local endpoint to start <a href=\"/docs/blockchain_configuration.html#Parameter-descriptions\">Source</a></li>\n<li>Now is the only source for accounts <a href=\"/docs/blockchain_accounts_configuration.html\">Source</a></li>\n</ul>\n</li>\n<li>Tests<ul>\n<li>Can now configure module configuration<ul>\n<li>Storage, namesystem (ENS) and communication modules can now be configured <ul>\n<li>Configure them just like in the configuration files</li>\n<li>Tests default to the <code>test</code> environment</li>\n<li>Modules are turned off by default</li>\n<li>Config merges with <code>test</code> and <code>default</code> so no need to rewrite all the provider configs</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code>deployement</code> section removed<ul>\n<li>You can now configure the accounts and the endpoint in the <code>blockchain</code> section</li>\n</ul>\n</li>\n<li><code>contracts</code> renamed <code>deploy</code> and put inside the <code>contracts</code> section</li>\n</ul>\n</li>\n</ul>\n"},{"title":"Naming System Configuration","layout":"docs","_content":"\nWe can configure different naming systems in Embark. In this guide we'll explore how this is done using the Ethereum Name Service.\n\n## Configuration basics\n\nEmbark checks our configuration in `config/namesystem.js` by default. A naming system configuration isn't crucial to run Embark, so this only needs to be enabled when planing to use a naming system.\n\nWhen using ENS as our provider, we can set the `register` section to pre-register sub-domains. This feature is  only available in the development environment:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    available_providers: ['ens', 'ipns'],\n    provider: 'ens',\n    register: {\n      rootDomain: 'embark.eth',\n      subdomains: {\n        // List of subdomains.\n        // The key is the name (eg: status -> status.embark.eth)\n        // The value is the address to where the subdomain points\n        'status': '0x1a2f3b98e434c02363f3dac3174af93c1d690914'\n      }\n    }\n  }\n};\n```\n","source":"docs/naming_configuration.md","raw":"title: Naming System Configuration\nlayout: docs\n---\n\nWe can configure different naming systems in Embark. In this guide we'll explore how this is done using the Ethereum Name Service.\n\n## Configuration basics\n\nEmbark checks our configuration in `config/namesystem.js` by default. A naming system configuration isn't crucial to run Embark, so this only needs to be enabled when planing to use a naming system.\n\nWhen using ENS as our provider, we can set the `register` section to pre-register sub-domains. This feature is  only available in the development environment:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    available_providers: ['ens', 'ipns'],\n    provider: 'ens',\n    register: {\n      rootDomain: 'embark.eth',\n      subdomains: {\n        // List of subdomains.\n        // The key is the name (eg: status -> status.embark.eth)\n        // The value is the address to where the subdomain points\n        'status': '0x1a2f3b98e434c02363f3dac3174af93c1d690914'\n      }\n    }\n  }\n};\n```\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/naming_configuration.html","comments":1,"_id":"ck5ijm3rq001e7hegcf0yf8ex","content":"<p>We can configure different naming systems in Embark. In this guide we’ll explore how this is done using the Ethereum Name Service.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark checks our configuration in <code>config/namesystem.js</code> by default. A naming system configuration isn’t crucial to run Embark, so this only needs to be enabled when planing to use a naming system.</p>\n<p>When using ENS as our provider, we can set the <code>register</code> section to pre-register sub-domains. This feature is  only available in the development environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    available_providers: [&#39;ens&#39;, &#39;ipns&#39;],</span><br><span class=\"line\">    provider: &#39;ens&#39;,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &#39;embark.eth&#39;,</span><br><span class=\"line\">      subdomains: &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; List of subdomains.</span><br><span class=\"line\">        &#x2F;&#x2F; The key is the name (eg: status -&gt; status.embark.eth)</span><br><span class=\"line\">        &#x2F;&#x2F; The value is the address to where the subdomain points</span><br><span class=\"line\">        &#39;status&#39;: &#39;0x1a2f3b98e434c02363f3dac3174af93c1d690914&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>We can configure different naming systems in Embark. In this guide we’ll explore how this is done using the Ethereum Name Service.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark checks our configuration in <code>config/namesystem.js</code> by default. A naming system configuration isn’t crucial to run Embark, so this only needs to be enabled when planing to use a naming system.</p>\n<p>When using ENS as our provider, we can set the <code>register</code> section to pre-register sub-domains. This feature is  only available in the development environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    available_providers: [&#39;ens&#39;, &#39;ipns&#39;],</span><br><span class=\"line\">    provider: &#39;ens&#39;,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &#39;embark.eth&#39;,</span><br><span class=\"line\">      subdomains: &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; List of subdomains.</span><br><span class=\"line\">        &#x2F;&#x2F; The key is the name (eg: status -&gt; status.embark.eth)</span><br><span class=\"line\">        &#x2F;&#x2F; The value is the address to where the subdomain points</span><br><span class=\"line\">        &#39;status&#39;: &#39;0x1a2f3b98e434c02363f3dac3174af93c1d690914&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n"},{"title":"Naming System (ENS) in JavaScript","layout":"docs","_content":"\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n## Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve()`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n```\nEmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  console.log('ENS address', result)\n});\n```\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve()` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n```\nEmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n```\n\n## Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\nGuess what, `EmbarkJS.Names.lookup()` also returns a Promise in case you prefer using those over callbacks:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\n## Registering a subdomain\n\nThis enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.\n\n```\nEmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n```\n","source":"docs/naming_javascript.md","raw":"title: Naming System (ENS) in JavaScript\nlayout: docs\n---\n\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n## Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve()`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n```\nEmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  console.log('ENS address', result)\n});\n```\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve()` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n```\nEmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n```\n\n## Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\nGuess what, `EmbarkJS.Names.lookup()` also returns a Promise in case you prefer using those over callbacks:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\n## Registering a subdomain\n\nThis enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.\n\n```\nEmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n```\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/naming_javascript.html","comments":1,"_id":"ck5ijm3rr001f7hegcvbhgqxy","content":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h2 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h2><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve()</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&#39;ethereum.eth&#39;, (err, result) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;ENS address&#39;, result)</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve()</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&quot;ethereum.eth&quot;).then(address &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the address for ethereum.eth is: &quot; + address);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h2><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;, (err, name) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup()</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-a-subdomain\"><a href=\"#Registering-a-subdomain\" class=\"headerlink\" title=\"Registering a subdomain\"></a>Registering a subdomain</h2><p>This enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.registerSubDomain(&#39;newsubdomain&#39;, &#39;0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de&#39;, (err, transaction) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#96;Successfully registered with $&#123;transaction.gasUsed&#125; gas&#96;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h2 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h2><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve()</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&#39;ethereum.eth&#39;, (err, result) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;ENS address&#39;, result)</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve()</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&quot;ethereum.eth&quot;).then(address &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the address for ethereum.eth is: &quot; + address);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h2><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;, (err, name) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup()</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-a-subdomain\"><a href=\"#Registering-a-subdomain\" class=\"headerlink\" title=\"Registering a subdomain\"></a>Registering a subdomain</h2><p>This enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.registerSubDomain(&#39;newsubdomain&#39;, &#39;0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de&#39;, (err, transaction) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#96;Successfully registered with $&#123;transaction.gasUsed&#125; gas&#96;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n"},{"title":"Getting Started","layout":"docs","_content":"Welcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the [troubleshooting guide](troubleshooting.html), raise an issue on [GitHub](https://github.com/embarklabs/embark/issues) or ask in the [Gitter Chatroom](https://gitter.im/embark-framework/Lobby) respectively.\n\n{% notification info 'Migrating from 3.2.x' %}\nIf you're planning to upgrade your Embark 3.2.x application to 4.x, head over to our [Migration Guide](/docs/migrating_from_3.x.html).\n{% endnotification %}\n## What is Embark?\n\nEmbark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as \"DApps\". It integrates with [Ethereum](https://ethereum.org/) blockchains, decentralized storages like [IPFS](https://ipfs.io) and [Swarm](https://swarm-guide.readthedocs.io/en/latest/introduction.html), and decentralized communication platforms like [Whisper](https://github.com/ethereum/wiki/wiki/Whisper).\n\nEmbark's goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.\n\nSome of Embark's features, but not all of them, are:\n\n* **Automatic Smart Contract deployment** - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. [Learn more](/docs/contracts_configuration.html)\n* **Client development** - Build your application with the framework of your choice right within Embark.\n* **Testing** - Test your applications and Smart Contracts through Web3 in JavaScript. [Learn More](/docs/contracts_testing.html)\n* **Decentralized app distribution** - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. [Learn more](/docs/storage_configuration.html)\n* **Peer-to-peer messaging** - Send and receive messages via communication protocols like Whisper. [Learn more](/docs/messages_configuration.html)\n* **Cockpit** - An companion application to make developing and debugging decentralized applications a breeze. [Learn more](/docs/cockpit_introduction.html)\n\nThere's so much more, but let's take it one step at a time. Make sure to check out our other guides in case you're looking for a particular feature.\n\nIf you haven't yet, this is a good time to [install Embark](installation.html) on your machine. Read on for more information!\n\n\n","source":"docs/overview.md","raw":"title: Getting Started\nlayout: docs\n---\nWelcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the [troubleshooting guide](troubleshooting.html), raise an issue on [GitHub](https://github.com/embarklabs/embark/issues) or ask in the [Gitter Chatroom](https://gitter.im/embark-framework/Lobby) respectively.\n\n{% notification info 'Migrating from 3.2.x' %}\nIf you're planning to upgrade your Embark 3.2.x application to 4.x, head over to our [Migration Guide](/docs/migrating_from_3.x.html).\n{% endnotification %}\n## What is Embark?\n\nEmbark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as \"DApps\". It integrates with [Ethereum](https://ethereum.org/) blockchains, decentralized storages like [IPFS](https://ipfs.io) and [Swarm](https://swarm-guide.readthedocs.io/en/latest/introduction.html), and decentralized communication platforms like [Whisper](https://github.com/ethereum/wiki/wiki/Whisper).\n\nEmbark's goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.\n\nSome of Embark's features, but not all of them, are:\n\n* **Automatic Smart Contract deployment** - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. [Learn more](/docs/contracts_configuration.html)\n* **Client development** - Build your application with the framework of your choice right within Embark.\n* **Testing** - Test your applications and Smart Contracts through Web3 in JavaScript. [Learn More](/docs/contracts_testing.html)\n* **Decentralized app distribution** - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. [Learn more](/docs/storage_configuration.html)\n* **Peer-to-peer messaging** - Send and receive messages via communication protocols like Whisper. [Learn more](/docs/messages_configuration.html)\n* **Cockpit** - An companion application to make developing and debugging decentralized applications a breeze. [Learn more](/docs/cockpit_introduction.html)\n\nThere's so much more, but let's take it one step at a time. Make sure to check out our other guides in case you're looking for a particular feature.\n\nIf you haven't yet, this is a good time to [install Embark](installation.html) on your machine. Read on for more information!\n\n\n","date":"2020-01-19T20:56:53.012Z","updated":"2020-01-19T20:56:53.012Z","path":"docs/overview.html","_id":"ck5ijm3rs001g7hegemr1hvpm","comments":1,"content":"<p>Welcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the <a href=\"troubleshooting.html\">troubleshooting guide</a>, raise an issue on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a> or ask in the <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter Chatroom</a> respectively.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Migrating from 3.2.x</strong></p>\n  <p><p>If you’re planning to upgrade your Embark 3.2.x application to 4.x, head over to our <a href=\"/docs/migrating_from_3.x.html\">Migration Guide</a>.</p>\n</p>\n</div> \n\n\n<h2 id=\"What-is-Embark\"><a href=\"#What-is-Embark\" class=\"headerlink\" title=\"What is Embark?\"></a>What is Embark?</h2><p>Embark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as “DApps”. It integrates with <a href=\"https://ethereum.org/\" target=\"_blank\" rel=\"noopener\">Ethereum</a> blockchains, decentralized storages like <a href=\"https://ipfs.io\" target=\"_blank\" rel=\"noopener\">IPFS</a> and <a href=\"https://swarm-guide.readthedocs.io/en/latest/introduction.html\" target=\"_blank\" rel=\"noopener\">Swarm</a>, and decentralized communication platforms like <a href=\"https://github.com/ethereum/wiki/wiki/Whisper\" target=\"_blank\" rel=\"noopener\">Whisper</a>.</p>\n<p>Embark’s goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.</p>\n<p>Some of Embark’s features, but not all of them, are:</p>\n<ul>\n<li><strong>Automatic Smart Contract deployment</strong> - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. <a href=\"/docs/contracts_configuration.html\">Learn more</a></li>\n<li><strong>Client development</strong> - Build your application with the framework of your choice right within Embark.</li>\n<li><strong>Testing</strong> - Test your applications and Smart Contracts through Web3 in JavaScript. <a href=\"/docs/contracts_testing.html\">Learn More</a></li>\n<li><strong>Decentralized app distribution</strong> - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. <a href=\"/docs/storage_configuration.html\">Learn more</a></li>\n<li><strong>Peer-to-peer messaging</strong> - Send and receive messages via communication protocols like Whisper. <a href=\"/docs/messages_configuration.html\">Learn more</a></li>\n<li><strong>Cockpit</strong> - An companion application to make developing and debugging decentralized applications a breeze. <a href=\"/docs/cockpit_introduction.html\">Learn more</a></li>\n</ul>\n<p>There’s so much more, but let’s take it one step at a time. Make sure to check out our other guides in case you’re looking for a particular feature.</p>\n<p>If you haven’t yet, this is a good time to <a href=\"installation.html\">install Embark</a> on your machine. Read on for more information!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Welcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the <a href=\"troubleshooting.html\">troubleshooting guide</a>, raise an issue on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a> or ask in the <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter Chatroom</a> respectively.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Migrating from 3.2.x</strong></p>\n  <p><p>If you’re planning to upgrade your Embark 3.2.x application to 4.x, head over to our <a href=\"/docs/migrating_from_3.x.html\">Migration Guide</a>.</p>\n</p>\n</div> \n\n\n<h2 id=\"What-is-Embark\"><a href=\"#What-is-Embark\" class=\"headerlink\" title=\"What is Embark?\"></a>What is Embark?</h2><p>Embark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as “DApps”. It integrates with <a href=\"https://ethereum.org/\" target=\"_blank\" rel=\"noopener\">Ethereum</a> blockchains, decentralized storages like <a href=\"https://ipfs.io\" target=\"_blank\" rel=\"noopener\">IPFS</a> and <a href=\"https://swarm-guide.readthedocs.io/en/latest/introduction.html\" target=\"_blank\" rel=\"noopener\">Swarm</a>, and decentralized communication platforms like <a href=\"https://github.com/ethereum/wiki/wiki/Whisper\" target=\"_blank\" rel=\"noopener\">Whisper</a>.</p>\n<p>Embark’s goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.</p>\n<p>Some of Embark’s features, but not all of them, are:</p>\n<ul>\n<li><strong>Automatic Smart Contract deployment</strong> - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. <a href=\"/docs/contracts_configuration.html\">Learn more</a></li>\n<li><strong>Client development</strong> - Build your application with the framework of your choice right within Embark.</li>\n<li><strong>Testing</strong> - Test your applications and Smart Contracts through Web3 in JavaScript. <a href=\"/docs/contracts_testing.html\">Learn More</a></li>\n<li><strong>Decentralized app distribution</strong> - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. <a href=\"/docs/storage_configuration.html\">Learn more</a></li>\n<li><strong>Peer-to-peer messaging</strong> - Send and receive messages via communication protocols like Whisper. <a href=\"/docs/messages_configuration.html\">Learn more</a></li>\n<li><strong>Cockpit</strong> - An companion application to make developing and debugging decentralized applications a breeze. <a href=\"/docs/cockpit_introduction.html\">Learn more</a></li>\n</ul>\n<p>There’s so much more, but let’s take it one step at a time. Make sure to check out our other guides in case you’re looking for a particular feature.</p>\n<p>If you haven’t yet, this is a good time to <a href=\"installation.html\">install Embark</a> on your machine. Read on for more information!</p>\n"},{"title":"Building & Asset Pipeline","layout":"docs","_content":"\nAs discussed in [Running Apps](running_apps.html#Using-the-run-command), Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we'll learn how to take full advantage of Embark's flexibility to build our Smart Contracts or even replace the entire build pipeline for our application's assets.\n\n## Building your app\n\nEmbark's `build` command enables us to build our decentralized application and deploy it accordingly. Similar to `embark run`, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app's assets and uploads them to the configured decentralized storage (e.g. IPFS).\n\nBy default, `embark build` will use the `production` mode to build our application.\n\n```\n$ embark build\n```\n### Specifying a mode using `--pipeline`\n\n\nEmbark comes with two modes for building our application:\n\n* **development** - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use `embark run` or `embark console`, this mode is used by default. Since this mode skips code optimizations, it's also the faster mode.\n* **production** - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for `embark build` and `embark upload` commands.\n\nWe can specify a mode using the `--pipeline` option. This is available for both, `embark run` and `embark build` commands:\n\n```\n$ embark build --pipeline development\n```\n\n## Compiling Smart Contracts only\n\nIf we're building a [Smart Contract only application](http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or we're simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the `build` command's `--contracts` option:\n\n```\n$ embark build --contracts\n```\n\n## Understanding the build pipeline\n\nEmbark uses [webpack](https://webpack.js.org/) to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:\n\n* ES2015+ syntax using Babel\n* Importing of CSS, SCSS, PNG, SVG & Fonts in JavaScript\n* Support for React & JSX\n* Automatic support for older browsers via Babel's preset-env (by default, Embark uses a browser list setting of `['last 1 version', 'not dead', '> 0.2%']`\n* Sourcemaps generation (when in development mode)\n* Minification and tree shaking (when in production mode)\n\n{% notification danger 'Deprecation warning:' %}\nSince Embark version 4.0.0 it's possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark's own build pipeline obsolete.\n\nWhen using Embark with any other existing front-end tooling, please turn off Embark's internal build pipeline by setting the following configuration option in `config/pipeline.js`:\n\n<pre class=\"highlight\">\nenabled: false\n</pre>\n{% endnotification %}\n\n\n\n### Customizing the build process\n\nSometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark's built-in build pipeline isn't enough, it enables us to \"eject\" the internally used `webpack.config.js` file, so we can change it to our needs and fully bypass Embark's internal build process.\n\nEjecting the internally used config file is as simple as using Embark's `eject-build-config` command like this:\n\n```\n$ embark eject-build-config\n```\n\n{% notification info 'On --eject-webpack option' %}\nIn older versions of Embark, the same could be achieved using the `--eject-webpack` option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.\n{% endnotification %}\n\n{% notification danger 'Deprecation warning:' %}\nAs mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application's front-end code. This command will be deprecated in future versions of Embark.\n{% endnotification %}\n\n","source":"docs/pipeline_and_webpack.md","raw":"title: Building & Asset Pipeline\nlayout: docs\n---\n\nAs discussed in [Running Apps](running_apps.html#Using-the-run-command), Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we'll learn how to take full advantage of Embark's flexibility to build our Smart Contracts or even replace the entire build pipeline for our application's assets.\n\n## Building your app\n\nEmbark's `build` command enables us to build our decentralized application and deploy it accordingly. Similar to `embark run`, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app's assets and uploads them to the configured decentralized storage (e.g. IPFS).\n\nBy default, `embark build` will use the `production` mode to build our application.\n\n```\n$ embark build\n```\n### Specifying a mode using `--pipeline`\n\n\nEmbark comes with two modes for building our application:\n\n* **development** - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use `embark run` or `embark console`, this mode is used by default. Since this mode skips code optimizations, it's also the faster mode.\n* **production** - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for `embark build` and `embark upload` commands.\n\nWe can specify a mode using the `--pipeline` option. This is available for both, `embark run` and `embark build` commands:\n\n```\n$ embark build --pipeline development\n```\n\n## Compiling Smart Contracts only\n\nIf we're building a [Smart Contract only application](http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or we're simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the `build` command's `--contracts` option:\n\n```\n$ embark build --contracts\n```\n\n## Understanding the build pipeline\n\nEmbark uses [webpack](https://webpack.js.org/) to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:\n\n* ES2015+ syntax using Babel\n* Importing of CSS, SCSS, PNG, SVG & Fonts in JavaScript\n* Support for React & JSX\n* Automatic support for older browsers via Babel's preset-env (by default, Embark uses a browser list setting of `['last 1 version', 'not dead', '> 0.2%']`\n* Sourcemaps generation (when in development mode)\n* Minification and tree shaking (when in production mode)\n\n{% notification danger 'Deprecation warning:' %}\nSince Embark version 4.0.0 it's possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark's own build pipeline obsolete.\n\nWhen using Embark with any other existing front-end tooling, please turn off Embark's internal build pipeline by setting the following configuration option in `config/pipeline.js`:\n\n<pre class=\"highlight\">\nenabled: false\n</pre>\n{% endnotification %}\n\n\n\n### Customizing the build process\n\nSometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark's built-in build pipeline isn't enough, it enables us to \"eject\" the internally used `webpack.config.js` file, so we can change it to our needs and fully bypass Embark's internal build process.\n\nEjecting the internally used config file is as simple as using Embark's `eject-build-config` command like this:\n\n```\n$ embark eject-build-config\n```\n\n{% notification info 'On --eject-webpack option' %}\nIn older versions of Embark, the same could be achieved using the `--eject-webpack` option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.\n{% endnotification %}\n\n{% notification danger 'Deprecation warning:' %}\nAs mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application's front-end code. This command will be deprecated in future versions of Embark.\n{% endnotification %}\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/pipeline_and_webpack.html","comments":1,"_id":"ck5ijm3rs001h7heg90dngw8a","content":"<p>As discussed in <a href=\"running_apps.html#Using-the-run-command\">Running Apps</a>, Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we’ll learn how to take full advantage of Embark’s flexibility to build our Smart Contracts or even replace the entire build pipeline for our application’s assets.</p>\n<h2 id=\"Building-your-app\"><a href=\"#Building-your-app\" class=\"headerlink\" title=\"Building your app\"></a>Building your app</h2><p>Embark’s <code>build</code> command enables us to build our decentralized application and deploy it accordingly. Similar to <code>embark run</code>, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app’s assets and uploads them to the configured decentralized storage (e.g. IPFS).</p>\n<p>By default, <code>embark build</code> will use the <code>production</code> mode to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build</span><br></pre></td></tr></table></figure>\n<h3 id=\"Specifying-a-mode-using-pipeline\"><a href=\"#Specifying-a-mode-using-pipeline\" class=\"headerlink\" title=\"Specifying a mode using --pipeline\"></a>Specifying a mode using <code>--pipeline</code></h3><p>Embark comes with two modes for building our application:</p>\n<ul>\n<li><strong>development</strong> - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use <code>embark run</code> or <code>embark console</code>, this mode is used by default. Since this mode skips code optimizations, it’s also the faster mode.</li>\n<li><strong>production</strong> - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for <code>embark build</code> and <code>embark upload</code> commands.</li>\n</ul>\n<p>We can specify a mode using the <code>--pipeline</code> option. This is available for both, <code>embark run</code> and <code>embark build</code> commands:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --pipeline development</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Compiling-Smart-Contracts-only\"><a href=\"#Compiling-Smart-Contracts-only\" class=\"headerlink\" title=\"Compiling Smart Contracts only\"></a>Compiling Smart Contracts only</h2><p>If we’re building a <a href=\"http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\" target=\"_blank\" rel=\"noopener\">Smart Contract only application</a>, or we’re simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the <code>build</code> command’s <code>--contracts</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --contracts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Understanding-the-build-pipeline\"><a href=\"#Understanding-the-build-pipeline\" class=\"headerlink\" title=\"Understanding the build pipeline\"></a>Understanding the build pipeline</h2><p>Embark uses <a href=\"https://webpack.js.org/\" target=\"_blank\" rel=\"noopener\">webpack</a> to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:</p>\n<ul>\n<li>ES2015+ syntax using Babel</li>\n<li>Importing of CSS, SCSS, PNG, SVG &amp; Fonts in JavaScript</li>\n<li>Support for React &amp; JSX</li>\n<li>Automatic support for older browsers via Babel’s preset-env (by default, Embark uses a browser list setting of <code>[&#39;last 1 version&#39;, &#39;not dead&#39;, &#39;&gt; 0.2%&#39;]</code></li>\n<li>Sourcemaps generation (when in development mode)</li>\n<li>Minification and tree shaking (when in production mode)</li>\n</ul>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>Since Embark version 4.0.0 it’s possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark’s own build pipeline obsolete.</p>\n<p>When using Embark with any other existing front-end tooling, please turn off Embark’s internal build pipeline by setting the following configuration option in <code>config/pipeline.js</code>:</p>\n<pre class=\"highlight\">\nenabled: false\n</pre></p>\n</div> \n\n\n\n\n\n<h3 id=\"Customizing-the-build-process\"><a href=\"#Customizing-the-build-process\" class=\"headerlink\" title=\"Customizing the build process\"></a>Customizing the build process</h3><p>Sometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark’s built-in build pipeline isn’t enough, it enables us to “eject” the internally used <code>webpack.config.js</code> file, so we can change it to our needs and fully bypass Embark’s internal build process.</p>\n<p>Ejecting the internally used config file is as simple as using Embark’s <code>eject-build-config</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On --eject-webpack option</strong></p>\n  <p><p>In older versions of Embark, the same could be achieved using the <code>--eject-webpack</code> option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>As mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application’s front-end code. This command will be deprecated in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As discussed in <a href=\"running_apps.html#Using-the-run-command\">Running Apps</a>, Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we’ll learn how to take full advantage of Embark’s flexibility to build our Smart Contracts or even replace the entire build pipeline for our application’s assets.</p>\n<h2 id=\"Building-your-app\"><a href=\"#Building-your-app\" class=\"headerlink\" title=\"Building your app\"></a>Building your app</h2><p>Embark’s <code>build</code> command enables us to build our decentralized application and deploy it accordingly. Similar to <code>embark run</code>, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app’s assets and uploads them to the configured decentralized storage (e.g. IPFS).</p>\n<p>By default, <code>embark build</code> will use the <code>production</code> mode to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build</span><br></pre></td></tr></table></figure>\n<h3 id=\"Specifying-a-mode-using-pipeline\"><a href=\"#Specifying-a-mode-using-pipeline\" class=\"headerlink\" title=\"Specifying a mode using --pipeline\"></a>Specifying a mode using <code>--pipeline</code></h3><p>Embark comes with two modes for building our application:</p>\n<ul>\n<li><strong>development</strong> - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use <code>embark run</code> or <code>embark console</code>, this mode is used by default. Since this mode skips code optimizations, it’s also the faster mode.</li>\n<li><strong>production</strong> - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for <code>embark build</code> and <code>embark upload</code> commands.</li>\n</ul>\n<p>We can specify a mode using the <code>--pipeline</code> option. This is available for both, <code>embark run</code> and <code>embark build</code> commands:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --pipeline development</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Compiling-Smart-Contracts-only\"><a href=\"#Compiling-Smart-Contracts-only\" class=\"headerlink\" title=\"Compiling Smart Contracts only\"></a>Compiling Smart Contracts only</h2><p>If we’re building a <a href=\"http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\" target=\"_blank\" rel=\"noopener\">Smart Contract only application</a>, or we’re simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the <code>build</code> command’s <code>--contracts</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --contracts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Understanding-the-build-pipeline\"><a href=\"#Understanding-the-build-pipeline\" class=\"headerlink\" title=\"Understanding the build pipeline\"></a>Understanding the build pipeline</h2><p>Embark uses <a href=\"https://webpack.js.org/\" target=\"_blank\" rel=\"noopener\">webpack</a> to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:</p>\n<ul>\n<li>ES2015+ syntax using Babel</li>\n<li>Importing of CSS, SCSS, PNG, SVG &amp; Fonts in JavaScript</li>\n<li>Support for React &amp; JSX</li>\n<li>Automatic support for older browsers via Babel’s preset-env (by default, Embark uses a browser list setting of <code>[&#39;last 1 version&#39;, &#39;not dead&#39;, &#39;&gt; 0.2%&#39;]</code></li>\n<li>Sourcemaps generation (when in development mode)</li>\n<li>Minification and tree shaking (when in production mode)</li>\n</ul>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>Since Embark version 4.0.0 it’s possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark’s own build pipeline obsolete.</p>\n<p>When using Embark with any other existing front-end tooling, please turn off Embark’s internal build pipeline by setting the following configuration option in <code>config/pipeline.js</code>:</p>\n<pre class=\"highlight\">\nenabled: false\n</pre></p>\n</div> \n\n\n\n\n\n<h3 id=\"Customizing-the-build-process\"><a href=\"#Customizing-the-build-process\" class=\"headerlink\" title=\"Customizing the build process\"></a>Customizing the build process</h3><p>Sometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark’s built-in build pipeline isn’t enough, it enables us to “eject” the internally used <code>webpack.config.js</code> file, so we can change it to our needs and fully bypass Embark’s internal build process.</p>\n<p>Ejecting the internally used config file is as simple as using Embark’s <code>eject-build-config</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On --eject-webpack option</strong></p>\n  <p><p>In older versions of Embark, the same could be achieved using the <code>--eject-webpack</code> option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>As mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application’s front-end code. This command will be deprecated in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n"},{"title":"Quick Start","tagline":"Build your first DApp with Embark","_content":"\n# Welcome to the Quick Start!\n\nIn 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.\n\nTogether, we're going to:\n\n{% checklist 'Install Embark' 'Create an app' 'Run and deploy the app' %}\n\nHopefully, after that you'll be motivated to explore the rest of Embark's [documentation](/docs/overview.html). If you run into any problems along your journey, check out [our Gitter channel](https://gitter.im/embark-framework/Lobby) as well. We are there to help.\n\nLet's get started!\n\n## Installing Embark\n\nFirst 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:\n\n```\n$ npm install -g embark\n```\n\nOnce that is done, `embark` should be available as a global command.\n\n{% notification info 'Prerequisites' %}\nIn order to actually start a blockchain client or other processes, there are some\nmore tools that need to be installed. Head over to our [installation guide](/docs/installation.html) to learn more.\n{% endnotification %}\n\n## Creating your first app\n\nIn order to get results as quickly as possible, Embark comes with a `demo` command that scaffolds and sets up a complete application for us to play with. Open up a terminal of your choice and run:\n\n```\n$ embark demo\n$ cd embark_demo\n```\n\nThis 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 [dedicated guides](structure.html).\n\n## Running your app\n\nThe fastest way to get your app running is to use Embark's `run` 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 [run your app](running_apps.html), in case you need more control over different processes, but let's not get ahead of ourselves.\n\n```\n$ embark run\n```\n\nOnce 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 `--nodashboard` option.\n\nNotice that the dashboard comes with sections for **Contracts**, **Environment**, **Status**, **Available Services**, **Logs** and **Console**. While most of them are self explanatory, we'll take a closer look at those in the [dashboard guide](dashboard.html).\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nFor 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 `http://localhost:8000`. In fact, Embark has probably already opened a browser window for you. \n\nIf not, give it a try yourself and open [localhost:8000](http://localhost:8000) in your browser of choice!\n\n## Getting help\n\n**Congratulations!** 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 `help` into the running console to get a list of commands you can run inside the dashboard.\n\nAlso, make sure to check out the other guides and let us know if you miss anything! If you run into any problems, the [guide on troubleshooting](troubleshooting.html) is here to help.\n\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n","source":"docs/quick_start.md","raw":"title: Quick Start\ntagline: 'Build your first DApp with Embark'\n---\n\n# Welcome to the Quick Start!\n\nIn 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.\n\nTogether, we're going to:\n\n{% checklist 'Install Embark' 'Create an app' 'Run and deploy the app' %}\n\nHopefully, after that you'll be motivated to explore the rest of Embark's [documentation](/docs/overview.html). If you run into any problems along your journey, check out [our Gitter channel](https://gitter.im/embark-framework/Lobby) as well. We are there to help.\n\nLet's get started!\n\n## Installing Embark\n\nFirst 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:\n\n```\n$ npm install -g embark\n```\n\nOnce that is done, `embark` should be available as a global command.\n\n{% notification info 'Prerequisites' %}\nIn order to actually start a blockchain client or other processes, there are some\nmore tools that need to be installed. Head over to our [installation guide](/docs/installation.html) to learn more.\n{% endnotification %}\n\n## Creating your first app\n\nIn order to get results as quickly as possible, Embark comes with a `demo` command that scaffolds and sets up a complete application for us to play with. Open up a terminal of your choice and run:\n\n```\n$ embark demo\n$ cd embark_demo\n```\n\nThis 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 [dedicated guides](structure.html).\n\n## Running your app\n\nThe fastest way to get your app running is to use Embark's `run` 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 [run your app](running_apps.html), in case you need more control over different processes, but let's not get ahead of ourselves.\n\n```\n$ embark run\n```\n\nOnce 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 `--nodashboard` option.\n\nNotice that the dashboard comes with sections for **Contracts**, **Environment**, **Status**, **Available Services**, **Logs** and **Console**. While most of them are self explanatory, we'll take a closer look at those in the [dashboard guide](dashboard.html).\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nFor 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 `http://localhost:8000`. In fact, Embark has probably already opened a browser window for you. \n\nIf not, give it a try yourself and open [localhost:8000](http://localhost:8000) in your browser of choice!\n\n## Getting help\n\n**Congratulations!** 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 `help` into the running console to get a list of commands you can run inside the dashboard.\n\nAlso, make sure to check out the other guides and let us know if you miss anything! If you run into any problems, the [guide on troubleshooting](troubleshooting.html) is here to help.\n\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/quick_start.html","comments":1,"layout":"page","_id":"ck5ijm3rt001i7heg76eaeohv","content":"<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>\n<p>Together, we’re going to:</p>\n<div class=\"o-distance-l\">\n  <ul class=\"c-checklist\">\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Install Embark\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Create an app\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Run and deploy the app\n      </li>\n    \n  </ul>\n</div>\n\n\n\n<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>\n<p>Let’s get started!</p>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, <code>embark</code> should be available as a global command.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Prerequisites</strong></p>\n  <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>\n</p>\n</div> \n\n\n\n<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>\n<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>\n\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<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>\n<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>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<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>\n<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>\n<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>\n<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>\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<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>\n<p>Together, we’re going to:</p>\n<div class=\"o-distance-l\">\n  <ul class=\"c-checklist\">\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Install Embark\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Create an app\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Run and deploy the app\n      </li>\n    \n  </ul>\n</div>\n\n\n\n<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>\n<p>Let’s get started!</p>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, <code>embark</code> should be available as a global command.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Prerequisites</strong></p>\n  <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>\n</p>\n</div> \n\n\n\n<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>\n<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>\n\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<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>\n<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>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<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>\n<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>\n<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>\n<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>\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n"},{"title":"Running apps","layout":"docs","_content":"\nWhile running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.\n\n## Using the `run` command\n\nIf you've read the [quickstart](quick_start.html) you're already aware that running an application is done by simply executing `embark run` within your project:\n\n```\n$ embark run\n```\n\nBy default, this will make Embark do a couple of things:\n\n- It initializes Embark\n- It starts the dashboard\n- It loads plugins\n- It spins up a blockchain and IPFS client, a web server and other necessary services\n- It compiles and deploys your app\n- It monitors running processes and recompiles and redeploys your app if needed\n- It starts [Cockpit](/docs/cockpit_introduction.html)\n\nMost of the time, using the `run` command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.\n\n## Running an app without the dashboard\n\nWhile the dashboard gives us a great overview of all the processes and services that Embark manages for us, it's not required to start it every single time along with compiling and deploying our app. If we don't need the dashboard, we can prevent Embark from starting it by using the `--nodashboard` option:\n\n```\n$ embark run --nodashboard\n```\n\nWhen running the command with `--nodashboard`, Embark will fallback to only use standard log outputs, which are the same that we get in the **Logs** panel within the dashboard.\n\n## Running an app without opening a browser\n\nIn order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application's client. While this is quite convenient, sometimes we don't need a browser window to work on our app. This is the case when we're for example only interested in developing Smart Contracts, without creating a front-end.\n\nIf we don't want Embark to open a browser for us, all we have to do is using the `--nobrowser` option like this:\n\n\n```\n$ embark run --nobrowser\n```\n\n\n## Running an app without starting a web server\n\nIf we aren't interested in Embark starting a web server in the first place, we can easily turn it off by using the `--noserver` option:\n\n```\n$ embark run --noserver\n```\n\n## Running apps in different modes\n\nEmbark comes with different \"modes\" when building applications. `embark run` uses the `development` mode by default. However, this can be overwritten using the `--pipeline` option. The following command run our application in `production` mode.\n\n```\n$ embark run --pipeline production\n```\n\nFor more information about modes, head over to our guide on [building apps](pipeline_and_webpack.html).\n\n## Switching environments\n\nEmbark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project's `blockchain.js` file. \n\nDepending on how you initialized your application, it may have already multiple environments configured. Here's what a sample test network environment could look like:\n\n```\n// config/blockchain.js\n\nmodules.exports = {\n  ...\n  testnet: {\n    networkType: \"testnet\",\n    syncMode: \"light\",\n    account: {\n      password: \"config/testnet/password\"\n    }\n  },\n  ...\n}\n```\n\nFor more information on configuring your Embark application, head over to the [general configuration guide](configuration.html).\n\nRunning an application in a different environment is just a matter of specifying the environment's name as part of the run command:\n\n```\n$ embark run [environment]\n```\n\nSo in case we want to run our app against the test network environment described above, this could be achieved by running:\n\n```\n$ embark run testnet\n```\n\n## Starting a blockchain separately\n\nSometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have `embark run` connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.\n\nEmbark comes with a `blockchain` command that does exactly that:\n\n```\n$ embark blockchain\n```\n\nWhen this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the `run` command, the `blockchain` command also allows to specify an environment:\n\n```\n$ embark blockchain testnet\n```\n\nBy default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.\n\n## Using the blockchain simulator\n\nAnother feature of Embark is to start a **simulated** blockchain. This can be useful for testing purposes as there's no need to wait for transactions to be mined. You might have heard of [Ganache CLI](https://truffleframework.com/docs/ganache/quickstart), which is a great project that implements such a simulated blockchain.\n\nEmbark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the `simulator` command:\n\n```\n$ embark simulator\n```\n\n## Resetting apps\n\nSometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark's powerful [deployment hooks](/docs/contracts_configuration.html#Deployment-hooks) to initialize one of our Smart Contracts based on the deployment of another Smart Contract.\n\nTo test this, we'll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won't try to redeploy the same Smart Contract again.\n\nOne way to deal with this is to use the [deployment tracking](/docs/contracts_configuration.html#Deployment-tracking) configuration. Another way is to use Embark's `reset` command which will remove some files and data that Embark stores in the project's `.embark` folder.\n\nWe can reset our project by running the following command:\n\n```\n$ embark reset\n```\n\nIt's possible to configure what files Embark is going to remove when doing a reset. Check out [this guide](/docs/configuration.html#Configuring-Embark’s-reset-command) to learn more.\n","source":"docs/running_apps.md","raw":"title: Running apps\nlayout: docs\n---\n\nWhile running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.\n\n## Using the `run` command\n\nIf you've read the [quickstart](quick_start.html) you're already aware that running an application is done by simply executing `embark run` within your project:\n\n```\n$ embark run\n```\n\nBy default, this will make Embark do a couple of things:\n\n- It initializes Embark\n- It starts the dashboard\n- It loads plugins\n- It spins up a blockchain and IPFS client, a web server and other necessary services\n- It compiles and deploys your app\n- It monitors running processes and recompiles and redeploys your app if needed\n- It starts [Cockpit](/docs/cockpit_introduction.html)\n\nMost of the time, using the `run` command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.\n\n## Running an app without the dashboard\n\nWhile the dashboard gives us a great overview of all the processes and services that Embark manages for us, it's not required to start it every single time along with compiling and deploying our app. If we don't need the dashboard, we can prevent Embark from starting it by using the `--nodashboard` option:\n\n```\n$ embark run --nodashboard\n```\n\nWhen running the command with `--nodashboard`, Embark will fallback to only use standard log outputs, which are the same that we get in the **Logs** panel within the dashboard.\n\n## Running an app without opening a browser\n\nIn order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application's client. While this is quite convenient, sometimes we don't need a browser window to work on our app. This is the case when we're for example only interested in developing Smart Contracts, without creating a front-end.\n\nIf we don't want Embark to open a browser for us, all we have to do is using the `--nobrowser` option like this:\n\n\n```\n$ embark run --nobrowser\n```\n\n\n## Running an app without starting a web server\n\nIf we aren't interested in Embark starting a web server in the first place, we can easily turn it off by using the `--noserver` option:\n\n```\n$ embark run --noserver\n```\n\n## Running apps in different modes\n\nEmbark comes with different \"modes\" when building applications. `embark run` uses the `development` mode by default. However, this can be overwritten using the `--pipeline` option. The following command run our application in `production` mode.\n\n```\n$ embark run --pipeline production\n```\n\nFor more information about modes, head over to our guide on [building apps](pipeline_and_webpack.html).\n\n## Switching environments\n\nEmbark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project's `blockchain.js` file. \n\nDepending on how you initialized your application, it may have already multiple environments configured. Here's what a sample test network environment could look like:\n\n```\n// config/blockchain.js\n\nmodules.exports = {\n  ...\n  testnet: {\n    networkType: \"testnet\",\n    syncMode: \"light\",\n    account: {\n      password: \"config/testnet/password\"\n    }\n  },\n  ...\n}\n```\n\nFor more information on configuring your Embark application, head over to the [general configuration guide](configuration.html).\n\nRunning an application in a different environment is just a matter of specifying the environment's name as part of the run command:\n\n```\n$ embark run [environment]\n```\n\nSo in case we want to run our app against the test network environment described above, this could be achieved by running:\n\n```\n$ embark run testnet\n```\n\n## Starting a blockchain separately\n\nSometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have `embark run` connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.\n\nEmbark comes with a `blockchain` command that does exactly that:\n\n```\n$ embark blockchain\n```\n\nWhen this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the `run` command, the `blockchain` command also allows to specify an environment:\n\n```\n$ embark blockchain testnet\n```\n\nBy default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.\n\n## Using the blockchain simulator\n\nAnother feature of Embark is to start a **simulated** blockchain. This can be useful for testing purposes as there's no need to wait for transactions to be mined. You might have heard of [Ganache CLI](https://truffleframework.com/docs/ganache/quickstart), which is a great project that implements such a simulated blockchain.\n\nEmbark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the `simulator` command:\n\n```\n$ embark simulator\n```\n\n## Resetting apps\n\nSometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark's powerful [deployment hooks](/docs/contracts_configuration.html#Deployment-hooks) to initialize one of our Smart Contracts based on the deployment of another Smart Contract.\n\nTo test this, we'll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won't try to redeploy the same Smart Contract again.\n\nOne way to deal with this is to use the [deployment tracking](/docs/contracts_configuration.html#Deployment-tracking) configuration. Another way is to use Embark's `reset` command which will remove some files and data that Embark stores in the project's `.embark` folder.\n\nWe can reset our project by running the following command:\n\n```\n$ embark reset\n```\n\nIt's possible to configure what files Embark is going to remove when doing a reset. Check out [this guide](/docs/configuration.html#Configuring-Embark’s-reset-command) to learn more.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/running_apps.html","comments":1,"_id":"ck5ijm3rt001j7heg41pw16p3","content":"<p>While running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.</p>\n<h2 id=\"Using-the-run-command\"><a href=\"#Using-the-run-command\" class=\"headerlink\" title=\"Using the run command\"></a>Using the <code>run</code> command</h2><p>If you’ve read the <a href=\"quick_start.html\">quickstart</a> you’re already aware that running an application is done by simply executing <code>embark run</code> within your project:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>By default, this will make Embark do a couple of things:</p>\n<ul>\n<li>It initializes Embark</li>\n<li>It starts the dashboard</li>\n<li>It loads plugins</li>\n<li>It spins up a blockchain and IPFS client, a web server and other necessary services</li>\n<li>It compiles and deploys your app</li>\n<li>It monitors running processes and recompiles and redeploys your app if needed</li>\n<li>It starts <a href=\"/docs/cockpit_introduction.html\">Cockpit</a></li>\n</ul>\n<p>Most of the time, using the <code>run</code> command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.</p>\n<h2 id=\"Running-an-app-without-the-dashboard\"><a href=\"#Running-an-app-without-the-dashboard\" class=\"headerlink\" title=\"Running an app without the dashboard\"></a>Running an app without the dashboard</h2><p>While the dashboard gives us a great overview of all the processes and services that Embark manages for us, it’s not required to start it every single time along with compiling and deploying our app. If we don’t need the dashboard, we can prevent Embark from starting it by using the <code>--nodashboard</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nodashboard</span><br></pre></td></tr></table></figure>\n\n<p>When running the command with <code>--nodashboard</code>, Embark will fallback to only use standard log outputs, which are the same that we get in the <strong>Logs</strong> panel within the dashboard.</p>\n<h2 id=\"Running-an-app-without-opening-a-browser\"><a href=\"#Running-an-app-without-opening-a-browser\" class=\"headerlink\" title=\"Running an app without opening a browser\"></a>Running an app without opening a browser</h2><p>In order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application’s client. While this is quite convenient, sometimes we don’t need a browser window to work on our app. This is the case when we’re for example only interested in developing Smart Contracts, without creating a front-end.</p>\n<p>If we don’t want Embark to open a browser for us, all we have to do is using the <code>--nobrowser</code> option like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nobrowser</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Running-an-app-without-starting-a-web-server\"><a href=\"#Running-an-app-without-starting-a-web-server\" class=\"headerlink\" title=\"Running an app without starting a web server\"></a>Running an app without starting a web server</h2><p>If we aren’t interested in Embark starting a web server in the first place, we can easily turn it off by using the <code>--noserver</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --noserver</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Running-apps-in-different-modes\"><a href=\"#Running-apps-in-different-modes\" class=\"headerlink\" title=\"Running apps in different modes\"></a>Running apps in different modes</h2><p>Embark comes with different “modes” when building applications. <code>embark run</code> uses the <code>development</code> mode by default. However, this can be overwritten using the <code>--pipeline</code> option. The following command run our application in <code>production</code> mode.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --pipeline production</span><br></pre></td></tr></table></figure>\n\n<p>For more information about modes, head over to our guide on <a href=\"pipeline_and_webpack.html\">building apps</a>.</p>\n<h2 id=\"Switching-environments\"><a href=\"#Switching-environments\" class=\"headerlink\" title=\"Switching environments\"></a>Switching environments</h2><p>Embark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project’s <code>blockchain.js</code> file. </p>\n<p>Depending on how you initialized your application, it may have already multiple environments configured. Here’s what a sample test network environment could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;blockchain.js</span><br><span class=\"line\"></span><br><span class=\"line\">modules.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    networkType: &quot;testnet&quot;,</span><br><span class=\"line\">    syncMode: &quot;light&quot;,</span><br><span class=\"line\">    account: &#123;</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on configuring your Embark application, head over to the <a href=\"configuration.html\">general configuration guide</a>.</p>\n<p>Running an application in a different environment is just a matter of specifying the environment’s name as part of the run command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>So in case we want to run our app against the test network environment described above, this could be achieved by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run testnet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Starting-a-blockchain-separately\"><a href=\"#Starting-a-blockchain-separately\" class=\"headerlink\" title=\"Starting a blockchain separately\"></a>Starting a blockchain separately</h2><p>Sometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have <code>embark run</code> connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.</p>\n<p>Embark comes with a <code>blockchain</code> command that does exactly that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain</span><br></pre></td></tr></table></figure>\n\n<p>When this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the <code>run</code> command, the <code>blockchain</code> command also allows to specify an environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain testnet</span><br></pre></td></tr></table></figure>\n\n<p>By default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.</p>\n<h2 id=\"Using-the-blockchain-simulator\"><a href=\"#Using-the-blockchain-simulator\" class=\"headerlink\" title=\"Using the blockchain simulator\"></a>Using the blockchain simulator</h2><p>Another feature of Embark is to start a <strong>simulated</strong> blockchain. This can be useful for testing purposes as there’s no need to wait for transactions to be mined. You might have heard of <a href=\"https://truffleframework.com/docs/ganache/quickstart\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, which is a great project that implements such a simulated blockchain.</p>\n<p>Embark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the <code>simulator</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Resetting-apps\"><a href=\"#Resetting-apps\" class=\"headerlink\" title=\"Resetting apps\"></a>Resetting apps</h2><p>Sometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark’s powerful <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> to initialize one of our Smart Contracts based on the deployment of another Smart Contract.</p>\n<p>To test this, we’ll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won’t try to redeploy the same Smart Contract again.</p>\n<p>One way to deal with this is to use the <a href=\"/docs/contracts_configuration.html#Deployment-tracking\">deployment tracking</a> configuration. Another way is to use Embark’s <code>reset</code> command which will remove some files and data that Embark stores in the project’s <code>.embark</code> folder.</p>\n<p>We can reset our project by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to configure what files Embark is going to remove when doing a reset. Check out <a href=\"/docs/configuration.html#Configuring-Embark’s-reset-command\">this guide</a> to learn more.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>While running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.</p>\n<h2 id=\"Using-the-run-command\"><a href=\"#Using-the-run-command\" class=\"headerlink\" title=\"Using the run command\"></a>Using the <code>run</code> command</h2><p>If you’ve read the <a href=\"quick_start.html\">quickstart</a> you’re already aware that running an application is done by simply executing <code>embark run</code> within your project:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>By default, this will make Embark do a couple of things:</p>\n<ul>\n<li>It initializes Embark</li>\n<li>It starts the dashboard</li>\n<li>It loads plugins</li>\n<li>It spins up a blockchain and IPFS client, a web server and other necessary services</li>\n<li>It compiles and deploys your app</li>\n<li>It monitors running processes and recompiles and redeploys your app if needed</li>\n<li>It starts <a href=\"/docs/cockpit_introduction.html\">Cockpit</a></li>\n</ul>\n<p>Most of the time, using the <code>run</code> command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.</p>\n<h2 id=\"Running-an-app-without-the-dashboard\"><a href=\"#Running-an-app-without-the-dashboard\" class=\"headerlink\" title=\"Running an app without the dashboard\"></a>Running an app without the dashboard</h2><p>While the dashboard gives us a great overview of all the processes and services that Embark manages for us, it’s not required to start it every single time along with compiling and deploying our app. If we don’t need the dashboard, we can prevent Embark from starting it by using the <code>--nodashboard</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nodashboard</span><br></pre></td></tr></table></figure>\n\n<p>When running the command with <code>--nodashboard</code>, Embark will fallback to only use standard log outputs, which are the same that we get in the <strong>Logs</strong> panel within the dashboard.</p>\n<h2 id=\"Running-an-app-without-opening-a-browser\"><a href=\"#Running-an-app-without-opening-a-browser\" class=\"headerlink\" title=\"Running an app without opening a browser\"></a>Running an app without opening a browser</h2><p>In order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application’s client. While this is quite convenient, sometimes we don’t need a browser window to work on our app. This is the case when we’re for example only interested in developing Smart Contracts, without creating a front-end.</p>\n<p>If we don’t want Embark to open a browser for us, all we have to do is using the <code>--nobrowser</code> option like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nobrowser</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Running-an-app-without-starting-a-web-server\"><a href=\"#Running-an-app-without-starting-a-web-server\" class=\"headerlink\" title=\"Running an app without starting a web server\"></a>Running an app without starting a web server</h2><p>If we aren’t interested in Embark starting a web server in the first place, we can easily turn it off by using the <code>--noserver</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --noserver</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Running-apps-in-different-modes\"><a href=\"#Running-apps-in-different-modes\" class=\"headerlink\" title=\"Running apps in different modes\"></a>Running apps in different modes</h2><p>Embark comes with different “modes” when building applications. <code>embark run</code> uses the <code>development</code> mode by default. However, this can be overwritten using the <code>--pipeline</code> option. The following command run our application in <code>production</code> mode.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --pipeline production</span><br></pre></td></tr></table></figure>\n\n<p>For more information about modes, head over to our guide on <a href=\"pipeline_and_webpack.html\">building apps</a>.</p>\n<h2 id=\"Switching-environments\"><a href=\"#Switching-environments\" class=\"headerlink\" title=\"Switching environments\"></a>Switching environments</h2><p>Embark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project’s <code>blockchain.js</code> file. </p>\n<p>Depending on how you initialized your application, it may have already multiple environments configured. Here’s what a sample test network environment could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;blockchain.js</span><br><span class=\"line\"></span><br><span class=\"line\">modules.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    networkType: &quot;testnet&quot;,</span><br><span class=\"line\">    syncMode: &quot;light&quot;,</span><br><span class=\"line\">    account: &#123;</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on configuring your Embark application, head over to the <a href=\"configuration.html\">general configuration guide</a>.</p>\n<p>Running an application in a different environment is just a matter of specifying the environment’s name as part of the run command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>So in case we want to run our app against the test network environment described above, this could be achieved by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run testnet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Starting-a-blockchain-separately\"><a href=\"#Starting-a-blockchain-separately\" class=\"headerlink\" title=\"Starting a blockchain separately\"></a>Starting a blockchain separately</h2><p>Sometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have <code>embark run</code> connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.</p>\n<p>Embark comes with a <code>blockchain</code> command that does exactly that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain</span><br></pre></td></tr></table></figure>\n\n<p>When this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the <code>run</code> command, the <code>blockchain</code> command also allows to specify an environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain testnet</span><br></pre></td></tr></table></figure>\n\n<p>By default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.</p>\n<h2 id=\"Using-the-blockchain-simulator\"><a href=\"#Using-the-blockchain-simulator\" class=\"headerlink\" title=\"Using the blockchain simulator\"></a>Using the blockchain simulator</h2><p>Another feature of Embark is to start a <strong>simulated</strong> blockchain. This can be useful for testing purposes as there’s no need to wait for transactions to be mined. You might have heard of <a href=\"https://truffleframework.com/docs/ganache/quickstart\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, which is a great project that implements such a simulated blockchain.</p>\n<p>Embark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the <code>simulator</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Resetting-apps\"><a href=\"#Resetting-apps\" class=\"headerlink\" title=\"Resetting apps\"></a>Resetting apps</h2><p>Sometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark’s powerful <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> to initialize one of our Smart Contracts based on the deployment of another Smart Contract.</p>\n<p>To test this, we’ll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won’t try to redeploy the same Smart Contract again.</p>\n<p>One way to deal with this is to use the <a href=\"/docs/contracts_configuration.html#Deployment-tracking\">deployment tracking</a> configuration. Another way is to use Embark’s <code>reset</code> command which will remove some files and data that Embark stores in the project’s <code>.embark</code> folder.</p>\n<p>We can reset our project by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to configure what files Embark is going to remove when doing a reset. Check out <a href=\"/docs/configuration.html#Configuring-Embark’s-reset-command\">this guide</a> to learn more.</p>\n"},{"title":"Sending and Receiving messages","layout":"docs","_content":"\n### listening to messages\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n### sending messages\n\nYou can send plain text\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\nOr an object\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\nNote: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g ``[\"topic1\", [\"topic2\", \"topic3\"]]`` => ``topic1 AND (topic2 OR topic 3)``\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/communication.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n","source":"docs/sending_and_receiving_messages.md","raw":"title: Sending and Receiving messages\nlayout: docs\n---\n\n### listening to messages\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n### sending messages\n\nYou can send plain text\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\nOr an object\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\nNote: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g ``[\"topic1\", [\"topic2\", \"topic3\"]]`` => ``topic1 AND (topic2 OR topic 3)``\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/communication.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/sending_and_receiving_messages.html","comments":1,"_id":"ck5ijm3ru001k7heg3fkc3809","content":"<h3 id=\"listening-to-messages\"><a href=\"#listening-to-messages\" class=\"headerlink\" title=\"listening to messages\"></a>listening to messages</h3><pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n<h3 id=\"sending-messages\"><a href=\"#sending-messages\" class=\"headerlink\" title=\"sending messages\"></a>sending messages</h3><p>You can send plain text</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\n<p>Or an object</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\n<p>Note: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code></p>\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h3 id=\"listening-to-messages\"><a href=\"#listening-to-messages\" class=\"headerlink\" title=\"listening to messages\"></a>listening to messages</h3><pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n<h3 id=\"sending-messages\"><a href=\"#sending-messages\" class=\"headerlink\" title=\"sending messages\"></a>sending messages</h3><p>You can send plain text</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\n<p>Or an object</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\n<p>Note: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code></p>\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n"},{"title":"Smart Contract Objects","layout":"docs","_content":"### Interacting with contracts in Javascript\n\nEmbark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:\n\n```\n// app/contracts/simple_storage.sol\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill automatically be available in Javascript as:\n\n```\n// app/js/index.js\n\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nSimpleStorage.methods.set(100).send();\nSimpleStorage.methods.get().call().then(function(value) { console.log(value) });\nSimpleStorage.methods.storedData().call().then(function(value) { console.log(value) });\n```\n\nThe syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a>\n","source":"docs/smart_contract_objects.md","raw":"title: Smart Contract Objects\nlayout: docs\n---\n### Interacting with contracts in Javascript\n\nEmbark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:\n\n```\n// app/contracts/simple_storage.sol\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill automatically be available in Javascript as:\n\n```\n// app/js/index.js\n\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nSimpleStorage.methods.set(100).send();\nSimpleStorage.methods.get().call().then(function(value) { console.log(value) });\nSimpleStorage.methods.storedData().call().then(function(value) { console.log(value) });\n```\n\nThe syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a>\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/smart_contract_objects.html","comments":1,"_id":"ck5ijm3rv001l7heg41h7gzra","content":"<h3 id=\"Interacting-with-contracts-in-Javascript\"><a href=\"#Interacting-with-contracts-in-Javascript\" class=\"headerlink\" title=\"Interacting with contracts in Javascript\"></a>Interacting with contracts in Javascript</h3><p>Embark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;contracts&#x2F;simple_storage.sol</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will automatically be available in Javascript as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;js&#x2F;index.js</span><br><span class=\"line\"></span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">SimpleStorage.methods.get().call().then(function(value) &#123; console.log(value) &#125;);</span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(function(value) &#123; console.log(value) &#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h3 id=\"Interacting-with-contracts-in-Javascript\"><a href=\"#Interacting-with-contracts-in-Javascript\" class=\"headerlink\" title=\"Interacting with contracts in Javascript\"></a>Interacting with contracts in Javascript</h3><p>Embark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;contracts&#x2F;simple_storage.sol</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will automatically be available in Javascript as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;js&#x2F;index.js</span><br><span class=\"line\"></span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">SimpleStorage.methods.get().call().then(function(value) &#123; console.log(value) &#125;);</span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(function(value) &#123; console.log(value) &#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a></p>\n"},{"title":"Solidity Documentation","_content":"\nThe documentation for Solidity can be found [here](https://solidity.readthedocs.io/)\n\n","source":"docs/solidity.md","raw":"title: Solidity Documentation\n---\n\nThe documentation for Solidity can be found [here](https://solidity.readthedocs.io/)\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/solidity.html","comments":1,"layout":"page","_id":"ck5ijm3rv001m7hegeg1e1h1s","content":"<p>The documentation for Solidity can be found <a href=\"https://solidity.readthedocs.io/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The documentation for Solidity can be found <a href=\"https://solidity.readthedocs.io/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n"},{"title":"Configuring decentralized storages","layout":"docs","_content":"\nWith Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let's take a closer look at how to make use of this.\n\n## Configuration basics\n\nEmbark will check our preferred storage configuration in the file `config/storage.js`, unless [configured differently](/docs/configuration.html) in our application's `embark.json` file. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment. If [environments in Embark](/docs/environments.html) are new to you, check out the dedicated guide first and come back.\n\nEach of these configuration options can be individually overridden on a per environment basis.\n\n```\nmodule.exports = {\n  \"default\": {\n    \"enabled\": true,\n    \"ipfs_bin\": \"ipfs\",\n    \"available_providers\": [\"ipfs\", \"swarm\"],\n    \"upload\":{\n      \"provider\": \"ipfs\",\n      \"host\": \"localhost\",\n      \"port\": 5001,\n      \"getUrl\": \"http://localhost:8080/ipfs\"\n    },\n    \"dappConnection\":[\n      {\"provider\": \"swarm\", \"host\": \"localhost\", \"port\": 8500, \"getUrl\": \"http://localhost:8500/bzz:/\"},\n      {\"provider\": \"ipfs\", \"host\": \"localhost\", \"port\": 5001, \"getUrl\": \"http://localhost:8080/ipfs/\"}\n    ]\n  },\n  \"development\": {\n    \"enabled\": true,\n    \"provider\": \"ipfs\",\n    \"host\": \"localhost\",\n    \"port\": 5001\n  }\n}\n```\n\nThe available options are:\n\nOption | Type: `default` | Value\n--- | --- | ---\n`enabled`    | boolean: `true` | Enables or completely disables storage support\n`ipfs_bin`    | string: `ipfs` | Name or desired path to the ipfs binary\n`available_providers`    | array: `[\"ipfs\", \"swarm\"]` | List of storages to be supported on the dapp. This will affect what's available with the EmbarkJS library on the dapp.\n`upload`      | | The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.\n`upload.provider`    | string: `ipfs` | Desired provider to use when uploading dapp.\n`upload.protocol`    | string: `http` | Storage provider protocol for upload, ie `http` or `https`\n`upload.host`        | string: `localhost` | Host value used to interact with the storage provider for upload, i.e. `localhost` or `swarm-gateways.net`\n`upload.port`        | integer: `5001` | Port value used to interact with the storage provider for upload, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`\n`upload.getUrl`      | string: `http://localhost:8080/ipfs/` | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n`dappConnection`     | | List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify `$BZZ` to attempt to connect to an injected swarm object.\n`dappConnection.provider` | string: `ipfs` | Desired provider to use for dapp storage.\n`dappConnection.protocol`    | string: `http` | Storage provider protocol used in the dapp, i.e. `http` or `https`\n`dappConnection.host`        | string | Host value used to interact with the storage provider in the dapp, i.e. `localhost` or `swarm-gateways.net`\n`dappConnection.port`        | integer | Port value used to interact with the storage provider in the dapp, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`. Can specify `false` if a port should not be included in the connection URL (i.e. for a public gateway like `http://swarm-gateways.net`).\n`dappConnection.getUrl`      | string | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n\n## Using a local node\n\nEither for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port `5001` and Swarm runs on `8500`.\n\nWe can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.\n\n**Important configurations for swarm**:\n\n```\n{\n  \"development\": {\n    \"provider\": \"swarm\",\n    \"account\": {\n      \"address\": \"YOUR_ACCOUNT_ADDRESS\",\n      \"password\": \"PATH/TO/PASSWORD/FILE\"\n    },\n    \"swarmPath\": \"PATH/TO/SWARM/EXECUTABLE\"\n  }\n}\n```\n\n## Using a public gateway\n\nEmbark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following `config/storage.js` options:\n\n### IPFS\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\":{\n    \"provider\": \"ipfs\",\n    \"host\": \"ipfs.infura.io\",\n    \"port\": 80,\n    \"protocol\": \"https\",\n    \"getUrl\": \"https://ipfs.infura.io/ipfs/\"\n  }\n}\n```\n\n### Swarm\n\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\": {\n    \"provider\": \"swarm\",\n    \"host\": \"localhost\",\n    \"port\": 8500\n  }\n}\n```\n\n## Troubleshooting\n\nIf you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.\n\nIf you are using the built in webserver, the CORS would need to be set to `http://localhost:8000`, however if you are using `embark upload`, the domain of the decentralised storage host should be included in CORS.\n\nDepending on your `upload` settings in `storage.js`, this could be `http://localhost:8080` or `http://ipfs.infura.io` for IPFS or it could be `http://localhost:8500` or `http://swarm-gateways.net` for Swarm.\n\nOf course, if you are hosting your DApp on a different domain (i.e. not `localhost`, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:\n\n```\nipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin \"[\\\"http://localhost:8000\\\", \\\"http://localhost:8500\\\", \\\"http://localhost:8545\\\", \\\"ws://localhost:8546\\\"]\"\n```\nNOTE: `http://localhost:8545` and `ws://localhost:8546` are for geth.\n\n```\nswarm --bzzaccount=fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir=~/.bzz-data/ --password=config/development/password --corsdomain=http://localhost:8000,http://localhost:8080,http://localhost:8545,ws://localhost:8546 --ens-api=''\n```\n","source":"docs/storage_configuration.md","raw":"title: Configuring decentralized storages\nlayout: docs\n---\n\nWith Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let's take a closer look at how to make use of this.\n\n## Configuration basics\n\nEmbark will check our preferred storage configuration in the file `config/storage.js`, unless [configured differently](/docs/configuration.html) in our application's `embark.json` file. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment. If [environments in Embark](/docs/environments.html) are new to you, check out the dedicated guide first and come back.\n\nEach of these configuration options can be individually overridden on a per environment basis.\n\n```\nmodule.exports = {\n  \"default\": {\n    \"enabled\": true,\n    \"ipfs_bin\": \"ipfs\",\n    \"available_providers\": [\"ipfs\", \"swarm\"],\n    \"upload\":{\n      \"provider\": \"ipfs\",\n      \"host\": \"localhost\",\n      \"port\": 5001,\n      \"getUrl\": \"http://localhost:8080/ipfs\"\n    },\n    \"dappConnection\":[\n      {\"provider\": \"swarm\", \"host\": \"localhost\", \"port\": 8500, \"getUrl\": \"http://localhost:8500/bzz:/\"},\n      {\"provider\": \"ipfs\", \"host\": \"localhost\", \"port\": 5001, \"getUrl\": \"http://localhost:8080/ipfs/\"}\n    ]\n  },\n  \"development\": {\n    \"enabled\": true,\n    \"provider\": \"ipfs\",\n    \"host\": \"localhost\",\n    \"port\": 5001\n  }\n}\n```\n\nThe available options are:\n\nOption | Type: `default` | Value\n--- | --- | ---\n`enabled`    | boolean: `true` | Enables or completely disables storage support\n`ipfs_bin`    | string: `ipfs` | Name or desired path to the ipfs binary\n`available_providers`    | array: `[\"ipfs\", \"swarm\"]` | List of storages to be supported on the dapp. This will affect what's available with the EmbarkJS library on the dapp.\n`upload`      | | The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.\n`upload.provider`    | string: `ipfs` | Desired provider to use when uploading dapp.\n`upload.protocol`    | string: `http` | Storage provider protocol for upload, ie `http` or `https`\n`upload.host`        | string: `localhost` | Host value used to interact with the storage provider for upload, i.e. `localhost` or `swarm-gateways.net`\n`upload.port`        | integer: `5001` | Port value used to interact with the storage provider for upload, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`\n`upload.getUrl`      | string: `http://localhost:8080/ipfs/` | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n`dappConnection`     | | List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify `$BZZ` to attempt to connect to an injected swarm object.\n`dappConnection.provider` | string: `ipfs` | Desired provider to use for dapp storage.\n`dappConnection.protocol`    | string: `http` | Storage provider protocol used in the dapp, i.e. `http` or `https`\n`dappConnection.host`        | string | Host value used to interact with the storage provider in the dapp, i.e. `localhost` or `swarm-gateways.net`\n`dappConnection.port`        | integer | Port value used to interact with the storage provider in the dapp, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`. Can specify `false` if a port should not be included in the connection URL (i.e. for a public gateway like `http://swarm-gateways.net`).\n`dappConnection.getUrl`      | string | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n\n## Using a local node\n\nEither for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port `5001` and Swarm runs on `8500`.\n\nWe can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.\n\n**Important configurations for swarm**:\n\n```\n{\n  \"development\": {\n    \"provider\": \"swarm\",\n    \"account\": {\n      \"address\": \"YOUR_ACCOUNT_ADDRESS\",\n      \"password\": \"PATH/TO/PASSWORD/FILE\"\n    },\n    \"swarmPath\": \"PATH/TO/SWARM/EXECUTABLE\"\n  }\n}\n```\n\n## Using a public gateway\n\nEmbark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following `config/storage.js` options:\n\n### IPFS\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\":{\n    \"provider\": \"ipfs\",\n    \"host\": \"ipfs.infura.io\",\n    \"port\": 80,\n    \"protocol\": \"https\",\n    \"getUrl\": \"https://ipfs.infura.io/ipfs/\"\n  }\n}\n```\n\n### Swarm\n\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\": {\n    \"provider\": \"swarm\",\n    \"host\": \"localhost\",\n    \"port\": 8500\n  }\n}\n```\n\n## Troubleshooting\n\nIf you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.\n\nIf you are using the built in webserver, the CORS would need to be set to `http://localhost:8000`, however if you are using `embark upload`, the domain of the decentralised storage host should be included in CORS.\n\nDepending on your `upload` settings in `storage.js`, this could be `http://localhost:8080` or `http://ipfs.infura.io` for IPFS or it could be `http://localhost:8500` or `http://swarm-gateways.net` for Swarm.\n\nOf course, if you are hosting your DApp on a different domain (i.e. not `localhost`, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:\n\n```\nipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin \"[\\\"http://localhost:8000\\\", \\\"http://localhost:8500\\\", \\\"http://localhost:8545\\\", \\\"ws://localhost:8546\\\"]\"\n```\nNOTE: `http://localhost:8545` and `ws://localhost:8546` are for geth.\n\n```\nswarm --bzzaccount=fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir=~/.bzz-data/ --password=config/development/password --corsdomain=http://localhost:8000,http://localhost:8080,http://localhost:8545,ws://localhost:8546 --ens-api=''\n```\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/storage_configuration.html","comments":1,"_id":"ck5ijm3rw001n7heghk4sbt8r","content":"<p>With Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let’s take a closer look at how to make use of this.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark will check our preferred storage configuration in the file <code>config/storage.js</code>, unless <a href=\"/docs/configuration.html\">configured differently</a> in our application’s <code>embark.json</code> file. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment. If <a href=\"/docs/environments.html\">environments in Embark</a> are new to you, check out the dedicated guide first and come back.</p>\n<p>Each of these configuration options can be individually overridden on a per environment basis.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;ipfs_bin&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;available_providers&quot;: [&quot;ipfs&quot;, &quot;swarm&quot;],</span><br><span class=\"line\">    &quot;upload&quot;:&#123;</span><br><span class=\"line\">      &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 5001,</span><br><span class=\"line\">      &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;dappConnection&quot;:[</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;swarm&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 8500, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8500&#x2F;bzz:&#x2F;&quot;&#125;,</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;ipfs&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 5001, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&#x2F;&quot;&#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 5001</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The available options are:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Enables or completely disables storage support</td>\n</tr>\n<tr>\n<td><code>ipfs_bin</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Name or desired path to the ipfs binary</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;ipfs&quot;, &quot;swarm&quot;]</code></td>\n<td>List of storages to be supported on the dapp. This will affect what’s available with the EmbarkJS library on the dapp.</td>\n</tr>\n<tr>\n<td><code>upload</code></td>\n<td></td>\n<td>The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.</td>\n</tr>\n<tr>\n<td><code>upload.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use when uploading dapp.</td>\n</tr>\n<tr>\n<td><code>upload.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol for upload, ie <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>upload.host</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host value used to interact with the storage provider for upload, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>upload.port</code></td>\n<td>integer: <code>5001</code></td>\n<td>Port value used to interact with the storage provider for upload, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code></td>\n</tr>\n<tr>\n<td><code>upload.getUrl</code></td>\n<td>string: <code>http://localhost:8080/ipfs/</code></td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n<tr>\n<td><code>dappConnection</code></td>\n<td></td>\n<td>List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify <code>$BZZ</code> to attempt to connect to an injected swarm object.</td>\n</tr>\n<tr>\n<td><code>dappConnection.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use for dapp storage.</td>\n</tr>\n<tr>\n<td><code>dappConnection.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol used in the dapp, i.e. <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.host</code></td>\n<td>string</td>\n<td>Host value used to interact with the storage provider in the dapp, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.port</code></td>\n<td>integer</td>\n<td>Port value used to interact with the storage provider in the dapp, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code>. Can specify <code>false</code> if a port should not be included in the connection URL (i.e. for a public gateway like <code>http://swarm-gateways.net</code>).</td>\n</tr>\n<tr>\n<td><code>dappConnection.getUrl</code></td>\n<td>string</td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n</tbody></table>\n<h2 id=\"Using-a-local-node\"><a href=\"#Using-a-local-node\" class=\"headerlink\" title=\"Using a local node\"></a>Using a local node</h2><p>Either for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port <code>5001</code> and Swarm runs on <code>8500</code>.</p>\n<p>We can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.</p>\n<p><strong>Important configurations for swarm</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;account&quot;: &#123;</span><br><span class=\"line\">      &quot;address&quot;: &quot;YOUR_ACCOUNT_ADDRESS&quot;,</span><br><span class=\"line\">      &quot;password&quot;: &quot;PATH&#x2F;TO&#x2F;PASSWORD&#x2F;FILE&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;swarmPath&quot;: &quot;PATH&#x2F;TO&#x2F;SWARM&#x2F;EXECUTABLE&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-a-public-gateway\"><a href=\"#Using-a-public-gateway\" class=\"headerlink\" title=\"Using a public gateway\"></a>Using a public gateway</h2><p>Embark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following <code>config/storage.js</code> options:</p>\n<h3 id=\"IPFS\"><a href=\"#IPFS\" class=\"headerlink\" title=\"IPFS\"></a>IPFS</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;:&#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;ipfs.infura.io&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 80,</span><br><span class=\"line\">    &quot;protocol&quot;: &quot;https&quot;,</span><br><span class=\"line\">    &quot;getUrl&quot;: &quot;https:&#x2F;&#x2F;ipfs.infura.io&#x2F;ipfs&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Swarm\"><a href=\"#Swarm\" class=\"headerlink\" title=\"Swarm\"></a>Swarm</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 8500</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Troubleshooting\"><a href=\"#Troubleshooting\" class=\"headerlink\" title=\"Troubleshooting\"></a>Troubleshooting</h2><p>If you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.</p>\n<p>If you are using the built in webserver, the CORS would need to be set to <code>http://localhost:8000</code>, however if you are using <code>embark upload</code>, the domain of the decentralised storage host should be included in CORS.</p>\n<p>Depending on your <code>upload</code> settings in <code>storage.js</code>, this could be <code>http://localhost:8080</code> or <code>http://ipfs.infura.io</code> for IPFS or it could be <code>http://localhost:8500</code> or <code>http://swarm-gateways.net</code> for Swarm.</p>\n<p>Of course, if you are hosting your DApp on a different domain (i.e. not <code>localhost</code>, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin &quot;[\\&quot;http:&#x2F;&#x2F;localhost:8000\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8500\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8545\\&quot;, \\&quot;ws:&#x2F;&#x2F;localhost:8546\\&quot;]&quot;</span><br></pre></td></tr></table></figure>\n<p>NOTE: <code>http://localhost:8545</code> and <code>ws://localhost:8546</code> are for geth.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">swarm --bzzaccount&#x3D;fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir&#x3D;~&#x2F;.bzz-data&#x2F; --password&#x3D;config&#x2F;development&#x2F;password --corsdomain&#x3D;http:&#x2F;&#x2F;localhost:8000,http:&#x2F;&#x2F;localhost:8080,http:&#x2F;&#x2F;localhost:8545,ws:&#x2F;&#x2F;localhost:8546 --ens-api&#x3D;&#39;&#39;</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let’s take a closer look at how to make use of this.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark will check our preferred storage configuration in the file <code>config/storage.js</code>, unless <a href=\"/docs/configuration.html\">configured differently</a> in our application’s <code>embark.json</code> file. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment. If <a href=\"/docs/environments.html\">environments in Embark</a> are new to you, check out the dedicated guide first and come back.</p>\n<p>Each of these configuration options can be individually overridden on a per environment basis.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;ipfs_bin&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;available_providers&quot;: [&quot;ipfs&quot;, &quot;swarm&quot;],</span><br><span class=\"line\">    &quot;upload&quot;:&#123;</span><br><span class=\"line\">      &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 5001,</span><br><span class=\"line\">      &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;dappConnection&quot;:[</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;swarm&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 8500, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8500&#x2F;bzz:&#x2F;&quot;&#125;,</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;ipfs&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 5001, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&#x2F;&quot;&#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 5001</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The available options are:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Enables or completely disables storage support</td>\n</tr>\n<tr>\n<td><code>ipfs_bin</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Name or desired path to the ipfs binary</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;ipfs&quot;, &quot;swarm&quot;]</code></td>\n<td>List of storages to be supported on the dapp. This will affect what’s available with the EmbarkJS library on the dapp.</td>\n</tr>\n<tr>\n<td><code>upload</code></td>\n<td></td>\n<td>The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.</td>\n</tr>\n<tr>\n<td><code>upload.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use when uploading dapp.</td>\n</tr>\n<tr>\n<td><code>upload.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol for upload, ie <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>upload.host</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host value used to interact with the storage provider for upload, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>upload.port</code></td>\n<td>integer: <code>5001</code></td>\n<td>Port value used to interact with the storage provider for upload, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code></td>\n</tr>\n<tr>\n<td><code>upload.getUrl</code></td>\n<td>string: <code>http://localhost:8080/ipfs/</code></td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n<tr>\n<td><code>dappConnection</code></td>\n<td></td>\n<td>List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify <code>$BZZ</code> to attempt to connect to an injected swarm object.</td>\n</tr>\n<tr>\n<td><code>dappConnection.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use for dapp storage.</td>\n</tr>\n<tr>\n<td><code>dappConnection.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol used in the dapp, i.e. <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.host</code></td>\n<td>string</td>\n<td>Host value used to interact with the storage provider in the dapp, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.port</code></td>\n<td>integer</td>\n<td>Port value used to interact with the storage provider in the dapp, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code>. Can specify <code>false</code> if a port should not be included in the connection URL (i.e. for a public gateway like <code>http://swarm-gateways.net</code>).</td>\n</tr>\n<tr>\n<td><code>dappConnection.getUrl</code></td>\n<td>string</td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n</tbody></table>\n<h2 id=\"Using-a-local-node\"><a href=\"#Using-a-local-node\" class=\"headerlink\" title=\"Using a local node\"></a>Using a local node</h2><p>Either for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port <code>5001</code> and Swarm runs on <code>8500</code>.</p>\n<p>We can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.</p>\n<p><strong>Important configurations for swarm</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;account&quot;: &#123;</span><br><span class=\"line\">      &quot;address&quot;: &quot;YOUR_ACCOUNT_ADDRESS&quot;,</span><br><span class=\"line\">      &quot;password&quot;: &quot;PATH&#x2F;TO&#x2F;PASSWORD&#x2F;FILE&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;swarmPath&quot;: &quot;PATH&#x2F;TO&#x2F;SWARM&#x2F;EXECUTABLE&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-a-public-gateway\"><a href=\"#Using-a-public-gateway\" class=\"headerlink\" title=\"Using a public gateway\"></a>Using a public gateway</h2><p>Embark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following <code>config/storage.js</code> options:</p>\n<h3 id=\"IPFS\"><a href=\"#IPFS\" class=\"headerlink\" title=\"IPFS\"></a>IPFS</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;:&#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;ipfs.infura.io&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 80,</span><br><span class=\"line\">    &quot;protocol&quot;: &quot;https&quot;,</span><br><span class=\"line\">    &quot;getUrl&quot;: &quot;https:&#x2F;&#x2F;ipfs.infura.io&#x2F;ipfs&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Swarm\"><a href=\"#Swarm\" class=\"headerlink\" title=\"Swarm\"></a>Swarm</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 8500</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Troubleshooting\"><a href=\"#Troubleshooting\" class=\"headerlink\" title=\"Troubleshooting\"></a>Troubleshooting</h2><p>If you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.</p>\n<p>If you are using the built in webserver, the CORS would need to be set to <code>http://localhost:8000</code>, however if you are using <code>embark upload</code>, the domain of the decentralised storage host should be included in CORS.</p>\n<p>Depending on your <code>upload</code> settings in <code>storage.js</code>, this could be <code>http://localhost:8080</code> or <code>http://ipfs.infura.io</code> for IPFS or it could be <code>http://localhost:8500</code> or <code>http://swarm-gateways.net</code> for Swarm.</p>\n<p>Of course, if you are hosting your DApp on a different domain (i.e. not <code>localhost</code>, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin &quot;[\\&quot;http:&#x2F;&#x2F;localhost:8000\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8500\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8545\\&quot;, \\&quot;ws:&#x2F;&#x2F;localhost:8546\\&quot;]&quot;</span><br></pre></td></tr></table></figure>\n<p>NOTE: <code>http://localhost:8545</code> and <code>ws://localhost:8546</code> are for geth.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">swarm --bzzaccount&#x3D;fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir&#x3D;~&#x2F;.bzz-data&#x2F; --password&#x3D;config&#x2F;development&#x2F;password --corsdomain&#x3D;http:&#x2F;&#x2F;localhost:8000,http:&#x2F;&#x2F;localhost:8080,http:&#x2F;&#x2F;localhost:8545,ws:&#x2F;&#x2F;localhost:8546 --ens-api&#x3D;&#39;&#39;</span><br></pre></td></tr></table></figure>\n"},{"title":"Deploying Apps","layout":"docs","_content":"\nTo build truly decentralized applications, we probably want to upload and host our application's assets on a decentralized storage network as well. In this guide we'll explore how to upload data to IPFS and Swarm using Embark.\n\n## Deploying using the `upload` command\n\nTo upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our [storage configuration](/docs/storage_configuration.html). \n\nOnce that is done we can use Embark's `upload` command to take the assets located in the configured `buildDir` (read [here](/docs/configuration.html) for more information) and upload it to the configured storage network.\n\n```\n$ embark upload\n```\n\nSimilar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the `livenet` environment configuration:\n\n```\n$ embark upload livenet\n```\n\n## Associating an ENS domain\n\n\nWe can associate our uploaded data to an ENS domain by using the `--ens` option. This will take the storage hash and upload it to an ENS domain.\n\nFor example, the following command will upload our application to IPFS or Swarm and connect it with the `embark.eth` domain:\n\n```\n$ embark upload --ens=embark.etk\n```\n\n{% notification info 'Important:' %}\nYou need to be the owner of the given domain for this to work. Head over to [ens.domains](https://ens.domains/) for more information.\n{% endnotification %}\n\n\n","source":"docs/storage_deployment.md","raw":"title: Deploying Apps\nlayout: docs\n---\n\nTo build truly decentralized applications, we probably want to upload and host our application's assets on a decentralized storage network as well. In this guide we'll explore how to upload data to IPFS and Swarm using Embark.\n\n## Deploying using the `upload` command\n\nTo upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our [storage configuration](/docs/storage_configuration.html). \n\nOnce that is done we can use Embark's `upload` command to take the assets located in the configured `buildDir` (read [here](/docs/configuration.html) for more information) and upload it to the configured storage network.\n\n```\n$ embark upload\n```\n\nSimilar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the `livenet` environment configuration:\n\n```\n$ embark upload livenet\n```\n\n## Associating an ENS domain\n\n\nWe can associate our uploaded data to an ENS domain by using the `--ens` option. This will take the storage hash and upload it to an ENS domain.\n\nFor example, the following command will upload our application to IPFS or Swarm and connect it with the `embark.eth` domain:\n\n```\n$ embark upload --ens=embark.etk\n```\n\n{% notification info 'Important:' %}\nYou need to be the owner of the given domain for this to work. Head over to [ens.domains](https://ens.domains/) for more information.\n{% endnotification %}\n\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/storage_deployment.html","comments":1,"_id":"ck5ijm3rx001o7heg6dhubmwp","content":"<p>To build truly decentralized applications, we probably want to upload and host our application’s assets on a decentralized storage network as well. In this guide we’ll explore how to upload data to IPFS and Swarm using Embark.</p>\n<h2 id=\"Deploying-using-the-upload-command\"><a href=\"#Deploying-using-the-upload-command\" class=\"headerlink\" title=\"Deploying using the upload command\"></a>Deploying using the <code>upload</code> command</h2><p>To upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our <a href=\"/docs/storage_configuration.html\">storage configuration</a>. </p>\n<p>Once that is done we can use Embark’s <code>upload</code> command to take the assets located in the configured <code>buildDir</code> (read <a href=\"/docs/configuration.html\">here</a> for more information) and upload it to the configured storage network.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload</span><br></pre></td></tr></table></figure>\n\n<p>Similar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the <code>livenet</code> environment configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload livenet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Associating-an-ENS-domain\"><a href=\"#Associating-an-ENS-domain\" class=\"headerlink\" title=\"Associating an ENS domain\"></a>Associating an ENS domain</h2><p>We can associate our uploaded data to an ENS domain by using the <code>--ens</code> option. This will take the storage hash and upload it to an ENS domain.</p>\n<p>For example, the following command will upload our application to IPFS or Swarm and connect it with the <code>embark.eth</code> domain:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload --ens&#x3D;embark.etk</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important:</strong></p>\n  <p><p>You need to be the owner of the given domain for this to work. Head over to <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">ens.domains</a> for more information.</p>\n</p>\n</div> \n\n\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>To build truly decentralized applications, we probably want to upload and host our application’s assets on a decentralized storage network as well. In this guide we’ll explore how to upload data to IPFS and Swarm using Embark.</p>\n<h2 id=\"Deploying-using-the-upload-command\"><a href=\"#Deploying-using-the-upload-command\" class=\"headerlink\" title=\"Deploying using the upload command\"></a>Deploying using the <code>upload</code> command</h2><p>To upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our <a href=\"/docs/storage_configuration.html\">storage configuration</a>. </p>\n<p>Once that is done we can use Embark’s <code>upload</code> command to take the assets located in the configured <code>buildDir</code> (read <a href=\"/docs/configuration.html\">here</a> for more information) and upload it to the configured storage network.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload</span><br></pre></td></tr></table></figure>\n\n<p>Similar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the <code>livenet</code> environment configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload livenet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Associating-an-ENS-domain\"><a href=\"#Associating-an-ENS-domain\" class=\"headerlink\" title=\"Associating an ENS domain\"></a>Associating an ENS domain</h2><p>We can associate our uploaded data to an ENS domain by using the <code>--ens</code> option. This will take the storage hash and upload it to an ENS domain.</p>\n<p>For example, the following command will upload our application to IPFS or Swarm and connect it with the <code>embark.eth</code> domain:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload --ens&#x3D;embark.etk</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important:</strong></p>\n  <p><p>You need to be the owner of the given domain for this to work. Head over to <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">ens.domains</a> for more information.</p>\n</p>\n</div> \n\n\n\n\n"},{"title":"Storage APIs in JavaScript","layout":"docs","_content":"\nAs mentioned in our guide on [Using EmbarkJS](/docs/javascript_usage.html), Embark's companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let's a have closer look at what `EmbarkJS.Storage` has to offer.\n\n## Setting up EmbarkJS\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Storage.setProvider('swarm', options);\n```\n\nOptions are optional and if provided, will override the values in `storage.js`. Here's what a manual configuration could look like:\n\n```\nEmbarkJS.Storage.setProvider('ipfs', {\n  server: 'localhost',\n  port: '5001'\n});\n\n// OR\n\nEmbarkJS.Storage.setProvider('swarm', {\n  server: 'swarm-gateways.net',\n  port: '80'\n});\n```\n\n## Saving text data\n\nString data can be easily uploaded to the configured storage using `EmbarkJS.Storage.saveText()`. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:\n\n```\nEmbarkJS.Storage\n  .saveText(\"hello world\").then(hash => {\n    ...\n  });\n```\n\n## Retrieving text data\n\nIf we happen to have a storage hash, we can use to to retrieve the data that's associated to it using `EmbarkJS.Storage.get()` as shown below. Just like `saveText()` this method returns a Promise and resolves with the data the hash points to:\n\n```\nEmbarkJS.Storage.get(hash).then(content =>  {\n  ...\n});\n```\n\n## Upload binary data\n\nWe can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type `input[type=file]` and pass it the `uploadFile()` method. So assuming we had an input that looked something like this:\n\n```\n<input type=\"file\">\n```\n\nWe can upload its data like this: \n```\nconst input = document.querySelector('input[type=file\"]');\n\nEmbarkJS.Storage.uploadFile(input).then(hash => {\n  ...    \n})\n```\n\nSimilar to `saveText()` and `get()`, this method returns a Promise and can be used with JavaScript's `async/await` syntec as well.\n\n## Display data using URLs\n\nTo display any uploaded data in the browser, we can request a fully qualified URL using `EmbarkJS.Storage.getUrl()` and a dedicated storage hash:\n\n```\nEmbarkJS.Storage.getUrl(hash).then(url => {\n  ...\n});\n```\n\n## Checking for storage provider availability\n\nWe can check whether our configured storage provider is available or not using `isAvailable()`. This method resolves with either `true` or `false` depending on whether the service is available:\n\n```\nEmbarkJS.Storage.isAvailable().then(isAvailable => { \n  ...\n});\n```\n\n## IPNS registration\n\nWe can register IPFS hashes using IPNS using the `register()` method has shown below:\n\n```\nEmbarkJS.Storage.register(some_hash).then(name => {\n  console.log('Registred: ', name);\n});\n```\n\n{% notification info 'Note on registering hashes:' %}\nRegistering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.\n{% endnotification %}\n\nAnd of course, we can resolve hashes to their IPFS paths as well, using the `resolve()` method:\n\n```Javascript\nEmbarkJS.Storage.resolve(some_hash).then(name => {\n  console.log('Resolved ', name);\n});\n```\n\n","source":"docs/storage_javascript.md","raw":"title: Storage APIs in JavaScript\nlayout: docs\n---\n\nAs mentioned in our guide on [Using EmbarkJS](/docs/javascript_usage.html), Embark's companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let's a have closer look at what `EmbarkJS.Storage` has to offer.\n\n## Setting up EmbarkJS\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Storage.setProvider('swarm', options);\n```\n\nOptions are optional and if provided, will override the values in `storage.js`. Here's what a manual configuration could look like:\n\n```\nEmbarkJS.Storage.setProvider('ipfs', {\n  server: 'localhost',\n  port: '5001'\n});\n\n// OR\n\nEmbarkJS.Storage.setProvider('swarm', {\n  server: 'swarm-gateways.net',\n  port: '80'\n});\n```\n\n## Saving text data\n\nString data can be easily uploaded to the configured storage using `EmbarkJS.Storage.saveText()`. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:\n\n```\nEmbarkJS.Storage\n  .saveText(\"hello world\").then(hash => {\n    ...\n  });\n```\n\n## Retrieving text data\n\nIf we happen to have a storage hash, we can use to to retrieve the data that's associated to it using `EmbarkJS.Storage.get()` as shown below. Just like `saveText()` this method returns a Promise and resolves with the data the hash points to:\n\n```\nEmbarkJS.Storage.get(hash).then(content =>  {\n  ...\n});\n```\n\n## Upload binary data\n\nWe can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type `input[type=file]` and pass it the `uploadFile()` method. So assuming we had an input that looked something like this:\n\n```\n<input type=\"file\">\n```\n\nWe can upload its data like this: \n```\nconst input = document.querySelector('input[type=file\"]');\n\nEmbarkJS.Storage.uploadFile(input).then(hash => {\n  ...    \n})\n```\n\nSimilar to `saveText()` and `get()`, this method returns a Promise and can be used with JavaScript's `async/await` syntec as well.\n\n## Display data using URLs\n\nTo display any uploaded data in the browser, we can request a fully qualified URL using `EmbarkJS.Storage.getUrl()` and a dedicated storage hash:\n\n```\nEmbarkJS.Storage.getUrl(hash).then(url => {\n  ...\n});\n```\n\n## Checking for storage provider availability\n\nWe can check whether our configured storage provider is available or not using `isAvailable()`. This method resolves with either `true` or `false` depending on whether the service is available:\n\n```\nEmbarkJS.Storage.isAvailable().then(isAvailable => { \n  ...\n});\n```\n\n## IPNS registration\n\nWe can register IPFS hashes using IPNS using the `register()` method has shown below:\n\n```\nEmbarkJS.Storage.register(some_hash).then(name => {\n  console.log('Registred: ', name);\n});\n```\n\n{% notification info 'Note on registering hashes:' %}\nRegistering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.\n{% endnotification %}\n\nAnd of course, we can resolve hashes to their IPFS paths as well, using the `resolve()` method:\n\n```Javascript\nEmbarkJS.Storage.resolve(some_hash).then(name => {\n  console.log('Resolved ', name);\n});\n```\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/storage_javascript.html","comments":1,"_id":"ck5ijm3rx001p7hegalb842ji","content":"<p>As mentioned in our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>, Embark’s companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let’s a have closer look at what <code>EmbarkJS.Storage</code> has to offer.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, options);</span><br></pre></td></tr></table></figure>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. Here’s what a manual configuration could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;ipfs&#39;, &#123;</span><br><span class=\"line\">  server: &#39;localhost&#39;,</span><br><span class=\"line\">  port: &#39;5001&#39;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">&#x2F;&#x2F; OR</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, &#123;</span><br><span class=\"line\">  server: &#39;swarm-gateways.net&#39;,</span><br><span class=\"line\">  port: &#39;80&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Saving-text-data\"><a href=\"#Saving-text-data\" class=\"headerlink\" title=\"Saving text data\"></a>Saving text data</h2><p>String data can be easily uploaded to the configured storage using <code>EmbarkJS.Storage.saveText()</code>. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage</span><br><span class=\"line\">  .saveText(&quot;hello world&quot;).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Retrieving-text-data\"><a href=\"#Retrieving-text-data\" class=\"headerlink\" title=\"Retrieving text data\"></a>Retrieving text data</h2><p>If we happen to have a storage hash, we can use to to retrieve the data that’s associated to it using <code>EmbarkJS.Storage.get()</code> as shown below. Just like <code>saveText()</code> this method returns a Promise and resolves with the data the hash points to:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.get(hash).then(content &#x3D;&gt;  &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Upload-binary-data\"><a href=\"#Upload-binary-data\" class=\"headerlink\" title=\"Upload binary data\"></a>Upload binary data</h2><p>We can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type <code>input[type=file]</code> and pass it the <code>uploadFile()</code> method. So assuming we had an input that looked something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;input type&#x3D;&quot;file&quot;&gt;</span><br></pre></td></tr></table></figure>\n\n<p>We can upload its data like this: </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const input &#x3D; document.querySelector(&#39;input[type&#x3D;file&quot;]&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.uploadFile(input).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...    </span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <code>saveText()</code> and <code>get()</code>, this method returns a Promise and can be used with JavaScript’s <code>async/await</code> syntec as well.</p>\n<h2 id=\"Display-data-using-URLs\"><a href=\"#Display-data-using-URLs\" class=\"headerlink\" title=\"Display data using URLs\"></a>Display data using URLs</h2><p>To display any uploaded data in the browser, we can request a fully qualified URL using <code>EmbarkJS.Storage.getUrl()</code> and a dedicated storage hash:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.getUrl(hash).then(url &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Checking-for-storage-provider-availability\"><a href=\"#Checking-for-storage-provider-availability\" class=\"headerlink\" title=\"Checking for storage provider availability\"></a>Checking for storage provider availability</h2><p>We can check whether our configured storage provider is available or not using <code>isAvailable()</code>. This method resolves with either <code>true</code> or <code>false</code> depending on whether the service is available:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.isAvailable().then(isAvailable &#x3D;&gt; &#123; </span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h2><p>We can register IPFS hashes using IPNS using the <code>register()</code> method has shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(some_hash).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;Registred: &#39;, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Note on registering hashes:</strong></p>\n  <p><p>Registering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.</p>\n</p>\n</div> \n\n\n\n<p>And of course, we can resolve hashes to their IPFS paths as well, using the <code>resolve()</code> method:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(some_hash).then(<span class=\"function\"><span class=\"params\">name</span> =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved '</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As mentioned in our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>, Embark’s companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let’s a have closer look at what <code>EmbarkJS.Storage</code> has to offer.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, options);</span><br></pre></td></tr></table></figure>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. Here’s what a manual configuration could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;ipfs&#39;, &#123;</span><br><span class=\"line\">  server: &#39;localhost&#39;,</span><br><span class=\"line\">  port: &#39;5001&#39;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">&#x2F;&#x2F; OR</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, &#123;</span><br><span class=\"line\">  server: &#39;swarm-gateways.net&#39;,</span><br><span class=\"line\">  port: &#39;80&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Saving-text-data\"><a href=\"#Saving-text-data\" class=\"headerlink\" title=\"Saving text data\"></a>Saving text data</h2><p>String data can be easily uploaded to the configured storage using <code>EmbarkJS.Storage.saveText()</code>. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage</span><br><span class=\"line\">  .saveText(&quot;hello world&quot;).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Retrieving-text-data\"><a href=\"#Retrieving-text-data\" class=\"headerlink\" title=\"Retrieving text data\"></a>Retrieving text data</h2><p>If we happen to have a storage hash, we can use to to retrieve the data that’s associated to it using <code>EmbarkJS.Storage.get()</code> as shown below. Just like <code>saveText()</code> this method returns a Promise and resolves with the data the hash points to:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.get(hash).then(content &#x3D;&gt;  &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Upload-binary-data\"><a href=\"#Upload-binary-data\" class=\"headerlink\" title=\"Upload binary data\"></a>Upload binary data</h2><p>We can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type <code>input[type=file]</code> and pass it the <code>uploadFile()</code> method. So assuming we had an input that looked something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;input type&#x3D;&quot;file&quot;&gt;</span><br></pre></td></tr></table></figure>\n\n<p>We can upload its data like this: </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const input &#x3D; document.querySelector(&#39;input[type&#x3D;file&quot;]&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.uploadFile(input).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...    </span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <code>saveText()</code> and <code>get()</code>, this method returns a Promise and can be used with JavaScript’s <code>async/await</code> syntec as well.</p>\n<h2 id=\"Display-data-using-URLs\"><a href=\"#Display-data-using-URLs\" class=\"headerlink\" title=\"Display data using URLs\"></a>Display data using URLs</h2><p>To display any uploaded data in the browser, we can request a fully qualified URL using <code>EmbarkJS.Storage.getUrl()</code> and a dedicated storage hash:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.getUrl(hash).then(url &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Checking-for-storage-provider-availability\"><a href=\"#Checking-for-storage-provider-availability\" class=\"headerlink\" title=\"Checking for storage provider availability\"></a>Checking for storage provider availability</h2><p>We can check whether our configured storage provider is available or not using <code>isAvailable()</code>. This method resolves with either <code>true</code> or <code>false</code> depending on whether the service is available:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.isAvailable().then(isAvailable &#x3D;&gt; &#123; </span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h2><p>We can register IPFS hashes using IPNS using the <code>register()</code> method has shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(some_hash).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;Registred: &#39;, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Note on registering hashes:</strong></p>\n  <p><p>Registering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.</p>\n</p>\n</div> \n\n\n\n<p>And of course, we can resolve hashes to their IPFS paths as well, using the <code>resolve()</code> method:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(some_hash).then(<span class=\"function\"><span class=\"params\">name</span> =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved '</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Application Structure","layout":"docs","_content":"\nOnce a [project is initialized](/docs/create_project.html), 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.\n\n**For Smart Contract developers**: This [guide covers](#Smart-Contracts-only-template-structure) projects that have been created with the [`--contracts-only` option](create_project.html#Creating-“contracts-only”-apps) as well.\n\n{% notification info 'Project structure with other tools' %}\nSince 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 [Angular CLI](https://cli.angular.io), [Vue CLI](https://cli.vuejs.org) or [Create React App](https://github.com/facebook/create-react-app).\n\nWhen 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.\n{% endnotification %}\n\n## Overview\n\nAn Embark project's structure is pretty straight forward. It contains a `config`, a `test`, an `app`, a `contracts` and a `dist` folder for their dedicated purposes. Most of them are self explanatory, but let's take a look at the overall file tree.\n\n``` plain\n├── app/\n├── contracts/\n├── config\n|   ├── blockchain.js\n|   └── contracts.js\n|   └── storage.js\n|   └── communication.js\n|   └── webserver.js\n└── test/\n└── dist/\n└── chains.json\n└── embark.json\n```\n\n### app/\n\nThis 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 `app`.\n\n### contracts/\n\nSmart 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.\n\n### config/\n\nThere 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.\n\n* **blockchain.js**\nThis 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.\n\n* **contracts.js**\nThis 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 [Configuring Contracts](contracts_configuration.html) for more details.\n\n* **storage.js**\nThis 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 [configuring decentralized storage](storage_configuration.html) for details configuring a decentralized storage system for our application.\n\n* **communication.js**\nSimilar 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 [message configuration](messages_configuration.html) to learn more about the available configuration options.\n\n* **webserver.js**\nThis 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.\n\n### test/\n\nEmbark lets us write tests for our Smart Contracts in JavaScript as well as [Solidity](https://github.com/ethereum/remix/tree/master/remix-tests). All of our tests are located here. To learn more about testing with Embark head over to our [guide on testing](contracts_testing.html).\n\n### dist/\n\nThe 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 `embark upload`.\n\n### chains.json\n\nThis 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\n\n### embark.json\n\nIn order to provide as much flexibility for our users as possible, Embark comes with an `embark.json` 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 [configuring embark.json](configuration.html).\n\n## Smart Contracts only template structure\n\nWhen creating a project using the `--contracts-only` option, the resulting structure is a little bit simpler. Let's take quick look:\n\n```\n├── contracts/\n└── test/\n└── dist/\n├── contracts.js\n└── chains.json\n└── embark.json\n```\n\nMost 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 `embark.json` configuration file if needed. Notice that this time, the `contracts.js` config file is in the root of the project's directory. This is because in the `embark.json` config file,`contracts` points to a path in the same folder.\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\nAs mentioned earlier, other services like storage and blockchain support can be easily re-enabled by changing them to path values as well.\n\nAwesome, 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!\n","source":"docs/structure.md","raw":"title: Application Structure\nlayout: docs\n---\n\nOnce a [project is initialized](/docs/create_project.html), 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.\n\n**For Smart Contract developers**: This [guide covers](#Smart-Contracts-only-template-structure) projects that have been created with the [`--contracts-only` option](create_project.html#Creating-“contracts-only”-apps) as well.\n\n{% notification info 'Project structure with other tools' %}\nSince 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 [Angular CLI](https://cli.angular.io), [Vue CLI](https://cli.vuejs.org) or [Create React App](https://github.com/facebook/create-react-app).\n\nWhen 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.\n{% endnotification %}\n\n## Overview\n\nAn Embark project's structure is pretty straight forward. It contains a `config`, a `test`, an `app`, a `contracts` and a `dist` folder for their dedicated purposes. Most of them are self explanatory, but let's take a look at the overall file tree.\n\n``` plain\n├── app/\n├── contracts/\n├── config\n|   ├── blockchain.js\n|   └── contracts.js\n|   └── storage.js\n|   └── communication.js\n|   └── webserver.js\n└── test/\n└── dist/\n└── chains.json\n└── embark.json\n```\n\n### app/\n\nThis 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 `app`.\n\n### contracts/\n\nSmart 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.\n\n### config/\n\nThere 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.\n\n* **blockchain.js**\nThis 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.\n\n* **contracts.js**\nThis 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 [Configuring Contracts](contracts_configuration.html) for more details.\n\n* **storage.js**\nThis 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 [configuring decentralized storage](storage_configuration.html) for details configuring a decentralized storage system for our application.\n\n* **communication.js**\nSimilar 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 [message configuration](messages_configuration.html) to learn more about the available configuration options.\n\n* **webserver.js**\nThis 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.\n\n### test/\n\nEmbark lets us write tests for our Smart Contracts in JavaScript as well as [Solidity](https://github.com/ethereum/remix/tree/master/remix-tests). All of our tests are located here. To learn more about testing with Embark head over to our [guide on testing](contracts_testing.html).\n\n### dist/\n\nThe 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 `embark upload`.\n\n### chains.json\n\nThis 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\n\n### embark.json\n\nIn order to provide as much flexibility for our users as possible, Embark comes with an `embark.json` 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 [configuring embark.json](configuration.html).\n\n## Smart Contracts only template structure\n\nWhen creating a project using the `--contracts-only` option, the resulting structure is a little bit simpler. Let's take quick look:\n\n```\n├── contracts/\n└── test/\n└── dist/\n├── contracts.js\n└── chains.json\n└── embark.json\n```\n\nMost 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 `embark.json` configuration file if needed. Notice that this time, the `contracts.js` config file is in the root of the project's directory. This is because in the `embark.json` config file,`contracts` points to a path in the same folder.\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\nAs mentioned earlier, other services like storage and blockchain support can be easily re-enabled by changing them to path values as well.\n\nAwesome, 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!\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/structure.html","comments":1,"_id":"ck5ijm3ry001q7heghat16oa6","content":"<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>\n<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>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Project structure with other tools</strong></p>\n  <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>\n<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>\n</p>\n</div> \n\n\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── app&#x2F;</span><br><span class=\"line\">├── contracts&#x2F;</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&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</span><br><span class=\"line\">└── chains.json</span><br><span class=\"line\">└── embark.json</span><br></pre></td></tr></table></figure>\n\n<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>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts/\"></a>contracts/</h3><p>Smart Contracts go here. Embark will automatically compile, deploy &amp; 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>\n<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>\n<ul>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n</ul>\n<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>\n<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>\n<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>\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</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>\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n<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>\n<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>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<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>\n<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>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Project structure with other tools</strong></p>\n  <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>\n<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>\n</p>\n</div> \n\n\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── app&#x2F;</span><br><span class=\"line\">├── contracts&#x2F;</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&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</span><br><span class=\"line\">└── chains.json</span><br><span class=\"line\">└── embark.json</span><br></pre></td></tr></table></figure>\n\n<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>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts/\"></a>contracts/</h3><p>Smart Contracts go here. Embark will automatically compile, deploy &amp; 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>\n<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>\n<ul>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n</ul>\n<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>\n<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>\n<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>\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</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>\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n<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>\n<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>\n"},{"title":"Using the Cockpit Debugger","layout":"docs","_content":"\nCockpit comes with a very powerful integrated debugger similar to the one provided by the [Remix](https://remix.ethereum.org/) browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.\n\nIn this guide we'll take a look at how to use the debugger.\n\n## Entering the Debugger\n\nFirst things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.\n\nTherefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a \"Debug\" button. Clicking that button takes us to Cockpit's [Code Editor](/docs/cockpit_editor.html) in its debugging mode.\n\nProbably the most straight forward way to do that is entering the [Explorer](/docs/cockpit_explorer.html) and simply select any transaction that is a Smart Contract call.\n\n![Cockpit Enter Debugger](/assets/images/cockpit_enter_debugger.gif)\n\n## Debugger View\n\nOnce we enter the debugger mode inside the Code Editor we'll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). \n\n![Cockpit Debugger Controls](/assets/images/cockpit_debugger_controls.png)\n\nFrom left to right, the controls are:\n\n- **Jump to previous breakpoint** - Jumps to the previous available breakpoint within the current function\n- **Jump to next breakpoint** - Jumps to the next available breakpoint within the current function\n- **Step over previous function call** - Executes the previous function without stepping into it\n- **Step over next function call** - Executes the next function without stepping into it\n- **Step into previous function call** - Steps into the previous function call and sets temporary breakpoint\n- **Step into next function call** - Steps into the next function call and sets temporary breakpoint\n\nWhen using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. \n\n![Cockpit Using Debugger](/assets/images/cockpit_using_debugger.gif)\n\n## Debugger variables\n\nAs we're using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we're debugging. This is a very useful feature as we can see in real-time which variables contain which value.\n\nThe debugger provides variables in the following scopes:\n\n- **contract** - These are variable members of the Smart Contract instance itself.\n- **globals** - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current `block` as well as `msg`.\n- **locals** - These are parameter variables scoped to the function that is being debugged.\n","source":"docs/cockpit_debugger.md","raw":"title: Using the Cockpit Debugger\nlayout: docs\n---\n\nCockpit comes with a very powerful integrated debugger similar to the one provided by the [Remix](https://remix.ethereum.org/) browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.\n\nIn this guide we'll take a look at how to use the debugger.\n\n## Entering the Debugger\n\nFirst things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.\n\nTherefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a \"Debug\" button. Clicking that button takes us to Cockpit's [Code Editor](/docs/cockpit_editor.html) in its debugging mode.\n\nProbably the most straight forward way to do that is entering the [Explorer](/docs/cockpit_explorer.html) and simply select any transaction that is a Smart Contract call.\n\n![Cockpit Enter Debugger](/assets/images/cockpit_enter_debugger.gif)\n\n## Debugger View\n\nOnce we enter the debugger mode inside the Code Editor we'll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). \n\n![Cockpit Debugger Controls](/assets/images/cockpit_debugger_controls.png)\n\nFrom left to right, the controls are:\n\n- **Jump to previous breakpoint** - Jumps to the previous available breakpoint within the current function\n- **Jump to next breakpoint** - Jumps to the next available breakpoint within the current function\n- **Step over previous function call** - Executes the previous function without stepping into it\n- **Step over next function call** - Executes the next function without stepping into it\n- **Step into previous function call** - Steps into the previous function call and sets temporary breakpoint\n- **Step into next function call** - Steps into the next function call and sets temporary breakpoint\n\nWhen using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. \n\n![Cockpit Using Debugger](/assets/images/cockpit_using_debugger.gif)\n\n## Debugger variables\n\nAs we're using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we're debugging. This is a very useful feature as we can see in real-time which variables contain which value.\n\nThe debugger provides variables in the following scopes:\n\n- **contract** - These are variable members of the Smart Contract instance itself.\n- **globals** - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current `block` as well as `msg`.\n- **locals** - These are parameter variables scoped to the function that is being debugged.\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_debugger.html","comments":1,"_id":"ck5ijm3ry001r7hegh8osc273","content":"<p>Cockpit comes with a very powerful integrated debugger similar to the one provided by the <a href=\"https://remix.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Remix</a> browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.</p>\n<p>In this guide we’ll take a look at how to use the debugger.</p>\n<h2 id=\"Entering-the-Debugger\"><a href=\"#Entering-the-Debugger\" class=\"headerlink\" title=\"Entering the Debugger\"></a>Entering the Debugger</h2><p>First things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.</p>\n<p>Therefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a “Debug” button. Clicking that button takes us to Cockpit’s <a href=\"/docs/cockpit_editor.html\">Code Editor</a> in its debugging mode.</p>\n<p>Probably the most straight forward way to do that is entering the <a href=\"/docs/cockpit_explorer.html\">Explorer</a> and simply select any transaction that is a Smart Contract call.</p>\n<p><img src=\"/assets/images/cockpit_enter_debugger.gif\" alt=\"Cockpit Enter Debugger\"></p>\n<h2 id=\"Debugger-View\"><a href=\"#Debugger-View\" class=\"headerlink\" title=\"Debugger View\"></a>Debugger View</h2><p>Once we enter the debugger mode inside the Code Editor we’ll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). </p>\n<p><img src=\"/assets/images/cockpit_debugger_controls.png\" alt=\"Cockpit Debugger Controls\"></p>\n<p>From left to right, the controls are:</p>\n<ul>\n<li><strong>Jump to previous breakpoint</strong> - Jumps to the previous available breakpoint within the current function</li>\n<li><strong>Jump to next breakpoint</strong> - Jumps to the next available breakpoint within the current function</li>\n<li><strong>Step over previous function call</strong> - Executes the previous function without stepping into it</li>\n<li><strong>Step over next function call</strong> - Executes the next function without stepping into it</li>\n<li><strong>Step into previous function call</strong> - Steps into the previous function call and sets temporary breakpoint</li>\n<li><strong>Step into next function call</strong> - Steps into the next function call and sets temporary breakpoint</li>\n</ul>\n<p>When using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. </p>\n<p><img src=\"/assets/images/cockpit_using_debugger.gif\" alt=\"Cockpit Using Debugger\"></p>\n<h2 id=\"Debugger-variables\"><a href=\"#Debugger-variables\" class=\"headerlink\" title=\"Debugger variables\"></a>Debugger variables</h2><p>As we’re using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we’re debugging. This is a very useful feature as we can see in real-time which variables contain which value.</p>\n<p>The debugger provides variables in the following scopes:</p>\n<ul>\n<li><strong>contract</strong> - These are variable members of the Smart Contract instance itself.</li>\n<li><strong>globals</strong> - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current <code>block</code> as well as <code>msg</code>.</li>\n<li><strong>locals</strong> - These are parameter variables scoped to the function that is being debugged.</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Cockpit comes with a very powerful integrated debugger similar to the one provided by the <a href=\"https://remix.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Remix</a> browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.</p>\n<p>In this guide we’ll take a look at how to use the debugger.</p>\n<h2 id=\"Entering-the-Debugger\"><a href=\"#Entering-the-Debugger\" class=\"headerlink\" title=\"Entering the Debugger\"></a>Entering the Debugger</h2><p>First things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.</p>\n<p>Therefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a “Debug” button. Clicking that button takes us to Cockpit’s <a href=\"/docs/cockpit_editor.html\">Code Editor</a> in its debugging mode.</p>\n<p>Probably the most straight forward way to do that is entering the <a href=\"/docs/cockpit_explorer.html\">Explorer</a> and simply select any transaction that is a Smart Contract call.</p>\n<p><img src=\"/assets/images/cockpit_enter_debugger.gif\" alt=\"Cockpit Enter Debugger\"></p>\n<h2 id=\"Debugger-View\"><a href=\"#Debugger-View\" class=\"headerlink\" title=\"Debugger View\"></a>Debugger View</h2><p>Once we enter the debugger mode inside the Code Editor we’ll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). </p>\n<p><img src=\"/assets/images/cockpit_debugger_controls.png\" alt=\"Cockpit Debugger Controls\"></p>\n<p>From left to right, the controls are:</p>\n<ul>\n<li><strong>Jump to previous breakpoint</strong> - Jumps to the previous available breakpoint within the current function</li>\n<li><strong>Jump to next breakpoint</strong> - Jumps to the next available breakpoint within the current function</li>\n<li><strong>Step over previous function call</strong> - Executes the previous function without stepping into it</li>\n<li><strong>Step over next function call</strong> - Executes the next function without stepping into it</li>\n<li><strong>Step into previous function call</strong> - Steps into the previous function call and sets temporary breakpoint</li>\n<li><strong>Step into next function call</strong> - Steps into the next function call and sets temporary breakpoint</li>\n</ul>\n<p>When using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. </p>\n<p><img src=\"/assets/images/cockpit_using_debugger.gif\" alt=\"Cockpit Using Debugger\"></p>\n<h2 id=\"Debugger-variables\"><a href=\"#Debugger-variables\" class=\"headerlink\" title=\"Debugger variables\"></a>Debugger variables</h2><p>As we’re using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we’re debugging. This is a very useful feature as we can see in real-time which variables contain which value.</p>\n<p>The debugger provides variables in the following scopes:</p>\n<ul>\n<li><strong>contract</strong> - These are variable members of the Smart Contract instance itself.</li>\n<li><strong>globals</strong> - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current <code>block</code> as well as <code>msg</code>.</li>\n<li><strong>locals</strong> - These are parameter variables scoped to the function that is being debugged.</li>\n</ul>\n"},{"title":"Troubleshooting","layout":"docs","_content":"In case you're experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn't help you solve your problem, try doing a search on [GitHub](https://github.com/embarklabs/embark/issues).\n\n## node-gyp problems\nnode-gyp can cause problems, because it requires a C++ compiler.\n\nIf you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).\n\nIf you still have problems and are on Windows, try the following:\n- run `npm config set msvs_version 2015` before `npm install`\n- Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.\n\n## EACCES / npm ERR Permission denied\n\nIssues typically occur if NodeJS and/or Embark are installed using `sudo`, avoid using it possible. There are [several options](https://docs.npmjs.com/getting-started/fixing-npm-permissions) to fix this. We recommend installing node using [NVM](https://github.com/creationix/nvm/blob/master/README.md)\n\n## Assuming Contract to be an interface\n\nThis warning happens when Embark can't deploy one of your Smart Contracts because the compiler did not return a bytecode.\n\nHere are some of the reasons:\n- If it inherits from an interface, it must have all the functions implemented\n- The contract's constructor must be `public`\n","source":"docs/troubleshooting.md","raw":"title: Troubleshooting\nlayout: docs\n---\nIn case you're experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn't help you solve your problem, try doing a search on [GitHub](https://github.com/embarklabs/embark/issues).\n\n## node-gyp problems\nnode-gyp can cause problems, because it requires a C++ compiler.\n\nIf you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).\n\nIf you still have problems and are on Windows, try the following:\n- run `npm config set msvs_version 2015` before `npm install`\n- Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.\n\n## EACCES / npm ERR Permission denied\n\nIssues typically occur if NodeJS and/or Embark are installed using `sudo`, avoid using it possible. There are [several options](https://docs.npmjs.com/getting-started/fixing-npm-permissions) to fix this. We recommend installing node using [NVM](https://github.com/creationix/nvm/blob/master/README.md)\n\n## Assuming Contract to be an interface\n\nThis warning happens when Embark can't deploy one of your Smart Contracts because the compiler did not return a bytecode.\n\nHere are some of the reasons:\n- If it inherits from an interface, it must have all the functions implemented\n- The contract's constructor must be `public`\n","date":"2020-01-19T20:56:53.015Z","updated":"2020-01-19T20:56:53.015Z","path":"docs/troubleshooting.html","_id":"ck5ijm3rz001s7hegffe14sf7","comments":1,"content":"<p>In case you’re experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn’t help you solve your problem, try doing a search on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a>.</p>\n<h2 id=\"node-gyp-problems\"><a href=\"#node-gyp-problems\" class=\"headerlink\" title=\"node-gyp problems\"></a>node-gyp problems</h2><p>node-gyp can cause problems, because it requires a C++ compiler.</p>\n<p>If you do have problems caused by it, first follow the installation steps for your OS <a href=\"https://github.com/nodejs/node-gyp#installation\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>If you still have problems and are on Windows, try the following:</p>\n<ul>\n<li>run <code>npm config set msvs_version 2015</code> before <code>npm install</code></li>\n<li>Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.</li>\n</ul>\n<h2 id=\"EACCES-npm-ERR-Permission-denied\"><a href=\"#EACCES-npm-ERR-Permission-denied\" class=\"headerlink\" title=\"EACCES / npm ERR Permission denied\"></a>EACCES / npm ERR Permission denied</h2><p>Issues typically occur if NodeJS and/or Embark are installed using <code>sudo</code>, avoid using it possible. There are <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">several options</a> to fix this. We recommend installing node using <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">NVM</a></p>\n<h2 id=\"Assuming-Contract-to-be-an-interface\"><a href=\"#Assuming-Contract-to-be-an-interface\" class=\"headerlink\" title=\"Assuming Contract to be an interface\"></a>Assuming Contract to be an interface</h2><p>This warning happens when Embark can’t deploy one of your Smart Contracts because the compiler did not return a bytecode.</p>\n<p>Here are some of the reasons:</p>\n<ul>\n<li>If it inherits from an interface, it must have all the functions implemented</li>\n<li>The contract’s constructor must be <code>public</code></li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In case you’re experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn’t help you solve your problem, try doing a search on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a>.</p>\n<h2 id=\"node-gyp-problems\"><a href=\"#node-gyp-problems\" class=\"headerlink\" title=\"node-gyp problems\"></a>node-gyp problems</h2><p>node-gyp can cause problems, because it requires a C++ compiler.</p>\n<p>If you do have problems caused by it, first follow the installation steps for your OS <a href=\"https://github.com/nodejs/node-gyp#installation\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>If you still have problems and are on Windows, try the following:</p>\n<ul>\n<li>run <code>npm config set msvs_version 2015</code> before <code>npm install</code></li>\n<li>Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.</li>\n</ul>\n<h2 id=\"EACCES-npm-ERR-Permission-denied\"><a href=\"#EACCES-npm-ERR-Permission-denied\" class=\"headerlink\" title=\"EACCES / npm ERR Permission denied\"></a>EACCES / npm ERR Permission denied</h2><p>Issues typically occur if NodeJS and/or Embark are installed using <code>sudo</code>, avoid using it possible. There are <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">several options</a> to fix this. We recommend installing node using <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">NVM</a></p>\n<h2 id=\"Assuming-Contract-to-be-an-interface\"><a href=\"#Assuming-Contract-to-be-an-interface\" class=\"headerlink\" title=\"Assuming Contract to be an interface\"></a>Assuming Contract to be an interface</h2><p>This warning happens when Embark can’t deploy one of your Smart Contracts because the compiler did not return a bytecode.</p>\n<p>Here are some of the reasons:</p>\n<ul>\n<li>If it inherits from an interface, it must have all the functions implemented</li>\n<li>The contract’s constructor must be <code>public</code></li>\n</ul>\n"},{"title":"Using Storages","layout":"docs","_content":"\n### Save Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Retrieve Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Upload a file\n\n<pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Display a file\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n### Check for storage provider availability\nThis will return true if the storage provider (IPFS or Swarm) is available and running. \n\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\nOptions are optional and if provided, will override the values in `storage.js`. \n\nFor example,\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n### IPNS registration\n\nYou can register your IPFS hash using IPNS.\n\n*It can take up to a minute to register.\n\n#### IPNS - Register\n\n```Javascript\nEmbarkJS.Storage.register('IPFS_hash', (err, name) => {\n    if(err){\n        console.log(\"Error registering\", err.message);\n        return;\n    }\n    console.log('Registred to the following hash:', name);\n});\n```\n\n#### IPNS - Resolve\n\n```Javascript\nEmbarkJS.Storage.resolve('IPNS_hash', (err, path) => {\n    if(err){\n        console.log(\"Error resolving\", err.message);\n        return;\n    }\n    console.log('Resolved to the following IPFS path:', name);\n});\n```\n\n","source":"docs/using_storages.md","raw":"title: Using Storages\nlayout: docs\n---\n\n### Save Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Retrieve Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Upload a file\n\n<pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Display a file\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n### Check for storage provider availability\nThis will return true if the storage provider (IPFS or Swarm) is available and running. \n\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\nOptions are optional and if provided, will override the values in `storage.js`. \n\nFor example,\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n### IPNS registration\n\nYou can register your IPFS hash using IPNS.\n\n*It can take up to a minute to register.\n\n#### IPNS - Register\n\n```Javascript\nEmbarkJS.Storage.register('IPFS_hash', (err, name) => {\n    if(err){\n        console.log(\"Error registering\", err.message);\n        return;\n    }\n    console.log('Registred to the following hash:', name);\n});\n```\n\n#### IPNS - Resolve\n\n```Javascript\nEmbarkJS.Storage.resolve('IPNS_hash', (err, path) => {\n    if(err){\n        console.log(\"Error resolving\", err.message);\n        return;\n    }\n    console.log('Resolved to the following IPFS path:', name);\n});\n```\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/using_storages.html","comments":1,"_id":"ck5ijm3s0001t7heghjkv38tk","content":"<h3 id=\"Save-Text-Data\"><a href=\"#Save-Text-Data\" class=\"headerlink\" title=\"Save Text/Data\"></a>Save Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Retrieve-Text-Data\"><a href=\"#Retrieve-Text-Data\" class=\"headerlink\" title=\"Retrieve Text/Data\"></a>Retrieve Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Upload-a-file\"><a href=\"#Upload-a-file\" class=\"headerlink\" title=\"Upload a file\"></a>Upload a file</h3><pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Display-a-file\"><a href=\"#Display-a-file\" class=\"headerlink\" title=\"Display a file\"></a>Display a file</h3><pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n<h3 id=\"Check-for-storage-provider-availability\"><a href=\"#Check-for-storage-provider-availability\" class=\"headerlink\" title=\"Check for storage provider availability\"></a>Check for storage provider availability</h3><p>This will return true if the storage provider (IPFS or Swarm) is available and running. </p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. </p>\n<p>For example,</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n<h3 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h3><p>You can register your IPFS hash using IPNS.</p>\n<p>*It can take up to a minute to register.</p>\n<h4 id=\"IPNS-Register\"><a href=\"#IPNS-Register\" class=\"headerlink\" title=\"IPNS - Register\"></a>IPNS - Register</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(<span class=\"string\">'IPFS_hash'</span>, (err, name) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error registering\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Registred to the following hash:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"IPNS-Resolve\"><a href=\"#IPNS-Resolve\" class=\"headerlink\" title=\"IPNS - Resolve\"></a>IPNS - Resolve</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(<span class=\"string\">'IPNS_hash'</span>, (err, path) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error resolving\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved to the following IPFS path:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h3 id=\"Save-Text-Data\"><a href=\"#Save-Text-Data\" class=\"headerlink\" title=\"Save Text/Data\"></a>Save Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Retrieve-Text-Data\"><a href=\"#Retrieve-Text-Data\" class=\"headerlink\" title=\"Retrieve Text/Data\"></a>Retrieve Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Upload-a-file\"><a href=\"#Upload-a-file\" class=\"headerlink\" title=\"Upload a file\"></a>Upload a file</h3><pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Display-a-file\"><a href=\"#Display-a-file\" class=\"headerlink\" title=\"Display a file\"></a>Display a file</h3><pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n<h3 id=\"Check-for-storage-provider-availability\"><a href=\"#Check-for-storage-provider-availability\" class=\"headerlink\" title=\"Check for storage provider availability\"></a>Check for storage provider availability</h3><p>This will return true if the storage provider (IPFS or Swarm) is available and running. </p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. </p>\n<p>For example,</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n<h3 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h3><p>You can register your IPFS hash using IPNS.</p>\n<p>*It can take up to a minute to register.</p>\n<h4 id=\"IPNS-Register\"><a href=\"#IPNS-Register\" class=\"headerlink\" title=\"IPNS - Register\"></a>IPNS - Register</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(<span class=\"string\">'IPFS_hash'</span>, (err, name) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error registering\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Registred to the following hash:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"IPNS-Resolve\"><a href=\"#IPNS-Resolve\" class=\"headerlink\" title=\"IPNS - Resolve\"></a>IPNS - Resolve</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(<span class=\"string\">'IPNS_hash'</span>, (err, path) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error resolving\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved to the following IPFS path:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Using the Interactive Console","layout":"docs","_content":"\nAnother powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we'll take a closer look at how to work with it.\n\n## Starting the console\n\nStarting Embark's interactive console is just a matter of running\n\n```\n$ embark console\n```\n\nVery similar to `embark run`, Embark will compile and deploy your application, however, it won't spin up a webserver for your application. After that, you'll see a prompt sitting IDLE, waiting for you to enter commands.\n\n```\nEmbark (development) > _\n```\n\nThe console will surface the environment we're running Embark in at the moment. If we don't specify an environment, Embark will default to `development`, as discussed in our [guide on environments](/docs/environments.html).\n\nFrom now on, we can keep entering commands and have them processed by Embark until we're done with whatever we're aiming to do.\n\nLet's take a look at a few them!\n\n## The `help` command\n\nProbably one of the most important commands is the console's `help` command. This will give us some useful information about what we can and what we can not do inside the interactive console.\n\nEnter the following command and see for yourself:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThis is a good time to read a bit through the available commands and familiarize yourself with them.\n\n## Enabling and disabling process logs\n\nBy default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the `log` command.\n\nSimply specify the process and turn it `on` or `off`:\n\n```\nEmbark (development) > log ipfs off\n```\n\n## Accessing Smart Contract instances\n\nOne thing that the console’s help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nThis turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract's are available within the interactive console, but also 3rd-party Smart Contracts that [have been configured](/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts) accordingly.\n\n## Calling asynchronous APIs\n\nThe interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.\n\nThis applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use `Promise`-based APIs, making them a great fit for JavaScript's `async/await` syntax.\n\n`await` is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let's us wait for a Promise to resolve and simply returns the result.\n\nIn both the dashboard's console and the standalone console, you can use `await` for `Promise`-based calls:\n\n```\nEmbark (development) > await SimpleStorage.methods.get().call()<ENTER>\n```\n\nThis works with other objects as well. The following example outputs available accounts emitted by the `web3` object:\n\n```\nEmbark (development) > await web3.eth.getAccounts()<ENTER>\n```\n\n## Installing plugins\n\nWe can also install Embark plugins using the interactive console. This can be done using the `plugin` command.\n\n```\nEmbark (development) > plugin install embark-status\n```\n\nThis will install and load the plugin, without the need to restart Embark.\n\n## Retrieving authentication tokens for Cockpit\n\nWhen using [Cockpit](/docs/cockpit_introduction.html), Embark's companion web interface, it's necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.\n\nTo get a valid token, use the `token` command, which will output the token and copy it to your clipboard:\n\n```\nEmbark (development) > token<ENTER>\n```\n\n## Registering custom commands\n\nIt's possible to extend Embark's interactive console to include custom commands. Head over to our [Plugin guide](/docs/plugin_reference.html#registerConsoleCommand-options) which discusses this in more detail!\n\n## Dashboard or interactive console?\n\nIn our section on [using the dashboard](/docs/dashboard.html) we've slightly mentioned that Embark's dashboard comes with a console as well and you might wonder, why there's a separate command to start an interactive console in standalone mode.\n\nThis is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:\n\n- You want to copy & paste output from Embark (this doesn't work well within the dashboard)\n- You already have an existing Embark instance running and want to connect to it using the interactive console\n\nAs the last point suggests, running `embark console` when Embark is already running on your machine, it'll connect to that existing process,\nletting you interact with an already deployed application.\n\n","source":"docs/using_the_console.md","raw":"title: Using the Interactive Console\nlayout: docs\n---\n\nAnother powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we'll take a closer look at how to work with it.\n\n## Starting the console\n\nStarting Embark's interactive console is just a matter of running\n\n```\n$ embark console\n```\n\nVery similar to `embark run`, Embark will compile and deploy your application, however, it won't spin up a webserver for your application. After that, you'll see a prompt sitting IDLE, waiting for you to enter commands.\n\n```\nEmbark (development) > _\n```\n\nThe console will surface the environment we're running Embark in at the moment. If we don't specify an environment, Embark will default to `development`, as discussed in our [guide on environments](/docs/environments.html).\n\nFrom now on, we can keep entering commands and have them processed by Embark until we're done with whatever we're aiming to do.\n\nLet's take a look at a few them!\n\n## The `help` command\n\nProbably one of the most important commands is the console's `help` command. This will give us some useful information about what we can and what we can not do inside the interactive console.\n\nEnter the following command and see for yourself:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThis is a good time to read a bit through the available commands and familiarize yourself with them.\n\n## Enabling and disabling process logs\n\nBy default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the `log` command.\n\nSimply specify the process and turn it `on` or `off`:\n\n```\nEmbark (development) > log ipfs off\n```\n\n## Accessing Smart Contract instances\n\nOne thing that the console’s help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nThis turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract's are available within the interactive console, but also 3rd-party Smart Contracts that [have been configured](/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts) accordingly.\n\n## Calling asynchronous APIs\n\nThe interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.\n\nThis applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use `Promise`-based APIs, making them a great fit for JavaScript's `async/await` syntax.\n\n`await` is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let's us wait for a Promise to resolve and simply returns the result.\n\nIn both the dashboard's console and the standalone console, you can use `await` for `Promise`-based calls:\n\n```\nEmbark (development) > await SimpleStorage.methods.get().call()<ENTER>\n```\n\nThis works with other objects as well. The following example outputs available accounts emitted by the `web3` object:\n\n```\nEmbark (development) > await web3.eth.getAccounts()<ENTER>\n```\n\n## Installing plugins\n\nWe can also install Embark plugins using the interactive console. This can be done using the `plugin` command.\n\n```\nEmbark (development) > plugin install embark-status\n```\n\nThis will install and load the plugin, without the need to restart Embark.\n\n## Retrieving authentication tokens for Cockpit\n\nWhen using [Cockpit](/docs/cockpit_introduction.html), Embark's companion web interface, it's necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.\n\nTo get a valid token, use the `token` command, which will output the token and copy it to your clipboard:\n\n```\nEmbark (development) > token<ENTER>\n```\n\n## Registering custom commands\n\nIt's possible to extend Embark's interactive console to include custom commands. Head over to our [Plugin guide](/docs/plugin_reference.html#registerConsoleCommand-options) which discusses this in more detail!\n\n## Dashboard or interactive console?\n\nIn our section on [using the dashboard](/docs/dashboard.html) we've slightly mentioned that Embark's dashboard comes with a console as well and you might wonder, why there's a separate command to start an interactive console in standalone mode.\n\nThis is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:\n\n- You want to copy & paste output from Embark (this doesn't work well within the dashboard)\n- You already have an existing Embark instance running and want to connect to it using the interactive console\n\nAs the last point suggests, running `embark console` when Embark is already running on your machine, it'll connect to that existing process,\nletting you interact with an already deployed application.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/using_the_console.html","comments":1,"_id":"ck5ijm3s0001u7heg86nh4d80","content":"<p>Another powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we’ll take a closer look at how to work with it.</p>\n<h2 id=\"Starting-the-console\"><a href=\"#Starting-the-console\" class=\"headerlink\" title=\"Starting the console\"></a>Starting the console</h2><p>Starting Embark’s interactive console is just a matter of running</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark console</span><br></pre></td></tr></table></figure>\n\n<p>Very similar to <code>embark run</code>, Embark will compile and deploy your application, however, it won’t spin up a webserver for your application. After that, you’ll see a prompt sitting IDLE, waiting for you to enter commands.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; _</span><br></pre></td></tr></table></figure>\n\n<p>The console will surface the environment we’re running Embark in at the moment. If we don’t specify an environment, Embark will default to <code>development</code>, as discussed in our <a href=\"/docs/environments.html\">guide on environments</a>.</p>\n<p>From now on, we can keep entering commands and have them processed by Embark until we’re done with whatever we’re aiming to do.</p>\n<p>Let’s take a look at a few them!</p>\n<h2 id=\"The-help-command\"><a href=\"#The-help-command\" class=\"headerlink\" title=\"The help command\"></a>The <code>help</code> command</h2><p>Probably one of the most important commands is the console’s <code>help</code> command. This will give us some useful information about what we can and what we can not do inside the interactive console.</p>\n<p>Enter the following command and see for yourself:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This is a good time to read a bit through the available commands and familiarize yourself with them.</p>\n<h2 id=\"Enabling-and-disabling-process-logs\"><a href=\"#Enabling-and-disabling-process-logs\" class=\"headerlink\" title=\"Enabling and disabling process logs\"></a>Enabling and disabling process logs</h2><p>By default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the <code>log</code> command.</p>\n<p>Simply specify the process and turn it <code>on</code> or <code>off</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; log ipfs off</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract’s are available within the interactive console, but also 3rd-party Smart Contracts that <a href=\"/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts\">have been configured</a> accordingly.</p>\n<h2 id=\"Calling-asynchronous-APIs\"><a href=\"#Calling-asynchronous-APIs\" class=\"headerlink\" title=\"Calling asynchronous APIs\"></a>Calling asynchronous APIs</h2><p>The interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.</p>\n<p>This applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use <code>Promise</code>-based APIs, making them a great fit for JavaScript’s <code>async/await</code> syntax.</p>\n<p><code>await</code> is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let’s us wait for a Promise to resolve and simply returns the result.</p>\n<p>In both the dashboard’s console and the standalone console, you can use <code>await</code> for <code>Promise</code>-based calls:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.methods.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This works with other objects as well. The following example outputs available accounts emitted by the <code>web3</code> object:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await web3.eth.getAccounts()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-plugins\"><a href=\"#Installing-plugins\" class=\"headerlink\" title=\"Installing plugins\"></a>Installing plugins</h2><p>We can also install Embark plugins using the interactive console. This can be done using the <code>plugin</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; plugin install embark-status</span><br></pre></td></tr></table></figure>\n\n<p>This will install and load the plugin, without the need to restart Embark.</p>\n<h2 id=\"Retrieving-authentication-tokens-for-Cockpit\"><a href=\"#Retrieving-authentication-tokens-for-Cockpit\" class=\"headerlink\" title=\"Retrieving authentication tokens for Cockpit\"></a>Retrieving authentication tokens for Cockpit</h2><p>When using <a href=\"/docs/cockpit_introduction.html\">Cockpit</a>, Embark’s companion web interface, it’s necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.</p>\n<p>To get a valid token, use the <code>token</code> command, which will output the token and copy it to your clipboard:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; token&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-custom-commands\"><a href=\"#Registering-custom-commands\" class=\"headerlink\" title=\"Registering custom commands\"></a>Registering custom commands</h2><p>It’s possible to extend Embark’s interactive console to include custom commands. Head over to our <a href=\"/docs/plugin_reference.html#registerConsoleCommand-options\">Plugin guide</a> which discusses this in more detail!</p>\n<h2 id=\"Dashboard-or-interactive-console\"><a href=\"#Dashboard-or-interactive-console\" class=\"headerlink\" title=\"Dashboard or interactive console?\"></a>Dashboard or interactive console?</h2><p>In our section on <a href=\"/docs/dashboard.html\">using the dashboard</a> we’ve slightly mentioned that Embark’s dashboard comes with a console as well and you might wonder, why there’s a separate command to start an interactive console in standalone mode.</p>\n<p>This is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:</p>\n<ul>\n<li>You want to copy &amp; paste output from Embark (this doesn’t work well within the dashboard)</li>\n<li>You already have an existing Embark instance running and want to connect to it using the interactive console</li>\n</ul>\n<p>As the last point suggests, running <code>embark console</code> when Embark is already running on your machine, it’ll connect to that existing process,<br>letting you interact with an already deployed application.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Another powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we’ll take a closer look at how to work with it.</p>\n<h2 id=\"Starting-the-console\"><a href=\"#Starting-the-console\" class=\"headerlink\" title=\"Starting the console\"></a>Starting the console</h2><p>Starting Embark’s interactive console is just a matter of running</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark console</span><br></pre></td></tr></table></figure>\n\n<p>Very similar to <code>embark run</code>, Embark will compile and deploy your application, however, it won’t spin up a webserver for your application. After that, you’ll see a prompt sitting IDLE, waiting for you to enter commands.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; _</span><br></pre></td></tr></table></figure>\n\n<p>The console will surface the environment we’re running Embark in at the moment. If we don’t specify an environment, Embark will default to <code>development</code>, as discussed in our <a href=\"/docs/environments.html\">guide on environments</a>.</p>\n<p>From now on, we can keep entering commands and have them processed by Embark until we’re done with whatever we’re aiming to do.</p>\n<p>Let’s take a look at a few them!</p>\n<h2 id=\"The-help-command\"><a href=\"#The-help-command\" class=\"headerlink\" title=\"The help command\"></a>The <code>help</code> command</h2><p>Probably one of the most important commands is the console’s <code>help</code> command. This will give us some useful information about what we can and what we can not do inside the interactive console.</p>\n<p>Enter the following command and see for yourself:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This is a good time to read a bit through the available commands and familiarize yourself with them.</p>\n<h2 id=\"Enabling-and-disabling-process-logs\"><a href=\"#Enabling-and-disabling-process-logs\" class=\"headerlink\" title=\"Enabling and disabling process logs\"></a>Enabling and disabling process logs</h2><p>By default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the <code>log</code> command.</p>\n<p>Simply specify the process and turn it <code>on</code> or <code>off</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; log ipfs off</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract’s are available within the interactive console, but also 3rd-party Smart Contracts that <a href=\"/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts\">have been configured</a> accordingly.</p>\n<h2 id=\"Calling-asynchronous-APIs\"><a href=\"#Calling-asynchronous-APIs\" class=\"headerlink\" title=\"Calling asynchronous APIs\"></a>Calling asynchronous APIs</h2><p>The interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.</p>\n<p>This applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use <code>Promise</code>-based APIs, making them a great fit for JavaScript’s <code>async/await</code> syntax.</p>\n<p><code>await</code> is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let’s us wait for a Promise to resolve and simply returns the result.</p>\n<p>In both the dashboard’s console and the standalone console, you can use <code>await</code> for <code>Promise</code>-based calls:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.methods.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This works with other objects as well. The following example outputs available accounts emitted by the <code>web3</code> object:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await web3.eth.getAccounts()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-plugins\"><a href=\"#Installing-plugins\" class=\"headerlink\" title=\"Installing plugins\"></a>Installing plugins</h2><p>We can also install Embark plugins using the interactive console. This can be done using the <code>plugin</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; plugin install embark-status</span><br></pre></td></tr></table></figure>\n\n<p>This will install and load the plugin, without the need to restart Embark.</p>\n<h2 id=\"Retrieving-authentication-tokens-for-Cockpit\"><a href=\"#Retrieving-authentication-tokens-for-Cockpit\" class=\"headerlink\" title=\"Retrieving authentication tokens for Cockpit\"></a>Retrieving authentication tokens for Cockpit</h2><p>When using <a href=\"/docs/cockpit_introduction.html\">Cockpit</a>, Embark’s companion web interface, it’s necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.</p>\n<p>To get a valid token, use the <code>token</code> command, which will output the token and copy it to your clipboard:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; token&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-custom-commands\"><a href=\"#Registering-custom-commands\" class=\"headerlink\" title=\"Registering custom commands\"></a>Registering custom commands</h2><p>It’s possible to extend Embark’s interactive console to include custom commands. Head over to our <a href=\"/docs/plugin_reference.html#registerConsoleCommand-options\">Plugin guide</a> which discusses this in more detail!</p>\n<h2 id=\"Dashboard-or-interactive-console\"><a href=\"#Dashboard-or-interactive-console\" class=\"headerlink\" title=\"Dashboard or interactive console?\"></a>Dashboard or interactive console?</h2><p>In our section on <a href=\"/docs/dashboard.html\">using the dashboard</a> we’ve slightly mentioned that Embark’s dashboard comes with a console as well and you might wonder, why there’s a separate command to start an interactive console in standalone mode.</p>\n<p>This is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:</p>\n<ul>\n<li>You want to copy &amp; paste output from Embark (this doesn’t work well within the dashboard)</li>\n<li>You already have an existing Embark instance running and want to connect to it using the interactive console</li>\n</ul>\n<p>As the last point suggests, running <code>embark console</code> when Embark is already running on your machine, it’ll connect to that existing process,<br>letting you interact with an already deployed application.</p>\n"},{"title":"Vyper","_content":"\nAs of Embark 3.0, Vyper is supported out of the box. You only need to [install the compiler](https://vyper.readthedocs.io/en/latest/installing-vyper.html) yourself.\n\nEmbark's Vyper support means that any files with the extension `.vy` in the contracts directory will be deployed with the file name as the contract name, so, for instance, `contracts/Crowdfunding.vy` will be deployed as `Crowdfunding`.\n\nTo see Vyper in action, generate a new demo project by running:\n\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\nInside the demo's root directory, remove `contracts/simple_storage.sol` and replace it with this file instead:\n\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\nThis has exactly the same logic as its Solidity counterpart, so the tests will still pass:\n\n<pre><code class=\"shell\">$ embark test</code></pre>\n\nThe full documentation for Vyper can be found [here](https://vyper.readthedocs.io/en/latest/vyper-by-example.html)\n","source":"docs/vyper.md","raw":"title: Vyper\n---\n\nAs of Embark 3.0, Vyper is supported out of the box. You only need to [install the compiler](https://vyper.readthedocs.io/en/latest/installing-vyper.html) yourself.\n\nEmbark's Vyper support means that any files with the extension `.vy` in the contracts directory will be deployed with the file name as the contract name, so, for instance, `contracts/Crowdfunding.vy` will be deployed as `Crowdfunding`.\n\nTo see Vyper in action, generate a new demo project by running:\n\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\nInside the demo's root directory, remove `contracts/simple_storage.sol` and replace it with this file instead:\n\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\nThis has exactly the same logic as its Solidity counterpart, so the tests will still pass:\n\n<pre><code class=\"shell\">$ embark test</code></pre>\n\nThe full documentation for Vyper can be found [here](https://vyper.readthedocs.io/en/latest/vyper-by-example.html)\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/vyper.html","comments":1,"layout":"page","_id":"ck5ijm3s1001v7heg068n1gik","content":"<p>As of Embark 3.0, Vyper is supported out of the box. You only need to <a href=\"https://vyper.readthedocs.io/en/latest/installing-vyper.html\" target=\"_blank\" rel=\"noopener\">install the compiler</a> yourself.</p>\n<p>Embark’s Vyper support means that any files with the extension <code>.vy</code> in the contracts directory will be deployed with the file name as the contract name, so, for instance, <code>contracts/Crowdfunding.vy</code> will be deployed as <code>Crowdfunding</code>.</p>\n<p>To see Vyper in action, generate a new demo project by running:</p>\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\n<p>Inside the demo’s root directory, remove <code>contracts/simple_storage.sol</code> and replace it with this file instead:</p>\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\n<p>This has exactly the same logic as its Solidity counterpart, so the tests will still pass:</p>\n<pre><code class=\"shell\">$ embark test</code></pre>\n\n<p>The full documentation for Vyper can be found <a href=\"https://vyper.readthedocs.io/en/latest/vyper-by-example.html\" target=\"_blank\" rel=\"noopener\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As of Embark 3.0, Vyper is supported out of the box. You only need to <a href=\"https://vyper.readthedocs.io/en/latest/installing-vyper.html\" target=\"_blank\" rel=\"noopener\">install the compiler</a> yourself.</p>\n<p>Embark’s Vyper support means that any files with the extension <code>.vy</code> in the contracts directory will be deployed with the file name as the contract name, so, for instance, <code>contracts/Crowdfunding.vy</code> will be deployed as <code>Crowdfunding</code>.</p>\n<p>To see Vyper in action, generate a new demo project by running:</p>\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\n<p>Inside the demo’s root directory, remove <code>contracts/simple_storage.sol</code> and replace it with this file instead:</p>\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\n<p>This has exactly the same logic as its Solidity counterpart, so the tests will still pass:</p>\n<pre><code class=\"shell\">$ embark test</code></pre>\n\n<p>The full documentation for Vyper can be found <a href=\"https://vyper.readthedocs.io/en/latest/vyper-by-example.html\" target=\"_blank\" rel=\"noopener\">here</a></p>\n"},{"title":"Web3.js Documentation","_content":"\nThe documentation for Web3.js can be found [here](https://web3js.readthedocs.io/en/v1.2.1/)\n","source":"docs/web3js.md","raw":"title: Web3.js Documentation\n---\n\nThe documentation for Web3.js can be found [here](https://web3js.readthedocs.io/en/v1.2.1/)\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/web3js.html","comments":1,"layout":"page","_id":"ck5ijm3s1001w7heg18r26xcv","content":"<p>The documentation for Web3.js can be found <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The documentation for Web3.js can be found <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n"},{"title":"Integrating with Webpack","_content":"\nTODO\n\n","source":"docs/webpack.md","raw":"title: Integrating with Webpack\n---\n\nTODO\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/webpack.html","comments":1,"layout":"page","_id":"ck5ijm3s2001x7heg2sqyh4ii","content":"<p>TODO</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>TODO</p>\n"},{"title":"What is a DApp","_content":"\n## What is a DApp\n\nA Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.\n\n","source":"docs/what_dapp.md","raw":"title: What is a DApp\n---\n\n## What is a DApp\n\nA Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/what_dapp.html","comments":1,"layout":"page","_id":"ck5ijm3s2001y7hegb6i804bx","content":"<h2 id=\"What-is-a-DApp\"><a href=\"#What-is-a-DApp\" class=\"headerlink\" title=\"What is a DApp\"></a>What is a DApp</h2><p>A Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h2 id=\"What-is-a-DApp\"><a href=\"#What-is-a-DApp\" class=\"headerlink\" title=\"What is a DApp\"></a>What is a DApp</h2><p>A Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.</p>\n"},{"title":"Working with Name Systems","layout":"docs","_content":"\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n### Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n### Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\nGuess what, `EmbarkJS.Names.lookup` also returns a Promise in case you prefer using those over callbacks:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n### Register a sub-domain\n\nThis enables you to register some others sub-domains.\nThis is mostly for demo purposes as it is only available in development.\n\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n","source":"docs/working_with_name_systems.md","raw":"title: Working with Name Systems\nlayout: docs\n---\n\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n### Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n### Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\nGuess what, `EmbarkJS.Names.lookup` also returns a Promise in case you prefer using those over callbacks:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n### Register a sub-domain\n\nThis enables you to register some others sub-domains.\nThis is mostly for demo purposes as it is only available in development.\n\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/working_with_name_systems.html","comments":1,"_id":"ck5ijm3s3001z7hegefgi88bl","content":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h3 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h3><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n<h3 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h3><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<h3 id=\"Register-a-sub-domain\"><a href=\"#Register-a-sub-domain\" class=\"headerlink\" title=\"Register a sub-domain\"></a>Register a sub-domain</h3><p>This enables you to register some others sub-domains.<br>This is mostly for demo purposes as it is only available in development.</p>\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h3 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h3><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n<h3 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h3><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<h3 id=\"Register-a-sub-domain\"><a href=\"#Register-a-sub-domain\" class=\"headerlink\" title=\"Register a sub-domain\"></a>Register a sub-domain</h3><p>This enables you to register some others sub-domains.<br>This is mostly for demo purposes as it is only available in development.</p>\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n"},{"title":"blog.header.title","tagline":"blog.header.tagline","layout":"blog","_content":"","source":"news/index.md","raw":"title: blog.header.title\ntagline: blog.header.tagline\nlayout: blog\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"news/index.html","comments":1,"_id":"ck5ijm3s400207heg7ovygrsl","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"layout":"plugins","tagline":"plugins_page.header.tagline","title":"plugins_page.header.title","data":"plugins","intro":"plugins_page.intro_section.heading.referal","_content":"","source":"plugins/index.md","raw":"layout: plugins\ntagline: plugins_page.header.tagline\ntitle: plugins_page.header.title\ndata: plugins\nintro: plugins_page.intro_section.heading.referal\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"plugins/index.html","comments":1,"_id":"ck5ijm3s400217heg1pdtd3jb","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Using Infura","_content":"\nTo deploy to a test network  (or even the mainnet), you usually have [to synchronize a blockchain node yourself](/docs/blockchain_configuration.html#Testnet-configuration) to be able to connect.\n\nThere is thankfully another alternative to save time and it is to use something like [Infura](https://infura.io/), that has already synchronized nodes to which you can connect to.\n\nThey offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.\n\n### Registration\n\nTo start you will need to first register with Infura. Go to [https://infura.io/register](https://infura.io/register) and register.\n\nAfterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.\n\n![Screenshot](infura_guide/api-keys.png)\n\n### Account Configuration\n\nTo deploy to Infura, we need to configure Embark with an account containing funds.\n\nIn this example we will use a mnemonic.\nIt is also possible to use a private key (the documentation for the accounts functionality can be found [here](/docs/contracts.html#Using-accounts-in-a-wallet)).\n\nMake sure to read our recommendations on how to make sure your credentials stay secure [here](/docs/contracts_deployment.html#Deploying-to-Mainnet).\n\nEdit your contract configuration (usually found at `config/contracts.js`) and add a new environment, which we will name `infura`:\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\nMake sure the account has funds in the network you are deploying to. Most testnets have faucets.\nFor example you can find a faucet for Rinkeby [here](https://faucet.rinkeby.io/).\n\n### Adding Infura\n\nNow we will add the infura endpoint to our configuration. **You should replace the key in the `host` field with your own.**\nWe will use Rinkeby for this example. You can specify the network as `<network>.infura.io`.\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n### Deploying\n\nNow to deploy, all you need to do is run `embark run infura` and Embark will deploy using Infura!\n\n![Screenshot](infura_guide/lift-off.jpg)\n","source":"tutorials/infura_guide.md","raw":"title: Using Infura\n---\n\nTo deploy to a test network  (or even the mainnet), you usually have [to synchronize a blockchain node yourself](/docs/blockchain_configuration.html#Testnet-configuration) to be able to connect.\n\nThere is thankfully another alternative to save time and it is to use something like [Infura](https://infura.io/), that has already synchronized nodes to which you can connect to.\n\nThey offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.\n\n### Registration\n\nTo start you will need to first register with Infura. Go to [https://infura.io/register](https://infura.io/register) and register.\n\nAfterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.\n\n![Screenshot](infura_guide/api-keys.png)\n\n### Account Configuration\n\nTo deploy to Infura, we need to configure Embark with an account containing funds.\n\nIn this example we will use a mnemonic.\nIt is also possible to use a private key (the documentation for the accounts functionality can be found [here](/docs/contracts.html#Using-accounts-in-a-wallet)).\n\nMake sure to read our recommendations on how to make sure your credentials stay secure [here](/docs/contracts_deployment.html#Deploying-to-Mainnet).\n\nEdit your contract configuration (usually found at `config/contracts.js`) and add a new environment, which we will name `infura`:\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\nMake sure the account has funds in the network you are deploying to. Most testnets have faucets.\nFor example you can find a faucet for Rinkeby [here](https://faucet.rinkeby.io/).\n\n### Adding Infura\n\nNow we will add the infura endpoint to our configuration. **You should replace the key in the `host` field with your own.**\nWe will use Rinkeby for this example. You can specify the network as `<network>.infura.io`.\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n### Deploying\n\nNow to deploy, all you need to do is run `embark run infura` and Embark will deploy using Infura!\n\n![Screenshot](infura_guide/lift-off.jpg)\n","date":"2020-01-17T19:00:03.904Z","updated":"2020-01-17T19:00:03.904Z","path":"tutorials/infura_guide.html","comments":1,"layout":"page","_id":"ck5ijm3s500227hegfai76hxj","content":"<p>To deploy to a test network  (or even the mainnet), you usually have <a href=\"/docs/blockchain_configuration.html#Testnet-configuration\">to synchronize a blockchain node yourself</a> to be able to connect.</p>\n<p>There is thankfully another alternative to save time and it is to use something like <a href=\"https://infura.io/\" target=\"_blank\" rel=\"noopener\">Infura</a>, that has already synchronized nodes to which you can connect to.</p>\n<p>They offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.</p>\n<h3 id=\"Registration\"><a href=\"#Registration\" class=\"headerlink\" title=\"Registration\"></a>Registration</h3><p>To start you will need to first register with Infura. Go to <a href=\"https://infura.io/register\" target=\"_blank\" rel=\"noopener\">https://infura.io/register</a> and register.</p>\n<p>Afterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.</p>\n<p><img src=\"infura_guide/api-keys.png\" alt=\"Screenshot\"></p>\n<h3 id=\"Account-Configuration\"><a href=\"#Account-Configuration\" class=\"headerlink\" title=\"Account Configuration\"></a>Account Configuration</h3><p>To deploy to Infura, we need to configure Embark with an account containing funds.</p>\n<p>In this example we will use a mnemonic.<br>It is also possible to use a private key (the documentation for the accounts functionality can be found <a href=\"/docs/contracts.html#Using-accounts-in-a-wallet\">here</a>).</p>\n<p>Make sure to read our recommendations on how to make sure your credentials stay secure <a href=\"/docs/contracts_deployment.html#Deploying-to-Mainnet\">here</a>.</p>\n<p>Edit your contract configuration (usually found at <code>config/contracts.js</code>) and add a new environment, which we will name <code>infura</code>:</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\n<p>Make sure the account has funds in the network you are deploying to. Most testnets have faucets.<br>For example you can find a faucet for Rinkeby <a href=\"https://faucet.rinkeby.io/\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h3 id=\"Adding-Infura\"><a href=\"#Adding-Infura\" class=\"headerlink\" title=\"Adding Infura\"></a>Adding Infura</h3><p>Now we will add the infura endpoint to our configuration. <strong>You should replace the key in the <code>host</code> field with your own.</strong><br>We will use Rinkeby for this example. You can specify the network as <code>&lt;network&gt;.infura.io</code>.</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n<h3 id=\"Deploying\"><a href=\"#Deploying\" class=\"headerlink\" title=\"Deploying\"></a>Deploying</h3><p>Now to deploy, all you need to do is run <code>embark run infura</code> and Embark will deploy using Infura!</p>\n<p><img src=\"infura_guide/lift-off.jpg\" alt=\"Screenshot\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>To deploy to a test network  (or even the mainnet), you usually have <a href=\"/docs/blockchain_configuration.html#Testnet-configuration\">to synchronize a blockchain node yourself</a> to be able to connect.</p>\n<p>There is thankfully another alternative to save time and it is to use something like <a href=\"https://infura.io/\" target=\"_blank\" rel=\"noopener\">Infura</a>, that has already synchronized nodes to which you can connect to.</p>\n<p>They offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.</p>\n<h3 id=\"Registration\"><a href=\"#Registration\" class=\"headerlink\" title=\"Registration\"></a>Registration</h3><p>To start you will need to first register with Infura. Go to <a href=\"https://infura.io/register\" target=\"_blank\" rel=\"noopener\">https://infura.io/register</a> and register.</p>\n<p>Afterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.</p>\n<p><img src=\"infura_guide/api-keys.png\" alt=\"Screenshot\"></p>\n<h3 id=\"Account-Configuration\"><a href=\"#Account-Configuration\" class=\"headerlink\" title=\"Account Configuration\"></a>Account Configuration</h3><p>To deploy to Infura, we need to configure Embark with an account containing funds.</p>\n<p>In this example we will use a mnemonic.<br>It is also possible to use a private key (the documentation for the accounts functionality can be found <a href=\"/docs/contracts.html#Using-accounts-in-a-wallet\">here</a>).</p>\n<p>Make sure to read our recommendations on how to make sure your credentials stay secure <a href=\"/docs/contracts_deployment.html#Deploying-to-Mainnet\">here</a>.</p>\n<p>Edit your contract configuration (usually found at <code>config/contracts.js</code>) and add a new environment, which we will name <code>infura</code>:</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\n<p>Make sure the account has funds in the network you are deploying to. Most testnets have faucets.<br>For example you can find a faucet for Rinkeby <a href=\"https://faucet.rinkeby.io/\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h3 id=\"Adding-Infura\"><a href=\"#Adding-Infura\" class=\"headerlink\" title=\"Adding Infura\"></a>Adding Infura</h3><p>Now we will add the infura endpoint to our configuration. <strong>You should replace the key in the <code>host</code> field with your own.</strong><br>We will use Rinkeby for this example. You can specify the network as <code>&lt;network&gt;.infura.io</code>.</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n<h3 id=\"Deploying\"><a href=\"#Deploying\" class=\"headerlink\" title=\"Deploying\"></a>Deploying</h3><p>Now to deploy, all you need to do is run <code>embark run infura</code> and Embark will deploy using Infura!</p>\n<p><img src=\"infura_guide/lift-off.jpg\" alt=\"Screenshot\"></p>\n"},{"layout":"plugins","tagline":"Pick one and start right away.","title":"Templates","data":"templates","_content":"","source":"templates/index.md","raw":"layout: plugins\ntagline: 'Pick one and start right away.'\ntitle: Templates\ndata: templates\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"templates/index.html","comments":1,"_id":"ck5ijm3s600237heg3zfh286o","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Blockchain client configuration","layout":"docs","_content":"\nWhen in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we'll explore how to configure a blockchain client we want Embark to connect to. Embark uses the `blockchain.js` file inside the `./config` folder by default for blockchain related configurations. This [can be configured](/docs/configuration.html#config) to different locations if we want to.\n\nEmbark offers a lot of configuration options and most of them already come with a decent default so we can start right away.\n\n## Common Parameters\n\nHere are the common parameters. You will often need only a few of them to make your Embark node work.\n\nIf you want more configuration options, you can find them [here](/docs/blockchain_configuration.html#Advanced-parameters)\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {  \n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nSimilar to [configuring Smart Contracts](/docs/contracts_configuration.html), this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about [environments here](https://embark.embarklabs.io/docs/environments.html).\n\n### Parameter descriptions\n\nMost of the options are self-explanatory, still, here are some brief descriptions:\n\nOption | Type: `default` | Value\n--- | --- | --- \n`enabled` | boolean: `true` | Whether or not to spawn an Ethereum node\n`client` | string: `geth` |  Client to use for the Ethereum node. Currently supported: `geth` and `parity`\n`miningMode` | string: `dev` |  The mining mode to use for the node.<br/>`dev`: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/>`auto`: Uses a mining script to mine only when needed.<br/>`always`: Miner is always on.<br/>`off`: Turns off the miner\n`endpoint` | string |  Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by `embark run`)\n`accounts` | array |  Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go [here](/docs/blockchain_accounts_configuration.html)\n\n## Advanced parameters\n\nHere are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don't need to specify those.\n\nWe recommend putting those inside the `clientConfig` object a better structure.\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`rpcHost` | string: `localhost` | Host the RPC server listens to\n`rpcPort` | number: `8545` | Port the RPC server listens to\n`rpcCorsDomain` | object | The CORS domains the node accepts\n`rpcCorsDomain.auto` | | When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.\n`rpcCorsDomain.additionalCors` | | Manual list of CORS domains to accept. If `auto` is set to `true`, any URLs specified here will be applied *in addition to* those automatically added with `auto`.\n`wsRPC` | boolean: `true` | Whether or not to enable the Websocket server\n`wsOrigins` | object | Same as `rpcCorsDomain`, but for the Websocket server\n`wsHost` | string: `localhost` | Same as `rpcHost`, but for the Websocket server\n`wsPort` | number: `8546` | Same as `rpcPort`, but for the Websocket server\n`ethereumClientBin` | string: `geth` |  Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)\n`datadir` | string |  Directory where to put the Node's data (eg: keystores)\n`networkType` | string: `custom` |  Can be: `testnet`, `rinkeby`, `kovan` or custom, in which case, it will use the specified `networkId`\n`networkId` | number: `1337` |  Used when `networkType` is set as `custom`. [List of known network ids](https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids)\n`nodiscover`| boolean: `true` | Disables the peer discovery mechanism when set to `true`\n`maxpeers` | number: `0` |  Maximum number of network peers\n`proxy` | boolean: `true` | Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.\n`targetGasLimit` | number |  Artificial target gas floor for the blocks to mine\n`genesisBlock` | string |  The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on [genesis blocks here](https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/)\n\n{% notification info 'Using Parity and Metamask' %}\n\nParity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension's URL in the CORS.\n\nYou can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like `chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn`.\n\nAfterwards, in your blockchain config, add it to `additionalCors` of `rpcCorsDomain` and `wsOrigins`.\n{% endnotification %}\n\n## Privatenet configuration\n\nA private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.\n\nLuckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.\n\n### Privatenet parameters\n\nHere are common parameters for private net configurations:\n```\nprivatenet: {\n  clientConfig: {\n    miningMode: 'auto',\n    genesisBlock: \"config/privatenet/genesis.json\"\n  }\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/privatenet/password\"\n    }\n  ]\n}\n```\n\nNote that we can always use the parameters we saw in the [Common parameters section](#Common-Parameters) to override the `default` parameters.\n\n### Parameter descriptions\n\nOption | Type: `value` | Description         \n--- | --- | --- \n`miningMode` | string: `auto` | You need to set `miningMode` to `auto` or `always` so you don't use the development mode\n`genesisBlock` | string |  File to start the chain in a clean state for your private network\n`accounts` | array |  Array of accounts to connect to. Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Testnet configuration\n\nTest networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.\n\nThe big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren't using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.\n\n### Testnet parameters\n\n```\ntestnet: {\n  networkType: \"testnet\",\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/testnet/password\"\n    }\n  ]\n}\n```\n\nHere are the necessary parameters. Again, we can add more to override as you see fit.\n\n### Parameter descriptions\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`networkType` | string: `testnet` | Again, used to specify the network. `testnet` here represents Ropsten. You can change the network by using a `networkId` by changing `networkType` to `custom`\n`syncMode` | string |  Blockchain sync mode\n`syncMode = 'light' `| |  Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth\n`syncMode = 'fast'` | | Faster, but higher store\n`syncMode = 'full'`| | Normal sync\n`accounts` | array |  Array of accounts to connect to.  Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Mainnet configuration\n\nFinally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a [test network](#Testnet-configuration). The only major difference is that the `networkType` needs to be `custom` with the `networkId` set to `1`.\n\n```\nmainnet: {\n  networkType: \"custom\",\n  networkId: 1,\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/mainnet/password\"\n    }\n  ]\n}\n```\n","source":"docs/blockchain_configuration.md","raw":"title: Blockchain client configuration\nlayout: docs\n---\n\nWhen in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we'll explore how to configure a blockchain client we want Embark to connect to. Embark uses the `blockchain.js` file inside the `./config` folder by default for blockchain related configurations. This [can be configured](/docs/configuration.html#config) to different locations if we want to.\n\nEmbark offers a lot of configuration options and most of them already come with a decent default so we can start right away.\n\n## Common Parameters\n\nHere are the common parameters. You will often need only a few of them to make your Embark node work.\n\nIf you want more configuration options, you can find them [here](/docs/blockchain_configuration.html#Advanced-parameters)\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {  \n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nSimilar to [configuring Smart Contracts](/docs/contracts_configuration.html), this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about [environments here](https://embark.embarklabs.io/docs/environments.html).\n\n### Parameter descriptions\n\nMost of the options are self-explanatory, still, here are some brief descriptions:\n\nOption | Type: `default` | Value\n--- | --- | --- \n`enabled` | boolean: `true` | Whether or not to spawn an Ethereum node\n`client` | string: `geth` |  Client to use for the Ethereum node. Currently supported: `geth` and `parity`\n`miningMode` | string: `dev` |  The mining mode to use for the node.<br/>`dev`: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/>`auto`: Uses a mining script to mine only when needed.<br/>`always`: Miner is always on.<br/>`off`: Turns off the miner\n`endpoint` | string |  Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by `embark run`)\n`accounts` | array |  Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go [here](/docs/blockchain_accounts_configuration.html)\n\n## Advanced parameters\n\nHere are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don't need to specify those.\n\nWe recommend putting those inside the `clientConfig` object a better structure.\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`rpcHost` | string: `localhost` | Host the RPC server listens to\n`rpcPort` | number: `8545` | Port the RPC server listens to\n`rpcCorsDomain` | object | The CORS domains the node accepts\n`rpcCorsDomain.auto` | | When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.\n`rpcCorsDomain.additionalCors` | | Manual list of CORS domains to accept. If `auto` is set to `true`, any URLs specified here will be applied *in addition to* those automatically added with `auto`.\n`wsRPC` | boolean: `true` | Whether or not to enable the Websocket server\n`wsOrigins` | object | Same as `rpcCorsDomain`, but for the Websocket server\n`wsHost` | string: `localhost` | Same as `rpcHost`, but for the Websocket server\n`wsPort` | number: `8546` | Same as `rpcPort`, but for the Websocket server\n`ethereumClientBin` | string: `geth` |  Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)\n`datadir` | string |  Directory where to put the Node's data (eg: keystores)\n`networkType` | string: `custom` |  Can be: `testnet`, `rinkeby`, `kovan` or custom, in which case, it will use the specified `networkId`\n`networkId` | number: `1337` |  Used when `networkType` is set as `custom`. [List of known network ids](https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids)\n`nodiscover`| boolean: `true` | Disables the peer discovery mechanism when set to `true`\n`maxpeers` | number: `0` |  Maximum number of network peers\n`proxy` | boolean: `true` | Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.\n`targetGasLimit` | number |  Artificial target gas floor for the blocks to mine\n`genesisBlock` | string |  The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on [genesis blocks here](https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/)\n\n{% notification info 'Using Parity and Metamask' %}\n\nParity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension's URL in the CORS.\n\nYou can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like `chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn`.\n\nAfterwards, in your blockchain config, add it to `additionalCors` of `rpcCorsDomain` and `wsOrigins`.\n{% endnotification %}\n\n## Privatenet configuration\n\nA private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.\n\nLuckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.\n\n### Privatenet parameters\n\nHere are common parameters for private net configurations:\n```\nprivatenet: {\n  clientConfig: {\n    miningMode: 'auto',\n    genesisBlock: \"config/privatenet/genesis.json\"\n  }\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/privatenet/password\"\n    }\n  ]\n}\n```\n\nNote that we can always use the parameters we saw in the [Common parameters section](#Common-Parameters) to override the `default` parameters.\n\n### Parameter descriptions\n\nOption | Type: `value` | Description         \n--- | --- | --- \n`miningMode` | string: `auto` | You need to set `miningMode` to `auto` or `always` so you don't use the development mode\n`genesisBlock` | string |  File to start the chain in a clean state for your private network\n`accounts` | array |  Array of accounts to connect to. Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Testnet configuration\n\nTest networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.\n\nThe big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren't using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.\n\n### Testnet parameters\n\n```\ntestnet: {\n  networkType: \"testnet\",\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/testnet/password\"\n    }\n  ]\n}\n```\n\nHere are the necessary parameters. Again, we can add more to override as you see fit.\n\n### Parameter descriptions\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`networkType` | string: `testnet` | Again, used to specify the network. `testnet` here represents Ropsten. You can change the network by using a `networkId` by changing `networkType` to `custom`\n`syncMode` | string |  Blockchain sync mode\n`syncMode = 'light' `| |  Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth\n`syncMode = 'fast'` | | Faster, but higher store\n`syncMode = 'full'`| | Normal sync\n`accounts` | array |  Array of accounts to connect to.  Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Mainnet configuration\n\nFinally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a [test network](#Testnet-configuration). The only major difference is that the `networkType` needs to be `custom` with the `networkId` set to `1`.\n\n```\nmainnet: {\n  networkType: \"custom\",\n  networkId: 1,\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/mainnet/password\"\n    }\n  ]\n}\n```\n","date":"2020-01-19T20:56:53.007Z","updated":"2020-01-19T20:56:53.007Z","path":"docs/blockchain_configuration.html","_id":"ck5ijm3ts00257hegda3sa842","comments":1,"content":"<p>When in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we’ll explore how to configure a blockchain client we want Embark to connect to. Embark uses the <code>blockchain.js</code> file inside the <code>./config</code> folder by default for blockchain related configurations. This <a href=\"/docs/configuration.html#config\">can be configured</a> to different locations if we want to.</p>\n<p>Embark offers a lot of configuration options and most of them already come with a decent default so we can start right away.</p>\n<h2 id=\"Common-Parameters\"><a href=\"#Common-Parameters\" class=\"headerlink\" title=\"Common Parameters\"></a>Common Parameters</h2><p>Here are the common parameters. You will often need only a few of them to make your Embark node work.</p>\n<p>If you want more configuration options, you can find them <a href=\"/docs/blockchain_configuration.html#Advanced-parameters\">here</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    client: &quot;geth&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;  </span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: &#39;dev&#39;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: &quot;https:&#x2F;&#x2F;external-node.com&quot;,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: &quot;12 word mnemonic&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about <a href=\"https://embark.embarklabs.io/docs/environments.html\">environments here</a>.</p>\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><p>Most of the options are self-explanatory, still, here are some brief descriptions:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to spawn an Ethereum node</td>\n</tr>\n<tr>\n<td><code>client</code></td>\n<td>string: <code>geth</code></td>\n<td>Client to use for the Ethereum node. Currently supported: <code>geth</code> and <code>parity</code></td>\n</tr>\n<tr>\n<td><code>miningMode</code></td>\n<td>string: <code>dev</code></td>\n<td>The mining mode to use for the node.<br/><code>dev</code>: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/><code>auto</code>: Uses a mining script to mine only when needed.<br/><code>always</code>: Miner is always on.<br/><code>off</code>: Turns off the miner</td>\n</tr>\n<tr>\n<td><code>endpoint</code></td>\n<td>string</td>\n<td>Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by <code>embark run</code>)</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go <a href=\"/docs/blockchain_accounts_configuration.html\">here</a></td>\n</tr>\n</tbody></table>\n<h2 id=\"Advanced-parameters\"><a href=\"#Advanced-parameters\" class=\"headerlink\" title=\"Advanced parameters\"></a>Advanced parameters</h2><p>Here are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don’t need to specify those.</p>\n<p>We recommend putting those inside the <code>clientConfig</code> object a better structure.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>rpcHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcPort</code></td>\n<td>number: <code>8545</code></td>\n<td>Port the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain</code></td>\n<td>object</td>\n<td>The CORS domains the node accepts</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.auto</code></td>\n<td></td>\n<td>When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.additionalCors</code></td>\n<td></td>\n<td>Manual list of CORS domains to accept. If <code>auto</code> is set to <code>true</code>, any URLs specified here will be applied <em>in addition to</em> those automatically added with <code>auto</code>.</td>\n</tr>\n<tr>\n<td><code>wsRPC</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to enable the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsOrigins</code></td>\n<td>object</td>\n<td>Same as <code>rpcCorsDomain</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Same as <code>rpcHost</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsPort</code></td>\n<td>number: <code>8546</code></td>\n<td>Same as <code>rpcPort</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>ethereumClientBin</code></td>\n<td>string: <code>geth</code></td>\n<td>Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)</td>\n</tr>\n<tr>\n<td><code>datadir</code></td>\n<td>string</td>\n<td>Directory where to put the Node’s data (eg: keystores)</td>\n</tr>\n<tr>\n<td><code>networkType</code></td>\n<td>string: <code>custom</code></td>\n<td>Can be: <code>testnet</code>, <code>rinkeby</code>, <code>kovan</code> or custom, in which case, it will use the specified <code>networkId</code></td>\n</tr>\n<tr>\n<td><code>networkId</code></td>\n<td>number: <code>1337</code></td>\n<td>Used when <code>networkType</code> is set as <code>custom</code>. <a href=\"https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids\" target=\"_blank\" rel=\"noopener\">List of known network ids</a></td>\n</tr>\n<tr>\n<td><code>nodiscover</code></td>\n<td>boolean: <code>true</code></td>\n<td>Disables the peer discovery mechanism when set to <code>true</code></td>\n</tr>\n<tr>\n<td><code>maxpeers</code></td>\n<td>number: <code>0</code></td>\n<td>Maximum number of network peers</td>\n</tr>\n<tr>\n<td><code>proxy</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.</td>\n</tr>\n<tr>\n<td><code>targetGasLimit</code></td>\n<td>number</td>\n<td>Artificial target gas floor for the blocks to mine</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on <a href=\"https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/\" target=\"_blank\" rel=\"noopener\">genesis blocks here</a></td>\n</tr>\n</tbody></table>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Using Parity and Metamask</strong></p>\n  <p><p>Parity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension’s URL in the CORS.</p>\n<p>You can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like <code>chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn</code>.</p>\n<p>Afterwards, in your blockchain config, add it to <code>additionalCors</code> of <code>rpcCorsDomain</code> and <code>wsOrigins</code>.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Privatenet-configuration\"><a href=\"#Privatenet-configuration\" class=\"headerlink\" title=\"Privatenet configuration\"></a>Privatenet configuration</h2><p>A private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.</p>\n<p>Luckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.</p>\n<h3 id=\"Privatenet-parameters\"><a href=\"#Privatenet-parameters\" class=\"headerlink\" title=\"Privatenet parameters\"></a>Privatenet parameters</h3><p>Here are common parameters for private net configurations:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">privatenet: &#123;</span><br><span class=\"line\">  clientConfig: &#123;</span><br><span class=\"line\">    miningMode: &#39;auto&#39;,</span><br><span class=\"line\">    genesisBlock: &quot;config&#x2F;privatenet&#x2F;genesis.json&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;privatenet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note that we can always use the parameters we saw in the <a href=\"#Common-Parameters\">Common parameters section</a> to override the <code>default</code> parameters.</p>\n<h3 id=\"Parameter-descriptions-1\"><a href=\"#Parameter-descriptions-1\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>value</code></th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>miningMode</code></td>\n<td>string: <code>auto</code></td>\n<td>You need to set <code>miningMode</code> to <code>auto</code> or <code>always</code> so you don’t use the development mode</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>File to start the chain in a clean state for your private network</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to. Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Testnet-configuration\"><a href=\"#Testnet-configuration\" class=\"headerlink\" title=\"Testnet configuration\"></a>Testnet configuration</h2><p>Test networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.</p>\n<p>The big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren’t using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.</p>\n<h3 id=\"Testnet-parameters\"><a href=\"#Testnet-parameters\" class=\"headerlink\" title=\"Testnet parameters\"></a>Testnet parameters</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">testnet: &#123;</span><br><span class=\"line\">  networkType: &quot;testnet&quot;,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here are the necessary parameters. Again, we can add more to override as you see fit.</p>\n<h3 id=\"Parameter-descriptions-2\"><a href=\"#Parameter-descriptions-2\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>networkType</code></td>\n<td>string: <code>testnet</code></td>\n<td>Again, used to specify the network. <code>testnet</code> here represents Ropsten. You can change the network by using a <code>networkId</code> by changing <code>networkType</code> to <code>custom</code></td>\n</tr>\n<tr>\n<td><code>syncMode</code></td>\n<td>string</td>\n<td>Blockchain sync mode</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;light&#39;</code></td>\n<td></td>\n<td>Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;fast&#39;</code></td>\n<td></td>\n<td>Faster, but higher store</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;full&#39;</code></td>\n<td></td>\n<td>Normal sync</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to.  Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Mainnet-configuration\"><a href=\"#Mainnet-configuration\" class=\"headerlink\" title=\"Mainnet configuration\"></a>Mainnet configuration</h2><p>Finally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a <a href=\"#Testnet-configuration\">test network</a>. The only major difference is that the <code>networkType</code> needs to be <code>custom</code> with the <code>networkId</code> set to <code>1</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">mainnet: &#123;</span><br><span class=\"line\">  networkType: &quot;custom&quot;,</span><br><span class=\"line\">  networkId: 1,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;mainnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>When in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we’ll explore how to configure a blockchain client we want Embark to connect to. Embark uses the <code>blockchain.js</code> file inside the <code>./config</code> folder by default for blockchain related configurations. This <a href=\"/docs/configuration.html#config\">can be configured</a> to different locations if we want to.</p>\n<p>Embark offers a lot of configuration options and most of them already come with a decent default so we can start right away.</p>\n<h2 id=\"Common-Parameters\"><a href=\"#Common-Parameters\" class=\"headerlink\" title=\"Common Parameters\"></a>Common Parameters</h2><p>Here are the common parameters. You will often need only a few of them to make your Embark node work.</p>\n<p>If you want more configuration options, you can find them <a href=\"/docs/blockchain_configuration.html#Advanced-parameters\">here</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    client: &quot;geth&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;  </span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: &#39;dev&#39;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: &quot;https:&#x2F;&#x2F;external-node.com&quot;,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: &quot;12 word mnemonic&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about <a href=\"https://embark.embarklabs.io/docs/environments.html\">environments here</a>.</p>\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><p>Most of the options are self-explanatory, still, here are some brief descriptions:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to spawn an Ethereum node</td>\n</tr>\n<tr>\n<td><code>client</code></td>\n<td>string: <code>geth</code></td>\n<td>Client to use for the Ethereum node. Currently supported: <code>geth</code> and <code>parity</code></td>\n</tr>\n<tr>\n<td><code>miningMode</code></td>\n<td>string: <code>dev</code></td>\n<td>The mining mode to use for the node.<br/><code>dev</code>: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/><code>auto</code>: Uses a mining script to mine only when needed.<br/><code>always</code>: Miner is always on.<br/><code>off</code>: Turns off the miner</td>\n</tr>\n<tr>\n<td><code>endpoint</code></td>\n<td>string</td>\n<td>Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by <code>embark run</code>)</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go <a href=\"/docs/blockchain_accounts_configuration.html\">here</a></td>\n</tr>\n</tbody></table>\n<h2 id=\"Advanced-parameters\"><a href=\"#Advanced-parameters\" class=\"headerlink\" title=\"Advanced parameters\"></a>Advanced parameters</h2><p>Here are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don’t need to specify those.</p>\n<p>We recommend putting those inside the <code>clientConfig</code> object a better structure.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>rpcHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcPort</code></td>\n<td>number: <code>8545</code></td>\n<td>Port the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain</code></td>\n<td>object</td>\n<td>The CORS domains the node accepts</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.auto</code></td>\n<td></td>\n<td>When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.additionalCors</code></td>\n<td></td>\n<td>Manual list of CORS domains to accept. If <code>auto</code> is set to <code>true</code>, any URLs specified here will be applied <em>in addition to</em> those automatically added with <code>auto</code>.</td>\n</tr>\n<tr>\n<td><code>wsRPC</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to enable the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsOrigins</code></td>\n<td>object</td>\n<td>Same as <code>rpcCorsDomain</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Same as <code>rpcHost</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsPort</code></td>\n<td>number: <code>8546</code></td>\n<td>Same as <code>rpcPort</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>ethereumClientBin</code></td>\n<td>string: <code>geth</code></td>\n<td>Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)</td>\n</tr>\n<tr>\n<td><code>datadir</code></td>\n<td>string</td>\n<td>Directory where to put the Node’s data (eg: keystores)</td>\n</tr>\n<tr>\n<td><code>networkType</code></td>\n<td>string: <code>custom</code></td>\n<td>Can be: <code>testnet</code>, <code>rinkeby</code>, <code>kovan</code> or custom, in which case, it will use the specified <code>networkId</code></td>\n</tr>\n<tr>\n<td><code>networkId</code></td>\n<td>number: <code>1337</code></td>\n<td>Used when <code>networkType</code> is set as <code>custom</code>. <a href=\"https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids\" target=\"_blank\" rel=\"noopener\">List of known network ids</a></td>\n</tr>\n<tr>\n<td><code>nodiscover</code></td>\n<td>boolean: <code>true</code></td>\n<td>Disables the peer discovery mechanism when set to <code>true</code></td>\n</tr>\n<tr>\n<td><code>maxpeers</code></td>\n<td>number: <code>0</code></td>\n<td>Maximum number of network peers</td>\n</tr>\n<tr>\n<td><code>proxy</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.</td>\n</tr>\n<tr>\n<td><code>targetGasLimit</code></td>\n<td>number</td>\n<td>Artificial target gas floor for the blocks to mine</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on <a href=\"https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/\" target=\"_blank\" rel=\"noopener\">genesis blocks here</a></td>\n</tr>\n</tbody></table>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Using Parity and Metamask</strong></p>\n  <p><p>Parity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension’s URL in the CORS.</p>\n<p>You can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like <code>chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn</code>.</p>\n<p>Afterwards, in your blockchain config, add it to <code>additionalCors</code> of <code>rpcCorsDomain</code> and <code>wsOrigins</code>.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Privatenet-configuration\"><a href=\"#Privatenet-configuration\" class=\"headerlink\" title=\"Privatenet configuration\"></a>Privatenet configuration</h2><p>A private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.</p>\n<p>Luckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.</p>\n<h3 id=\"Privatenet-parameters\"><a href=\"#Privatenet-parameters\" class=\"headerlink\" title=\"Privatenet parameters\"></a>Privatenet parameters</h3><p>Here are common parameters for private net configurations:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">privatenet: &#123;</span><br><span class=\"line\">  clientConfig: &#123;</span><br><span class=\"line\">    miningMode: &#39;auto&#39;,</span><br><span class=\"line\">    genesisBlock: &quot;config&#x2F;privatenet&#x2F;genesis.json&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;privatenet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note that we can always use the parameters we saw in the <a href=\"#Common-Parameters\">Common parameters section</a> to override the <code>default</code> parameters.</p>\n<h3 id=\"Parameter-descriptions-1\"><a href=\"#Parameter-descriptions-1\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>value</code></th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>miningMode</code></td>\n<td>string: <code>auto</code></td>\n<td>You need to set <code>miningMode</code> to <code>auto</code> or <code>always</code> so you don’t use the development mode</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>File to start the chain in a clean state for your private network</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to. Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Testnet-configuration\"><a href=\"#Testnet-configuration\" class=\"headerlink\" title=\"Testnet configuration\"></a>Testnet configuration</h2><p>Test networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.</p>\n<p>The big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren’t using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.</p>\n<h3 id=\"Testnet-parameters\"><a href=\"#Testnet-parameters\" class=\"headerlink\" title=\"Testnet parameters\"></a>Testnet parameters</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">testnet: &#123;</span><br><span class=\"line\">  networkType: &quot;testnet&quot;,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here are the necessary parameters. Again, we can add more to override as you see fit.</p>\n<h3 id=\"Parameter-descriptions-2\"><a href=\"#Parameter-descriptions-2\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>networkType</code></td>\n<td>string: <code>testnet</code></td>\n<td>Again, used to specify the network. <code>testnet</code> here represents Ropsten. You can change the network by using a <code>networkId</code> by changing <code>networkType</code> to <code>custom</code></td>\n</tr>\n<tr>\n<td><code>syncMode</code></td>\n<td>string</td>\n<td>Blockchain sync mode</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;light&#39;</code></td>\n<td></td>\n<td>Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;fast&#39;</code></td>\n<td></td>\n<td>Faster, but higher store</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;full&#39;</code></td>\n<td></td>\n<td>Normal sync</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to.  Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Mainnet-configuration\"><a href=\"#Mainnet-configuration\" class=\"headerlink\" title=\"Mainnet configuration\"></a>Mainnet configuration</h2><p>Finally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a <a href=\"#Testnet-configuration\">test network</a>. The only major difference is that the <code>networkType</code> needs to be <code>custom</code> with the <code>networkId</code> set to <code>1</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">mainnet: &#123;</span><br><span class=\"line\">  networkType: &quot;custom&quot;,</span><br><span class=\"line\">  networkId: 1,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;mainnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n"},{"title":"Testing Smart Contracts","layout":"docs","_content":"\nTesting is a crucial part of developing robust and high-quality software. That's why Embark aims to make testing our Smart Contract as easy as possible. In this guide we'll explore Embark specific testing APIs and how to write tests for our Smart Contracts.\n\n## Creating tests\n\nTest files resides in a project's `test` folder. Any JavaScript file within `test/` is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in `contract()` functions. A single spec is written using `it()` blocks. \n\nHere's what such a test could look like:\n\n```\ncontract('SomeContract', () => {\n  it('should pass', () => {\n    assert.ok(true);\n  });\n});\n```\n\nThis is a single test spec which will always pass. We're using a globally available `assert` object to make assertions in our specs. If you're familiar with the [Mocha testing framework](https://mochajs.org), this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.\n\n`contract()` is just an alias for Mocha's `describe()` function and is globally available. In general, global functions and objects are:\n\n- `contract()`: Same as Mocha's `describe`\n- `config()`: Function to configure Embark and deploy contracts\n- `web3`: Web3 object\n- `assert`: Node's assert\n- Mocha functions: `describe()`, `it()`, `before()`, etc.\n\n### Importing EmbarkJS\n\nIf we want to use any of EmbarkJS' APIs, we can require it as expected:\n\n```\nconst EmbarkJS = require('Embark/EmbarkJS');\n```\n\nFor more information on EmbarkJS's APIs, head over to [this guide](/docs/javascript_usage.html).\n\n## Running tests\n\nOnce we've written our tests, we can execute them using Embark's `test` command:\n\n```\n$ embark test\n```\n\nAs mentioned earlier, this will pick up all files inside the `test/` folder and run them as test files.\n\n### Running test subsets\n\nIf we aren't interested in running all tests but only a specific subset, we can specify a test file as part of the `test` command like this:\n\n```\n$ embark test test/SomeContract_spec.js\n```\n\n### Running tests against a different node\n\nBy default, tests are run using an Ethereum simulator ([Ganache](https://www.truffleframework.com/ganache)). We can use the `--node` option to change that behavior. Passing `--node embark` to `embark test` will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:\n\n```\n$ embark test --node ws://localhost:8556\n```\n\n### Outputting gas cost details\n\nWhen running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a `--gasDetails` option that makes this possible.\n\n```\n$ embark test --gasDetails\n```\n\n## Test environment\n\nWhen running tests, the default [environment}(/docs/environments.html) is `test`. You can obviously change this using the `--env` flag.\n\nThe special thing with the `test` environment is that if you do not have a `test` section in your module configuration, that module with be disabled (`enabled: false`). This is done to speed up the test as if you don't need a module, it is disabled.\n\n## Configuring Smart Contracts for tests\n\nVery similar to how we [configure our Smart Contracts](/docs/contracts_configuration.html) for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.\n\nTo do that, Embark adds a global `config()` function to the execution context, which uses the same API as the configuration object for our application's Smart Contracts. So if we had a `SomeContract` that should be picked up for deployment, this is what the configuration would look like:\n\n```\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in Smart Contract configuration guide\n    }\n  }\n});\n\ncontract('SomContract', () => {\n  ...\n});\n```\n\nOne thing that's important to note here is that, behind the scenes, Embark has to run `config()` first to deploy the Smart Contracts and only **then** starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.\n\n{% notification info 'A note on config()' %}\nThe global `config()` function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.\n{% endnotification %}\n\n## Accessing Smart Contract instances\n\nTo write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, [Embark generates Smart Contract instances](/docs/javascript_usage.html#Embark-Artifacts) for us. All we have to do is importing and using them accordingly.\n\nThe following code imports `SomeContract` and calls an imaginary method on it inside a spec:\n\n```\nconst SomeContract = require('EmbarkJS/contracts/SomeContract');\n\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {}\n    }\n  }\n});\n\ncontract('SomeContract', () => {\n\n  it('should do something', async () => {\n    const result = await SomeContract.methods.doSomething.call();\n    assert.equal(result, 'foo');\n  });\n});\n```\n\nThere's one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use `SmartContract` right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.\n\nThis is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.\n\n{% notification info 'Smart Contract reference hydration' %}\nSmart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside `contract()` blocks.\n{% endnotification %}\n\n## Configuring accounts\n\nAccounts within the testing environment can be configured [just like we're used to](/docs/contracts_deployment.html). The same rules apply here, and [configuring an Ether balance](/docs/contracts_deployment.html#Configuring-account-balance-for-development) is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. \n\n```\nconfig({\n  blockchain: {\n    accounts: [\n      {\n        privateKeyFile: 'path/to/file',\n        balance: '42 shannon'\n      }\n    ]\n  }\n});\n```\n\n## Accessing Accounts\n\nObviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a `from` address to send transactions from. For those cases we very likely want to access any of our our available accounts.\n\nAll available accounts are emitted by `config()` and can be accessed using a callback parameter like this:\n\n```\nlet accounts = [];\n\nconfig({\n  ...\n}, (err, accounts) => {\n  accounts = accounts;\n});\n```\n\nYou can also grab the accounts from the callback of the `contract()` function (`describe` alias):\n\n```\ncontract('SomeContract', (accounts) => {\n  const myAccounts = accounts[0];\n\n  it('should do something', async () => {\n    ...\n  });\n});\n```\n\n## Connecting to a different node\n\nBy default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the `host`, `port` and `type` options as shown below:\n\n```\nconfig({\n  blockchain: {\n    \"endpoint\": \"http://localhost:8545\"\n  }\n});\n```\n\n## Configuring modules\n\nYou can configure the different Embark modules directly in your test file. The available modules are: [storage](/docs/storage_configuration.html), [namesystem](/docs/naming_configuration.html) and [communication](/docs/messages_configuration.html).\n\nAll configuration options for the respective modules are available. Also, the configurations you put inside the `config` function are merged inside the ones that are in the configuration file (meaning that you don't have to put all the provider options if they are already in the default configs).\n\n```\nconfig({\n  storage: {\n    enabled: true\n  },\n  communication: {\n    enabled: true\n  },\n  namesystem: {\n    enabled: true,\n    register: {\n      rootDomain: \"test.eth\"\n    }\n  }\n});\n```\n\nIf the module is not started (eg. IPFS), Embark will start it for you.\n\n## Manually deploying Smart Contracts\n\nAs mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function `config()` function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we're doing this inside a `contract()` block as discussed earlier:\n\n```\nconst SimpleStorage = require('Embark/contracts/SimpleStorage');\n\ncontract('SimpleStorage Deploy', () => {\n  let SimpleStorageInstance;\n\n  before(async function() {\n    SimpleStorageInstance = await SimpleStorage.deploy({ arguments: [150] }).send();\n  });\n\n  it('should set constructor value', async () => {\n    let result = await SimpleStorageInstance.methods.storedData().call();\n    assert.strictEqual(parseInt(result, 10), 150);\n  });\n});\n```\n\n## Util functions\n\n### assert.reverts\n\nUsing `assert.reverts`, you can easily assert that your transaction reverts.\n\n```javascript\nawait assert.reverts(contractMethodAndArguments[, options][, message])\n```\n\n- `contractMethodAndArguments`: [Function] Contract method to call `send` on, including the arguments\n- `options`: [Object] Optional options to pass to the `send` function\n- `message`: [String] Optional string to match the revert message\n\nReturns a promise that you can wait for with `await`.\n\n```javascript\nit(\"should revert with a value lower than 5\", async function() {\n    await assert.reverts(SimpleStorage.methods.setHigher5(2), {from: web3.eth.defaultAccount},\n      'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5');\n  });\n```\n\n### assert.eventEmitted\n\nUsing `eventEmitted`, you can assert that a transaction has emitted an event. You can also check for the returned values.\n\n```javascript\nassert.eventEmitted(transaction, event[, values])\n```\n\n- `transaction`: [Object] Transaction object returns by a `send` call\n- `event`: [String] Name of the event being emitted\n- `values`: [Array or Object] Optional array or object of the returned values of the event.\n    - Using array: The order of the values put in the array need to match the order in which the values are returned by the event\n    - Using object: The object needs to have the right key/value pair(s)\n    \n```javascript\nit('asserts that the event was triggered', async function() {\n const transaction = await SimpleStorage.methods.set(100).send();\n assert.eventEmitted(transaction, 'EventOnSet', {value: \"100\", success: true});\n});\n```\n\n### increaseTime\n\nThis function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.\n\n```javascript\nawait increaseTime(amount);\n```\n\n`amount`: [Number] Number of seconds to increase\n\n```javascript\nit(\"should have expired after increasing time\", async function () {\n    await increaseTime(5001);\n    const isExpired = await Expiration.methods.isExpired().call();\n    assert.strictEqual(isExpired, true);\n});\n```\n\n## Code coverage\n\nEmbark allows you to generate a coverage report for your Solidity Smart Contracts by passing the `--coverage` option on the `embark test` command.\n\n```\n$ embark test --coverage\n```\n\nThe generated report looks something like this:\n\n![Coverage Report: Files](/coverage-files.png)\n\nThis gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here's what it looks like:\n\n![Coverage Report: Detailed](/coverage-report.png)\n","source":"docs/contracts_testing.md","raw":"title: Testing Smart Contracts\nlayout: docs\n---\n\nTesting is a crucial part of developing robust and high-quality software. That's why Embark aims to make testing our Smart Contract as easy as possible. In this guide we'll explore Embark specific testing APIs and how to write tests for our Smart Contracts.\n\n## Creating tests\n\nTest files resides in a project's `test` folder. Any JavaScript file within `test/` is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in `contract()` functions. A single spec is written using `it()` blocks. \n\nHere's what such a test could look like:\n\n```\ncontract('SomeContract', () => {\n  it('should pass', () => {\n    assert.ok(true);\n  });\n});\n```\n\nThis is a single test spec which will always pass. We're using a globally available `assert` object to make assertions in our specs. If you're familiar with the [Mocha testing framework](https://mochajs.org), this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.\n\n`contract()` is just an alias for Mocha's `describe()` function and is globally available. In general, global functions and objects are:\n\n- `contract()`: Same as Mocha's `describe`\n- `config()`: Function to configure Embark and deploy contracts\n- `web3`: Web3 object\n- `assert`: Node's assert\n- Mocha functions: `describe()`, `it()`, `before()`, etc.\n\n### Importing EmbarkJS\n\nIf we want to use any of EmbarkJS' APIs, we can require it as expected:\n\n```\nconst EmbarkJS = require('Embark/EmbarkJS');\n```\n\nFor more information on EmbarkJS's APIs, head over to [this guide](/docs/javascript_usage.html).\n\n## Running tests\n\nOnce we've written our tests, we can execute them using Embark's `test` command:\n\n```\n$ embark test\n```\n\nAs mentioned earlier, this will pick up all files inside the `test/` folder and run them as test files.\n\n### Running test subsets\n\nIf we aren't interested in running all tests but only a specific subset, we can specify a test file as part of the `test` command like this:\n\n```\n$ embark test test/SomeContract_spec.js\n```\n\n### Running tests against a different node\n\nBy default, tests are run using an Ethereum simulator ([Ganache](https://www.truffleframework.com/ganache)). We can use the `--node` option to change that behavior. Passing `--node embark` to `embark test` will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:\n\n```\n$ embark test --node ws://localhost:8556\n```\n\n### Outputting gas cost details\n\nWhen running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a `--gasDetails` option that makes this possible.\n\n```\n$ embark test --gasDetails\n```\n\n## Test environment\n\nWhen running tests, the default [environment}(/docs/environments.html) is `test`. You can obviously change this using the `--env` flag.\n\nThe special thing with the `test` environment is that if you do not have a `test` section in your module configuration, that module with be disabled (`enabled: false`). This is done to speed up the test as if you don't need a module, it is disabled.\n\n## Configuring Smart Contracts for tests\n\nVery similar to how we [configure our Smart Contracts](/docs/contracts_configuration.html) for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.\n\nTo do that, Embark adds a global `config()` function to the execution context, which uses the same API as the configuration object for our application's Smart Contracts. So if we had a `SomeContract` that should be picked up for deployment, this is what the configuration would look like:\n\n```\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in Smart Contract configuration guide\n    }\n  }\n});\n\ncontract('SomContract', () => {\n  ...\n});\n```\n\nOne thing that's important to note here is that, behind the scenes, Embark has to run `config()` first to deploy the Smart Contracts and only **then** starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.\n\n{% notification info 'A note on config()' %}\nThe global `config()` function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.\n{% endnotification %}\n\n## Accessing Smart Contract instances\n\nTo write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, [Embark generates Smart Contract instances](/docs/javascript_usage.html#Embark-Artifacts) for us. All we have to do is importing and using them accordingly.\n\nThe following code imports `SomeContract` and calls an imaginary method on it inside a spec:\n\n```\nconst SomeContract = require('EmbarkJS/contracts/SomeContract');\n\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {}\n    }\n  }\n});\n\ncontract('SomeContract', () => {\n\n  it('should do something', async () => {\n    const result = await SomeContract.methods.doSomething.call();\n    assert.equal(result, 'foo');\n  });\n});\n```\n\nThere's one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use `SmartContract` right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.\n\nThis is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.\n\n{% notification info 'Smart Contract reference hydration' %}\nSmart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside `contract()` blocks.\n{% endnotification %}\n\n## Configuring accounts\n\nAccounts within the testing environment can be configured [just like we're used to](/docs/contracts_deployment.html). The same rules apply here, and [configuring an Ether balance](/docs/contracts_deployment.html#Configuring-account-balance-for-development) is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. \n\n```\nconfig({\n  blockchain: {\n    accounts: [\n      {\n        privateKeyFile: 'path/to/file',\n        balance: '42 shannon'\n      }\n    ]\n  }\n});\n```\n\n## Accessing Accounts\n\nObviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a `from` address to send transactions from. For those cases we very likely want to access any of our our available accounts.\n\nAll available accounts are emitted by `config()` and can be accessed using a callback parameter like this:\n\n```\nlet accounts = [];\n\nconfig({\n  ...\n}, (err, accounts) => {\n  accounts = accounts;\n});\n```\n\nYou can also grab the accounts from the callback of the `contract()` function (`describe` alias):\n\n```\ncontract('SomeContract', (accounts) => {\n  const myAccounts = accounts[0];\n\n  it('should do something', async () => {\n    ...\n  });\n});\n```\n\n## Connecting to a different node\n\nBy default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the `host`, `port` and `type` options as shown below:\n\n```\nconfig({\n  blockchain: {\n    \"endpoint\": \"http://localhost:8545\"\n  }\n});\n```\n\n## Configuring modules\n\nYou can configure the different Embark modules directly in your test file. The available modules are: [storage](/docs/storage_configuration.html), [namesystem](/docs/naming_configuration.html) and [communication](/docs/messages_configuration.html).\n\nAll configuration options for the respective modules are available. Also, the configurations you put inside the `config` function are merged inside the ones that are in the configuration file (meaning that you don't have to put all the provider options if they are already in the default configs).\n\n```\nconfig({\n  storage: {\n    enabled: true\n  },\n  communication: {\n    enabled: true\n  },\n  namesystem: {\n    enabled: true,\n    register: {\n      rootDomain: \"test.eth\"\n    }\n  }\n});\n```\n\nIf the module is not started (eg. IPFS), Embark will start it for you.\n\n## Manually deploying Smart Contracts\n\nAs mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function `config()` function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we're doing this inside a `contract()` block as discussed earlier:\n\n```\nconst SimpleStorage = require('Embark/contracts/SimpleStorage');\n\ncontract('SimpleStorage Deploy', () => {\n  let SimpleStorageInstance;\n\n  before(async function() {\n    SimpleStorageInstance = await SimpleStorage.deploy({ arguments: [150] }).send();\n  });\n\n  it('should set constructor value', async () => {\n    let result = await SimpleStorageInstance.methods.storedData().call();\n    assert.strictEqual(parseInt(result, 10), 150);\n  });\n});\n```\n\n## Util functions\n\n### assert.reverts\n\nUsing `assert.reverts`, you can easily assert that your transaction reverts.\n\n```javascript\nawait assert.reverts(contractMethodAndArguments[, options][, message])\n```\n\n- `contractMethodAndArguments`: [Function] Contract method to call `send` on, including the arguments\n- `options`: [Object] Optional options to pass to the `send` function\n- `message`: [String] Optional string to match the revert message\n\nReturns a promise that you can wait for with `await`.\n\n```javascript\nit(\"should revert with a value lower than 5\", async function() {\n    await assert.reverts(SimpleStorage.methods.setHigher5(2), {from: web3.eth.defaultAccount},\n      'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5');\n  });\n```\n\n### assert.eventEmitted\n\nUsing `eventEmitted`, you can assert that a transaction has emitted an event. You can also check for the returned values.\n\n```javascript\nassert.eventEmitted(transaction, event[, values])\n```\n\n- `transaction`: [Object] Transaction object returns by a `send` call\n- `event`: [String] Name of the event being emitted\n- `values`: [Array or Object] Optional array or object of the returned values of the event.\n    - Using array: The order of the values put in the array need to match the order in which the values are returned by the event\n    - Using object: The object needs to have the right key/value pair(s)\n    \n```javascript\nit('asserts that the event was triggered', async function() {\n const transaction = await SimpleStorage.methods.set(100).send();\n assert.eventEmitted(transaction, 'EventOnSet', {value: \"100\", success: true});\n});\n```\n\n### increaseTime\n\nThis function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.\n\n```javascript\nawait increaseTime(amount);\n```\n\n`amount`: [Number] Number of seconds to increase\n\n```javascript\nit(\"should have expired after increasing time\", async function () {\n    await increaseTime(5001);\n    const isExpired = await Expiration.methods.isExpired().call();\n    assert.strictEqual(isExpired, true);\n});\n```\n\n## Code coverage\n\nEmbark allows you to generate a coverage report for your Solidity Smart Contracts by passing the `--coverage` option on the `embark test` command.\n\n```\n$ embark test --coverage\n```\n\nThe generated report looks something like this:\n\n![Coverage Report: Files](/coverage-files.png)\n\nThis gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here's what it looks like:\n\n![Coverage Report: Detailed](/coverage-report.png)\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_testing.html","comments":1,"_id":"ck5ijm3tu00277hegd72zaomq","content":"<p>Testing is a crucial part of developing robust and high-quality software. That’s why Embark aims to make testing our Smart Contract as easy as possible. In this guide we’ll explore Embark specific testing APIs and how to write tests for our Smart Contracts.</p>\n<h2 id=\"Creating-tests\"><a href=\"#Creating-tests\" class=\"headerlink\" title=\"Creating tests\"></a>Creating tests</h2><p>Test files resides in a project’s <code>test</code> folder. Any JavaScript file within <code>test/</code> is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in <code>contract()</code> functions. A single spec is written using <code>it()</code> blocks. </p>\n<p>Here’s what such a test could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  it(&#39;should pass&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is a single test spec which will always pass. We’re using a globally available <code>assert</code> object to make assertions in our specs. If you’re familiar with the <a href=\"https://mochajs.org\" target=\"_blank\" rel=\"noopener\">Mocha testing framework</a>, this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.</p>\n<p><code>contract()</code> is just an alias for Mocha’s <code>describe()</code> function and is globally available. In general, global functions and objects are:</p>\n<ul>\n<li><code>contract()</code>: Same as Mocha’s <code>describe</code></li>\n<li><code>config()</code>: Function to configure Embark and deploy contracts</li>\n<li><code>web3</code>: Web3 object</li>\n<li><code>assert</code>: Node’s assert</li>\n<li>Mocha functions: <code>describe()</code>, <code>it()</code>, <code>before()</code>, etc.</li>\n</ul>\n<h3 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h3><p>If we want to use any of EmbarkJS’ APIs, we can require it as expected:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const EmbarkJS &#x3D; require(&#39;Embark&#x2F;EmbarkJS&#39;);</span><br></pre></td></tr></table></figure>\n\n<p>For more information on EmbarkJS’s APIs, head over to <a href=\"/docs/javascript_usage.html\">this guide</a>.</p>\n<h2 id=\"Running-tests\"><a href=\"#Running-tests\" class=\"headerlink\" title=\"Running tests\"></a>Running tests</h2><p>Once we’ve written our tests, we can execute them using Embark’s <code>test</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>As mentioned earlier, this will pick up all files inside the <code>test/</code> folder and run them as test files.</p>\n<h3 id=\"Running-test-subsets\"><a href=\"#Running-test-subsets\" class=\"headerlink\" title=\"Running test subsets\"></a>Running test subsets</h3><p>If we aren’t interested in running all tests but only a specific subset, we can specify a test file as part of the <code>test</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test test&#x2F;SomeContract_spec.js</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Running-tests-against-a-different-node\"><a href=\"#Running-tests-against-a-different-node\" class=\"headerlink\" title=\"Running tests against a different node\"></a>Running tests against a different node</h3><p>By default, tests are run using an Ethereum simulator (<a href=\"https://www.truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>). We can use the <code>--node</code> option to change that behavior. Passing <code>--node embark</code> to <code>embark test</code> will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --node ws:&#x2F;&#x2F;localhost:8556</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Outputting-gas-cost-details\"><a href=\"#Outputting-gas-cost-details\" class=\"headerlink\" title=\"Outputting gas cost details\"></a>Outputting gas cost details</h3><p>When running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a <code>--gasDetails</code> option that makes this possible.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --gasDetails</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-environment\"><a href=\"#Test-environment\" class=\"headerlink\" title=\"Test environment\"></a>Test environment</h2><p>When running tests, the default [environment}(/docs/environments.html) is <code>test</code>. You can obviously change this using the <code>--env</code> flag.</p>\n<p>The special thing with the <code>test</code> environment is that if you do not have a <code>test</code> section in your module configuration, that module with be disabled (<code>enabled: false</code>). This is done to speed up the test as if you don’t need a module, it is disabled.</p>\n<h2 id=\"Configuring-Smart-Contracts-for-tests\"><a href=\"#Configuring-Smart-Contracts-for-tests\" class=\"headerlink\" title=\"Configuring Smart Contracts for tests\"></a>Configuring Smart Contracts for tests</h2><p>Very similar to how we <a href=\"/docs/contracts_configuration.html\">configure our Smart Contracts</a> for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.</p>\n<p>To do that, Embark adds a global <code>config()</code> function to the execution context, which uses the same API as the configuration object for our application’s Smart Contracts. So if we had a <code>SomeContract</code> that should be picked up for deployment, this is what the configuration would look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; &#x2F;&#x2F; options as discussed in Smart Contract configuration guide</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>One thing that’s important to note here is that, behind the scenes, Embark has to run <code>config()</code> first to deploy the Smart Contracts and only <strong>then</strong> starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on config()</strong></p>\n  <p><p>The global <code>config()</code> function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>To write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Embark generates Smart Contract instances</a> for us. All we have to do is importing and using them accordingly.</p>\n<p>The following code imports <code>SomeContract</code> and calls an imaginary method on it inside a spec:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SomeContract &#x3D; require(&#39;EmbarkJS&#x2F;contracts&#x2F;SomeContract&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const result &#x3D; await SomeContract.methods.doSomething.call();</span><br><span class=\"line\">    assert.equal(result, &#39;foo&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use <code>SmartContract</code> right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.</p>\n<p>This is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Smart Contract reference hydration</strong></p>\n  <p><p>Smart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside <code>contract()</code> blocks.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-accounts\"><a href=\"#Configuring-accounts\" class=\"headerlink\" title=\"Configuring accounts\"></a>Configuring accounts</h2><p>Accounts within the testing environment can be configured <a href=\"/docs/contracts_deployment.html\">just like we’re used to</a>. The same rules apply here, and <a href=\"/docs/contracts_deployment.html#Configuring-account-balance-for-development\">configuring an Ether balance</a> is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        privateKeyFile: &#39;path&#x2F;to&#x2F;file&#39;,</span><br><span class=\"line\">        balance: &#39;42 shannon&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Accounts\"><a href=\"#Accessing-Accounts\" class=\"headerlink\" title=\"Accessing Accounts\"></a>Accessing Accounts</h2><p>Obviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a <code>from</code> address to send transactions from. For those cases we very likely want to access any of our our available accounts.</p>\n<p>All available accounts are emitted by <code>config()</code> and can be accessed using a callback parameter like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;, (err, accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You can also grab the accounts from the callback of the <code>contract()</code> function (<code>describe</code> alias):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, (accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const myAccounts &#x3D; accounts[0];</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Connecting-to-a-different-node\"><a href=\"#Connecting-to-a-different-node\" class=\"headerlink\" title=\"Connecting to a different node\"></a>Connecting to a different node</h2><p>By default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the <code>host</code>, <code>port</code> and <code>type</code> options as shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    &quot;endpoint&quot;: &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-modules\"><a href=\"#Configuring-modules\" class=\"headerlink\" title=\"Configuring modules\"></a>Configuring modules</h2><p>You can configure the different Embark modules directly in your test file. The available modules are: <a href=\"/docs/storage_configuration.html\">storage</a>, <a href=\"/docs/naming_configuration.html\">namesystem</a> and <a href=\"/docs/messages_configuration.html\">communication</a>.</p>\n<p>All configuration options for the respective modules are available. Also, the configurations you put inside the <code>config</code> function are merged inside the ones that are in the configuration file (meaning that you don’t have to put all the provider options if they are already in the default configs).</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  storage: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  communication: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  namesystem: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &quot;test.eth&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If the module is not started (eg. IPFS), Embark will start it for you.</p>\n<h2 id=\"Manually-deploying-Smart-Contracts\"><a href=\"#Manually-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Manually deploying Smart Contracts\"></a>Manually deploying Smart Contracts</h2><p>As mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function <code>config()</code> function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we’re doing this inside a <code>contract()</code> block as discussed earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SimpleStorage &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SimpleStorage Deploy&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  let SimpleStorageInstance;</span><br><span class=\"line\"></span><br><span class=\"line\">  before(async function() &#123;</span><br><span class=\"line\">    SimpleStorageInstance &#x3D; await SimpleStorage.deploy(&#123; arguments: [150] &#125;).send();</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should set constructor value&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    let result &#x3D; await SimpleStorageInstance.methods.storedData().call();</span><br><span class=\"line\">    assert.strictEqual(parseInt(result, 10), 150);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Util-functions\"><a href=\"#Util-functions\" class=\"headerlink\" title=\"Util functions\"></a>Util functions</h2><h3 id=\"assert-reverts\"><a href=\"#assert-reverts\" class=\"headerlink\" title=\"assert.reverts\"></a>assert.reverts</h3><p>Using <code>assert.reverts</code>, you can easily assert that your transaction reverts.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> assert.reverts(contractMethodAndArguments[, options][, message])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>contractMethodAndArguments</code>: [Function] Contract method to call <code>send</code> on, including the arguments</li>\n<li><code>options</code>: [Object] Optional options to pass to the <code>send</code> function</li>\n<li><code>message</code>: [String] Optional string to match the revert message</li>\n</ul>\n<p>Returns a promise that you can wait for with <code>await</code>.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should revert with a value lower than 5\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> assert.reverts(SimpleStorage.methods.setHigher5(<span class=\"number\">2</span>), &#123;<span class=\"attr\">from</span>: web3.eth.defaultAccount&#125;,</span><br><span class=\"line\">      <span class=\"string\">'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5'</span>);</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"assert-eventEmitted\"><a href=\"#assert-eventEmitted\" class=\"headerlink\" title=\"assert.eventEmitted\"></a>assert.eventEmitted</h3><p>Using <code>eventEmitted</code>, you can assert that a transaction has emitted an event. You can also check for the returned values.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">assert.eventEmitted(transaction, event[, values])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>transaction</code>: [Object] Transaction object returns by a <code>send</code> call</li>\n<li><code>event</code>: [String] Name of the event being emitted</li>\n<li><code>values</code>: [Array or Object] Optional array or object of the returned values of the event.<ul>\n<li>Using array: The order of the values put in the array need to match the order in which the values are returned by the event</li>\n<li>Using object: The object needs to have the right key/value pair(s)</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">'asserts that the event was triggered'</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\"> <span class=\"keyword\">const</span> transaction = <span class=\"keyword\">await</span> SimpleStorage.methods.set(<span class=\"number\">100</span>).send();</span><br><span class=\"line\"> assert.eventEmitted(transaction, <span class=\"string\">'EventOnSet'</span>, &#123;<span class=\"attr\">value</span>: <span class=\"string\">\"100\"</span>, <span class=\"attr\">success</span>: <span class=\"literal\">true</span>&#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"increaseTime\"><a href=\"#increaseTime\" class=\"headerlink\" title=\"increaseTime\"></a>increaseTime</h3><p>This function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> increaseTime(amount);</span><br></pre></td></tr></table></figure>\n\n<p><code>amount</code>: [Number] Number of seconds to increase</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should have expired after increasing time\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> increaseTime(<span class=\"number\">5001</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> isExpired = <span class=\"keyword\">await</span> Expiration.methods.isExpired().call();</span><br><span class=\"line\">    assert.strictEqual(isExpired, <span class=\"literal\">true</span>);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Code-coverage\"><a href=\"#Code-coverage\" class=\"headerlink\" title=\"Code coverage\"></a>Code coverage</h2><p>Embark allows you to generate a coverage report for your Solidity Smart Contracts by passing the <code>--coverage</code> option on the <code>embark test</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --coverage</span><br></pre></td></tr></table></figure>\n\n<p>The generated report looks something like this:</p>\n<p><img src=\"/coverage-files.png\" alt=\"Coverage Report: Files\"></p>\n<p>This gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here’s what it looks like:</p>\n<p><img src=\"/coverage-report.png\" alt=\"Coverage Report: Detailed\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Testing is a crucial part of developing robust and high-quality software. That’s why Embark aims to make testing our Smart Contract as easy as possible. In this guide we’ll explore Embark specific testing APIs and how to write tests for our Smart Contracts.</p>\n<h2 id=\"Creating-tests\"><a href=\"#Creating-tests\" class=\"headerlink\" title=\"Creating tests\"></a>Creating tests</h2><p>Test files resides in a project’s <code>test</code> folder. Any JavaScript file within <code>test/</code> is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in <code>contract()</code> functions. A single spec is written using <code>it()</code> blocks. </p>\n<p>Here’s what such a test could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  it(&#39;should pass&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is a single test spec which will always pass. We’re using a globally available <code>assert</code> object to make assertions in our specs. If you’re familiar with the <a href=\"https://mochajs.org\" target=\"_blank\" rel=\"noopener\">Mocha testing framework</a>, this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.</p>\n<p><code>contract()</code> is just an alias for Mocha’s <code>describe()</code> function and is globally available. In general, global functions and objects are:</p>\n<ul>\n<li><code>contract()</code>: Same as Mocha’s <code>describe</code></li>\n<li><code>config()</code>: Function to configure Embark and deploy contracts</li>\n<li><code>web3</code>: Web3 object</li>\n<li><code>assert</code>: Node’s assert</li>\n<li>Mocha functions: <code>describe()</code>, <code>it()</code>, <code>before()</code>, etc.</li>\n</ul>\n<h3 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h3><p>If we want to use any of EmbarkJS’ APIs, we can require it as expected:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const EmbarkJS &#x3D; require(&#39;Embark&#x2F;EmbarkJS&#39;);</span><br></pre></td></tr></table></figure>\n\n<p>For more information on EmbarkJS’s APIs, head over to <a href=\"/docs/javascript_usage.html\">this guide</a>.</p>\n<h2 id=\"Running-tests\"><a href=\"#Running-tests\" class=\"headerlink\" title=\"Running tests\"></a>Running tests</h2><p>Once we’ve written our tests, we can execute them using Embark’s <code>test</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>As mentioned earlier, this will pick up all files inside the <code>test/</code> folder and run them as test files.</p>\n<h3 id=\"Running-test-subsets\"><a href=\"#Running-test-subsets\" class=\"headerlink\" title=\"Running test subsets\"></a>Running test subsets</h3><p>If we aren’t interested in running all tests but only a specific subset, we can specify a test file as part of the <code>test</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test test&#x2F;SomeContract_spec.js</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Running-tests-against-a-different-node\"><a href=\"#Running-tests-against-a-different-node\" class=\"headerlink\" title=\"Running tests against a different node\"></a>Running tests against a different node</h3><p>By default, tests are run using an Ethereum simulator (<a href=\"https://www.truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>). We can use the <code>--node</code> option to change that behavior. Passing <code>--node embark</code> to <code>embark test</code> will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --node ws:&#x2F;&#x2F;localhost:8556</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Outputting-gas-cost-details\"><a href=\"#Outputting-gas-cost-details\" class=\"headerlink\" title=\"Outputting gas cost details\"></a>Outputting gas cost details</h3><p>When running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a <code>--gasDetails</code> option that makes this possible.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --gasDetails</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-environment\"><a href=\"#Test-environment\" class=\"headerlink\" title=\"Test environment\"></a>Test environment</h2><p>When running tests, the default [environment}(/docs/environments.html) is <code>test</code>. You can obviously change this using the <code>--env</code> flag.</p>\n<p>The special thing with the <code>test</code> environment is that if you do not have a <code>test</code> section in your module configuration, that module with be disabled (<code>enabled: false</code>). This is done to speed up the test as if you don’t need a module, it is disabled.</p>\n<h2 id=\"Configuring-Smart-Contracts-for-tests\"><a href=\"#Configuring-Smart-Contracts-for-tests\" class=\"headerlink\" title=\"Configuring Smart Contracts for tests\"></a>Configuring Smart Contracts for tests</h2><p>Very similar to how we <a href=\"/docs/contracts_configuration.html\">configure our Smart Contracts</a> for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.</p>\n<p>To do that, Embark adds a global <code>config()</code> function to the execution context, which uses the same API as the configuration object for our application’s Smart Contracts. So if we had a <code>SomeContract</code> that should be picked up for deployment, this is what the configuration would look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; &#x2F;&#x2F; options as discussed in Smart Contract configuration guide</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>One thing that’s important to note here is that, behind the scenes, Embark has to run <code>config()</code> first to deploy the Smart Contracts and only <strong>then</strong> starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on config()</strong></p>\n  <p><p>The global <code>config()</code> function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>To write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Embark generates Smart Contract instances</a> for us. All we have to do is importing and using them accordingly.</p>\n<p>The following code imports <code>SomeContract</code> and calls an imaginary method on it inside a spec:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SomeContract &#x3D; require(&#39;EmbarkJS&#x2F;contracts&#x2F;SomeContract&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const result &#x3D; await SomeContract.methods.doSomething.call();</span><br><span class=\"line\">    assert.equal(result, &#39;foo&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use <code>SmartContract</code> right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.</p>\n<p>This is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Smart Contract reference hydration</strong></p>\n  <p><p>Smart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside <code>contract()</code> blocks.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-accounts\"><a href=\"#Configuring-accounts\" class=\"headerlink\" title=\"Configuring accounts\"></a>Configuring accounts</h2><p>Accounts within the testing environment can be configured <a href=\"/docs/contracts_deployment.html\">just like we’re used to</a>. The same rules apply here, and <a href=\"/docs/contracts_deployment.html#Configuring-account-balance-for-development\">configuring an Ether balance</a> is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        privateKeyFile: &#39;path&#x2F;to&#x2F;file&#39;,</span><br><span class=\"line\">        balance: &#39;42 shannon&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Accounts\"><a href=\"#Accessing-Accounts\" class=\"headerlink\" title=\"Accessing Accounts\"></a>Accessing Accounts</h2><p>Obviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a <code>from</code> address to send transactions from. For those cases we very likely want to access any of our our available accounts.</p>\n<p>All available accounts are emitted by <code>config()</code> and can be accessed using a callback parameter like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;, (err, accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You can also grab the accounts from the callback of the <code>contract()</code> function (<code>describe</code> alias):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, (accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const myAccounts &#x3D; accounts[0];</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Connecting-to-a-different-node\"><a href=\"#Connecting-to-a-different-node\" class=\"headerlink\" title=\"Connecting to a different node\"></a>Connecting to a different node</h2><p>By default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the <code>host</code>, <code>port</code> and <code>type</code> options as shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    &quot;endpoint&quot;: &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-modules\"><a href=\"#Configuring-modules\" class=\"headerlink\" title=\"Configuring modules\"></a>Configuring modules</h2><p>You can configure the different Embark modules directly in your test file. The available modules are: <a href=\"/docs/storage_configuration.html\">storage</a>, <a href=\"/docs/naming_configuration.html\">namesystem</a> and <a href=\"/docs/messages_configuration.html\">communication</a>.</p>\n<p>All configuration options for the respective modules are available. Also, the configurations you put inside the <code>config</code> function are merged inside the ones that are in the configuration file (meaning that you don’t have to put all the provider options if they are already in the default configs).</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  storage: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  communication: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  namesystem: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &quot;test.eth&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If the module is not started (eg. IPFS), Embark will start it for you.</p>\n<h2 id=\"Manually-deploying-Smart-Contracts\"><a href=\"#Manually-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Manually deploying Smart Contracts\"></a>Manually deploying Smart Contracts</h2><p>As mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function <code>config()</code> function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we’re doing this inside a <code>contract()</code> block as discussed earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SimpleStorage &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SimpleStorage Deploy&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  let SimpleStorageInstance;</span><br><span class=\"line\"></span><br><span class=\"line\">  before(async function() &#123;</span><br><span class=\"line\">    SimpleStorageInstance &#x3D; await SimpleStorage.deploy(&#123; arguments: [150] &#125;).send();</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should set constructor value&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    let result &#x3D; await SimpleStorageInstance.methods.storedData().call();</span><br><span class=\"line\">    assert.strictEqual(parseInt(result, 10), 150);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Util-functions\"><a href=\"#Util-functions\" class=\"headerlink\" title=\"Util functions\"></a>Util functions</h2><h3 id=\"assert-reverts\"><a href=\"#assert-reverts\" class=\"headerlink\" title=\"assert.reverts\"></a>assert.reverts</h3><p>Using <code>assert.reverts</code>, you can easily assert that your transaction reverts.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> assert.reverts(contractMethodAndArguments[, options][, message])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>contractMethodAndArguments</code>: [Function] Contract method to call <code>send</code> on, including the arguments</li>\n<li><code>options</code>: [Object] Optional options to pass to the <code>send</code> function</li>\n<li><code>message</code>: [String] Optional string to match the revert message</li>\n</ul>\n<p>Returns a promise that you can wait for with <code>await</code>.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should revert with a value lower than 5\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> assert.reverts(SimpleStorage.methods.setHigher5(<span class=\"number\">2</span>), &#123;<span class=\"attr\">from</span>: web3.eth.defaultAccount&#125;,</span><br><span class=\"line\">      <span class=\"string\">'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5'</span>);</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"assert-eventEmitted\"><a href=\"#assert-eventEmitted\" class=\"headerlink\" title=\"assert.eventEmitted\"></a>assert.eventEmitted</h3><p>Using <code>eventEmitted</code>, you can assert that a transaction has emitted an event. You can also check for the returned values.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">assert.eventEmitted(transaction, event[, values])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>transaction</code>: [Object] Transaction object returns by a <code>send</code> call</li>\n<li><code>event</code>: [String] Name of the event being emitted</li>\n<li><code>values</code>: [Array or Object] Optional array or object of the returned values of the event.<ul>\n<li>Using array: The order of the values put in the array need to match the order in which the values are returned by the event</li>\n<li>Using object: The object needs to have the right key/value pair(s)</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">'asserts that the event was triggered'</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\"> <span class=\"keyword\">const</span> transaction = <span class=\"keyword\">await</span> SimpleStorage.methods.set(<span class=\"number\">100</span>).send();</span><br><span class=\"line\"> assert.eventEmitted(transaction, <span class=\"string\">'EventOnSet'</span>, &#123;<span class=\"attr\">value</span>: <span class=\"string\">\"100\"</span>, <span class=\"attr\">success</span>: <span class=\"literal\">true</span>&#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"increaseTime\"><a href=\"#increaseTime\" class=\"headerlink\" title=\"increaseTime\"></a>increaseTime</h3><p>This function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> increaseTime(amount);</span><br></pre></td></tr></table></figure>\n\n<p><code>amount</code>: [Number] Number of seconds to increase</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should have expired after increasing time\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> increaseTime(<span class=\"number\">5001</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> isExpired = <span class=\"keyword\">await</span> Expiration.methods.isExpired().call();</span><br><span class=\"line\">    assert.strictEqual(isExpired, <span class=\"literal\">true</span>);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Code-coverage\"><a href=\"#Code-coverage\" class=\"headerlink\" title=\"Code coverage\"></a>Code coverage</h2><p>Embark allows you to generate a coverage report for your Solidity Smart Contracts by passing the <code>--coverage</code> option on the <code>embark test</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --coverage</span><br></pre></td></tr></table></figure>\n\n<p>The generated report looks something like this:</p>\n<p><img src=\"/coverage-files.png\" alt=\"Coverage Report: Files\"></p>\n<p>This gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here’s what it looks like:</p>\n<p><img src=\"/coverage-report.png\" alt=\"Coverage Report: Detailed\"></p>\n"},{"title":"Contributing to Embark","layout":"docs","_content":"\nWe would love for you to contribute to Embark  and help make it even better than it is\ntoday! As a contributor, here are the guidelines we would like you to follow:\n\n - [Code of Conduct](#coc)\n - [Question or Problem?](#question)\n - [Issues and Bugs](#issue)\n - [Feature Requests](#feature)\n - [Submission Guidelines](#submit)\n - [Coding Rules](#rules)\n - [Commit Message Guidelines](#commit)\n\n## <a name=\"coc\"></a> Code of Conduct\nHelp us keep Embark open and inclusive. Please read and follow our [Code of Conduct](https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md).\n\n## <a name=\"question\"></a> Got a Question or Problem?\n\nDo not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Exchange](https://ethereum.stackexchange.com/search?tab=newest&q=embark) where the questions should be tagged with tag `embark`.\n\nStack Exchange is a much better place to ask questions since:\n\n- there are thousands of people willing to help\n- questions and answers stay available for public viewing so your question / answer might help someone else\n- Stack Exchange's voting system assures that the best answers are prominently visible.\n\nTo save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.\n\nIf you would like to chat about the question in real-time, you can reach out via [our gitter channel](https://gitter.im/embark-framework/Lobby).\n\n## <a name=\"issue\"></a> Found a Bug?\nIf you find a bug in the source code, you can help us by\n[submitting an issue](#submit-issue) to our [GitHub Repository](https://github.com/embarklabs/embark/). Even better, you can\n[submit a Pull Request](#submit-pr) with a fix.\n\n## <a name=\"feature\"></a> Missing a Feature?\nYou can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub\nRepository. If you would like to *implement* a new feature, please submit an issue with\na proposal for your work first, to be sure that we can use it.\nPlease consider what kind of change it is:\n\n* For a **Major Feature**, first open an issue and outline your proposal so that it can be\ndiscussed. This will also allow us to better coordinate our efforts, prevent duplication of work,\nand help you to craft the change so that it is successfully accepted into the project.\n* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).\n\n## <a name=\"submit\"></a> Submission Guidelines\n\n### <a name=\"submit-issue\"></a> Submitting an Issue\n\nBefore you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.\n\nWe want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.\n\nYou can file new issues by filling out our [new issue form](https://github.com/embarklabs/embark/issues/new/choose).\n\n### <a name=\"submit-pr\"></a> Submitting a Pull Request (PR)\nBefore you submit your Pull Request (PR) consider the following guidelines:\n\n1. Search [GitHub](https://github.com/embarklabs/embark/pulls) for an open or closed PR\n  that relates to your submission. You don't want to duplicate effort.\n1. Fork the embarklabs/embark repo.\n1. Make your changes in a new git branch:\n\n     ```shell\n     git checkout -b my-fix-branch master\n     ```\n\n1. Create your patch, **including appropriate test cases**.\n1. Run the QA suite, by running `$ npm run qa` and ensure that all steps succeed.\n1. Commit your changes using a descriptive commit message that follows our\n  [commit message conventions](#commit). Adherence to these conventions\n  is necessary because release notes are automatically generated from these messages.\n\n     ```shell\n     git commit -a\n     ```\n    Note: the optional commit `-a` command line option will automatically \"add\" and \"rm\" edited files.\n\n1. Push your branch to GitHub:\n\n    ```shell\n    git push origin my-fix-branch\n    ```\n\n1. In GitHub, send a pull request to `embark:master`.\n* If we suggest changes then:\n  * Make the required updates.\n  * Re-run the test suites to ensure tests are still passing.\n  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):\n\n    ```shell\n    git rebase master -i\n    git push -f\n    ```\n\nThat's it! Thank you for your contribution!\n\n#### After your pull request is merged\n\nAfter your pull request is merged, you can safely delete your branch and pull the changes\nfrom the main (upstream) repository:\n\n* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:\n\n    ```shell\n    git push origin --delete my-fix-branch\n    ```\n\n* Check out the master branch:\n\n    ```shell\n    git checkout master -f\n    ```\n\n* Delete the local branch:\n\n    ```shell\n    git branch -D my-fix-branch\n    ```\n\n* Update your master with the latest upstream version:\n\n    ```shell\n    git pull --ff upstream master\n    ```\n\n## <a name=\"rules\"></a> Coding Rules\nTo ensure consistency throughout the source code, keep these rules in mind as you are working:\n\n* All public API methods **must be documented**.\n\n## <a name=\"commit\"></a> Commit Message Guidelines\n\nWe have very precise rules over how our git commit messages can be formatted.  This leads to **more\nreadable messages** that are easy to follow when looking through the **project history**.  But also,\nwe use the git commit messages to **generate the Embark change log**.\n\n### Commit Message Format\nEach commit message consists of a **header**, a **body** and a **footer**.  The header has a special\nformat that includes a **type**, a **scope** and a **subject**:\n\n```\ntype(@embark|@cockpit/<SCOPE>): <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\nThe **header** is mandatory and the **scope** of the header is optional.\n\nAny line of the commit message cannot be longer 100 characters! This allows the message to be easier\nto read on GitHub as well as in various git tools.\n\nThe footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.\n\nSamples:\n\n```\ndocs(changelog): update changelog to beta.5\n```\n```\nfix(release): need to depend on latest rxjs and zone.js\n\nThe version in our package.json gets copied to the one we publish, and users need the latest of these.\n```\n\n### Revert\nIf the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.\n\n### Type\nMust be one of the following:\n\n* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n* **docs**: Documentation only changes\n* **feat**: A new feature\n* **fix**: A bug fix\n* **perf**: A code change that improves performance\n* **refactor**: A code change that neither fixes a bug nor adds a feature\n* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n* **test**: Adding missing tests or correcting existing tests\n\n### Scope\nThe scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.\n\nThe following is the list of supported scopes:\n\n* **@embark/cli** - Embark command line interface\n* **@embark/core** - Embark core\n* **@embark/<`module`>** - Embark core module (any folder name under `packages/embark/src/lib/modules`), ie `@embark/console` or `@embark/debugger`\n* **@embark/<`package`>** - Embark package in the mono repo (any folder name under `packages`), ie `@embark/embarkjs` or `@embark/embark-compiler`\n* **@embark/<`section`>** - Cockpit site section, ie `@cockpit/explorer`\n\nThere are currently a few exceptions to the \"use package name\" rule:\n\n* **packaging**: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.\n* **changelog**: used for updating the release notes in CHANGELOG.md\n* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)\n\n### Subject\nThe subject contains a succinct description of the change:\n\n* use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n* don't capitalize the first letter\n* no dot (.) at the end\n\n### Body\nJust as in the **subject**, use the imperative, present tense: \"change\" not \"changed\" nor \"changes\".\nThe body should include the motivation for the change and contrast this with previous behavior.\n\n### Footer\nThe footer should contain any information about **Breaking Changes** and is also the place to\nreference GitHub issues that this commit **Closes**.\n\n**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.\n\n","source":"docs/contributing.md","raw":"title: Contributing to Embark\nlayout: docs\n---\n\nWe would love for you to contribute to Embark  and help make it even better than it is\ntoday! As a contributor, here are the guidelines we would like you to follow:\n\n - [Code of Conduct](#coc)\n - [Question or Problem?](#question)\n - [Issues and Bugs](#issue)\n - [Feature Requests](#feature)\n - [Submission Guidelines](#submit)\n - [Coding Rules](#rules)\n - [Commit Message Guidelines](#commit)\n\n## <a name=\"coc\"></a> Code of Conduct\nHelp us keep Embark open and inclusive. Please read and follow our [Code of Conduct](https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md).\n\n## <a name=\"question\"></a> Got a Question or Problem?\n\nDo not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Exchange](https://ethereum.stackexchange.com/search?tab=newest&q=embark) where the questions should be tagged with tag `embark`.\n\nStack Exchange is a much better place to ask questions since:\n\n- there are thousands of people willing to help\n- questions and answers stay available for public viewing so your question / answer might help someone else\n- Stack Exchange's voting system assures that the best answers are prominently visible.\n\nTo save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.\n\nIf you would like to chat about the question in real-time, you can reach out via [our gitter channel](https://gitter.im/embark-framework/Lobby).\n\n## <a name=\"issue\"></a> Found a Bug?\nIf you find a bug in the source code, you can help us by\n[submitting an issue](#submit-issue) to our [GitHub Repository](https://github.com/embarklabs/embark/). Even better, you can\n[submit a Pull Request](#submit-pr) with a fix.\n\n## <a name=\"feature\"></a> Missing a Feature?\nYou can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub\nRepository. If you would like to *implement* a new feature, please submit an issue with\na proposal for your work first, to be sure that we can use it.\nPlease consider what kind of change it is:\n\n* For a **Major Feature**, first open an issue and outline your proposal so that it can be\ndiscussed. This will also allow us to better coordinate our efforts, prevent duplication of work,\nand help you to craft the change so that it is successfully accepted into the project.\n* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).\n\n## <a name=\"submit\"></a> Submission Guidelines\n\n### <a name=\"submit-issue\"></a> Submitting an Issue\n\nBefore you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.\n\nWe want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.\n\nYou can file new issues by filling out our [new issue form](https://github.com/embarklabs/embark/issues/new/choose).\n\n### <a name=\"submit-pr\"></a> Submitting a Pull Request (PR)\nBefore you submit your Pull Request (PR) consider the following guidelines:\n\n1. Search [GitHub](https://github.com/embarklabs/embark/pulls) for an open or closed PR\n  that relates to your submission. You don't want to duplicate effort.\n1. Fork the embarklabs/embark repo.\n1. Make your changes in a new git branch:\n\n     ```shell\n     git checkout -b my-fix-branch master\n     ```\n\n1. Create your patch, **including appropriate test cases**.\n1. Run the QA suite, by running `$ npm run qa` and ensure that all steps succeed.\n1. Commit your changes using a descriptive commit message that follows our\n  [commit message conventions](#commit). Adherence to these conventions\n  is necessary because release notes are automatically generated from these messages.\n\n     ```shell\n     git commit -a\n     ```\n    Note: the optional commit `-a` command line option will automatically \"add\" and \"rm\" edited files.\n\n1. Push your branch to GitHub:\n\n    ```shell\n    git push origin my-fix-branch\n    ```\n\n1. In GitHub, send a pull request to `embark:master`.\n* If we suggest changes then:\n  * Make the required updates.\n  * Re-run the test suites to ensure tests are still passing.\n  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):\n\n    ```shell\n    git rebase master -i\n    git push -f\n    ```\n\nThat's it! Thank you for your contribution!\n\n#### After your pull request is merged\n\nAfter your pull request is merged, you can safely delete your branch and pull the changes\nfrom the main (upstream) repository:\n\n* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:\n\n    ```shell\n    git push origin --delete my-fix-branch\n    ```\n\n* Check out the master branch:\n\n    ```shell\n    git checkout master -f\n    ```\n\n* Delete the local branch:\n\n    ```shell\n    git branch -D my-fix-branch\n    ```\n\n* Update your master with the latest upstream version:\n\n    ```shell\n    git pull --ff upstream master\n    ```\n\n## <a name=\"rules\"></a> Coding Rules\nTo ensure consistency throughout the source code, keep these rules in mind as you are working:\n\n* All public API methods **must be documented**.\n\n## <a name=\"commit\"></a> Commit Message Guidelines\n\nWe have very precise rules over how our git commit messages can be formatted.  This leads to **more\nreadable messages** that are easy to follow when looking through the **project history**.  But also,\nwe use the git commit messages to **generate the Embark change log**.\n\n### Commit Message Format\nEach commit message consists of a **header**, a **body** and a **footer**.  The header has a special\nformat that includes a **type**, a **scope** and a **subject**:\n\n```\ntype(@embark|@cockpit/<SCOPE>): <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\nThe **header** is mandatory and the **scope** of the header is optional.\n\nAny line of the commit message cannot be longer 100 characters! This allows the message to be easier\nto read on GitHub as well as in various git tools.\n\nThe footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.\n\nSamples:\n\n```\ndocs(changelog): update changelog to beta.5\n```\n```\nfix(release): need to depend on latest rxjs and zone.js\n\nThe version in our package.json gets copied to the one we publish, and users need the latest of these.\n```\n\n### Revert\nIf the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.\n\n### Type\nMust be one of the following:\n\n* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n* **docs**: Documentation only changes\n* **feat**: A new feature\n* **fix**: A bug fix\n* **perf**: A code change that improves performance\n* **refactor**: A code change that neither fixes a bug nor adds a feature\n* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n* **test**: Adding missing tests or correcting existing tests\n\n### Scope\nThe scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.\n\nThe following is the list of supported scopes:\n\n* **@embark/cli** - Embark command line interface\n* **@embark/core** - Embark core\n* **@embark/<`module`>** - Embark core module (any folder name under `packages/embark/src/lib/modules`), ie `@embark/console` or `@embark/debugger`\n* **@embark/<`package`>** - Embark package in the mono repo (any folder name under `packages`), ie `@embark/embarkjs` or `@embark/embark-compiler`\n* **@embark/<`section`>** - Cockpit site section, ie `@cockpit/explorer`\n\nThere are currently a few exceptions to the \"use package name\" rule:\n\n* **packaging**: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.\n* **changelog**: used for updating the release notes in CHANGELOG.md\n* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)\n\n### Subject\nThe subject contains a succinct description of the change:\n\n* use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n* don't capitalize the first letter\n* no dot (.) at the end\n\n### Body\nJust as in the **subject**, use the imperative, present tense: \"change\" not \"changed\" nor \"changes\".\nThe body should include the motivation for the change and contrast this with previous behavior.\n\n### Footer\nThe footer should contain any information about **Breaking Changes** and is also the place to\nreference GitHub issues that this commit **Closes**.\n\n**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.\n\n","date":"2020-01-19T20:56:53.009Z","updated":"2020-01-19T20:56:53.009Z","path":"docs/contributing.html","_id":"ck5ijm3tx00297hegejua6ytu","comments":1,"content":"<p>We would love for you to contribute to Embark  and help make it even better than it is<br>today! As a contributor, here are the guidelines we would like you to follow:</p>\n<ul>\n<li><a href=\"#coc\">Code of Conduct</a></li>\n<li><a href=\"#question\">Question or Problem?</a></li>\n<li><a href=\"#issue\">Issues and Bugs</a></li>\n<li><a href=\"#feature\">Feature Requests</a></li>\n<li><a href=\"#submit\">Submission Guidelines</a></li>\n<li><a href=\"#rules\">Coding Rules</a></li>\n<li><a href=\"#commit\">Commit Message Guidelines</a></li>\n</ul>\n<h2 id=\"Code-of-Conduct\"><a href=\"#Code-of-Conduct\" class=\"headerlink\" title=\" Code of Conduct\"></a><a name=\"coc\"></a> Code of Conduct</h2><p>Help us keep Embark open and inclusive. Please read and follow our <a href=\"https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md\" target=\"_blank\" rel=\"noopener\">Code of Conduct</a>.</p>\n<h2 id=\"Got-a-Question-or-Problem\"><a href=\"#Got-a-Question-or-Problem\" class=\"headerlink\" title=\" Got a Question or Problem?\"></a><a name=\"question\"></a> Got a Question or Problem?</h2><p>Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You’ve got much better chances of getting your question answered on <a href=\"https://ethereum.stackexchange.com/search?tab=newest&q=embark\" target=\"_blank\" rel=\"noopener\">Stack Exchange</a> where the questions should be tagged with tag <code>embark</code>.</p>\n<p>Stack Exchange is a much better place to ask questions since:</p>\n<ul>\n<li>there are thousands of people willing to help</li>\n<li>questions and answers stay available for public viewing so your question / answer might help someone else</li>\n<li>Stack Exchange’s voting system assures that the best answers are prominently visible.</li>\n</ul>\n<p>To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.</p>\n<p>If you would like to chat about the question in real-time, you can reach out via <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">our gitter channel</a>.</p>\n<h2 id=\"Found-a-Bug\"><a href=\"#Found-a-Bug\" class=\"headerlink\" title=\" Found a Bug?\"></a><a name=\"issue\"></a> Found a Bug?</h2><p>If you find a bug in the source code, you can help us by<br><a href=\"#submit-issue\">submitting an issue</a> to our <a href=\"https://github.com/embarklabs/embark/\" target=\"_blank\" rel=\"noopener\">GitHub Repository</a>. Even better, you can<br><a href=\"#submit-pr\">submit a Pull Request</a> with a fix.</p>\n<h2 id=\"Missing-a-Feature\"><a href=\"#Missing-a-Feature\" class=\"headerlink\" title=\" Missing a Feature?\"></a><a name=\"feature\"></a> Missing a Feature?</h2><p>You can <em>request</em> a new feature by <a href=\"#submit-issue\">submitting an issue</a> to our GitHub<br>Repository. If you would like to <em>implement</em> a new feature, please submit an issue with<br>a proposal for your work first, to be sure that we can use it.<br>Please consider what kind of change it is:</p>\n<ul>\n<li>For a <strong>Major Feature</strong>, first open an issue and outline your proposal so that it can be<br>discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,<br>and help you to craft the change so that it is successfully accepted into the project.</li>\n<li><strong>Small Features</strong> can be crafted and directly <a href=\"#submit-pr\">submitted as a Pull Request</a>.</li>\n</ul>\n<h2 id=\"Submission-Guidelines\"><a href=\"#Submission-Guidelines\" class=\"headerlink\" title=\" Submission Guidelines\"></a><a name=\"submit\"></a> Submission Guidelines</h2><h3 id=\"Submitting-an-Issue\"><a href=\"#Submitting-an-Issue\" class=\"headerlink\" title=\" Submitting an Issue\"></a><a name=\"submit-issue\"></a> Submitting an Issue</h3><p>Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.</p>\n<p>We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.</p>\n<p>You can file new issues by filling out our <a href=\"https://github.com/embarklabs/embark/issues/new/choose\" target=\"_blank\" rel=\"noopener\">new issue form</a>.</p>\n<h3 id=\"Submitting-a-Pull-Request-PR\"><a href=\"#Submitting-a-Pull-Request-PR\" class=\"headerlink\" title=\" Submitting a Pull Request (PR)\"></a><a name=\"submit-pr\"></a> Submitting a Pull Request (PR)</h3><p>Before you submit your Pull Request (PR) consider the following guidelines:</p>\n<ol>\n<li><p>Search <a href=\"https://github.com/embarklabs/embark/pulls\" target=\"_blank\" rel=\"noopener\">GitHub</a> for an open or closed PR<br>that relates to your submission. You don’t want to duplicate effort.</p>\n</li>\n<li><p>Fork the embarklabs/embark repo.</p>\n</li>\n<li><p>Make your changes in a new git branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout -b my-fix-branch master</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Create your patch, <strong>including appropriate test cases</strong>.</p>\n</li>\n<li><p>Run the QA suite, by running <code>$ npm run qa</code> and ensure that all steps succeed.</p>\n</li>\n<li><p>Commit your changes using a descriptive commit message that follows our<br><a href=\"#commit\">commit message conventions</a>. Adherence to these conventions<br>is necessary because release notes are automatically generated from these messages.</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit -a</span><br></pre></td></tr></table></figure>\n<p> Note: the optional commit <code>-a</code> command line option will automatically “add” and “rm” edited files.</p>\n</li>\n<li><p>Push your branch to GitHub:</p>\n <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>In GitHub, send a pull request to <code>embark:master</code>.</p>\n</li>\n</ol>\n<ul>\n<li><p>If we suggest changes then:</p>\n<ul>\n<li><p>Make the required updates.</p>\n</li>\n<li><p>Re-run the test suites to ensure tests are still passing.</p>\n</li>\n<li><p>Rebase your branch and force push to your GitHub repository (this will update your Pull Request):</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git rebase master -i</span><br><span class=\"line\">git push -f</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n</li>\n</ul>\n<p>That’s it! Thank you for your contribution!</p>\n<h4 id=\"After-your-pull-request-is-merged\"><a href=\"#After-your-pull-request-is-merged\" class=\"headerlink\" title=\"After your pull request is merged\"></a>After your pull request is merged</h4><p>After your pull request is merged, you can safely delete your branch and pull the changes<br>from the main (upstream) repository:</p>\n<ul>\n<li><p>Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin --delete my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Check out the master branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout master -f</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Delete the local branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch -D my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Update your master with the latest upstream version:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git pull --ff upstream master</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n<h2 id=\"Coding-Rules\"><a href=\"#Coding-Rules\" class=\"headerlink\" title=\" Coding Rules\"></a><a name=\"rules\"></a> Coding Rules</h2><p>To ensure consistency throughout the source code, keep these rules in mind as you are working:</p>\n<ul>\n<li>All public API methods <strong>must be documented</strong>.</li>\n</ul>\n<h2 id=\"Commit-Message-Guidelines\"><a href=\"#Commit-Message-Guidelines\" class=\"headerlink\" title=\" Commit Message Guidelines\"></a><a name=\"commit\"></a> Commit Message Guidelines</h2><p>We have very precise rules over how our git commit messages can be formatted.  This leads to <strong>more<br>readable messages</strong> that are easy to follow when looking through the <strong>project history</strong>.  But also,<br>we use the git commit messages to <strong>generate the Embark change log</strong>.</p>\n<h3 id=\"Commit-Message-Format\"><a href=\"#Commit-Message-Format\" class=\"headerlink\" title=\"Commit Message Format\"></a>Commit Message Format</h3><p>Each commit message consists of a <strong>header</strong>, a <strong>body</strong> and a <strong>footer</strong>.  The header has a special<br>format that includes a <strong>type</strong>, a <strong>scope</strong> and a <strong>subject</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">type(@embark|@cockpit&#x2F;&lt;SCOPE&gt;): &lt;subject&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;footer&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The <strong>header</strong> is mandatory and the <strong>scope</strong> of the header is optional.</p>\n<p>Any line of the commit message cannot be longer 100 characters! This allows the message to be easier<br>to read on GitHub as well as in various git tools.</p>\n<p>The footer should contain a <a href=\"https://help.github.com/articles/closing-issues-via-commit-messages/\" target=\"_blank\" rel=\"noopener\">closing reference to an issue</a> if any.</p>\n<p>Samples:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">docs(changelog): update changelog to beta.5</span><br></pre></td></tr></table></figure>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">fix(release): need to depend on latest rxjs and zone.js</span><br><span class=\"line\"></span><br><span class=\"line\">The version in our package.json gets copied to the one we publish, and users need the latest of these.</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Revert\"><a href=\"#Revert\" class=\"headerlink\" title=\"Revert\"></a>Revert</h3><p>If the commit reverts a previous commit, it should begin with <code>revert:</code>, followed by the header of the reverted commit. In the body it should say: <code>This reverts commit &lt;hash&gt;.</code>, where the hash is the SHA of the commit being reverted.</p>\n<h3 id=\"Type\"><a href=\"#Type\" class=\"headerlink\" title=\"Type\"></a>Type</h3><p>Must be one of the following:</p>\n<ul>\n<li><strong>build</strong>: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)</li>\n<li><strong>ci</strong>: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)</li>\n<li><strong>docs</strong>: Documentation only changes</li>\n<li><strong>feat</strong>: A new feature</li>\n<li><strong>fix</strong>: A bug fix</li>\n<li><strong>perf</strong>: A code change that improves performance</li>\n<li><strong>refactor</strong>: A code change that neither fixes a bug nor adds a feature</li>\n<li><strong>style</strong>: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)</li>\n<li><strong>test</strong>: Adding missing tests or correcting existing tests</li>\n</ul>\n<h3 id=\"Scope\"><a href=\"#Scope\" class=\"headerlink\" title=\"Scope\"></a>Scope</h3><p>The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.</p>\n<p>The following is the list of supported scopes:</p>\n<ul>\n<li><strong>@embark/cli</strong> - Embark command line interface</li>\n<li><strong>@embark/core</strong> - Embark core</li>\n<li><strong>@embark/&lt;<code>module</code>&gt;</strong> - Embark core module (any folder name under <code>packages/embark/src/lib/modules</code>), ie <code>@embark/console</code> or <code>@embark/debugger</code></li>\n<li><strong>@embark/&lt;<code>package</code>&gt;</strong> - Embark package in the mono repo (any folder name under <code>packages</code>), ie <code>@embark/embarkjs</code> or <code>@embark/embark-compiler</code></li>\n<li><strong>@embark/&lt;<code>section</code>&gt;</strong> - Cockpit site section, ie <code>@cockpit/explorer</code></li>\n</ul>\n<p>There are currently a few exceptions to the “use package name” rule:</p>\n<ul>\n<li><strong>packaging</strong>: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.</li>\n<li><strong>changelog</strong>: used for updating the release notes in CHANGELOG.md</li>\n<li>none/empty string: useful for <code>style</code>, <code>test</code> and <code>refactor</code> changes that are done across all packages (e.g. <code>style: add missing semicolons</code>)</li>\n</ul>\n<h3 id=\"Subject\"><a href=\"#Subject\" class=\"headerlink\" title=\"Subject\"></a>Subject</h3><p>The subject contains a succinct description of the change:</p>\n<ul>\n<li>use the imperative, present tense: “change” not “changed” nor “changes”</li>\n<li>don’t capitalize the first letter</li>\n<li>no dot (.) at the end</li>\n</ul>\n<h3 id=\"Body\"><a href=\"#Body\" class=\"headerlink\" title=\"Body\"></a>Body</h3><p>Just as in the <strong>subject</strong>, use the imperative, present tense: “change” not “changed” nor “changes”.<br>The body should include the motivation for the change and contrast this with previous behavior.</p>\n<h3 id=\"Footer\"><a href=\"#Footer\" class=\"headerlink\" title=\"Footer\"></a>Footer</h3><p>The footer should contain any information about <strong>Breaking Changes</strong> and is also the place to<br>reference GitHub issues that this commit <strong>Closes</strong>.</p>\n<p><strong>Breaking Changes</strong> should start with the word <code>BREAKING CHANGE:</code> with a space or two newlines. The rest of the commit message is then used for this.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>We would love for you to contribute to Embark  and help make it even better than it is<br>today! As a contributor, here are the guidelines we would like you to follow:</p>\n<ul>\n<li><a href=\"#coc\">Code of Conduct</a></li>\n<li><a href=\"#question\">Question or Problem?</a></li>\n<li><a href=\"#issue\">Issues and Bugs</a></li>\n<li><a href=\"#feature\">Feature Requests</a></li>\n<li><a href=\"#submit\">Submission Guidelines</a></li>\n<li><a href=\"#rules\">Coding Rules</a></li>\n<li><a href=\"#commit\">Commit Message Guidelines</a></li>\n</ul>\n<h2 id=\"Code-of-Conduct\"><a href=\"#Code-of-Conduct\" class=\"headerlink\" title=\" Code of Conduct\"></a><a name=\"coc\"></a> Code of Conduct</h2><p>Help us keep Embark open and inclusive. Please read and follow our <a href=\"https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md\" target=\"_blank\" rel=\"noopener\">Code of Conduct</a>.</p>\n<h2 id=\"Got-a-Question-or-Problem\"><a href=\"#Got-a-Question-or-Problem\" class=\"headerlink\" title=\" Got a Question or Problem?\"></a><a name=\"question\"></a> Got a Question or Problem?</h2><p>Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You’ve got much better chances of getting your question answered on <a href=\"https://ethereum.stackexchange.com/search?tab=newest&q=embark\" target=\"_blank\" rel=\"noopener\">Stack Exchange</a> where the questions should be tagged with tag <code>embark</code>.</p>\n<p>Stack Exchange is a much better place to ask questions since:</p>\n<ul>\n<li>there are thousands of people willing to help</li>\n<li>questions and answers stay available for public viewing so your question / answer might help someone else</li>\n<li>Stack Exchange’s voting system assures that the best answers are prominently visible.</li>\n</ul>\n<p>To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.</p>\n<p>If you would like to chat about the question in real-time, you can reach out via <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">our gitter channel</a>.</p>\n<h2 id=\"Found-a-Bug\"><a href=\"#Found-a-Bug\" class=\"headerlink\" title=\" Found a Bug?\"></a><a name=\"issue\"></a> Found a Bug?</h2><p>If you find a bug in the source code, you can help us by<br><a href=\"#submit-issue\">submitting an issue</a> to our <a href=\"https://github.com/embarklabs/embark/\" target=\"_blank\" rel=\"noopener\">GitHub Repository</a>. Even better, you can<br><a href=\"#submit-pr\">submit a Pull Request</a> with a fix.</p>\n<h2 id=\"Missing-a-Feature\"><a href=\"#Missing-a-Feature\" class=\"headerlink\" title=\" Missing a Feature?\"></a><a name=\"feature\"></a> Missing a Feature?</h2><p>You can <em>request</em> a new feature by <a href=\"#submit-issue\">submitting an issue</a> to our GitHub<br>Repository. If you would like to <em>implement</em> a new feature, please submit an issue with<br>a proposal for your work first, to be sure that we can use it.<br>Please consider what kind of change it is:</p>\n<ul>\n<li>For a <strong>Major Feature</strong>, first open an issue and outline your proposal so that it can be<br>discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,<br>and help you to craft the change so that it is successfully accepted into the project.</li>\n<li><strong>Small Features</strong> can be crafted and directly <a href=\"#submit-pr\">submitted as a Pull Request</a>.</li>\n</ul>\n<h2 id=\"Submission-Guidelines\"><a href=\"#Submission-Guidelines\" class=\"headerlink\" title=\" Submission Guidelines\"></a><a name=\"submit\"></a> Submission Guidelines</h2><h3 id=\"Submitting-an-Issue\"><a href=\"#Submitting-an-Issue\" class=\"headerlink\" title=\" Submitting an Issue\"></a><a name=\"submit-issue\"></a> Submitting an Issue</h3><p>Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.</p>\n<p>We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.</p>\n<p>You can file new issues by filling out our <a href=\"https://github.com/embarklabs/embark/issues/new/choose\" target=\"_blank\" rel=\"noopener\">new issue form</a>.</p>\n<h3 id=\"Submitting-a-Pull-Request-PR\"><a href=\"#Submitting-a-Pull-Request-PR\" class=\"headerlink\" title=\" Submitting a Pull Request (PR)\"></a><a name=\"submit-pr\"></a> Submitting a Pull Request (PR)</h3><p>Before you submit your Pull Request (PR) consider the following guidelines:</p>\n<ol>\n<li><p>Search <a href=\"https://github.com/embarklabs/embark/pulls\" target=\"_blank\" rel=\"noopener\">GitHub</a> for an open or closed PR<br>that relates to your submission. You don’t want to duplicate effort.</p>\n</li>\n<li><p>Fork the embarklabs/embark repo.</p>\n</li>\n<li><p>Make your changes in a new git branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout -b my-fix-branch master</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Create your patch, <strong>including appropriate test cases</strong>.</p>\n</li>\n<li><p>Run the QA suite, by running <code>$ npm run qa</code> and ensure that all steps succeed.</p>\n</li>\n<li><p>Commit your changes using a descriptive commit message that follows our<br><a href=\"#commit\">commit message conventions</a>. Adherence to these conventions<br>is necessary because release notes are automatically generated from these messages.</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit -a</span><br></pre></td></tr></table></figure>\n<p> Note: the optional commit <code>-a</code> command line option will automatically “add” and “rm” edited files.</p>\n</li>\n<li><p>Push your branch to GitHub:</p>\n <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>In GitHub, send a pull request to <code>embark:master</code>.</p>\n</li>\n</ol>\n<ul>\n<li><p>If we suggest changes then:</p>\n<ul>\n<li><p>Make the required updates.</p>\n</li>\n<li><p>Re-run the test suites to ensure tests are still passing.</p>\n</li>\n<li><p>Rebase your branch and force push to your GitHub repository (this will update your Pull Request):</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git rebase master -i</span><br><span class=\"line\">git push -f</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n</li>\n</ul>\n<p>That’s it! Thank you for your contribution!</p>\n<h4 id=\"After-your-pull-request-is-merged\"><a href=\"#After-your-pull-request-is-merged\" class=\"headerlink\" title=\"After your pull request is merged\"></a>After your pull request is merged</h4><p>After your pull request is merged, you can safely delete your branch and pull the changes<br>from the main (upstream) repository:</p>\n<ul>\n<li><p>Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin --delete my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Check out the master branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout master -f</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Delete the local branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch -D my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Update your master with the latest upstream version:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git pull --ff upstream master</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n<h2 id=\"Coding-Rules\"><a href=\"#Coding-Rules\" class=\"headerlink\" title=\" Coding Rules\"></a><a name=\"rules\"></a> Coding Rules</h2><p>To ensure consistency throughout the source code, keep these rules in mind as you are working:</p>\n<ul>\n<li>All public API methods <strong>must be documented</strong>.</li>\n</ul>\n<h2 id=\"Commit-Message-Guidelines\"><a href=\"#Commit-Message-Guidelines\" class=\"headerlink\" title=\" Commit Message Guidelines\"></a><a name=\"commit\"></a> Commit Message Guidelines</h2><p>We have very precise rules over how our git commit messages can be formatted.  This leads to <strong>more<br>readable messages</strong> that are easy to follow when looking through the <strong>project history</strong>.  But also,<br>we use the git commit messages to <strong>generate the Embark change log</strong>.</p>\n<h3 id=\"Commit-Message-Format\"><a href=\"#Commit-Message-Format\" class=\"headerlink\" title=\"Commit Message Format\"></a>Commit Message Format</h3><p>Each commit message consists of a <strong>header</strong>, a <strong>body</strong> and a <strong>footer</strong>.  The header has a special<br>format that includes a <strong>type</strong>, a <strong>scope</strong> and a <strong>subject</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">type(@embark|@cockpit&#x2F;&lt;SCOPE&gt;): &lt;subject&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;footer&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The <strong>header</strong> is mandatory and the <strong>scope</strong> of the header is optional.</p>\n<p>Any line of the commit message cannot be longer 100 characters! This allows the message to be easier<br>to read on GitHub as well as in various git tools.</p>\n<p>The footer should contain a <a href=\"https://help.github.com/articles/closing-issues-via-commit-messages/\" target=\"_blank\" rel=\"noopener\">closing reference to an issue</a> if any.</p>\n<p>Samples:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">docs(changelog): update changelog to beta.5</span><br></pre></td></tr></table></figure>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">fix(release): need to depend on latest rxjs and zone.js</span><br><span class=\"line\"></span><br><span class=\"line\">The version in our package.json gets copied to the one we publish, and users need the latest of these.</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Revert\"><a href=\"#Revert\" class=\"headerlink\" title=\"Revert\"></a>Revert</h3><p>If the commit reverts a previous commit, it should begin with <code>revert:</code>, followed by the header of the reverted commit. In the body it should say: <code>This reverts commit &lt;hash&gt;.</code>, where the hash is the SHA of the commit being reverted.</p>\n<h3 id=\"Type\"><a href=\"#Type\" class=\"headerlink\" title=\"Type\"></a>Type</h3><p>Must be one of the following:</p>\n<ul>\n<li><strong>build</strong>: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)</li>\n<li><strong>ci</strong>: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)</li>\n<li><strong>docs</strong>: Documentation only changes</li>\n<li><strong>feat</strong>: A new feature</li>\n<li><strong>fix</strong>: A bug fix</li>\n<li><strong>perf</strong>: A code change that improves performance</li>\n<li><strong>refactor</strong>: A code change that neither fixes a bug nor adds a feature</li>\n<li><strong>style</strong>: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)</li>\n<li><strong>test</strong>: Adding missing tests or correcting existing tests</li>\n</ul>\n<h3 id=\"Scope\"><a href=\"#Scope\" class=\"headerlink\" title=\"Scope\"></a>Scope</h3><p>The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.</p>\n<p>The following is the list of supported scopes:</p>\n<ul>\n<li><strong>@embark/cli</strong> - Embark command line interface</li>\n<li><strong>@embark/core</strong> - Embark core</li>\n<li><strong>@embark/&lt;<code>module</code>&gt;</strong> - Embark core module (any folder name under <code>packages/embark/src/lib/modules</code>), ie <code>@embark/console</code> or <code>@embark/debugger</code></li>\n<li><strong>@embark/&lt;<code>package</code>&gt;</strong> - Embark package in the mono repo (any folder name under <code>packages</code>), ie <code>@embark/embarkjs</code> or <code>@embark/embark-compiler</code></li>\n<li><strong>@embark/&lt;<code>section</code>&gt;</strong> - Cockpit site section, ie <code>@cockpit/explorer</code></li>\n</ul>\n<p>There are currently a few exceptions to the “use package name” rule:</p>\n<ul>\n<li><strong>packaging</strong>: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.</li>\n<li><strong>changelog</strong>: used for updating the release notes in CHANGELOG.md</li>\n<li>none/empty string: useful for <code>style</code>, <code>test</code> and <code>refactor</code> changes that are done across all packages (e.g. <code>style: add missing semicolons</code>)</li>\n</ul>\n<h3 id=\"Subject\"><a href=\"#Subject\" class=\"headerlink\" title=\"Subject\"></a>Subject</h3><p>The subject contains a succinct description of the change:</p>\n<ul>\n<li>use the imperative, present tense: “change” not “changed” nor “changes”</li>\n<li>don’t capitalize the first letter</li>\n<li>no dot (.) at the end</li>\n</ul>\n<h3 id=\"Body\"><a href=\"#Body\" class=\"headerlink\" title=\"Body\"></a>Body</h3><p>Just as in the <strong>subject</strong>, use the imperative, present tense: “change” not “changed” nor “changes”.<br>The body should include the motivation for the change and contrast this with previous behavior.</p>\n<h3 id=\"Footer\"><a href=\"#Footer\" class=\"headerlink\" title=\"Footer\"></a>Footer</h3><p>The footer should contain any information about <strong>Breaking Changes</strong> and is also the place to<br>reference GitHub issues that this commit <strong>Closes</strong>.</p>\n<p><strong>Breaking Changes</strong> should start with the word <code>BREAKING CHANGE:</code> with a space or two newlines. The rest of the commit message is then used for this.</p>\n"},{"title":"Configuring Smart Contracts","layout":"docs","_content":"\nAs many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That's why Embark offers a declarative approach to define what Smart Contracts we're interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.\n\n## Basic Smart Contract Configuration\n\nUnless specified differently in our application's `embark.json`, Smart Contracts are configured either in the `config/contracts.js` file, or, if we're dealing with a [Smart Contract only app](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), the `./contracts.js` file in the root of our project.\n\nA Smart Contract configuration is placed in an environment's `deploy` property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the `SimpleStorage` contract in the `development` environment:\n\n```\nmodule.exports = {\n  ...\n  development: {\n    ...\n    deploy: {\n      SimpleStorage: {\n        ...\n      }\n    }\n  }\n  ...\n}\n```\n\nSmart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our [guide on environments](environments.html) to learn more about this.\n\n### Configuring constructor parameters\n\nOften, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract's constructor parameters using the `args` property. `args` is either a list of values, which will be applied to the Smart Contract's constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n}\n...\n```\n\nThe following configuration configures the `SimpleStorage`'s `initialValue` parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn't matter anymore:\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: {\n        initialValue: 100\n      }\n    }\n  }\n}\n...\n```\n\n### Configuring gas and gas price\n\nBoth, `gas` and `gasPrice` can be configured for each Smart Contract. If we don't want to configure that for every single contract, we can also specify `gas: auto` in the environment, like this:\n\n```\n...\ndevelopment: {\n  gas: 'auto',\n  deploy: {\n    SimpleStorage: {\n      args: [100],\n      gas: 800000,\n      gasPrice: 5\n    }\n  }\n}\n...\n```\n\nAnother cool feature of Embark is that it supports human readable ether units, to improve the developer experience.\n\n{% notification info 'Human readable ether units' %}\n\nEmbark supports **human readable ether units** in places where ether unit values are required. [Read here](#Human-readable-Ether-units) for more information.\n{% endnotification %}\n\n## Configuring Smart Contract Dependencies\n\nWhen building more complex applications, it's very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.\n\nAll we have to do is specifying the name of the Smart Contract we're interested in, prefixed with a \"$\". Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all `$CONTRACT_NAME`'s with their corresponding addresses. Assuming `SimpleStorage` depends on `OtherContract`, this can be easily configured like this:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100, '$OtherContract']\n  },\n  OtherContract: {...}\n}\n...\n```\n\n## Disabling deployment\n\nSometimes we want to configure different behaviour for certain contracts within different [environments](environments.html). One of those cases could be that we don't actually want to deploy `SimpleStorage` in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.\n\nWe can prevent Embark from deploying any of our Smart Contracts by using the `deploy` configuration and setting it to `false` like this:\n\n```\n...\ndevelopment:\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n},\nproduction: {\n  deploy: {\n    SimpleStorage: {\n      deploy: false\n    }\n  }\n}\n...\n```\n\n## Deployment strategies\n\nIn order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called \"deployment strategies\". Deployment strategies tell Embark whether it should deploy all of the user's Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.\n\nThere are two possible strategy options:\n\n- **implicit** - This is the default. Using the `implicit` strategy, Embark tries to deploy all Smart Contracts configured in the `deploy` configuration, including its (3rd-party) dependencies.\n- **explicit** - Setting this option to `explicit` tells Embark to deploy the Smart Contracts specified in the `deploy` configuration without their dependencies. This can be combined with [disabling deployment](#Disabling-deployment) of individual Smart Contracts for fine control.\n\n```\nstrategy: 'explicit' // 'implicit' is the default\ndeploy: {\n  ...\n}\n```\n\n\n## Deploying multiple instances\n\nIn cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the `instanceOf` property and refer to the original Smart Contract that should be deployed multiple times.\n\nThis can then be combined with [disabling the deployment](#Disabling-deployment) of the original Smart Contract like this:\n\n```\n...\ndeploy: {\n  Currency: {\n    deploy: false,\n  },\n  Usd: {\n    instanceOf: 'Currency',\n    args: [200]\n  },\n  MyCoin: {\n    instanceOf: 'Currency',\n    args: [300]\n  }\n}\n...\n```\n\nIn the example above, we deploy `Usd` and `MyCoin` as instances of `Currency`. Notice that `Currency` itself isn't going to be deployed but merely functions as a \"recipe\" to create other instances of it.\n\n## Referencing already deployed Smart Contracts\n\nEmbark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the `address` of the instance in question.\n\nThe following example configures `UserStorage` to be a Smart Contract instance that's already deployed:\n\n```\n...\ndeploy: {\n  UserStorage: {\n    address: '0x123456'\n  }\n}\n...\n```\n\n## Using accounts in arguments\n\nAccounts can be used as arguments using Embark's built-in interpolation syntax, similar to referring to Smart Contract instances.\n\n```\nmodule.exports = {\n  development: {\n    deploy: {\n      MyContractThatNeedsAccountAddresses: {\n        args: ['$accounts[0]', '$accounts[4]']\n      }\n    }\n  }\n}\n```\n\n## Dynamic Addresses\n\nThere are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as `address`, which returns the address we're interested in. Usually, other Smart Contract instances are needed to perform that computation, so the [`deps` configuration](#Deployment-hooks) comes in handy as well:\n\n```\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n  },\n  OtherContract: {\n    deps: ['SimpleStorage'],\n    address: async (deps) => {\n      // use `deps.contracts.SimpleStorage` to determine and return address\n    },\n    abiDefinition: ABI\n  },\n}\n```\n\nIn the example above, `OtherContract` will be deployed after `SimpleStorage` because it uses the `deps` property to define Smart Contracts that it depends on. All dependencies are exposed on the `address` function parameter similar to [deployment hooks](#Deployment-hooks). Also, notice that the `abiDefinition` is only needed if the Smart Contracts bytecode isn't already on disk.\n\n\n## Configuring source files\n\nBy default Embark will look for Smart Contracts inside the folder that's configured in the application's [embark.json](configuration.html#contracts), the default being the `contracts` folder. However, if we want to change the location to look for a single Smart Contract's source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the `file` property.\n\n`file` specifies a full path to a file that contains the source code for the Smart Contract in question.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    file: './some_folder/simple_storage.sol',\n    args: [100]\n  }\n}\n...\n```\n\nIf Embark doesn't find the file in the specified path, it'll expect it to be a path inside installed `node_modules` dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:\n\n```\n...\ndeploy: {\n  ERC20: {\n    file: 'openzeppelin-solidity/contracts/token/ERC20/ERC20.sol'\n  }\n}\n...\n```\n\nEmbark even supports reading the source from `https`, `git`, `ipfs` and `bzz` URIs, enabling us to compile Solidity Smart Contracts that aren't even located in our local machine.\n\n```\n...\ndeploy: {\n  ERC725: {\n    file: 'git://github.com/status/contracts/contracts/identity/ERC725.sol#develop'\n  },\n  ERC725: {\n    file: 'github.com/status/contracts/contracts/identity/ERC725.sol'\n  },\n  Ownable: {\n    file: 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol'\n  }\n}\n...\n```\n\n## Providing ABIs\n\nIn order to use Smart Contract instances created by web3 either in [deployment hooks](Deployment-hooks) or in [Embark's JavaScript client](contracts_javascript.html), Embark needs to get hold of the Smart Contracts' ABIs and pass those on to web3.\n\nThis is not a problem when dealing with Smart Contracts that we own, or at least have [access to their sources](#Configuring-source-files) so we Embark can compile them accordingly. However, if we don't have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the `abiDefinition` property, so Embark can make use of that.\n\nThe following example configures `SimpleStorage` to be already deployed somewhere, but we'd still like to use the web3 instance in our `afterDeploy` hook.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    address: '0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9',\n    abiDefinition: [...]\n  }\n},\nafterDeploy: async (deps) => {\n  const value = await deps.contracts.SimpleStorage.methods.get().call();\n  console.log(value);\n}\n...\n```\n\n`afterDeploy` and other deployment hooks are covered in [Deployment Hooks](#Deployment-hooks).\n\n## Providing Artifacts\n\nSimilar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.\n\nThat way, you don't need to have the contract on disk or even deploy it, if the address is specified in it.\n\nHere is how you can do it:\n\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n## Deployment tracking\n\nEmbark's Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don't have to worry about keeping track of it. The way this works is that, by default, Embark creates a file `./.embark/chains.json` in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:\n\n```\n{\n  BLOCK_HASH {\n    \"contracts\": {\n      HASH(NAME, BYTECODE, ARGS, ADDRESS): {\n        \"name\": NAME,\n        \"address: ADDRESS\n      }\n    }\n  }\n}\n```\n\nWith concrete data, the contents of `chains.json` could look something like this:\n\n```\n{\n  \"0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a\": {\n    \"contracts\": {\n      \"0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be\": {\n        \"name\": \"ENSRegistry\",\n        \"address\": \"0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528\"\n      },\n      \"0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93\": {\n        \"name\": \"Resolver\",\n        \"address\": \"0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f\"\n      },\n      \"0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334\": {\n        \"name\": \"FIFSRegistrar\",\n        \"address\": \"0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E\"\n      },\n      \"0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b\": {\n        \"name\": \"SimpleStorage\",\n        \"address\": \"0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E\"\n      }\n    }\n  }\n}\n```\n\n### Disabling tracking\n\nIf we prefer to have full control over the deployment process and don't want Embark to keep track of individual Smart Contract deployments, we use the `track` configuration and set it `false`.\n\nThe following example ensures `ERC20` won't be tracked and therefore redeployed in every deployment cycle.\n\n```\n...\ndeploy: {\n  ERC20: {\n    track: false\n  }\n}\n...\n```\n\n### Specifying a tracking file\n\nIn addition to enabling and disabling tracking, it's also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don't want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.\n\n```\n...\ntracking: 'path/to/some/file'\n...\n```\n\nHaving the file referenced above under version control ensures that other users of our project don't redeploy the Smart Contracts on different platforms.\n\n\n### Reducing contract size\n\nTo reduce the size of the contract JSON files that are included in the build directory, you can set `minimalContractSize` to `true`. It defaults to `false`.\nWhen set to `true`, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.\n\n```\nminimalContractSize: true,\n```\n\nYou can also have more control over the filtering by adding a `filteredFields` array. In the array, you can add the name of the fields you want to filter out.\nThis is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.\nNote that you need to have `minimalContractSize` set to `true`.\n\n```\nminimalContractSize: true,\nfilteredFields: ['runtimeBytecode', 'realRuntimeBytecode'] // This will filter out only runtimeBytecode and realRuntimeBytecode\n```\n\n\n## Deployment hooks\n\nSometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we'd even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks `beforeDeploy`, `deployIf`, `onDeploy` and `afterDeploy`.\n\nDeployment hooks have access to a `dependencies` object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the `deps` property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current `web3` instance and a `logger` instance as shown in the examples below.\n\n### Conditional Deployment with `deployIf`\n\nWe can specify a condition that decides whether a contract should be deployed by using the `deployIf` hook. `deployIf` is a function that either returns a promise or is created using `async/await` syntax and has to resolve to a boolean value. If the resolve value is `true`, the Smart Contract in question will be deployed. If it's `false`, Embark will skip deploying the Smart Contract in question.\n\n```\n...\ndeploy: {\n  ERC20: {\n    deployIf: async (dependencies) => {\n      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();\n    },\n    deps: ['Manager']\n  },\n  Manager: {...}\n}\n...\n```\n\nNotice how `dependencies.contracts` gives access to the `Manager` contract instance. This however, is only possible because `Manager` has been defined as dependency of `ERC20` using the `deps` property. If we're using a Node version that doesn't support async/await, the same can be achieved using promises like this (web3 APIs already return promises):\n\n```\n...\nERC20: {\n  deployIf: (dependencies) => {\n    return dependencies.contracts.Manager.methods.isUpdateApproved().call();\n  },\n  deps: ['Manager']\n},\n...\n```\n\n### `beforeDeploy` hook\n\n`beforeDeploy` is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the [afterDeploy](#afterDeploy-hook) and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures `beforeDeploy` just for `SimpleStorage`:\n\n```\nSimpleStorage: {\n  beforeDeploy: async () => {\n    console.log('before deploying SimpleStorage');\n  }\n}\n```\n\nWheras this configuration here runs the hook before all Smart Contracts are being deployed:\n\n```\ndeploy: {\n  SimpleStorage: { ... }\n  beforeDeploy: async () => {\n    console.log('Before all deploy');\n  }\n}\n```\n\n### `onDeploy` hook\n\nWe can specify the `onDeploy` hook to execute code, right after a contract has been deployed. Just like `deployIf` and `afterDeploy`, `onDeploy` is a function that has access to the Smart Contract's dependencies defined in its `deps` property. The following example executes `SimpleStorage`'s `set()` method, once deployed.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    onDeploy: async (dependencies) => {\n      await dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n    }\n  }\n}\n...\n```\n\nTo actually `send` transactions and not just make `call`s, you will probably need to provide a `from` account. You can use the `web3` instance inside `dependencies` to get the `defaultAccount` as above.\n\nAlso, as mentioned above, every deployment hook works with plain promises as well:\n\n```\n...\nSimpleStorage: {\n  args: [100],\n  onDeploy: (dependencies) => {\n    return dependencies.contracts.SimpleStorage.methods.set(150).send();\n  }\n}\n...\n```\n\n### `afterDeploy` hook\n\nIf we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the `afterDeploy` hook. The same rules apply here. `afterDeploy` has access to all deployed contract instances through the `dependencies` object.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100]\n  },\n},\nafterDeploy: (dependencies) => {\n  dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n}\n...\n```\n\n### Error Handling\n\nSince we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:\n\n```\nonDeploy: async (dependencies) => {\n  try {\n    await dependencies.contracts.SimpleStorage.methods.set(85).send({from: dependencies.web3.eth.defaultAccount});\n  } catch (e) {\n    console.error('Error during onDeploy', e);\n  }\n}\n```\n\n{% notification info 'A note on deployment hook string syntax' %}\nIn older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don't support functions.\n\nThe examples above can be therefore written as:\n\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\nThis string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n\n### Logging with context\n\nOften we use log statements to either debug code or simply to output what's going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don't drown in the rest of Embark's output, we can use the injected `logger` which prefixes every log message with a context indicator.\n\nFor example, when logging something from within an `onDeploy` hook of a Smart Contract, the output will look like this:\n\n```\nSmartContractName > onDeploy > [YOUR MESSAGE]\n```\n\nThe `logger` is injected as part of the `dependencies` object, so we can use it like this:\n\n```\ndeploy: {\n  SimpleStorage: {\n    onDeploy: async (dependencies) => {\n      dependencies.logger.info('Hello from onDeploy!');\n    }\n  }\n}\n```\n\nWhich will result in\n\n```\nSimpleStorage > onDeploy > Hello from onDeploy!\n```\n\n## Human readable Ether units\n\nEmbark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as `wei`, `kwei`, `Kwei`, `shannon`, `finney`, ... etc.\n\nLet's take the simple Smart Contract configuration from the [configuring gas and gas price](#Configuring-gas-and-gas-price) section:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: 800000,\n    gasPrice: 5\n  }\n}\n...\n```\n\nThis can as well be written as:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: '800 Kwei',\n    gasPrice: 5\n  }\n}\n...\n```\n\nEmbark will take care of converting those units to their dedicated Wei values.\n","source":"docs/contracts_configuration.md","raw":"title: Configuring Smart Contracts\nlayout: docs\n---\n\nAs many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That's why Embark offers a declarative approach to define what Smart Contracts we're interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.\n\n## Basic Smart Contract Configuration\n\nUnless specified differently in our application's `embark.json`, Smart Contracts are configured either in the `config/contracts.js` file, or, if we're dealing with a [Smart Contract only app](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), the `./contracts.js` file in the root of our project.\n\nA Smart Contract configuration is placed in an environment's `deploy` property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the `SimpleStorage` contract in the `development` environment:\n\n```\nmodule.exports = {\n  ...\n  development: {\n    ...\n    deploy: {\n      SimpleStorage: {\n        ...\n      }\n    }\n  }\n  ...\n}\n```\n\nSmart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our [guide on environments](environments.html) to learn more about this.\n\n### Configuring constructor parameters\n\nOften, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract's constructor parameters using the `args` property. `args` is either a list of values, which will be applied to the Smart Contract's constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n}\n...\n```\n\nThe following configuration configures the `SimpleStorage`'s `initialValue` parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn't matter anymore:\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: {\n        initialValue: 100\n      }\n    }\n  }\n}\n...\n```\n\n### Configuring gas and gas price\n\nBoth, `gas` and `gasPrice` can be configured for each Smart Contract. If we don't want to configure that for every single contract, we can also specify `gas: auto` in the environment, like this:\n\n```\n...\ndevelopment: {\n  gas: 'auto',\n  deploy: {\n    SimpleStorage: {\n      args: [100],\n      gas: 800000,\n      gasPrice: 5\n    }\n  }\n}\n...\n```\n\nAnother cool feature of Embark is that it supports human readable ether units, to improve the developer experience.\n\n{% notification info 'Human readable ether units' %}\n\nEmbark supports **human readable ether units** in places where ether unit values are required. [Read here](#Human-readable-Ether-units) for more information.\n{% endnotification %}\n\n## Configuring Smart Contract Dependencies\n\nWhen building more complex applications, it's very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.\n\nAll we have to do is specifying the name of the Smart Contract we're interested in, prefixed with a \"$\". Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all `$CONTRACT_NAME`'s with their corresponding addresses. Assuming `SimpleStorage` depends on `OtherContract`, this can be easily configured like this:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100, '$OtherContract']\n  },\n  OtherContract: {...}\n}\n...\n```\n\n## Disabling deployment\n\nSometimes we want to configure different behaviour for certain contracts within different [environments](environments.html). One of those cases could be that we don't actually want to deploy `SimpleStorage` in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.\n\nWe can prevent Embark from deploying any of our Smart Contracts by using the `deploy` configuration and setting it to `false` like this:\n\n```\n...\ndevelopment:\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n},\nproduction: {\n  deploy: {\n    SimpleStorage: {\n      deploy: false\n    }\n  }\n}\n...\n```\n\n## Deployment strategies\n\nIn order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called \"deployment strategies\". Deployment strategies tell Embark whether it should deploy all of the user's Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.\n\nThere are two possible strategy options:\n\n- **implicit** - This is the default. Using the `implicit` strategy, Embark tries to deploy all Smart Contracts configured in the `deploy` configuration, including its (3rd-party) dependencies.\n- **explicit** - Setting this option to `explicit` tells Embark to deploy the Smart Contracts specified in the `deploy` configuration without their dependencies. This can be combined with [disabling deployment](#Disabling-deployment) of individual Smart Contracts for fine control.\n\n```\nstrategy: 'explicit' // 'implicit' is the default\ndeploy: {\n  ...\n}\n```\n\n\n## Deploying multiple instances\n\nIn cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the `instanceOf` property and refer to the original Smart Contract that should be deployed multiple times.\n\nThis can then be combined with [disabling the deployment](#Disabling-deployment) of the original Smart Contract like this:\n\n```\n...\ndeploy: {\n  Currency: {\n    deploy: false,\n  },\n  Usd: {\n    instanceOf: 'Currency',\n    args: [200]\n  },\n  MyCoin: {\n    instanceOf: 'Currency',\n    args: [300]\n  }\n}\n...\n```\n\nIn the example above, we deploy `Usd` and `MyCoin` as instances of `Currency`. Notice that `Currency` itself isn't going to be deployed but merely functions as a \"recipe\" to create other instances of it.\n\n## Referencing already deployed Smart Contracts\n\nEmbark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the `address` of the instance in question.\n\nThe following example configures `UserStorage` to be a Smart Contract instance that's already deployed:\n\n```\n...\ndeploy: {\n  UserStorage: {\n    address: '0x123456'\n  }\n}\n...\n```\n\n## Using accounts in arguments\n\nAccounts can be used as arguments using Embark's built-in interpolation syntax, similar to referring to Smart Contract instances.\n\n```\nmodule.exports = {\n  development: {\n    deploy: {\n      MyContractThatNeedsAccountAddresses: {\n        args: ['$accounts[0]', '$accounts[4]']\n      }\n    }\n  }\n}\n```\n\n## Dynamic Addresses\n\nThere are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as `address`, which returns the address we're interested in. Usually, other Smart Contract instances are needed to perform that computation, so the [`deps` configuration](#Deployment-hooks) comes in handy as well:\n\n```\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n  },\n  OtherContract: {\n    deps: ['SimpleStorage'],\n    address: async (deps) => {\n      // use `deps.contracts.SimpleStorage` to determine and return address\n    },\n    abiDefinition: ABI\n  },\n}\n```\n\nIn the example above, `OtherContract` will be deployed after `SimpleStorage` because it uses the `deps` property to define Smart Contracts that it depends on. All dependencies are exposed on the `address` function parameter similar to [deployment hooks](#Deployment-hooks). Also, notice that the `abiDefinition` is only needed if the Smart Contracts bytecode isn't already on disk.\n\n\n## Configuring source files\n\nBy default Embark will look for Smart Contracts inside the folder that's configured in the application's [embark.json](configuration.html#contracts), the default being the `contracts` folder. However, if we want to change the location to look for a single Smart Contract's source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the `file` property.\n\n`file` specifies a full path to a file that contains the source code for the Smart Contract in question.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    file: './some_folder/simple_storage.sol',\n    args: [100]\n  }\n}\n...\n```\n\nIf Embark doesn't find the file in the specified path, it'll expect it to be a path inside installed `node_modules` dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:\n\n```\n...\ndeploy: {\n  ERC20: {\n    file: 'openzeppelin-solidity/contracts/token/ERC20/ERC20.sol'\n  }\n}\n...\n```\n\nEmbark even supports reading the source from `https`, `git`, `ipfs` and `bzz` URIs, enabling us to compile Solidity Smart Contracts that aren't even located in our local machine.\n\n```\n...\ndeploy: {\n  ERC725: {\n    file: 'git://github.com/status/contracts/contracts/identity/ERC725.sol#develop'\n  },\n  ERC725: {\n    file: 'github.com/status/contracts/contracts/identity/ERC725.sol'\n  },\n  Ownable: {\n    file: 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol'\n  }\n}\n...\n```\n\n## Providing ABIs\n\nIn order to use Smart Contract instances created by web3 either in [deployment hooks](Deployment-hooks) or in [Embark's JavaScript client](contracts_javascript.html), Embark needs to get hold of the Smart Contracts' ABIs and pass those on to web3.\n\nThis is not a problem when dealing with Smart Contracts that we own, or at least have [access to their sources](#Configuring-source-files) so we Embark can compile them accordingly. However, if we don't have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the `abiDefinition` property, so Embark can make use of that.\n\nThe following example configures `SimpleStorage` to be already deployed somewhere, but we'd still like to use the web3 instance in our `afterDeploy` hook.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    address: '0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9',\n    abiDefinition: [...]\n  }\n},\nafterDeploy: async (deps) => {\n  const value = await deps.contracts.SimpleStorage.methods.get().call();\n  console.log(value);\n}\n...\n```\n\n`afterDeploy` and other deployment hooks are covered in [Deployment Hooks](#Deployment-hooks).\n\n## Providing Artifacts\n\nSimilar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.\n\nThat way, you don't need to have the contract on disk or even deploy it, if the address is specified in it.\n\nHere is how you can do it:\n\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n## Deployment tracking\n\nEmbark's Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don't have to worry about keeping track of it. The way this works is that, by default, Embark creates a file `./.embark/chains.json` in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:\n\n```\n{\n  BLOCK_HASH {\n    \"contracts\": {\n      HASH(NAME, BYTECODE, ARGS, ADDRESS): {\n        \"name\": NAME,\n        \"address: ADDRESS\n      }\n    }\n  }\n}\n```\n\nWith concrete data, the contents of `chains.json` could look something like this:\n\n```\n{\n  \"0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a\": {\n    \"contracts\": {\n      \"0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be\": {\n        \"name\": \"ENSRegistry\",\n        \"address\": \"0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528\"\n      },\n      \"0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93\": {\n        \"name\": \"Resolver\",\n        \"address\": \"0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f\"\n      },\n      \"0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334\": {\n        \"name\": \"FIFSRegistrar\",\n        \"address\": \"0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E\"\n      },\n      \"0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b\": {\n        \"name\": \"SimpleStorage\",\n        \"address\": \"0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E\"\n      }\n    }\n  }\n}\n```\n\n### Disabling tracking\n\nIf we prefer to have full control over the deployment process and don't want Embark to keep track of individual Smart Contract deployments, we use the `track` configuration and set it `false`.\n\nThe following example ensures `ERC20` won't be tracked and therefore redeployed in every deployment cycle.\n\n```\n...\ndeploy: {\n  ERC20: {\n    track: false\n  }\n}\n...\n```\n\n### Specifying a tracking file\n\nIn addition to enabling and disabling tracking, it's also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don't want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.\n\n```\n...\ntracking: 'path/to/some/file'\n...\n```\n\nHaving the file referenced above under version control ensures that other users of our project don't redeploy the Smart Contracts on different platforms.\n\n\n### Reducing contract size\n\nTo reduce the size of the contract JSON files that are included in the build directory, you can set `minimalContractSize` to `true`. It defaults to `false`.\nWhen set to `true`, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.\n\n```\nminimalContractSize: true,\n```\n\nYou can also have more control over the filtering by adding a `filteredFields` array. In the array, you can add the name of the fields you want to filter out.\nThis is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.\nNote that you need to have `minimalContractSize` set to `true`.\n\n```\nminimalContractSize: true,\nfilteredFields: ['runtimeBytecode', 'realRuntimeBytecode'] // This will filter out only runtimeBytecode and realRuntimeBytecode\n```\n\n\n## Deployment hooks\n\nSometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we'd even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks `beforeDeploy`, `deployIf`, `onDeploy` and `afterDeploy`.\n\nDeployment hooks have access to a `dependencies` object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the `deps` property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current `web3` instance and a `logger` instance as shown in the examples below.\n\n### Conditional Deployment with `deployIf`\n\nWe can specify a condition that decides whether a contract should be deployed by using the `deployIf` hook. `deployIf` is a function that either returns a promise or is created using `async/await` syntax and has to resolve to a boolean value. If the resolve value is `true`, the Smart Contract in question will be deployed. If it's `false`, Embark will skip deploying the Smart Contract in question.\n\n```\n...\ndeploy: {\n  ERC20: {\n    deployIf: async (dependencies) => {\n      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();\n    },\n    deps: ['Manager']\n  },\n  Manager: {...}\n}\n...\n```\n\nNotice how `dependencies.contracts` gives access to the `Manager` contract instance. This however, is only possible because `Manager` has been defined as dependency of `ERC20` using the `deps` property. If we're using a Node version that doesn't support async/await, the same can be achieved using promises like this (web3 APIs already return promises):\n\n```\n...\nERC20: {\n  deployIf: (dependencies) => {\n    return dependencies.contracts.Manager.methods.isUpdateApproved().call();\n  },\n  deps: ['Manager']\n},\n...\n```\n\n### `beforeDeploy` hook\n\n`beforeDeploy` is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the [afterDeploy](#afterDeploy-hook) and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures `beforeDeploy` just for `SimpleStorage`:\n\n```\nSimpleStorage: {\n  beforeDeploy: async () => {\n    console.log('before deploying SimpleStorage');\n  }\n}\n```\n\nWheras this configuration here runs the hook before all Smart Contracts are being deployed:\n\n```\ndeploy: {\n  SimpleStorage: { ... }\n  beforeDeploy: async () => {\n    console.log('Before all deploy');\n  }\n}\n```\n\n### `onDeploy` hook\n\nWe can specify the `onDeploy` hook to execute code, right after a contract has been deployed. Just like `deployIf` and `afterDeploy`, `onDeploy` is a function that has access to the Smart Contract's dependencies defined in its `deps` property. The following example executes `SimpleStorage`'s `set()` method, once deployed.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    onDeploy: async (dependencies) => {\n      await dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n    }\n  }\n}\n...\n```\n\nTo actually `send` transactions and not just make `call`s, you will probably need to provide a `from` account. You can use the `web3` instance inside `dependencies` to get the `defaultAccount` as above.\n\nAlso, as mentioned above, every deployment hook works with plain promises as well:\n\n```\n...\nSimpleStorage: {\n  args: [100],\n  onDeploy: (dependencies) => {\n    return dependencies.contracts.SimpleStorage.methods.set(150).send();\n  }\n}\n...\n```\n\n### `afterDeploy` hook\n\nIf we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the `afterDeploy` hook. The same rules apply here. `afterDeploy` has access to all deployed contract instances through the `dependencies` object.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100]\n  },\n},\nafterDeploy: (dependencies) => {\n  dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n}\n...\n```\n\n### Error Handling\n\nSince we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:\n\n```\nonDeploy: async (dependencies) => {\n  try {\n    await dependencies.contracts.SimpleStorage.methods.set(85).send({from: dependencies.web3.eth.defaultAccount});\n  } catch (e) {\n    console.error('Error during onDeploy', e);\n  }\n}\n```\n\n{% notification info 'A note on deployment hook string syntax' %}\nIn older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don't support functions.\n\nThe examples above can be therefore written as:\n\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\nThis string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n\n### Logging with context\n\nOften we use log statements to either debug code or simply to output what's going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don't drown in the rest of Embark's output, we can use the injected `logger` which prefixes every log message with a context indicator.\n\nFor example, when logging something from within an `onDeploy` hook of a Smart Contract, the output will look like this:\n\n```\nSmartContractName > onDeploy > [YOUR MESSAGE]\n```\n\nThe `logger` is injected as part of the `dependencies` object, so we can use it like this:\n\n```\ndeploy: {\n  SimpleStorage: {\n    onDeploy: async (dependencies) => {\n      dependencies.logger.info('Hello from onDeploy!');\n    }\n  }\n}\n```\n\nWhich will result in\n\n```\nSimpleStorage > onDeploy > Hello from onDeploy!\n```\n\n## Human readable Ether units\n\nEmbark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as `wei`, `kwei`, `Kwei`, `shannon`, `finney`, ... etc.\n\nLet's take the simple Smart Contract configuration from the [configuring gas and gas price](#Configuring-gas-and-gas-price) section:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: 800000,\n    gasPrice: 5\n  }\n}\n...\n```\n\nThis can as well be written as:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: '800 Kwei',\n    gasPrice: 5\n  }\n}\n...\n```\n\nEmbark will take care of converting those units to their dedicated Wei values.\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_configuration.html","comments":1,"_id":"ck5ijm3ui002s7heg7xxzgbhz","content":"<p>As many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That’s why Embark offers a declarative approach to define what Smart Contracts we’re interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.</p>\n<h2 id=\"Basic-Smart-Contract-Configuration\"><a href=\"#Basic-Smart-Contract-Configuration\" class=\"headerlink\" title=\"Basic Smart Contract Configuration\"></a>Basic Smart Contract Configuration</h2><p>Unless specified differently in our application’s <code>embark.json</code>, Smart Contracts are configured either in the <code>config/contracts.js</code> file, or, if we’re dealing with a <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">Smart Contract only app</a>, the <code>./contracts.js</code> file in the root of our project.</p>\n<p>A Smart Contract configuration is placed in an environment’s <code>deploy</code> property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the <code>SimpleStorage</code> contract in the <code>development</code> environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Smart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our <a href=\"environments.html\">guide on environments</a> to learn more about this.</p>\n<h3 id=\"Configuring-constructor-parameters\"><a href=\"#Configuring-constructor-parameters\" class=\"headerlink\" title=\"Configuring constructor parameters\"></a>Configuring constructor parameters</h3><p>Often, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract’s constructor parameters using the <code>args</code> property. <code>args</code> is either a list of values, which will be applied to the Smart Contract’s constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The following configuration configures the <code>SimpleStorage</code>‘s <code>initialValue</code> parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn’t matter anymore:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: &#123;</span><br><span class=\"line\">        initialValue: 100</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Configuring-gas-and-gas-price\"><a href=\"#Configuring-gas-and-gas-price\" class=\"headerlink\" title=\"Configuring gas and gas price\"></a>Configuring gas and gas price</h3><p>Both, <code>gas</code> and <code>gasPrice</code> can be configured for each Smart Contract. If we don’t want to configure that for every single contract, we can also specify <code>gas: auto</code> in the environment, like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  gas: &#39;auto&#39;,</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100],</span><br><span class=\"line\">      gas: 800000,</span><br><span class=\"line\">      gasPrice: 5</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Another cool feature of Embark is that it supports human readable ether units, to improve the developer experience.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Human readable ether units</strong></p>\n  <p><p>Embark supports <strong>human readable ether units</strong> in places where ether unit values are required. <a href=\"#Human-readable-Ether-units\">Read here</a> for more information.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-Smart-Contract-Dependencies\"><a href=\"#Configuring-Smart-Contract-Dependencies\" class=\"headerlink\" title=\"Configuring Smart Contract Dependencies\"></a>Configuring Smart Contract Dependencies</h2><p>When building more complex applications, it’s very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.</p>\n<p>All we have to do is specifying the name of the Smart Contract we’re interested in, prefixed with a “$”. Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all <code>$CONTRACT_NAME</code>‘s with their corresponding addresses. Assuming <code>SimpleStorage</code> depends on <code>OtherContract</code>, this can be easily configured like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100, &#39;$OtherContract&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Disabling-deployment\"><a href=\"#Disabling-deployment\" class=\"headerlink\" title=\"Disabling deployment\"></a>Disabling deployment</h2><p>Sometimes we want to configure different behaviour for certain contracts within different <a href=\"environments.html\">environments</a>. One of those cases could be that we don’t actually want to deploy <code>SimpleStorage</code> in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.</p>\n<p>We can prevent Embark from deploying any of our Smart Contracts by using the <code>deploy</code> configuration and setting it to <code>false</code> like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development:</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">production: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      deploy: false</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Deployment-strategies\"><a href=\"#Deployment-strategies\" class=\"headerlink\" title=\"Deployment strategies\"></a>Deployment strategies</h2><p>In order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called “deployment strategies”. Deployment strategies tell Embark whether it should deploy all of the user’s Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.</p>\n<p>There are two possible strategy options:</p>\n<ul>\n<li><strong>implicit</strong> - This is the default. Using the <code>implicit</code> strategy, Embark tries to deploy all Smart Contracts configured in the <code>deploy</code> configuration, including its (3rd-party) dependencies.</li>\n<li><strong>explicit</strong> - Setting this option to <code>explicit</code> tells Embark to deploy the Smart Contracts specified in the <code>deploy</code> configuration without their dependencies. This can be combined with <a href=\"#Disabling-deployment\">disabling deployment</a> of individual Smart Contracts for fine control.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">strategy: &#39;explicit&#39; &#x2F;&#x2F; &#39;implicit&#39; is the default</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deploying-multiple-instances\"><a href=\"#Deploying-multiple-instances\" class=\"headerlink\" title=\"Deploying multiple instances\"></a>Deploying multiple instances</h2><p>In cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the <code>instanceOf</code> property and refer to the original Smart Contract that should be deployed multiple times.</p>\n<p>This can then be combined with <a href=\"#Disabling-deployment\">disabling the deployment</a> of the original Smart Contract like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Currency: &#123;</span><br><span class=\"line\">    deploy: false,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Usd: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [200]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  MyCoin: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [300]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, we deploy <code>Usd</code> and <code>MyCoin</code> as instances of <code>Currency</code>. Notice that <code>Currency</code> itself isn’t going to be deployed but merely functions as a “recipe” to create other instances of it.</p>\n<h2 id=\"Referencing-already-deployed-Smart-Contracts\"><a href=\"#Referencing-already-deployed-Smart-Contracts\" class=\"headerlink\" title=\"Referencing already deployed Smart Contracts\"></a>Referencing already deployed Smart Contracts</h2><p>Embark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the <code>address</code> of the instance in question.</p>\n<p>The following example configures <code>UserStorage</code> to be a Smart Contract instance that’s already deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  UserStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x123456&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-accounts-in-arguments\"><a href=\"#Using-accounts-in-arguments\" class=\"headerlink\" title=\"Using accounts in arguments\"></a>Using accounts in arguments</h2><p>Accounts can be used as arguments using Embark’s built-in interpolation syntax, similar to referring to Smart Contract instances.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      MyContractThatNeedsAccountAddresses: &#123;</span><br><span class=\"line\">        args: [&#39;$accounts[0]&#39;, &#39;$accounts[4]&#39;]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Dynamic-Addresses\"><a href=\"#Dynamic-Addresses\" class=\"headerlink\" title=\"Dynamic Addresses\"></a>Dynamic Addresses</h2><p>There are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as <code>address</code>, which returns the address we’re interested in. Usually, other Smart Contract instances are needed to perform that computation, so the <a href=\"#Deployment-hooks\"><code>deps</code> configuration</a> comes in handy as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: 0,</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;</span><br><span class=\"line\">    deps: [&#39;SimpleStorage&#39;],</span><br><span class=\"line\">    address: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; use &#96;deps.contracts.SimpleStorage&#96; to determine and return address</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    abiDefinition: ABI</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, <code>OtherContract</code> will be deployed after <code>SimpleStorage</code> because it uses the <code>deps</code> property to define Smart Contracts that it depends on. All dependencies are exposed on the <code>address</code> function parameter similar to <a href=\"#Deployment-hooks\">deployment hooks</a>. Also, notice that the <code>abiDefinition</code> is only needed if the Smart Contracts bytecode isn’t already on disk.</p>\n<h2 id=\"Configuring-source-files\"><a href=\"#Configuring-source-files\" class=\"headerlink\" title=\"Configuring source files\"></a>Configuring source files</h2><p>By default Embark will look for Smart Contracts inside the folder that’s configured in the application’s <a href=\"configuration.html#contracts\">embark.json</a>, the default being the <code>contracts</code> folder. However, if we want to change the location to look for a single Smart Contract’s source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the <code>file</code> property.</p>\n<p><code>file</code> specifies a full path to a file that contains the source code for the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    file: &#39;.&#x2F;some_folder&#x2F;simple_storage.sol&#39;,</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>If Embark doesn’t find the file in the specified path, it’ll expect it to be a path inside installed <code>node_modules</code> dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    file: &#39;openzeppelin-solidity&#x2F;contracts&#x2F;token&#x2F;ERC20&#x2F;ERC20.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark even supports reading the source from <code>https</code>, <code>git</code>, <code>ipfs</code> and <code>bzz</code> URIs, enabling us to compile Solidity Smart Contracts that aren’t even located in our local machine.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    file: &#39;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Providing-ABIs\"><a href=\"#Providing-ABIs\" class=\"headerlink\" title=\"Providing ABIs\"></a>Providing ABIs</h2><p>In order to use Smart Contract instances created by web3 either in <a href=\"Deployment-hooks\">deployment hooks</a> or in <a href=\"contracts_javascript.html\">Embark’s JavaScript client</a>, Embark needs to get hold of the Smart Contracts’ ABIs and pass those on to web3.</p>\n<p>This is not a problem when dealing with Smart Contracts that we own, or at least have <a href=\"#Configuring-source-files\">access to their sources</a> so we Embark can compile them accordingly. However, if we don’t have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the <code>abiDefinition</code> property, so Embark can make use of that.</p>\n<p>The following example configures <code>SimpleStorage</code> to be already deployed somewhere, but we’d still like to use the web3 instance in our <code>afterDeploy</code> hook.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9&#39;,</span><br><span class=\"line\">    abiDefinition: [...]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const value &#x3D; await deps.contracts.SimpleStorage.methods.get().call();</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p><code>afterDeploy</code> and other deployment hooks are covered in <a href=\"#Deployment-hooks\">Deployment Hooks</a>.</p>\n<h2 id=\"Providing-Artifacts\"><a href=\"#Providing-Artifacts\" class=\"headerlink\" title=\"Providing Artifacts\"></a>Providing Artifacts</h2><p>Similar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.</p>\n<p>That way, you don’t need to have the contract on disk or even deploy it, if the address is specified in it.</p>\n<p>Here is how you can do it:</p>\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n<h2 id=\"Deployment-tracking\"><a href=\"#Deployment-tracking\" class=\"headerlink\" title=\"Deployment tracking\"></a>Deployment tracking</h2><p>Embark’s Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don’t have to worry about keeping track of it. The way this works is that, by default, Embark creates a file <code>./.embark/chains.json</code> in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  BLOCK_HASH &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      HASH(NAME, BYTECODE, ARGS, ADDRESS): &#123;</span><br><span class=\"line\">        &quot;name&quot;: NAME,</span><br><span class=\"line\">        &quot;address: ADDRESS</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With concrete data, the contents of <code>chains.json</code> could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a&quot;: &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      &quot;0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;ENSRegistry&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;Resolver&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;FIFSRegistrar&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;SimpleStorage&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Disabling-tracking\"><a href=\"#Disabling-tracking\" class=\"headerlink\" title=\"Disabling tracking\"></a>Disabling tracking</h3><p>If we prefer to have full control over the deployment process and don’t want Embark to keep track of individual Smart Contract deployments, we use the <code>track</code> configuration and set it <code>false</code>.</p>\n<p>The following example ensures <code>ERC20</code> won’t be tracked and therefore redeployed in every deployment cycle.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    track: false</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Specifying-a-tracking-file\"><a href=\"#Specifying-a-tracking-file\" class=\"headerlink\" title=\"Specifying a tracking file\"></a>Specifying a tracking file</h3><p>In addition to enabling and disabling tracking, it’s also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don’t want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">tracking: &#39;path&#x2F;to&#x2F;some&#x2F;file&#39;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Having the file referenced above under version control ensures that other users of our project don’t redeploy the Smart Contracts on different platforms.</p>\n<h3 id=\"Reducing-contract-size\"><a href=\"#Reducing-contract-size\" class=\"headerlink\" title=\"Reducing contract size\"></a>Reducing contract size</h3><p>To reduce the size of the contract JSON files that are included in the build directory, you can set <code>minimalContractSize</code> to <code>true</code>. It defaults to <code>false</code>.<br>When set to <code>true</code>, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br></pre></td></tr></table></figure>\n\n<p>You can also have more control over the filtering by adding a <code>filteredFields</code> array. In the array, you can add the name of the fields you want to filter out.<br>This is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.<br>Note that you need to have <code>minimalContractSize</code> set to <code>true</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br><span class=\"line\">filteredFields: [&#39;runtimeBytecode&#39;, &#39;realRuntimeBytecode&#39;] &#x2F;&#x2F; This will filter out only runtimeBytecode and realRuntimeBytecode</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deployment-hooks\"><a href=\"#Deployment-hooks\" class=\"headerlink\" title=\"Deployment hooks\"></a>Deployment hooks</h2><p>Sometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we’d even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks <code>beforeDeploy</code>, <code>deployIf</code>, <code>onDeploy</code> and <code>afterDeploy</code>.</p>\n<p>Deployment hooks have access to a <code>dependencies</code> object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the <code>deps</code> property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current <code>web3</code> instance and a <code>logger</code> instance as shown in the examples below.</p>\n<h3 id=\"Conditional-Deployment-with-deployIf\"><a href=\"#Conditional-Deployment-with-deployIf\" class=\"headerlink\" title=\"Conditional Deployment with deployIf\"></a>Conditional Deployment with <code>deployIf</code></h3><p>We can specify a condition that decides whether a contract should be deployed by using the <code>deployIf</code> hook. <code>deployIf</code> is a function that either returns a promise or is created using <code>async/await</code> syntax and has to resolve to a boolean value. If the resolve value is <code>true</code>, the Smart Contract in question will be deployed. If it’s <code>false</code>, Embark will skip deploying the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    deployIf: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    deps: [&#39;Manager&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Manager: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Notice how <code>dependencies.contracts</code> gives access to the <code>Manager</code> contract instance. This however, is only possible because <code>Manager</code> has been defined as dependency of <code>ERC20</code> using the <code>deps</code> property. If we’re using a Node version that doesn’t support async/await, the same can be achieved using promises like this (web3 APIs already return promises):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">ERC20: &#123;</span><br><span class=\"line\">  deployIf: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  deps: [&#39;Manager&#39;]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"beforeDeploy-hook\"><a href=\"#beforeDeploy-hook\" class=\"headerlink\" title=\"beforeDeploy hook\"></a><code>beforeDeploy</code> hook</h3><p><code>beforeDeploy</code> is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the <a href=\"#afterDeploy-hook\">afterDeploy</a> and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures <code>beforeDeploy</code> just for <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;before deploying SimpleStorage&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wheras this configuration here runs the hook before all Smart Contracts are being deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123; ... &#125;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;Before all deploy&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"onDeploy-hook\"><a href=\"#onDeploy-hook\" class=\"headerlink\" title=\"onDeploy hook\"></a><code>onDeploy</code> hook</h3><p>We can specify the <code>onDeploy</code> hook to execute code, right after a contract has been deployed. Just like <code>deployIf</code> and <code>afterDeploy</code>, <code>onDeploy</code> is a function that has access to the Smart Contract’s dependencies defined in its <code>deps</code> property. The following example executes <code>SimpleStorage</code>‘s <code>set()</code> method, once deployed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      await dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>To actually <code>send</code> transactions and not just make <code>call</code>s, you will probably need to provide a <code>from</code> account. You can use the <code>web3</code> instance inside <code>dependencies</code> to get the <code>defaultAccount</code> as above.</p>\n<p>Also, as mentioned above, every deployment hook works with plain promises as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [100],</span><br><span class=\"line\">  onDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.SimpleStorage.methods.set(150).send();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"afterDeploy-hook\"><a href=\"#afterDeploy-hook\" class=\"headerlink\" title=\"afterDeploy hook\"></a><code>afterDeploy</code> hook</h3><p>If we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the <code>afterDeploy</code> hook. The same rules apply here. <code>afterDeploy</code> has access to all deployed contract instances through the <code>dependencies</code> object.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Error-Handling\"><a href=\"#Error-Handling\" class=\"headerlink\" title=\"Error Handling\"></a>Error Handling</h3><p>Since we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    await dependencies.contracts.SimpleStorage.methods.set(85).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">  &#125; catch (e) &#123;</span><br><span class=\"line\">    console.error(&#39;Error during onDeploy&#39;, e);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on deployment hook string syntax</strong></p>\n  <p><p>In older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don’t support functions.</p>\n<p>The examples above can be therefore written as:</p>\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\n<p>This string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Logging-with-context\"><a href=\"#Logging-with-context\" class=\"headerlink\" title=\"Logging with context\"></a>Logging with context</h3><p>Often we use log statements to either debug code or simply to output what’s going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don’t drown in the rest of Embark’s output, we can use the injected <code>logger</code> which prefixes every log message with a context indicator.</p>\n<p>For example, when logging something from within an <code>onDeploy</code> hook of a Smart Contract, the output will look like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SmartContractName &gt; onDeploy &gt; [YOUR MESSAGE]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>logger</code> is injected as part of the <code>dependencies</code> object, so we can use it like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      dependencies.logger.info(&#39;Hello from onDeploy!&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Which will result in</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage &gt; onDeploy &gt; Hello from onDeploy!</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Human-readable-Ether-units\"><a href=\"#Human-readable-Ether-units\" class=\"headerlink\" title=\"Human readable Ether units\"></a>Human readable Ether units</h2><p>Embark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as <code>wei</code>, <code>kwei</code>, <code>Kwei</code>, <code>shannon</code>, <code>finney</code>, … etc.</p>\n<p>Let’s take the simple Smart Contract configuration from the <a href=\"#Configuring-gas-and-gas-price\">configuring gas and gas price</a> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: 800000,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This can as well be written as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: &#39;800 Kwei&#39;,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark will take care of converting those units to their dedicated Wei values.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That’s why Embark offers a declarative approach to define what Smart Contracts we’re interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.</p>\n<h2 id=\"Basic-Smart-Contract-Configuration\"><a href=\"#Basic-Smart-Contract-Configuration\" class=\"headerlink\" title=\"Basic Smart Contract Configuration\"></a>Basic Smart Contract Configuration</h2><p>Unless specified differently in our application’s <code>embark.json</code>, Smart Contracts are configured either in the <code>config/contracts.js</code> file, or, if we’re dealing with a <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">Smart Contract only app</a>, the <code>./contracts.js</code> file in the root of our project.</p>\n<p>A Smart Contract configuration is placed in an environment’s <code>deploy</code> property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the <code>SimpleStorage</code> contract in the <code>development</code> environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Smart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our <a href=\"environments.html\">guide on environments</a> to learn more about this.</p>\n<h3 id=\"Configuring-constructor-parameters\"><a href=\"#Configuring-constructor-parameters\" class=\"headerlink\" title=\"Configuring constructor parameters\"></a>Configuring constructor parameters</h3><p>Often, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract’s constructor parameters using the <code>args</code> property. <code>args</code> is either a list of values, which will be applied to the Smart Contract’s constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The following configuration configures the <code>SimpleStorage</code>‘s <code>initialValue</code> parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn’t matter anymore:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: &#123;</span><br><span class=\"line\">        initialValue: 100</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Configuring-gas-and-gas-price\"><a href=\"#Configuring-gas-and-gas-price\" class=\"headerlink\" title=\"Configuring gas and gas price\"></a>Configuring gas and gas price</h3><p>Both, <code>gas</code> and <code>gasPrice</code> can be configured for each Smart Contract. If we don’t want to configure that for every single contract, we can also specify <code>gas: auto</code> in the environment, like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  gas: &#39;auto&#39;,</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100],</span><br><span class=\"line\">      gas: 800000,</span><br><span class=\"line\">      gasPrice: 5</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Another cool feature of Embark is that it supports human readable ether units, to improve the developer experience.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Human readable ether units</strong></p>\n  <p><p>Embark supports <strong>human readable ether units</strong> in places where ether unit values are required. <a href=\"#Human-readable-Ether-units\">Read here</a> for more information.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-Smart-Contract-Dependencies\"><a href=\"#Configuring-Smart-Contract-Dependencies\" class=\"headerlink\" title=\"Configuring Smart Contract Dependencies\"></a>Configuring Smart Contract Dependencies</h2><p>When building more complex applications, it’s very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.</p>\n<p>All we have to do is specifying the name of the Smart Contract we’re interested in, prefixed with a “$”. Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all <code>$CONTRACT_NAME</code>‘s with their corresponding addresses. Assuming <code>SimpleStorage</code> depends on <code>OtherContract</code>, this can be easily configured like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100, &#39;$OtherContract&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Disabling-deployment\"><a href=\"#Disabling-deployment\" class=\"headerlink\" title=\"Disabling deployment\"></a>Disabling deployment</h2><p>Sometimes we want to configure different behaviour for certain contracts within different <a href=\"environments.html\">environments</a>. One of those cases could be that we don’t actually want to deploy <code>SimpleStorage</code> in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.</p>\n<p>We can prevent Embark from deploying any of our Smart Contracts by using the <code>deploy</code> configuration and setting it to <code>false</code> like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development:</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">production: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      deploy: false</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Deployment-strategies\"><a href=\"#Deployment-strategies\" class=\"headerlink\" title=\"Deployment strategies\"></a>Deployment strategies</h2><p>In order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called “deployment strategies”. Deployment strategies tell Embark whether it should deploy all of the user’s Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.</p>\n<p>There are two possible strategy options:</p>\n<ul>\n<li><strong>implicit</strong> - This is the default. Using the <code>implicit</code> strategy, Embark tries to deploy all Smart Contracts configured in the <code>deploy</code> configuration, including its (3rd-party) dependencies.</li>\n<li><strong>explicit</strong> - Setting this option to <code>explicit</code> tells Embark to deploy the Smart Contracts specified in the <code>deploy</code> configuration without their dependencies. This can be combined with <a href=\"#Disabling-deployment\">disabling deployment</a> of individual Smart Contracts for fine control.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">strategy: &#39;explicit&#39; &#x2F;&#x2F; &#39;implicit&#39; is the default</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deploying-multiple-instances\"><a href=\"#Deploying-multiple-instances\" class=\"headerlink\" title=\"Deploying multiple instances\"></a>Deploying multiple instances</h2><p>In cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the <code>instanceOf</code> property and refer to the original Smart Contract that should be deployed multiple times.</p>\n<p>This can then be combined with <a href=\"#Disabling-deployment\">disabling the deployment</a> of the original Smart Contract like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Currency: &#123;</span><br><span class=\"line\">    deploy: false,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Usd: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [200]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  MyCoin: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [300]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, we deploy <code>Usd</code> and <code>MyCoin</code> as instances of <code>Currency</code>. Notice that <code>Currency</code> itself isn’t going to be deployed but merely functions as a “recipe” to create other instances of it.</p>\n<h2 id=\"Referencing-already-deployed-Smart-Contracts\"><a href=\"#Referencing-already-deployed-Smart-Contracts\" class=\"headerlink\" title=\"Referencing already deployed Smart Contracts\"></a>Referencing already deployed Smart Contracts</h2><p>Embark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the <code>address</code> of the instance in question.</p>\n<p>The following example configures <code>UserStorage</code> to be a Smart Contract instance that’s already deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  UserStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x123456&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-accounts-in-arguments\"><a href=\"#Using-accounts-in-arguments\" class=\"headerlink\" title=\"Using accounts in arguments\"></a>Using accounts in arguments</h2><p>Accounts can be used as arguments using Embark’s built-in interpolation syntax, similar to referring to Smart Contract instances.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      MyContractThatNeedsAccountAddresses: &#123;</span><br><span class=\"line\">        args: [&#39;$accounts[0]&#39;, &#39;$accounts[4]&#39;]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Dynamic-Addresses\"><a href=\"#Dynamic-Addresses\" class=\"headerlink\" title=\"Dynamic Addresses\"></a>Dynamic Addresses</h2><p>There are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as <code>address</code>, which returns the address we’re interested in. Usually, other Smart Contract instances are needed to perform that computation, so the <a href=\"#Deployment-hooks\"><code>deps</code> configuration</a> comes in handy as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: 0,</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;</span><br><span class=\"line\">    deps: [&#39;SimpleStorage&#39;],</span><br><span class=\"line\">    address: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; use &#96;deps.contracts.SimpleStorage&#96; to determine and return address</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    abiDefinition: ABI</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, <code>OtherContract</code> will be deployed after <code>SimpleStorage</code> because it uses the <code>deps</code> property to define Smart Contracts that it depends on. All dependencies are exposed on the <code>address</code> function parameter similar to <a href=\"#Deployment-hooks\">deployment hooks</a>. Also, notice that the <code>abiDefinition</code> is only needed if the Smart Contracts bytecode isn’t already on disk.</p>\n<h2 id=\"Configuring-source-files\"><a href=\"#Configuring-source-files\" class=\"headerlink\" title=\"Configuring source files\"></a>Configuring source files</h2><p>By default Embark will look for Smart Contracts inside the folder that’s configured in the application’s <a href=\"configuration.html#contracts\">embark.json</a>, the default being the <code>contracts</code> folder. However, if we want to change the location to look for a single Smart Contract’s source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the <code>file</code> property.</p>\n<p><code>file</code> specifies a full path to a file that contains the source code for the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    file: &#39;.&#x2F;some_folder&#x2F;simple_storage.sol&#39;,</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>If Embark doesn’t find the file in the specified path, it’ll expect it to be a path inside installed <code>node_modules</code> dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    file: &#39;openzeppelin-solidity&#x2F;contracts&#x2F;token&#x2F;ERC20&#x2F;ERC20.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark even supports reading the source from <code>https</code>, <code>git</code>, <code>ipfs</code> and <code>bzz</code> URIs, enabling us to compile Solidity Smart Contracts that aren’t even located in our local machine.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    file: &#39;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Providing-ABIs\"><a href=\"#Providing-ABIs\" class=\"headerlink\" title=\"Providing ABIs\"></a>Providing ABIs</h2><p>In order to use Smart Contract instances created by web3 either in <a href=\"Deployment-hooks\">deployment hooks</a> or in <a href=\"contracts_javascript.html\">Embark’s JavaScript client</a>, Embark needs to get hold of the Smart Contracts’ ABIs and pass those on to web3.</p>\n<p>This is not a problem when dealing with Smart Contracts that we own, or at least have <a href=\"#Configuring-source-files\">access to their sources</a> so we Embark can compile them accordingly. However, if we don’t have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the <code>abiDefinition</code> property, so Embark can make use of that.</p>\n<p>The following example configures <code>SimpleStorage</code> to be already deployed somewhere, but we’d still like to use the web3 instance in our <code>afterDeploy</code> hook.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9&#39;,</span><br><span class=\"line\">    abiDefinition: [...]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const value &#x3D; await deps.contracts.SimpleStorage.methods.get().call();</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p><code>afterDeploy</code> and other deployment hooks are covered in <a href=\"#Deployment-hooks\">Deployment Hooks</a>.</p>\n<h2 id=\"Providing-Artifacts\"><a href=\"#Providing-Artifacts\" class=\"headerlink\" title=\"Providing Artifacts\"></a>Providing Artifacts</h2><p>Similar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.</p>\n<p>That way, you don’t need to have the contract on disk or even deploy it, if the address is specified in it.</p>\n<p>Here is how you can do it:</p>\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n<h2 id=\"Deployment-tracking\"><a href=\"#Deployment-tracking\" class=\"headerlink\" title=\"Deployment tracking\"></a>Deployment tracking</h2><p>Embark’s Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don’t have to worry about keeping track of it. The way this works is that, by default, Embark creates a file <code>./.embark/chains.json</code> in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  BLOCK_HASH &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      HASH(NAME, BYTECODE, ARGS, ADDRESS): &#123;</span><br><span class=\"line\">        &quot;name&quot;: NAME,</span><br><span class=\"line\">        &quot;address: ADDRESS</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With concrete data, the contents of <code>chains.json</code> could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a&quot;: &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      &quot;0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;ENSRegistry&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;Resolver&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;FIFSRegistrar&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;SimpleStorage&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Disabling-tracking\"><a href=\"#Disabling-tracking\" class=\"headerlink\" title=\"Disabling tracking\"></a>Disabling tracking</h3><p>If we prefer to have full control over the deployment process and don’t want Embark to keep track of individual Smart Contract deployments, we use the <code>track</code> configuration and set it <code>false</code>.</p>\n<p>The following example ensures <code>ERC20</code> won’t be tracked and therefore redeployed in every deployment cycle.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    track: false</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Specifying-a-tracking-file\"><a href=\"#Specifying-a-tracking-file\" class=\"headerlink\" title=\"Specifying a tracking file\"></a>Specifying a tracking file</h3><p>In addition to enabling and disabling tracking, it’s also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don’t want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">tracking: &#39;path&#x2F;to&#x2F;some&#x2F;file&#39;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Having the file referenced above under version control ensures that other users of our project don’t redeploy the Smart Contracts on different platforms.</p>\n<h3 id=\"Reducing-contract-size\"><a href=\"#Reducing-contract-size\" class=\"headerlink\" title=\"Reducing contract size\"></a>Reducing contract size</h3><p>To reduce the size of the contract JSON files that are included in the build directory, you can set <code>minimalContractSize</code> to <code>true</code>. It defaults to <code>false</code>.<br>When set to <code>true</code>, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br></pre></td></tr></table></figure>\n\n<p>You can also have more control over the filtering by adding a <code>filteredFields</code> array. In the array, you can add the name of the fields you want to filter out.<br>This is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.<br>Note that you need to have <code>minimalContractSize</code> set to <code>true</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br><span class=\"line\">filteredFields: [&#39;runtimeBytecode&#39;, &#39;realRuntimeBytecode&#39;] &#x2F;&#x2F; This will filter out only runtimeBytecode and realRuntimeBytecode</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deployment-hooks\"><a href=\"#Deployment-hooks\" class=\"headerlink\" title=\"Deployment hooks\"></a>Deployment hooks</h2><p>Sometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we’d even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks <code>beforeDeploy</code>, <code>deployIf</code>, <code>onDeploy</code> and <code>afterDeploy</code>.</p>\n<p>Deployment hooks have access to a <code>dependencies</code> object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the <code>deps</code> property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current <code>web3</code> instance and a <code>logger</code> instance as shown in the examples below.</p>\n<h3 id=\"Conditional-Deployment-with-deployIf\"><a href=\"#Conditional-Deployment-with-deployIf\" class=\"headerlink\" title=\"Conditional Deployment with deployIf\"></a>Conditional Deployment with <code>deployIf</code></h3><p>We can specify a condition that decides whether a contract should be deployed by using the <code>deployIf</code> hook. <code>deployIf</code> is a function that either returns a promise or is created using <code>async/await</code> syntax and has to resolve to a boolean value. If the resolve value is <code>true</code>, the Smart Contract in question will be deployed. If it’s <code>false</code>, Embark will skip deploying the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    deployIf: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    deps: [&#39;Manager&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Manager: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Notice how <code>dependencies.contracts</code> gives access to the <code>Manager</code> contract instance. This however, is only possible because <code>Manager</code> has been defined as dependency of <code>ERC20</code> using the <code>deps</code> property. If we’re using a Node version that doesn’t support async/await, the same can be achieved using promises like this (web3 APIs already return promises):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">ERC20: &#123;</span><br><span class=\"line\">  deployIf: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  deps: [&#39;Manager&#39;]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"beforeDeploy-hook\"><a href=\"#beforeDeploy-hook\" class=\"headerlink\" title=\"beforeDeploy hook\"></a><code>beforeDeploy</code> hook</h3><p><code>beforeDeploy</code> is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the <a href=\"#afterDeploy-hook\">afterDeploy</a> and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures <code>beforeDeploy</code> just for <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;before deploying SimpleStorage&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wheras this configuration here runs the hook before all Smart Contracts are being deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123; ... &#125;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;Before all deploy&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"onDeploy-hook\"><a href=\"#onDeploy-hook\" class=\"headerlink\" title=\"onDeploy hook\"></a><code>onDeploy</code> hook</h3><p>We can specify the <code>onDeploy</code> hook to execute code, right after a contract has been deployed. Just like <code>deployIf</code> and <code>afterDeploy</code>, <code>onDeploy</code> is a function that has access to the Smart Contract’s dependencies defined in its <code>deps</code> property. The following example executes <code>SimpleStorage</code>‘s <code>set()</code> method, once deployed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      await dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>To actually <code>send</code> transactions and not just make <code>call</code>s, you will probably need to provide a <code>from</code> account. You can use the <code>web3</code> instance inside <code>dependencies</code> to get the <code>defaultAccount</code> as above.</p>\n<p>Also, as mentioned above, every deployment hook works with plain promises as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [100],</span><br><span class=\"line\">  onDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.SimpleStorage.methods.set(150).send();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"afterDeploy-hook\"><a href=\"#afterDeploy-hook\" class=\"headerlink\" title=\"afterDeploy hook\"></a><code>afterDeploy</code> hook</h3><p>If we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the <code>afterDeploy</code> hook. The same rules apply here. <code>afterDeploy</code> has access to all deployed contract instances through the <code>dependencies</code> object.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Error-Handling\"><a href=\"#Error-Handling\" class=\"headerlink\" title=\"Error Handling\"></a>Error Handling</h3><p>Since we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    await dependencies.contracts.SimpleStorage.methods.set(85).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">  &#125; catch (e) &#123;</span><br><span class=\"line\">    console.error(&#39;Error during onDeploy&#39;, e);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on deployment hook string syntax</strong></p>\n  <p><p>In older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don’t support functions.</p>\n<p>The examples above can be therefore written as:</p>\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\n<p>This string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Logging-with-context\"><a href=\"#Logging-with-context\" class=\"headerlink\" title=\"Logging with context\"></a>Logging with context</h3><p>Often we use log statements to either debug code or simply to output what’s going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don’t drown in the rest of Embark’s output, we can use the injected <code>logger</code> which prefixes every log message with a context indicator.</p>\n<p>For example, when logging something from within an <code>onDeploy</code> hook of a Smart Contract, the output will look like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SmartContractName &gt; onDeploy &gt; [YOUR MESSAGE]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>logger</code> is injected as part of the <code>dependencies</code> object, so we can use it like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      dependencies.logger.info(&#39;Hello from onDeploy!&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Which will result in</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage &gt; onDeploy &gt; Hello from onDeploy!</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Human-readable-Ether-units\"><a href=\"#Human-readable-Ether-units\" class=\"headerlink\" title=\"Human readable Ether units\"></a>Human readable Ether units</h2><p>Embark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as <code>wei</code>, <code>kwei</code>, <code>Kwei</code>, <code>shannon</code>, <code>finney</code>, … etc.</p>\n<p>Let’s take the simple Smart Contract configuration from the <a href=\"#Configuring-gas-and-gas-price\">configuring gas and gas price</a> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: 800000,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This can as well be written as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: &#39;800 Kwei&#39;,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark will take care of converting those units to their dedicated Wei values.</p>\n"},{"title":"Plugin APIs","layout":"docs","_content":"\nThis reference covers all APIs exposed by the `embark` object passed to every custom created plugin. Make sure to read the section on [creating a plugin](/docs/creating_plugins.html) first.\n\n## .pluginConfig\n\n`pluginConfig` is an object that contains the configuration for your plugin specified in the project's `embark.json`. For example, if a plugin configuration like the following:\n\n```\n\"plugins\": {\n  \"embark-babel\": { \n    \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n    \"presets\": [\"es2015\", \"react\"]\n  }\n}\n```\n\n`embark.pluginConfig` will contain \n\n```\n{ \n  \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n  \"presets\": [\"es2015\", \"react\"]\n}\n```\n\nand can be used by your plugin as needed.\n\n## .registerPipeline(matchingFiles, callback(options))\n\nThis call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.\n\n`matchingFiles` is an array of matching files the plugin should be called with for e.g `['**/*.js', '!vendor/jquery.js']` matches all JavaScript files except `vendor/jquery.js`.\n\nAvailable optinos:\n * `targetFile` - filename to be generated\n * `source` - content of the file\n\nReturns `string`\n\n```\nvar babel = require(\"babel-core\");\nrequire(\"babel-preset-react\");\n\nmodule.exports = function(embark) {\n  embark.registerPipeline([\"**/*.js\", \"**/*.jsx\"], (options) => {\n    return babel.transform(options.source, {\n      minified: true,\n      presets: ['react']\n    }).code;\n  });\n}\n```\n\n## .registerContractConfiguration(contractsConfig)\n\nThis call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the `DGDToken` contract code will redeployed with the arguments `100` in any environment, except for the livenet since it's already deployed there at a particular address.\n\nTypically this call is used in combination with `embark.addContractFile`\n\n`contractsConfig` is an object in the same structure as the one found in the contracts configuration at `config/contracts.json`. The users own configuration will be merged with the one specified in the plugins.\n\n```\nmodule.exports = function(embark) {\n  embark.registerContractConfiguration({\n    \"default\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"args\": [\n            100\n          ]\n        }\n      }\n    },\n    \"livenet\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"address\": \"0xe0b7927c4af23765cb51314a0e0521a9645f0e2a\"\n        }\n      }\n    }\n  });\n}\n```\n\n## .addContractFile(file)\n\nTypically this call is used in combination with `embark.registerContractConfiguration`. If you want to make the contract available but not automatically deployed without the user specifying so you can use `registerContractConfiguration` to set the contract config to `deploy: false`, this is particularly useful for when the user is meant to extend the contract being given (e.g `contract MyToken is StandardToken`)\n\n`file` is the contract file to add to embark, the path should relative to the plugin.\n\n```\nmodule.exports = function(embark) {\n  embark.addContractFile(\"./DGDToken.sol\");\n}\n```\n\n## .addFileToPipeline(file, options)\n\nThis call is used to add a file to the pipeline so it's included with the dapp on the client side.\n\n`file` is the file to add to the pipeline, the path should relative to the plugin.\n\n`intendedPath` is the intended path outside of the plugin\n\nAvailable options:\n * `skipPipeline` - If `true` it will not apply transformations to the file. For\n   example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to\n   true will not apply the plugin on this file.\n\n```\nmodule.exports = function(embark) {\n  embark.addFileToPipeline(\"./jquery.js\", {skipPipeline: true});\n}\n```\n\n## .registerBeforeDeploy(callback(options), [callback])\n\nThis call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.\nIt is useful to replace placeholders with dynamic values.\n\nAvailable options:\n * `embarkDeploy` - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.\n * `pluginConfig` - plugin configuration object from embark.json\n * `deploymentAccount` - address of account which will be used to deploy this contract\n * `contract` - contract object.\n * `callback` - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code\n\nYou can use the callback argument instead of the callback option if you prefer. It needs the same result object.\n\nexpected return: ignored\n\n```\nmodule.exports = function(embark) {\n  embark.registerBeforeDeploy(function(options) {\n    var code = options.contract.code.replace(/deaddeaddeaddeaddeaddeaddeaddeaddeaddead/ig, 'c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de');\n    options.callback({ contractCode: code });\n  });\n}\n```\n\n## .registerClientWeb3Provider(callback(options))\n\nThis call can be used to override the default web3 object generation in the dapp. it's useful if you want to add a plugin to interact with services like http://infura.io or if you want to use your own web3.js library extension.\n\noptions available:\n * rpcHost - configured rpc Host to connect to\n * rpcPort - configured rpc Port to connect to\n * blockchainConfig - object containing the full blockchain configuration for the current environment\n\nexpected return: ``string``\n\nexample:\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n## .registerContractsGeneration(callback(options))\n\nBy default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.\n\nAvailable options:\n  * contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)\n    * abiDefinition\n    * code\n    * deployedAddress\n    * gasEstimates\n    * gas\n    * gasPrice\n    * runtimeByteCode\n\nReturns `string`\n\n The generated string will be used to create the contract objects in the Embark console and will be generated in `embarkArtifacts` so that the Dapp can use them.\n\n```\nmodule.exports = (embark) => {\n  embark.registerContractsGeneration((options) => {\n    const contractGenerations = [];\n    Object.keys(options.contracts).map(className => {\n      const contract = options.contracts[className];\n      const abi = JSON.stringify(contract.abiDefinition);\n\n      contractGenerations.push(`${className} = new web3.eth.Contract(${abi}, '${contract.deployedAddress}');\n      module.exports = ${className};`);\n    });\n    return contractGenerations.join('\\n');\n  });\n};\n```\n\n## .registerConsoleCommand(options)\n\nThis call is used to extend the console with custom commands.\n\nThe function takes an `object` with the following options:\n\n- `description`: Description of the command (used by the help command)\n- `matches`: Either an `array` of strings corresponding to exact matches for the command or a `function` where the only parameter in the command\n  - The `function` must return a `boolean`. True if it matches, `false` if not.\n- `usage`: Usage of the command that will be outputed by the help command\n  - Adding `usage` is optional in the case where `matches` is an `array`\n- `process`: `function` that will be executed to process the command. The `function` receives two parameters:\n  - `command`: The `string` command that the user entered\n  - `callback`: Callback `function` to be called at the end of the process\n    - This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console\n\n```\nmodule.exports = function(embark) {\n  embark.registerConsoleCommand({\n    description: \"Salutes the world\",\n    matches: [\"hello\", \"hellowWorld\"],\n    // OR a function for more complex cases\n    matches: (cmd) => {\n      const [commandName, name] = cmd.split(' '); // You can use `split` for commands that receive parameters\n      return commandName === 'hello' || commandName === 'hellowWorld'; \n    },\n    usage: \"hello &lt;name&gt; or helloWorld &lt;name&gt;\",\n    process: (cmd, callback) => {\n      const [commandName, name] = cmd.split(' ');\n      name = name || \"noName\"; // Default to \"noName\" when nothing is specified\n      callback(null, `Hello ${name}`); // Call back with the message. This will be outputed in the console\n    }\n  });\n}\n```\n\n## .registerCompiler(extension, callback(contractFiles, doneCallback))\n\nRegisters a new compiler for a specific contract extension.\n\nArguments:\n\n- **extension**: The file extension (e.g: `.sol`)\n- **callback**: Function called by Embark with the contract files that the plugin should process\n - **contractFiles**: Array of files that need to be compiled\n - **doneCallback(error, result)**: The final callback to call once every file is compiled or when there is an error\n   - **error**: Error string or object when something goes wrong\n   - **result**: An object containing the compiled contracts result (key: contractName, value: contract object) or, `false` if your plugin is not compatible\n    - **code** - [required] contract bytecode (string)      \n    - **abiDefinition** - [required] contract abi (array of objects)\n      - e.g ``[{\"constant\":true,\"inputs\":[],\"name\":\"storedData\",\"outputs\":[{\"name\":\"\",\"type\":\"uint256\"}],\"payable\":false,\"type\":\"function\"}, etc...``\n    - **runtimeBytecode** - [optional] contract runtimeBytecode (string)\n    - **gasEstimates** - [optional] gas estimates for constructor and methods (hash)\n      - e.g ``{\"creation\":[20131,38200],\"external\":{\"get()\":269,\"set(uint256)\":20163,\"storedData()\":224},\"internal\":{}}``\n    - **functionHashes** - [optional] object with methods and their corresponding hash identifier (hash)\n      - e.g ``{\"get()\":\"6d4ce63c\",\"set(uint256)\":\"60fe47b1\",\"storedData()\":\"2a1afcd9\"}``\n\n\nBelow a possible implementation of a solcjs plugin.\nNote that the plugin checks the version and returns `false` as the result if it is not compatible:\n\n```\nconst solc = require('solc');\nconst semver = require('semver');\n\nmodule.exports = function(embark) {\n  embark.registerCompiler(\".sol\", function(contractFiles, cb) {\n    const wantedVersion = embark.config.embarkConfig.versions.solc;\n    if (semver.gt(wantedVersion, '0.5.0')) {\n      // We do not support greater than solidity version 0.5.0\n      // This let's Embark know that we are not compatible, that way Embark will fallback to another compiler\n      return cb(null, false);\n    }\n  \n    // prepare input for solc\n    var input = {};\n    for (var i = 0; i < contractFiles.length; i++) {\n      var filename = contractFiles[i].filename.replace('app/contracts/','');\n      input[filename] = contractFiles[i].content.toString();\n    }\n\n    // compile files\n    var output = solc.compile({sources: input}, 1);\n\n    // generate the compileObject expected by embark\n    var json = output.contracts;\n    var compiled_object = {};\n    for (var className in json) {\n      var contract = json[className];\n\n      compiled_object[className] = {};\n      compiled_object[className].code            = contract.bytecode;\n      compiled_object[className].runtimeBytecode = contract.runtimeBytecode;\n      compiled_object[className].gasEstimates    = contract.gasEstimates;\n      compiled_object[className].functionHashes  = contract.functionHashes;\n      compiled_object[className].abiDefinition   = JSON.parse(contract.interface);\n    }\n\n    cb(null, compiled_object);\n  });\n}\n```\n\n## .logger\n\nTo print messages to the embark log is it better to use ``embark.logger`` instead of ``console``.\n\ne.g ``embark.logger.info(\"hello\")``\n\n## .events.on(eventName, callback(*args))\n\nThis call is used to listen and react to events that happen in Embark such as contract deployment\n\n* eventName - name of event to listen to\n   * available events:\n      * `contractsDeployed` - triggered when contracts have been deployed\n      * `file-add`, `file-change`, `file-remove`, `file-event` - triggered on a file change, args is (filetype, path)\n      * `outputDone` - triggered when dapp is (re)generated\n      * `firstDeploymentDone` - triggered when the dapp is deployed and generated for the first time\n      * `check:backOnline:serviceName` - triggered when the service with ``serviceName`` comes back online\n      * `check:wentOffline:serviceName` - triggered when the service with ``serviceName`` goes offline\n      * `log` - triggered on a log, args is (logLevel, logMsg)\n      * `contractsState` - list of contracts, their deployment status, address, etc..\n      * `servicesState` - list of services and their state\n      * `exit`: - triggered when embark is terminating\n      * `deploy:contract:deployed`: - triggered when a contract is deployed, the callback will contain the contract object\n      * `deploy:contract:undeployed`: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object\n      * `deploy:contract:error`: - triggered when a contract couldn't be deployed due to an error, the callback will contain the contract object\n      * `deploy:contract:receipt`: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt\n      * `contractsState`: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..\n      * `deploy:beforeAll`: - triggered before contract deployment starts\n      * `contracts:deploy:afterAll`: - triggered after contract deployment starts\n\n```\nmodule.exports = function(embark) {\n  embark.events.on(\"contractsDeployed\", function() {\n    embark.logger.info(\"plugin says: your contracts have been deployed\");\n  });\n  embark.events.on(\"file-change\", function(filetype, path) {\n    if (type === 'contract') {\n      embark.logger.info(\"plugin says: you just changed the contract at \" + path);\n    }\n  });\n}\n```\n\n### .events.request(requestName, callback(*args))\n\nThis call is used to request a certain resource from Embark\n\n* requestName - name of request to listen to\n   * available requests:\n     * (`deploy:contract`, contractObj) - deploys a particular contract through embark\n     * (`runcode:eval`, code) - runs js code in the Embark engine.\n     * (`runcode:register`, cmdName, cmdObj) - 'registers' a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);\n     * (`contracts:list`) - returns a list a callback containing (err, contractList) containing a collection of available contracts\n     * (`compiler:contracts`, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback\n     * (`services:register`, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)\n     * (`console:command`, cmd) - execute a command in the console\n\n```\nmodule.exports = function(embark) {\n  embark.events.request(\"code\", function(code) {\n    // Do something with the code\n  });\n}\n```\n\n## .registerServiceCheck(serviceName, callback({name, status}), time)\n\nThis call is used to register a service in embark so it's periodically checked.\nIt will be displayed in the Embark Dashboard, and will also trigger events such as ``check:backOnline:yourServiceName`` and ``check:backOffline:yourServiceName``\n\n* serviceName - name of service (string)\n* callback:\n  * `name` - name/text to display (string)\n  * `status` - status of the service (string, `on` or `off` or `warn`)\n* time (optional) - ms interval to call the callback (default: 5000 ms)\n\n```\nmodule.exports = function(embark) {\n  embark.registerServiceCheck(\"MyServer\", function(cb) {\n    if (myServiceOnline()) {\n      return cb({name: \"MyServer Online\", status: \"on\"});\n    } else {\n      return cb({name: \"MyServer Offline\", status: \"off\"});\n    }\n  });\n}\n```\n\n## .registerUploadCommand(cmdName, callback)\n\nThis call is used to add a new cmd to ``embark upload`` to upload the dapp to a new storage service. In the example, `run` doesn't exist. You need to import a library that runs shell commands like [shelljs](https://www.npmjs.com/package/shelljs)\n\n```\nmodule.exports = function(embark) {\n  embark.registerUploadCommand(\"ipfs\", function() {\n    run(\"ipfs add -r dist/\");\n  });\n}\n```\n\n## .addCodeToEmbarkJS(code)\n\nThis call is used to add code to the embark.js library. It's typically used to extend it with new functionality, new storage providers, new communication providers, etc..\n\n```\nmodule.exports = function(embark) {\n  embark.addCodeToEmbarkJS(\"alert('hello world!')\");\n}\n```\n\n## .addProviderInit(providerType, code, initCondition(config))\n\nThis call is used to add code to be executed in the initialization under the condition that ``initCondition`` returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config\n\n* providerType - type of provider (string, \"storage\" or \"communication\")\n* code - code to add (string)\n* callback:\n  * \"config\" - config of the ``providerType``\n\n```\nmodule.exports = function(embark) {\n  let code = \"\\nEmbarkJS.Storage.setProvider('ipfs')\";\n  embark.addProviderInit('storage', code, (storageConfig) => {\n    return (storageConfig.provider === 'ipfs' && storageConfig.enabled === true);\n  });\n}\n```\n\n## .registerImportFile(importName, importLocation)\n\nThis call is used so the plugin can make a certain file available as a library to a user\n\n```\nvar path = require('path')\n\nmodule.exports = function(embark) {\n  embark.registerImportFile(\"my-lib\", path.join(__dirname, \"my-lib.js\"));\n}\n```\n\n## .registerActionForEvent(eventName, options, cb)\n\nThis lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let's you modify the params before sending them back to the next action or back to Embark.\n\nHere is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:\n```\nembark.registerActionForEvent(\"deployment:contract:beforeDeploy\", async (params, cb) => {\n  cosnt contarct = params.contract;\n  if (!contract.code) {\n    return callback();\n  }\n  \n  const code = (contract.code.indexOf('0x') === 0) ? contract.code.substr(2) : contract.code;\n  const contractCodeLength = Buffer.from(code, 'hex').toString().length;\n  if (contractCodeLength > MAX_CONTRACT_BYTECODE_LENGTH) {\n    return callback(new Error(`Bytecode for ${contract.className} contract is too large. Not deploying.`));\n  }\n  callback();\n});\n```\n\n### Parameters\n- `eventName`: String, Name fo the event you want an action to be registered to\n- `options`: Object, optional, options for the action registration\n  - `priority`: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)\n\n### Available events for actions\n\n- `embark:engine:started`: Called when the engine just started. No params\n- `blockchain:config:modify`: Let's you modify the blockchain configs before starting a blockchain node. Only param is the initial `blockchainConfig`\n- `deployment:contract:beforeDeploy`: Called before a contract is deployed. Only param is the `contract`\n- `deployment:contract:shouldDeploy`: Also called before a contract is deployed, but let's you determine if the contract should be deployed. Two params: `contract` and `shouldDeploy`, set `shouldDeploy` to `false` to disable its deployment\n- `deployment:contract:undeployed`: Called after a contract is determined to not deploy. Only param is `contract`\n- `deployment:contract:deployed`: Called after a contract deployed. Only param is `contract`\n- `deployment:deployContracts:beforeAll`: Called before any contract is deployed. No params\n- `deployment:deployContracts:afterAll`: Called after all contracts have deployed. No params\n- `tests:contracts:compile:before`: Called before the contracts are compiled in the context of the test. Only param is `contractFiles`\n- `tests:contracts:compile:after`: Called after the contracts are compiled in the context of the test. Only param is `compiledContracts`\n- `blockchain:proxy:request`: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:\n  - `request`: an object containing the request payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n- `blockchain:proxy:response`: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:\n  - `request`: an object containing the request payload\n  - `response`: an object containing the response payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n","source":"docs/plugin_reference.md","raw":"title: Plugin APIs\nlayout: docs\n---\n\nThis reference covers all APIs exposed by the `embark` object passed to every custom created plugin. Make sure to read the section on [creating a plugin](/docs/creating_plugins.html) first.\n\n## .pluginConfig\n\n`pluginConfig` is an object that contains the configuration for your plugin specified in the project's `embark.json`. For example, if a plugin configuration like the following:\n\n```\n\"plugins\": {\n  \"embark-babel\": { \n    \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n    \"presets\": [\"es2015\", \"react\"]\n  }\n}\n```\n\n`embark.pluginConfig` will contain \n\n```\n{ \n  \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n  \"presets\": [\"es2015\", \"react\"]\n}\n```\n\nand can be used by your plugin as needed.\n\n## .registerPipeline(matchingFiles, callback(options))\n\nThis call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.\n\n`matchingFiles` is an array of matching files the plugin should be called with for e.g `['**/*.js', '!vendor/jquery.js']` matches all JavaScript files except `vendor/jquery.js`.\n\nAvailable optinos:\n * `targetFile` - filename to be generated\n * `source` - content of the file\n\nReturns `string`\n\n```\nvar babel = require(\"babel-core\");\nrequire(\"babel-preset-react\");\n\nmodule.exports = function(embark) {\n  embark.registerPipeline([\"**/*.js\", \"**/*.jsx\"], (options) => {\n    return babel.transform(options.source, {\n      minified: true,\n      presets: ['react']\n    }).code;\n  });\n}\n```\n\n## .registerContractConfiguration(contractsConfig)\n\nThis call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the `DGDToken` contract code will redeployed with the arguments `100` in any environment, except for the livenet since it's already deployed there at a particular address.\n\nTypically this call is used in combination with `embark.addContractFile`\n\n`contractsConfig` is an object in the same structure as the one found in the contracts configuration at `config/contracts.json`. The users own configuration will be merged with the one specified in the plugins.\n\n```\nmodule.exports = function(embark) {\n  embark.registerContractConfiguration({\n    \"default\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"args\": [\n            100\n          ]\n        }\n      }\n    },\n    \"livenet\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"address\": \"0xe0b7927c4af23765cb51314a0e0521a9645f0e2a\"\n        }\n      }\n    }\n  });\n}\n```\n\n## .addContractFile(file)\n\nTypically this call is used in combination with `embark.registerContractConfiguration`. If you want to make the contract available but not automatically deployed without the user specifying so you can use `registerContractConfiguration` to set the contract config to `deploy: false`, this is particularly useful for when the user is meant to extend the contract being given (e.g `contract MyToken is StandardToken`)\n\n`file` is the contract file to add to embark, the path should relative to the plugin.\n\n```\nmodule.exports = function(embark) {\n  embark.addContractFile(\"./DGDToken.sol\");\n}\n```\n\n## .addFileToPipeline(file, options)\n\nThis call is used to add a file to the pipeline so it's included with the dapp on the client side.\n\n`file` is the file to add to the pipeline, the path should relative to the plugin.\n\n`intendedPath` is the intended path outside of the plugin\n\nAvailable options:\n * `skipPipeline` - If `true` it will not apply transformations to the file. For\n   example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to\n   true will not apply the plugin on this file.\n\n```\nmodule.exports = function(embark) {\n  embark.addFileToPipeline(\"./jquery.js\", {skipPipeline: true});\n}\n```\n\n## .registerBeforeDeploy(callback(options), [callback])\n\nThis call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.\nIt is useful to replace placeholders with dynamic values.\n\nAvailable options:\n * `embarkDeploy` - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.\n * `pluginConfig` - plugin configuration object from embark.json\n * `deploymentAccount` - address of account which will be used to deploy this contract\n * `contract` - contract object.\n * `callback` - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code\n\nYou can use the callback argument instead of the callback option if you prefer. It needs the same result object.\n\nexpected return: ignored\n\n```\nmodule.exports = function(embark) {\n  embark.registerBeforeDeploy(function(options) {\n    var code = options.contract.code.replace(/deaddeaddeaddeaddeaddeaddeaddeaddeaddead/ig, 'c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de');\n    options.callback({ contractCode: code });\n  });\n}\n```\n\n## .registerClientWeb3Provider(callback(options))\n\nThis call can be used to override the default web3 object generation in the dapp. it's useful if you want to add a plugin to interact with services like http://infura.io or if you want to use your own web3.js library extension.\n\noptions available:\n * rpcHost - configured rpc Host to connect to\n * rpcPort - configured rpc Port to connect to\n * blockchainConfig - object containing the full blockchain configuration for the current environment\n\nexpected return: ``string``\n\nexample:\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n## .registerContractsGeneration(callback(options))\n\nBy default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.\n\nAvailable options:\n  * contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)\n    * abiDefinition\n    * code\n    * deployedAddress\n    * gasEstimates\n    * gas\n    * gasPrice\n    * runtimeByteCode\n\nReturns `string`\n\n The generated string will be used to create the contract objects in the Embark console and will be generated in `embarkArtifacts` so that the Dapp can use them.\n\n```\nmodule.exports = (embark) => {\n  embark.registerContractsGeneration((options) => {\n    const contractGenerations = [];\n    Object.keys(options.contracts).map(className => {\n      const contract = options.contracts[className];\n      const abi = JSON.stringify(contract.abiDefinition);\n\n      contractGenerations.push(`${className} = new web3.eth.Contract(${abi}, '${contract.deployedAddress}');\n      module.exports = ${className};`);\n    });\n    return contractGenerations.join('\\n');\n  });\n};\n```\n\n## .registerConsoleCommand(options)\n\nThis call is used to extend the console with custom commands.\n\nThe function takes an `object` with the following options:\n\n- `description`: Description of the command (used by the help command)\n- `matches`: Either an `array` of strings corresponding to exact matches for the command or a `function` where the only parameter in the command\n  - The `function` must return a `boolean`. True if it matches, `false` if not.\n- `usage`: Usage of the command that will be outputed by the help command\n  - Adding `usage` is optional in the case where `matches` is an `array`\n- `process`: `function` that will be executed to process the command. The `function` receives two parameters:\n  - `command`: The `string` command that the user entered\n  - `callback`: Callback `function` to be called at the end of the process\n    - This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console\n\n```\nmodule.exports = function(embark) {\n  embark.registerConsoleCommand({\n    description: \"Salutes the world\",\n    matches: [\"hello\", \"hellowWorld\"],\n    // OR a function for more complex cases\n    matches: (cmd) => {\n      const [commandName, name] = cmd.split(' '); // You can use `split` for commands that receive parameters\n      return commandName === 'hello' || commandName === 'hellowWorld'; \n    },\n    usage: \"hello &lt;name&gt; or helloWorld &lt;name&gt;\",\n    process: (cmd, callback) => {\n      const [commandName, name] = cmd.split(' ');\n      name = name || \"noName\"; // Default to \"noName\" when nothing is specified\n      callback(null, `Hello ${name}`); // Call back with the message. This will be outputed in the console\n    }\n  });\n}\n```\n\n## .registerCompiler(extension, callback(contractFiles, doneCallback))\n\nRegisters a new compiler for a specific contract extension.\n\nArguments:\n\n- **extension**: The file extension (e.g: `.sol`)\n- **callback**: Function called by Embark with the contract files that the plugin should process\n - **contractFiles**: Array of files that need to be compiled\n - **doneCallback(error, result)**: The final callback to call once every file is compiled or when there is an error\n   - **error**: Error string or object when something goes wrong\n   - **result**: An object containing the compiled contracts result (key: contractName, value: contract object) or, `false` if your plugin is not compatible\n    - **code** - [required] contract bytecode (string)      \n    - **abiDefinition** - [required] contract abi (array of objects)\n      - e.g ``[{\"constant\":true,\"inputs\":[],\"name\":\"storedData\",\"outputs\":[{\"name\":\"\",\"type\":\"uint256\"}],\"payable\":false,\"type\":\"function\"}, etc...``\n    - **runtimeBytecode** - [optional] contract runtimeBytecode (string)\n    - **gasEstimates** - [optional] gas estimates for constructor and methods (hash)\n      - e.g ``{\"creation\":[20131,38200],\"external\":{\"get()\":269,\"set(uint256)\":20163,\"storedData()\":224},\"internal\":{}}``\n    - **functionHashes** - [optional] object with methods and their corresponding hash identifier (hash)\n      - e.g ``{\"get()\":\"6d4ce63c\",\"set(uint256)\":\"60fe47b1\",\"storedData()\":\"2a1afcd9\"}``\n\n\nBelow a possible implementation of a solcjs plugin.\nNote that the plugin checks the version and returns `false` as the result if it is not compatible:\n\n```\nconst solc = require('solc');\nconst semver = require('semver');\n\nmodule.exports = function(embark) {\n  embark.registerCompiler(\".sol\", function(contractFiles, cb) {\n    const wantedVersion = embark.config.embarkConfig.versions.solc;\n    if (semver.gt(wantedVersion, '0.5.0')) {\n      // We do not support greater than solidity version 0.5.0\n      // This let's Embark know that we are not compatible, that way Embark will fallback to another compiler\n      return cb(null, false);\n    }\n  \n    // prepare input for solc\n    var input = {};\n    for (var i = 0; i < contractFiles.length; i++) {\n      var filename = contractFiles[i].filename.replace('app/contracts/','');\n      input[filename] = contractFiles[i].content.toString();\n    }\n\n    // compile files\n    var output = solc.compile({sources: input}, 1);\n\n    // generate the compileObject expected by embark\n    var json = output.contracts;\n    var compiled_object = {};\n    for (var className in json) {\n      var contract = json[className];\n\n      compiled_object[className] = {};\n      compiled_object[className].code            = contract.bytecode;\n      compiled_object[className].runtimeBytecode = contract.runtimeBytecode;\n      compiled_object[className].gasEstimates    = contract.gasEstimates;\n      compiled_object[className].functionHashes  = contract.functionHashes;\n      compiled_object[className].abiDefinition   = JSON.parse(contract.interface);\n    }\n\n    cb(null, compiled_object);\n  });\n}\n```\n\n## .logger\n\nTo print messages to the embark log is it better to use ``embark.logger`` instead of ``console``.\n\ne.g ``embark.logger.info(\"hello\")``\n\n## .events.on(eventName, callback(*args))\n\nThis call is used to listen and react to events that happen in Embark such as contract deployment\n\n* eventName - name of event to listen to\n   * available events:\n      * `contractsDeployed` - triggered when contracts have been deployed\n      * `file-add`, `file-change`, `file-remove`, `file-event` - triggered on a file change, args is (filetype, path)\n      * `outputDone` - triggered when dapp is (re)generated\n      * `firstDeploymentDone` - triggered when the dapp is deployed and generated for the first time\n      * `check:backOnline:serviceName` - triggered when the service with ``serviceName`` comes back online\n      * `check:wentOffline:serviceName` - triggered when the service with ``serviceName`` goes offline\n      * `log` - triggered on a log, args is (logLevel, logMsg)\n      * `contractsState` - list of contracts, their deployment status, address, etc..\n      * `servicesState` - list of services and their state\n      * `exit`: - triggered when embark is terminating\n      * `deploy:contract:deployed`: - triggered when a contract is deployed, the callback will contain the contract object\n      * `deploy:contract:undeployed`: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object\n      * `deploy:contract:error`: - triggered when a contract couldn't be deployed due to an error, the callback will contain the contract object\n      * `deploy:contract:receipt`: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt\n      * `contractsState`: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..\n      * `deploy:beforeAll`: - triggered before contract deployment starts\n      * `contracts:deploy:afterAll`: - triggered after contract deployment starts\n\n```\nmodule.exports = function(embark) {\n  embark.events.on(\"contractsDeployed\", function() {\n    embark.logger.info(\"plugin says: your contracts have been deployed\");\n  });\n  embark.events.on(\"file-change\", function(filetype, path) {\n    if (type === 'contract') {\n      embark.logger.info(\"plugin says: you just changed the contract at \" + path);\n    }\n  });\n}\n```\n\n### .events.request(requestName, callback(*args))\n\nThis call is used to request a certain resource from Embark\n\n* requestName - name of request to listen to\n   * available requests:\n     * (`deploy:contract`, contractObj) - deploys a particular contract through embark\n     * (`runcode:eval`, code) - runs js code in the Embark engine.\n     * (`runcode:register`, cmdName, cmdObj) - 'registers' a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);\n     * (`contracts:list`) - returns a list a callback containing (err, contractList) containing a collection of available contracts\n     * (`compiler:contracts`, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback\n     * (`services:register`, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)\n     * (`console:command`, cmd) - execute a command in the console\n\n```\nmodule.exports = function(embark) {\n  embark.events.request(\"code\", function(code) {\n    // Do something with the code\n  });\n}\n```\n\n## .registerServiceCheck(serviceName, callback({name, status}), time)\n\nThis call is used to register a service in embark so it's periodically checked.\nIt will be displayed in the Embark Dashboard, and will also trigger events such as ``check:backOnline:yourServiceName`` and ``check:backOffline:yourServiceName``\n\n* serviceName - name of service (string)\n* callback:\n  * `name` - name/text to display (string)\n  * `status` - status of the service (string, `on` or `off` or `warn`)\n* time (optional) - ms interval to call the callback (default: 5000 ms)\n\n```\nmodule.exports = function(embark) {\n  embark.registerServiceCheck(\"MyServer\", function(cb) {\n    if (myServiceOnline()) {\n      return cb({name: \"MyServer Online\", status: \"on\"});\n    } else {\n      return cb({name: \"MyServer Offline\", status: \"off\"});\n    }\n  });\n}\n```\n\n## .registerUploadCommand(cmdName, callback)\n\nThis call is used to add a new cmd to ``embark upload`` to upload the dapp to a new storage service. In the example, `run` doesn't exist. You need to import a library that runs shell commands like [shelljs](https://www.npmjs.com/package/shelljs)\n\n```\nmodule.exports = function(embark) {\n  embark.registerUploadCommand(\"ipfs\", function() {\n    run(\"ipfs add -r dist/\");\n  });\n}\n```\n\n## .addCodeToEmbarkJS(code)\n\nThis call is used to add code to the embark.js library. It's typically used to extend it with new functionality, new storage providers, new communication providers, etc..\n\n```\nmodule.exports = function(embark) {\n  embark.addCodeToEmbarkJS(\"alert('hello world!')\");\n}\n```\n\n## .addProviderInit(providerType, code, initCondition(config))\n\nThis call is used to add code to be executed in the initialization under the condition that ``initCondition`` returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config\n\n* providerType - type of provider (string, \"storage\" or \"communication\")\n* code - code to add (string)\n* callback:\n  * \"config\" - config of the ``providerType``\n\n```\nmodule.exports = function(embark) {\n  let code = \"\\nEmbarkJS.Storage.setProvider('ipfs')\";\n  embark.addProviderInit('storage', code, (storageConfig) => {\n    return (storageConfig.provider === 'ipfs' && storageConfig.enabled === true);\n  });\n}\n```\n\n## .registerImportFile(importName, importLocation)\n\nThis call is used so the plugin can make a certain file available as a library to a user\n\n```\nvar path = require('path')\n\nmodule.exports = function(embark) {\n  embark.registerImportFile(\"my-lib\", path.join(__dirname, \"my-lib.js\"));\n}\n```\n\n## .registerActionForEvent(eventName, options, cb)\n\nThis lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let's you modify the params before sending them back to the next action or back to Embark.\n\nHere is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:\n```\nembark.registerActionForEvent(\"deployment:contract:beforeDeploy\", async (params, cb) => {\n  cosnt contarct = params.contract;\n  if (!contract.code) {\n    return callback();\n  }\n  \n  const code = (contract.code.indexOf('0x') === 0) ? contract.code.substr(2) : contract.code;\n  const contractCodeLength = Buffer.from(code, 'hex').toString().length;\n  if (contractCodeLength > MAX_CONTRACT_BYTECODE_LENGTH) {\n    return callback(new Error(`Bytecode for ${contract.className} contract is too large. Not deploying.`));\n  }\n  callback();\n});\n```\n\n### Parameters\n- `eventName`: String, Name fo the event you want an action to be registered to\n- `options`: Object, optional, options for the action registration\n  - `priority`: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)\n\n### Available events for actions\n\n- `embark:engine:started`: Called when the engine just started. No params\n- `blockchain:config:modify`: Let's you modify the blockchain configs before starting a blockchain node. Only param is the initial `blockchainConfig`\n- `deployment:contract:beforeDeploy`: Called before a contract is deployed. Only param is the `contract`\n- `deployment:contract:shouldDeploy`: Also called before a contract is deployed, but let's you determine if the contract should be deployed. Two params: `contract` and `shouldDeploy`, set `shouldDeploy` to `false` to disable its deployment\n- `deployment:contract:undeployed`: Called after a contract is determined to not deploy. Only param is `contract`\n- `deployment:contract:deployed`: Called after a contract deployed. Only param is `contract`\n- `deployment:deployContracts:beforeAll`: Called before any contract is deployed. No params\n- `deployment:deployContracts:afterAll`: Called after all contracts have deployed. No params\n- `tests:contracts:compile:before`: Called before the contracts are compiled in the context of the test. Only param is `contractFiles`\n- `tests:contracts:compile:after`: Called after the contracts are compiled in the context of the test. Only param is `compiledContracts`\n- `blockchain:proxy:request`: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:\n  - `request`: an object containing the request payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n- `blockchain:proxy:response`: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:\n  - `request`: an object containing the request payload\n  - `response`: an object containing the response payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/plugin_reference.html","comments":1,"_id":"ck5ijm3uj002t7hega11r8j6v","content":"<p>This reference covers all APIs exposed by the <code>embark</code> object passed to every custom created plugin. Make sure to read the section on <a href=\"/docs/creating_plugins.html\">creating a plugin</a> first.</p>\n<h2 id=\"pluginConfig\"><a href=\"#pluginConfig\" class=\"headerlink\" title=\".pluginConfig\"></a>.pluginConfig</h2><p><code>pluginConfig</code> is an object that contains the configuration for your plugin specified in the project’s <code>embark.json</code>. For example, if a plugin configuration like the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-babel&quot;: &#123; </span><br><span class=\"line\">    &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">    &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>embark.pluginConfig</code> will contain </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123; </span><br><span class=\"line\">  &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">  &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>and can be used by your plugin as needed.</p>\n<h2 id=\"registerPipeline-matchingFiles-callback-options\"><a href=\"#registerPipeline-matchingFiles-callback-options\" class=\"headerlink\" title=\".registerPipeline(matchingFiles, callback(options))\"></a>.registerPipeline(matchingFiles, callback(options))</h2><p>This call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.</p>\n<p><code>matchingFiles</code> is an array of matching files the plugin should be called with for e.g <code>[&#39;**/*.js&#39;, &#39;!vendor/jquery.js&#39;]</code> matches all JavaScript files except <code>vendor/jquery.js</code>.</p>\n<p>Available optinos:</p>\n<ul>\n<li><code>targetFile</code> - filename to be generated</li>\n<li><code>source</code> - content of the file</li>\n</ul>\n<p>Returns <code>string</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var babel &#x3D; require(&quot;babel-core&quot;);</span><br><span class=\"line\">require(&quot;babel-preset-react&quot;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerPipeline([&quot;**&#x2F;*.js&quot;, &quot;**&#x2F;*.jsx&quot;], (options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return babel.transform(options.source, &#123;</span><br><span class=\"line\">      minified: true,</span><br><span class=\"line\">      presets: [&#39;react&#39;]</span><br><span class=\"line\">    &#125;).code;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerContractConfiguration-contractsConfig\"><a href=\"#registerContractConfiguration-contractsConfig\" class=\"headerlink\" title=\".registerContractConfiguration(contractsConfig)\"></a>.registerContractConfiguration(contractsConfig)</h2><p>This call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the <code>DGDToken</code> contract code will redeployed with the arguments <code>100</code> in any environment, except for the livenet since it’s already deployed there at a particular address.</p>\n<p>Typically this call is used in combination with <code>embark.addContractFile</code></p>\n<p><code>contractsConfig</code> is an object in the same structure as the one found in the contracts configuration at <code>config/contracts.json</code>. The users own configuration will be merged with the one specified in the plugins.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerContractConfiguration(&#123;</span><br><span class=\"line\">    &quot;default&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;args&quot;: [</span><br><span class=\"line\">            100</span><br><span class=\"line\">          ]</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;livenet&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;address&quot;: &quot;0xe0b7927c4af23765cb51314a0e0521a9645f0e2a&quot;</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addContractFile-file\"><a href=\"#addContractFile-file\" class=\"headerlink\" title=\".addContractFile(file)\"></a>.addContractFile(file)</h2><p>Typically this call is used in combination with <code>embark.registerContractConfiguration</code>. If you want to make the contract available but not automatically deployed without the user specifying so you can use <code>registerContractConfiguration</code> to set the contract config to <code>deploy: false</code>, this is particularly useful for when the user is meant to extend the contract being given (e.g <code>contract MyToken is StandardToken</code>)</p>\n<p><code>file</code> is the contract file to add to embark, the path should relative to the plugin.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addContractFile(&quot;.&#x2F;DGDToken.sol&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addFileToPipeline-file-options\"><a href=\"#addFileToPipeline-file-options\" class=\"headerlink\" title=\".addFileToPipeline(file, options)\"></a>.addFileToPipeline(file, options)</h2><p>This call is used to add a file to the pipeline so it’s included with the dapp on the client side.</p>\n<p><code>file</code> is the file to add to the pipeline, the path should relative to the plugin.</p>\n<p><code>intendedPath</code> is the intended path outside of the plugin</p>\n<p>Available options:</p>\n<ul>\n<li><code>skipPipeline</code> - If <code>true</code> it will not apply transformations to the file. For<br>example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to<br>true will not apply the plugin on this file.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addFileToPipeline(&quot;.&#x2F;jquery.js&quot;, &#123;skipPipeline: true&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerBeforeDeploy-callback-options-callback\"><a href=\"#registerBeforeDeploy-callback-options-callback\" class=\"headerlink\" title=\".registerBeforeDeploy(callback(options), [callback])\"></a>.registerBeforeDeploy(callback(options), [callback])</h2><p>This call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.<br>It is useful to replace placeholders with dynamic values.</p>\n<p>Available options:</p>\n<ul>\n<li><code>embarkDeploy</code> - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.</li>\n<li><code>pluginConfig</code> - plugin configuration object from embark.json</li>\n<li><code>deploymentAccount</code> - address of account which will be used to deploy this contract</li>\n<li><code>contract</code> - contract object.</li>\n<li><code>callback</code> - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code</li>\n</ul>\n<p>You can use the callback argument instead of the callback option if you prefer. It needs the same result object.</p>\n<p>expected return: ignored</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerBeforeDeploy(function(options) &#123;</span><br><span class=\"line\">    var code &#x3D; options.contract.code.replace(&#x2F;deaddeaddeaddeaddeaddeaddeaddeaddeaddead&#x2F;ig, &#39;c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de&#39;);</span><br><span class=\"line\">    options.callback(&#123; contractCode: code &#125;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerClientWeb3Provider-callback-options\"><a href=\"#registerClientWeb3Provider-callback-options\" class=\"headerlink\" title=\".registerClientWeb3Provider(callback(options))\"></a>.registerClientWeb3Provider(callback(options))</h2><p>This call can be used to override the default web3 object generation in the dapp. it’s useful if you want to add a plugin to interact with services like <a href=\"http://infura.io\" target=\"_blank\" rel=\"noopener\">http://infura.io</a> or if you want to use your own web3.js library extension.</p>\n<p>options available:</p>\n<ul>\n<li>rpcHost - configured rpc Host to connect to</li>\n<li>rpcPort - configured rpc Port to connect to</li>\n<li>blockchainConfig - object containing the full blockchain configuration for the current environment</li>\n</ul>\n<p>expected return: <code>string</code></p>\n<p>example:</p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n<h2 id=\"registerContractsGeneration-callback-options\"><a href=\"#registerContractsGeneration-callback-options\" class=\"headerlink\" title=\".registerContractsGeneration(callback(options))\"></a>.registerContractsGeneration(callback(options))</h2><p>By default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.</p>\n<p>Available options:</p>\n<ul>\n<li>contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)<ul>\n<li>abiDefinition</li>\n<li>code</li>\n<li>deployedAddress</li>\n<li>gasEstimates</li>\n<li>gas</li>\n<li>gasPrice</li>\n<li>runtimeByteCode</li>\n</ul>\n</li>\n</ul>\n<p>Returns <code>string</code></p>\n<p> The generated string will be used to create the contract objects in the Embark console and will be generated in <code>embarkArtifacts</code> so that the Dapp can use them.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; (embark) &#x3D;&gt; &#123;</span><br><span class=\"line\">  embark.registerContractsGeneration((options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    const contractGenerations &#x3D; [];</span><br><span class=\"line\">    Object.keys(options.contracts).map(className &#x3D;&gt; &#123;</span><br><span class=\"line\">      const contract &#x3D; options.contracts[className];</span><br><span class=\"line\">      const abi &#x3D; JSON.stringify(contract.abiDefinition);</span><br><span class=\"line\"></span><br><span class=\"line\">      contractGenerations.push(&#96;$&#123;className&#125; &#x3D; new web3.eth.Contract($&#123;abi&#125;, &#39;$&#123;contract.deployedAddress&#125;&#39;);</span><br><span class=\"line\">      module.exports &#x3D; $&#123;className&#125;;&#96;);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">    return contractGenerations.join(&#39;\\n&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerConsoleCommand-options\"><a href=\"#registerConsoleCommand-options\" class=\"headerlink\" title=\".registerConsoleCommand(options)\"></a>.registerConsoleCommand(options)</h2><p>This call is used to extend the console with custom commands.</p>\n<p>The function takes an <code>object</code> with the following options:</p>\n<ul>\n<li><code>description</code>: Description of the command (used by the help command)</li>\n<li><code>matches</code>: Either an <code>array</code> of strings corresponding to exact matches for the command or a <code>function</code> where the only parameter in the command<ul>\n<li>The <code>function</code> must return a <code>boolean</code>. True if it matches, <code>false</code> if not.</li>\n</ul>\n</li>\n<li><code>usage</code>: Usage of the command that will be outputed by the help command<ul>\n<li>Adding <code>usage</code> is optional in the case where <code>matches</code> is an <code>array</code></li>\n</ul>\n</li>\n<li><code>process</code>: <code>function</code> that will be executed to process the command. The <code>function</code> receives two parameters:<ul>\n<li><code>command</code>: The <code>string</code> command that the user entered</li>\n<li><code>callback</code>: Callback <code>function</code> to be called at the end of the process<ul>\n<li>This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerConsoleCommand(&#123;</span><br><span class=\"line\">    description: &quot;Salutes the world&quot;,</span><br><span class=\"line\">    matches: [&quot;hello&quot;, &quot;hellowWorld&quot;],</span><br><span class=\"line\">    &#x2F;&#x2F; OR a function for more complex cases</span><br><span class=\"line\">    matches: (cmd) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;); &#x2F;&#x2F; You can use &#96;split&#96; for commands that receive parameters</span><br><span class=\"line\">      return commandName &#x3D;&#x3D;&#x3D; &#39;hello&#39; || commandName &#x3D;&#x3D;&#x3D; &#39;hellowWorld&#39;; </span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    usage: &quot;hello &lt;name&gt; or helloWorld &lt;name&gt;&quot;,</span><br><span class=\"line\">    process: (cmd, callback) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;);</span><br><span class=\"line\">      name &#x3D; name || &quot;noName&quot;; &#x2F;&#x2F; Default to &quot;noName&quot; when nothing is specified</span><br><span class=\"line\">      callback(null, &#96;Hello $&#123;name&#125;&#96;); &#x2F;&#x2F; Call back with the message. This will be outputed in the console</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerCompiler-extension-callback-contractFiles-doneCallback\"><a href=\"#registerCompiler-extension-callback-contractFiles-doneCallback\" class=\"headerlink\" title=\".registerCompiler(extension, callback(contractFiles, doneCallback))\"></a>.registerCompiler(extension, callback(contractFiles, doneCallback))</h2><p>Registers a new compiler for a specific contract extension.</p>\n<p>Arguments:</p>\n<ul>\n<li><strong>extension</strong>: The file extension (e.g: <code>.sol</code>)</li>\n<li><strong>callback</strong>: Function called by Embark with the contract files that the plugin should process<ul>\n<li><strong>contractFiles</strong>: Array of files that need to be compiled</li>\n<li><strong>doneCallback(error, result)</strong>: The final callback to call once every file is compiled or when there is an error<ul>\n<li><strong>error</strong>: Error string or object when something goes wrong</li>\n<li><strong>result</strong>: An object containing the compiled contracts result (key: contractName, value: contract object) or, <code>false</code> if your plugin is not compatible</li>\n<li><strong>code</strong> - [required] contract bytecode (string)      </li>\n<li><strong>abiDefinition</strong> - [required] contract abi (array of objects)<ul>\n<li>e.g <code>[{&quot;constant&quot;:true,&quot;inputs&quot;:[],&quot;name&quot;:&quot;storedData&quot;,&quot;outputs&quot;:[{&quot;name&quot;:&quot;&quot;,&quot;type&quot;:&quot;uint256&quot;}],&quot;payable&quot;:false,&quot;type&quot;:&quot;function&quot;}, etc...</code></li>\n</ul>\n</li>\n<li><strong>runtimeBytecode</strong> - [optional] contract runtimeBytecode (string)</li>\n<li><strong>gasEstimates</strong> - [optional] gas estimates for constructor and methods (hash)<ul>\n<li>e.g <code>{&quot;creation&quot;:[20131,38200],&quot;external&quot;:{&quot;get()&quot;:269,&quot;set(uint256)&quot;:20163,&quot;storedData()&quot;:224},&quot;internal&quot;:{}}</code></li>\n</ul>\n</li>\n<li><strong>functionHashes</strong> - [optional] object with methods and their corresponding hash identifier (hash)<ul>\n<li>e.g <code>{&quot;get()&quot;:&quot;6d4ce63c&quot;,&quot;set(uint256)&quot;:&quot;60fe47b1&quot;,&quot;storedData()&quot;:&quot;2a1afcd9&quot;}</code></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p>Below a possible implementation of a solcjs plugin.<br>Note that the plugin checks the version and returns <code>false</code> as the result if it is not compatible:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const solc &#x3D; require(&#39;solc&#39;);</span><br><span class=\"line\">const semver &#x3D; require(&#39;semver&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerCompiler(&quot;.sol&quot;, function(contractFiles, cb) &#123;</span><br><span class=\"line\">    const wantedVersion &#x3D; embark.config.embarkConfig.versions.solc;</span><br><span class=\"line\">    if (semver.gt(wantedVersion, &#39;0.5.0&#39;)) &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; We do not support greater than solidity version 0.5.0</span><br><span class=\"line\">      &#x2F;&#x2F; This let&#39;s Embark know that we are not compatible, that way Embark will fallback to another compiler</span><br><span class=\"line\">      return cb(null, false);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">    &#x2F;&#x2F; prepare input for solc</span><br><span class=\"line\">    var input &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var i &#x3D; 0; i &lt; contractFiles.length; i++) &#123;</span><br><span class=\"line\">      var filename &#x3D; contractFiles[i].filename.replace(&#39;app&#x2F;contracts&#x2F;&#39;,&#39;&#39;);</span><br><span class=\"line\">      input[filename] &#x3D; contractFiles[i].content.toString();</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; compile files</span><br><span class=\"line\">    var output &#x3D; solc.compile(&#123;sources: input&#125;, 1);</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; generate the compileObject expected by embark</span><br><span class=\"line\">    var json &#x3D; output.contracts;</span><br><span class=\"line\">    var compiled_object &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var className in json) &#123;</span><br><span class=\"line\">      var contract &#x3D; json[className];</span><br><span class=\"line\"></span><br><span class=\"line\">      compiled_object[className] &#x3D; &#123;&#125;;</span><br><span class=\"line\">      compiled_object[className].code            &#x3D; contract.bytecode;</span><br><span class=\"line\">      compiled_object[className].runtimeBytecode &#x3D; contract.runtimeBytecode;</span><br><span class=\"line\">      compiled_object[className].gasEstimates    &#x3D; contract.gasEstimates;</span><br><span class=\"line\">      compiled_object[className].functionHashes  &#x3D; contract.functionHashes;</span><br><span class=\"line\">      compiled_object[className].abiDefinition   &#x3D; JSON.parse(contract.interface);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    cb(null, compiled_object);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"logger\"><a href=\"#logger\" class=\"headerlink\" title=\".logger\"></a>.logger</h2><p>To print messages to the embark log is it better to use <code>embark.logger</code> instead of <code>console</code>.</p>\n<p>e.g <code>embark.logger.info(&quot;hello&quot;)</code></p>\n<h2 id=\"events-on-eventName-callback-args\"><a href=\"#events-on-eventName-callback-args\" class=\"headerlink\" title=\".events.on(eventName, callback(*args))\"></a>.events.on(eventName, callback(*args))</h2><p>This call is used to listen and react to events that happen in Embark such as contract deployment</p>\n<ul>\n<li>eventName - name of event to listen to<ul>\n<li>available events:<ul>\n<li><code>contractsDeployed</code> - triggered when contracts have been deployed</li>\n<li><code>file-add</code>, <code>file-change</code>, <code>file-remove</code>, <code>file-event</code> - triggered on a file change, args is (filetype, path)</li>\n<li><code>outputDone</code> - triggered when dapp is (re)generated</li>\n<li><code>firstDeploymentDone</code> - triggered when the dapp is deployed and generated for the first time</li>\n<li><code>check:backOnline:serviceName</code> - triggered when the service with <code>serviceName</code> comes back online</li>\n<li><code>check:wentOffline:serviceName</code> - triggered when the service with <code>serviceName</code> goes offline</li>\n<li><code>log</code> - triggered on a log, args is (logLevel, logMsg)</li>\n<li><code>contractsState</code> - list of contracts, their deployment status, address, etc..</li>\n<li><code>servicesState</code> - list of services and their state</li>\n<li><code>exit</code>: - triggered when embark is terminating</li>\n<li><code>deploy:contract:deployed</code>: - triggered when a contract is deployed, the callback will contain the contract object</li>\n<li><code>deploy:contract:undeployed</code>: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object</li>\n<li><code>deploy:contract:error</code>: - triggered when a contract couldn’t be deployed due to an error, the callback will contain the contract object</li>\n<li><code>deploy:contract:receipt</code>: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt</li>\n<li><code>contractsState</code>: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..</li>\n<li><code>deploy:beforeAll</code>: - triggered before contract deployment starts</li>\n<li><code>contracts:deploy:afterAll</code>: - triggered after contract deployment starts</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.on(&quot;contractsDeployed&quot;, function() &#123;</span><br><span class=\"line\">    embark.logger.info(&quot;plugin says: your contracts have been deployed&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  embark.events.on(&quot;file-change&quot;, function(filetype, path) &#123;</span><br><span class=\"line\">    if (type &#x3D;&#x3D;&#x3D; &#39;contract&#39;) &#123;</span><br><span class=\"line\">      embark.logger.info(&quot;plugin says: you just changed the contract at &quot; + path);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"events-request-requestName-callback-args\"><a href=\"#events-request-requestName-callback-args\" class=\"headerlink\" title=\".events.request(requestName, callback(*args))\"></a>.events.request(requestName, callback(*args))</h3><p>This call is used to request a certain resource from Embark</p>\n<ul>\n<li>requestName - name of request to listen to<ul>\n<li>available requests:<ul>\n<li>(<code>deploy:contract</code>, contractObj) - deploys a particular contract through embark</li>\n<li>(<code>runcode:eval</code>, code) - runs js code in the Embark engine.</li>\n<li>(<code>runcode:register</code>, cmdName, cmdObj) - ‘registers’ a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);</li>\n<li>(<code>contracts:list</code>) - returns a list a callback containing (err, contractList) containing a collection of available contracts</li>\n<li>(<code>compiler:contracts</code>, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback</li>\n<li>(<code>services:register</code>, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)</li>\n<li>(<code>console:command</code>, cmd) - execute a command in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.request(&quot;code&quot;, function(code) &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; Do something with the code</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerServiceCheck-serviceName-callback-name-status-time\"><a href=\"#registerServiceCheck-serviceName-callback-name-status-time\" class=\"headerlink\" title=\".registerServiceCheck(serviceName, callback({name, status}), time)\"></a>.registerServiceCheck(serviceName, callback({name, status}), time)</h2><p>This call is used to register a service in embark so it’s periodically checked.<br>It will be displayed in the Embark Dashboard, and will also trigger events such as <code>check:backOnline:yourServiceName</code> and <code>check:backOffline:yourServiceName</code></p>\n<ul>\n<li>serviceName - name of service (string)</li>\n<li>callback:<ul>\n<li><code>name</code> - name/text to display (string)</li>\n<li><code>status</code> - status of the service (string, <code>on</code> or <code>off</code> or <code>warn</code>)</li>\n</ul>\n</li>\n<li>time (optional) - ms interval to call the callback (default: 5000 ms)</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerServiceCheck(&quot;MyServer&quot;, function(cb) &#123;</span><br><span class=\"line\">    if (myServiceOnline()) &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Online&quot;, status: &quot;on&quot;&#125;);</span><br><span class=\"line\">    &#125; else &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Offline&quot;, status: &quot;off&quot;&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerUploadCommand-cmdName-callback\"><a href=\"#registerUploadCommand-cmdName-callback\" class=\"headerlink\" title=\".registerUploadCommand(cmdName, callback)\"></a>.registerUploadCommand(cmdName, callback)</h2><p>This call is used to add a new cmd to <code>embark upload</code> to upload the dapp to a new storage service. In the example, <code>run</code> doesn’t exist. You need to import a library that runs shell commands like <a href=\"https://www.npmjs.com/package/shelljs\" target=\"_blank\" rel=\"noopener\">shelljs</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerUploadCommand(&quot;ipfs&quot;, function() &#123;</span><br><span class=\"line\">    run(&quot;ipfs add -r dist&#x2F;&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addCodeToEmbarkJS-code\"><a href=\"#addCodeToEmbarkJS-code\" class=\"headerlink\" title=\".addCodeToEmbarkJS(code)\"></a>.addCodeToEmbarkJS(code)</h2><p>This call is used to add code to the embark.js library. It’s typically used to extend it with new functionality, new storage providers, new communication providers, etc..</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addCodeToEmbarkJS(&quot;alert(&#39;hello world!&#39;)&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addProviderInit-providerType-code-initCondition-config\"><a href=\"#addProviderInit-providerType-code-initCondition-config\" class=\"headerlink\" title=\".addProviderInit(providerType, code, initCondition(config))\"></a>.addProviderInit(providerType, code, initCondition(config))</h2><p>This call is used to add code to be executed in the initialization under the condition that <code>initCondition</code> returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config</p>\n<ul>\n<li>providerType - type of provider (string, “storage” or “communication”)</li>\n<li>code - code to add (string)</li>\n<li>callback:<ul>\n<li>“config” - config of the <code>providerType</code></li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  let code &#x3D; &quot;\\nEmbarkJS.Storage.setProvider(&#39;ipfs&#39;)&quot;;</span><br><span class=\"line\">  embark.addProviderInit(&#39;storage&#39;, code, (storageConfig) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return (storageConfig.provider &#x3D;&#x3D;&#x3D; &#39;ipfs&#39; &amp;&amp; storageConfig.enabled &#x3D;&#x3D;&#x3D; true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerImportFile-importName-importLocation\"><a href=\"#registerImportFile-importName-importLocation\" class=\"headerlink\" title=\".registerImportFile(importName, importLocation)\"></a>.registerImportFile(importName, importLocation)</h2><p>This call is used so the plugin can make a certain file available as a library to a user</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var path &#x3D; require(&#39;path&#39;)</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerImportFile(&quot;my-lib&quot;, path.join(__dirname, &quot;my-lib.js&quot;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerActionForEvent-eventName-options-cb\"><a href=\"#registerActionForEvent-eventName-options-cb\" class=\"headerlink\" title=\".registerActionForEvent(eventName, options, cb)\"></a>.registerActionForEvent(eventName, options, cb)</h2><p>This lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let’s you modify the params before sending them back to the next action or back to Embark.</p>\n<p>Here is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerActionForEvent(&quot;deployment:contract:beforeDeploy&quot;, async (params, cb) &#x3D;&gt; &#123;</span><br><span class=\"line\">  cosnt contarct &#x3D; params.contract;</span><br><span class=\"line\">  if (!contract.code) &#123;</span><br><span class=\"line\">    return callback();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">  const code &#x3D; (contract.code.indexOf(&#39;0x&#39;) &#x3D;&#x3D;&#x3D; 0) ? contract.code.substr(2) : contract.code;</span><br><span class=\"line\">  const contractCodeLength &#x3D; Buffer.from(code, &#39;hex&#39;).toString().length;</span><br><span class=\"line\">  if (contractCodeLength &gt; MAX_CONTRACT_BYTECODE_LENGTH) &#123;</span><br><span class=\"line\">    return callback(new Error(&#96;Bytecode for $&#123;contract.className&#125; contract is too large. Not deploying.&#96;));</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  callback();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Parameters\"><a href=\"#Parameters\" class=\"headerlink\" title=\"Parameters\"></a>Parameters</h3><ul>\n<li><code>eventName</code>: String, Name fo the event you want an action to be registered to</li>\n<li><code>options</code>: Object, optional, options for the action registration<ul>\n<li><code>priority</code>: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"Available-events-for-actions\"><a href=\"#Available-events-for-actions\" class=\"headerlink\" title=\"Available events for actions\"></a>Available events for actions</h3><ul>\n<li><code>embark:engine:started</code>: Called when the engine just started. No params</li>\n<li><code>blockchain:config:modify</code>: Let’s you modify the blockchain configs before starting a blockchain node. Only param is the initial <code>blockchainConfig</code></li>\n<li><code>deployment:contract:beforeDeploy</code>: Called before a contract is deployed. Only param is the <code>contract</code></li>\n<li><code>deployment:contract:shouldDeploy</code>: Also called before a contract is deployed, but let’s you determine if the contract should be deployed. Two params: <code>contract</code> and <code>shouldDeploy</code>, set <code>shouldDeploy</code> to <code>false</code> to disable its deployment</li>\n<li><code>deployment:contract:undeployed</code>: Called after a contract is determined to not deploy. Only param is <code>contract</code></li>\n<li><code>deployment:contract:deployed</code>: Called after a contract deployed. Only param is <code>contract</code></li>\n<li><code>deployment:deployContracts:beforeAll</code>: Called before any contract is deployed. No params</li>\n<li><code>deployment:deployContracts:afterAll</code>: Called after all contracts have deployed. No params</li>\n<li><code>tests:contracts:compile:before</code>: Called before the contracts are compiled in the context of the test. Only param is <code>contractFiles</code></li>\n<li><code>tests:contracts:compile:after</code>: Called after the contracts are compiled in the context of the test. Only param is <code>compiledContracts</code></li>\n<li><code>blockchain:proxy:request</code>: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n<li><code>blockchain:proxy:response</code>: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>response</code>: an object containing the response payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>This reference covers all APIs exposed by the <code>embark</code> object passed to every custom created plugin. Make sure to read the section on <a href=\"/docs/creating_plugins.html\">creating a plugin</a> first.</p>\n<h2 id=\"pluginConfig\"><a href=\"#pluginConfig\" class=\"headerlink\" title=\".pluginConfig\"></a>.pluginConfig</h2><p><code>pluginConfig</code> is an object that contains the configuration for your plugin specified in the project’s <code>embark.json</code>. For example, if a plugin configuration like the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-babel&quot;: &#123; </span><br><span class=\"line\">    &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">    &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>embark.pluginConfig</code> will contain </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123; </span><br><span class=\"line\">  &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">  &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>and can be used by your plugin as needed.</p>\n<h2 id=\"registerPipeline-matchingFiles-callback-options\"><a href=\"#registerPipeline-matchingFiles-callback-options\" class=\"headerlink\" title=\".registerPipeline(matchingFiles, callback(options))\"></a>.registerPipeline(matchingFiles, callback(options))</h2><p>This call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.</p>\n<p><code>matchingFiles</code> is an array of matching files the plugin should be called with for e.g <code>[&#39;**/*.js&#39;, &#39;!vendor/jquery.js&#39;]</code> matches all JavaScript files except <code>vendor/jquery.js</code>.</p>\n<p>Available optinos:</p>\n<ul>\n<li><code>targetFile</code> - filename to be generated</li>\n<li><code>source</code> - content of the file</li>\n</ul>\n<p>Returns <code>string</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var babel &#x3D; require(&quot;babel-core&quot;);</span><br><span class=\"line\">require(&quot;babel-preset-react&quot;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerPipeline([&quot;**&#x2F;*.js&quot;, &quot;**&#x2F;*.jsx&quot;], (options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return babel.transform(options.source, &#123;</span><br><span class=\"line\">      minified: true,</span><br><span class=\"line\">      presets: [&#39;react&#39;]</span><br><span class=\"line\">    &#125;).code;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerContractConfiguration-contractsConfig\"><a href=\"#registerContractConfiguration-contractsConfig\" class=\"headerlink\" title=\".registerContractConfiguration(contractsConfig)\"></a>.registerContractConfiguration(contractsConfig)</h2><p>This call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the <code>DGDToken</code> contract code will redeployed with the arguments <code>100</code> in any environment, except for the livenet since it’s already deployed there at a particular address.</p>\n<p>Typically this call is used in combination with <code>embark.addContractFile</code></p>\n<p><code>contractsConfig</code> is an object in the same structure as the one found in the contracts configuration at <code>config/contracts.json</code>. The users own configuration will be merged with the one specified in the plugins.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerContractConfiguration(&#123;</span><br><span class=\"line\">    &quot;default&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;args&quot;: [</span><br><span class=\"line\">            100</span><br><span class=\"line\">          ]</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;livenet&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;address&quot;: &quot;0xe0b7927c4af23765cb51314a0e0521a9645f0e2a&quot;</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addContractFile-file\"><a href=\"#addContractFile-file\" class=\"headerlink\" title=\".addContractFile(file)\"></a>.addContractFile(file)</h2><p>Typically this call is used in combination with <code>embark.registerContractConfiguration</code>. If you want to make the contract available but not automatically deployed without the user specifying so you can use <code>registerContractConfiguration</code> to set the contract config to <code>deploy: false</code>, this is particularly useful for when the user is meant to extend the contract being given (e.g <code>contract MyToken is StandardToken</code>)</p>\n<p><code>file</code> is the contract file to add to embark, the path should relative to the plugin.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addContractFile(&quot;.&#x2F;DGDToken.sol&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addFileToPipeline-file-options\"><a href=\"#addFileToPipeline-file-options\" class=\"headerlink\" title=\".addFileToPipeline(file, options)\"></a>.addFileToPipeline(file, options)</h2><p>This call is used to add a file to the pipeline so it’s included with the dapp on the client side.</p>\n<p><code>file</code> is the file to add to the pipeline, the path should relative to the plugin.</p>\n<p><code>intendedPath</code> is the intended path outside of the plugin</p>\n<p>Available options:</p>\n<ul>\n<li><code>skipPipeline</code> - If <code>true</code> it will not apply transformations to the file. For<br>example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to<br>true will not apply the plugin on this file.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addFileToPipeline(&quot;.&#x2F;jquery.js&quot;, &#123;skipPipeline: true&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerBeforeDeploy-callback-options-callback\"><a href=\"#registerBeforeDeploy-callback-options-callback\" class=\"headerlink\" title=\".registerBeforeDeploy(callback(options), [callback])\"></a>.registerBeforeDeploy(callback(options), [callback])</h2><p>This call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.<br>It is useful to replace placeholders with dynamic values.</p>\n<p>Available options:</p>\n<ul>\n<li><code>embarkDeploy</code> - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.</li>\n<li><code>pluginConfig</code> - plugin configuration object from embark.json</li>\n<li><code>deploymentAccount</code> - address of account which will be used to deploy this contract</li>\n<li><code>contract</code> - contract object.</li>\n<li><code>callback</code> - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code</li>\n</ul>\n<p>You can use the callback argument instead of the callback option if you prefer. It needs the same result object.</p>\n<p>expected return: ignored</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerBeforeDeploy(function(options) &#123;</span><br><span class=\"line\">    var code &#x3D; options.contract.code.replace(&#x2F;deaddeaddeaddeaddeaddeaddeaddeaddeaddead&#x2F;ig, &#39;c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de&#39;);</span><br><span class=\"line\">    options.callback(&#123; contractCode: code &#125;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerClientWeb3Provider-callback-options\"><a href=\"#registerClientWeb3Provider-callback-options\" class=\"headerlink\" title=\".registerClientWeb3Provider(callback(options))\"></a>.registerClientWeb3Provider(callback(options))</h2><p>This call can be used to override the default web3 object generation in the dapp. it’s useful if you want to add a plugin to interact with services like <a href=\"http://infura.io\" target=\"_blank\" rel=\"noopener\">http://infura.io</a> or if you want to use your own web3.js library extension.</p>\n<p>options available:</p>\n<ul>\n<li>rpcHost - configured rpc Host to connect to</li>\n<li>rpcPort - configured rpc Port to connect to</li>\n<li>blockchainConfig - object containing the full blockchain configuration for the current environment</li>\n</ul>\n<p>expected return: <code>string</code></p>\n<p>example:</p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n<h2 id=\"registerContractsGeneration-callback-options\"><a href=\"#registerContractsGeneration-callback-options\" class=\"headerlink\" title=\".registerContractsGeneration(callback(options))\"></a>.registerContractsGeneration(callback(options))</h2><p>By default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.</p>\n<p>Available options:</p>\n<ul>\n<li>contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)<ul>\n<li>abiDefinition</li>\n<li>code</li>\n<li>deployedAddress</li>\n<li>gasEstimates</li>\n<li>gas</li>\n<li>gasPrice</li>\n<li>runtimeByteCode</li>\n</ul>\n</li>\n</ul>\n<p>Returns <code>string</code></p>\n<p> The generated string will be used to create the contract objects in the Embark console and will be generated in <code>embarkArtifacts</code> so that the Dapp can use them.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; (embark) &#x3D;&gt; &#123;</span><br><span class=\"line\">  embark.registerContractsGeneration((options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    const contractGenerations &#x3D; [];</span><br><span class=\"line\">    Object.keys(options.contracts).map(className &#x3D;&gt; &#123;</span><br><span class=\"line\">      const contract &#x3D; options.contracts[className];</span><br><span class=\"line\">      const abi &#x3D; JSON.stringify(contract.abiDefinition);</span><br><span class=\"line\"></span><br><span class=\"line\">      contractGenerations.push(&#96;$&#123;className&#125; &#x3D; new web3.eth.Contract($&#123;abi&#125;, &#39;$&#123;contract.deployedAddress&#125;&#39;);</span><br><span class=\"line\">      module.exports &#x3D; $&#123;className&#125;;&#96;);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">    return contractGenerations.join(&#39;\\n&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerConsoleCommand-options\"><a href=\"#registerConsoleCommand-options\" class=\"headerlink\" title=\".registerConsoleCommand(options)\"></a>.registerConsoleCommand(options)</h2><p>This call is used to extend the console with custom commands.</p>\n<p>The function takes an <code>object</code> with the following options:</p>\n<ul>\n<li><code>description</code>: Description of the command (used by the help command)</li>\n<li><code>matches</code>: Either an <code>array</code> of strings corresponding to exact matches for the command or a <code>function</code> where the only parameter in the command<ul>\n<li>The <code>function</code> must return a <code>boolean</code>. True if it matches, <code>false</code> if not.</li>\n</ul>\n</li>\n<li><code>usage</code>: Usage of the command that will be outputed by the help command<ul>\n<li>Adding <code>usage</code> is optional in the case where <code>matches</code> is an <code>array</code></li>\n</ul>\n</li>\n<li><code>process</code>: <code>function</code> that will be executed to process the command. The <code>function</code> receives two parameters:<ul>\n<li><code>command</code>: The <code>string</code> command that the user entered</li>\n<li><code>callback</code>: Callback <code>function</code> to be called at the end of the process<ul>\n<li>This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerConsoleCommand(&#123;</span><br><span class=\"line\">    description: &quot;Salutes the world&quot;,</span><br><span class=\"line\">    matches: [&quot;hello&quot;, &quot;hellowWorld&quot;],</span><br><span class=\"line\">    &#x2F;&#x2F; OR a function for more complex cases</span><br><span class=\"line\">    matches: (cmd) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;); &#x2F;&#x2F; You can use &#96;split&#96; for commands that receive parameters</span><br><span class=\"line\">      return commandName &#x3D;&#x3D;&#x3D; &#39;hello&#39; || commandName &#x3D;&#x3D;&#x3D; &#39;hellowWorld&#39;; </span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    usage: &quot;hello &lt;name&gt; or helloWorld &lt;name&gt;&quot;,</span><br><span class=\"line\">    process: (cmd, callback) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;);</span><br><span class=\"line\">      name &#x3D; name || &quot;noName&quot;; &#x2F;&#x2F; Default to &quot;noName&quot; when nothing is specified</span><br><span class=\"line\">      callback(null, &#96;Hello $&#123;name&#125;&#96;); &#x2F;&#x2F; Call back with the message. This will be outputed in the console</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerCompiler-extension-callback-contractFiles-doneCallback\"><a href=\"#registerCompiler-extension-callback-contractFiles-doneCallback\" class=\"headerlink\" title=\".registerCompiler(extension, callback(contractFiles, doneCallback))\"></a>.registerCompiler(extension, callback(contractFiles, doneCallback))</h2><p>Registers a new compiler for a specific contract extension.</p>\n<p>Arguments:</p>\n<ul>\n<li><strong>extension</strong>: The file extension (e.g: <code>.sol</code>)</li>\n<li><strong>callback</strong>: Function called by Embark with the contract files that the plugin should process<ul>\n<li><strong>contractFiles</strong>: Array of files that need to be compiled</li>\n<li><strong>doneCallback(error, result)</strong>: The final callback to call once every file is compiled or when there is an error<ul>\n<li><strong>error</strong>: Error string or object when something goes wrong</li>\n<li><strong>result</strong>: An object containing the compiled contracts result (key: contractName, value: contract object) or, <code>false</code> if your plugin is not compatible</li>\n<li><strong>code</strong> - [required] contract bytecode (string)      </li>\n<li><strong>abiDefinition</strong> - [required] contract abi (array of objects)<ul>\n<li>e.g <code>[{&quot;constant&quot;:true,&quot;inputs&quot;:[],&quot;name&quot;:&quot;storedData&quot;,&quot;outputs&quot;:[{&quot;name&quot;:&quot;&quot;,&quot;type&quot;:&quot;uint256&quot;}],&quot;payable&quot;:false,&quot;type&quot;:&quot;function&quot;}, etc...</code></li>\n</ul>\n</li>\n<li><strong>runtimeBytecode</strong> - [optional] contract runtimeBytecode (string)</li>\n<li><strong>gasEstimates</strong> - [optional] gas estimates for constructor and methods (hash)<ul>\n<li>e.g <code>{&quot;creation&quot;:[20131,38200],&quot;external&quot;:{&quot;get()&quot;:269,&quot;set(uint256)&quot;:20163,&quot;storedData()&quot;:224},&quot;internal&quot;:{}}</code></li>\n</ul>\n</li>\n<li><strong>functionHashes</strong> - [optional] object with methods and their corresponding hash identifier (hash)<ul>\n<li>e.g <code>{&quot;get()&quot;:&quot;6d4ce63c&quot;,&quot;set(uint256)&quot;:&quot;60fe47b1&quot;,&quot;storedData()&quot;:&quot;2a1afcd9&quot;}</code></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p>Below a possible implementation of a solcjs plugin.<br>Note that the plugin checks the version and returns <code>false</code> as the result if it is not compatible:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const solc &#x3D; require(&#39;solc&#39;);</span><br><span class=\"line\">const semver &#x3D; require(&#39;semver&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerCompiler(&quot;.sol&quot;, function(contractFiles, cb) &#123;</span><br><span class=\"line\">    const wantedVersion &#x3D; embark.config.embarkConfig.versions.solc;</span><br><span class=\"line\">    if (semver.gt(wantedVersion, &#39;0.5.0&#39;)) &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; We do not support greater than solidity version 0.5.0</span><br><span class=\"line\">      &#x2F;&#x2F; This let&#39;s Embark know that we are not compatible, that way Embark will fallback to another compiler</span><br><span class=\"line\">      return cb(null, false);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">    &#x2F;&#x2F; prepare input for solc</span><br><span class=\"line\">    var input &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var i &#x3D; 0; i &lt; contractFiles.length; i++) &#123;</span><br><span class=\"line\">      var filename &#x3D; contractFiles[i].filename.replace(&#39;app&#x2F;contracts&#x2F;&#39;,&#39;&#39;);</span><br><span class=\"line\">      input[filename] &#x3D; contractFiles[i].content.toString();</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; compile files</span><br><span class=\"line\">    var output &#x3D; solc.compile(&#123;sources: input&#125;, 1);</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; generate the compileObject expected by embark</span><br><span class=\"line\">    var json &#x3D; output.contracts;</span><br><span class=\"line\">    var compiled_object &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var className in json) &#123;</span><br><span class=\"line\">      var contract &#x3D; json[className];</span><br><span class=\"line\"></span><br><span class=\"line\">      compiled_object[className] &#x3D; &#123;&#125;;</span><br><span class=\"line\">      compiled_object[className].code            &#x3D; contract.bytecode;</span><br><span class=\"line\">      compiled_object[className].runtimeBytecode &#x3D; contract.runtimeBytecode;</span><br><span class=\"line\">      compiled_object[className].gasEstimates    &#x3D; contract.gasEstimates;</span><br><span class=\"line\">      compiled_object[className].functionHashes  &#x3D; contract.functionHashes;</span><br><span class=\"line\">      compiled_object[className].abiDefinition   &#x3D; JSON.parse(contract.interface);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    cb(null, compiled_object);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"logger\"><a href=\"#logger\" class=\"headerlink\" title=\".logger\"></a>.logger</h2><p>To print messages to the embark log is it better to use <code>embark.logger</code> instead of <code>console</code>.</p>\n<p>e.g <code>embark.logger.info(&quot;hello&quot;)</code></p>\n<h2 id=\"events-on-eventName-callback-args\"><a href=\"#events-on-eventName-callback-args\" class=\"headerlink\" title=\".events.on(eventName, callback(*args))\"></a>.events.on(eventName, callback(*args))</h2><p>This call is used to listen and react to events that happen in Embark such as contract deployment</p>\n<ul>\n<li>eventName - name of event to listen to<ul>\n<li>available events:<ul>\n<li><code>contractsDeployed</code> - triggered when contracts have been deployed</li>\n<li><code>file-add</code>, <code>file-change</code>, <code>file-remove</code>, <code>file-event</code> - triggered on a file change, args is (filetype, path)</li>\n<li><code>outputDone</code> - triggered when dapp is (re)generated</li>\n<li><code>firstDeploymentDone</code> - triggered when the dapp is deployed and generated for the first time</li>\n<li><code>check:backOnline:serviceName</code> - triggered when the service with <code>serviceName</code> comes back online</li>\n<li><code>check:wentOffline:serviceName</code> - triggered when the service with <code>serviceName</code> goes offline</li>\n<li><code>log</code> - triggered on a log, args is (logLevel, logMsg)</li>\n<li><code>contractsState</code> - list of contracts, their deployment status, address, etc..</li>\n<li><code>servicesState</code> - list of services and their state</li>\n<li><code>exit</code>: - triggered when embark is terminating</li>\n<li><code>deploy:contract:deployed</code>: - triggered when a contract is deployed, the callback will contain the contract object</li>\n<li><code>deploy:contract:undeployed</code>: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object</li>\n<li><code>deploy:contract:error</code>: - triggered when a contract couldn’t be deployed due to an error, the callback will contain the contract object</li>\n<li><code>deploy:contract:receipt</code>: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt</li>\n<li><code>contractsState</code>: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..</li>\n<li><code>deploy:beforeAll</code>: - triggered before contract deployment starts</li>\n<li><code>contracts:deploy:afterAll</code>: - triggered after contract deployment starts</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.on(&quot;contractsDeployed&quot;, function() &#123;</span><br><span class=\"line\">    embark.logger.info(&quot;plugin says: your contracts have been deployed&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  embark.events.on(&quot;file-change&quot;, function(filetype, path) &#123;</span><br><span class=\"line\">    if (type &#x3D;&#x3D;&#x3D; &#39;contract&#39;) &#123;</span><br><span class=\"line\">      embark.logger.info(&quot;plugin says: you just changed the contract at &quot; + path);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"events-request-requestName-callback-args\"><a href=\"#events-request-requestName-callback-args\" class=\"headerlink\" title=\".events.request(requestName, callback(*args))\"></a>.events.request(requestName, callback(*args))</h3><p>This call is used to request a certain resource from Embark</p>\n<ul>\n<li>requestName - name of request to listen to<ul>\n<li>available requests:<ul>\n<li>(<code>deploy:contract</code>, contractObj) - deploys a particular contract through embark</li>\n<li>(<code>runcode:eval</code>, code) - runs js code in the Embark engine.</li>\n<li>(<code>runcode:register</code>, cmdName, cmdObj) - ‘registers’ a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);</li>\n<li>(<code>contracts:list</code>) - returns a list a callback containing (err, contractList) containing a collection of available contracts</li>\n<li>(<code>compiler:contracts</code>, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback</li>\n<li>(<code>services:register</code>, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)</li>\n<li>(<code>console:command</code>, cmd) - execute a command in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.request(&quot;code&quot;, function(code) &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; Do something with the code</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerServiceCheck-serviceName-callback-name-status-time\"><a href=\"#registerServiceCheck-serviceName-callback-name-status-time\" class=\"headerlink\" title=\".registerServiceCheck(serviceName, callback({name, status}), time)\"></a>.registerServiceCheck(serviceName, callback({name, status}), time)</h2><p>This call is used to register a service in embark so it’s periodically checked.<br>It will be displayed in the Embark Dashboard, and will also trigger events such as <code>check:backOnline:yourServiceName</code> and <code>check:backOffline:yourServiceName</code></p>\n<ul>\n<li>serviceName - name of service (string)</li>\n<li>callback:<ul>\n<li><code>name</code> - name/text to display (string)</li>\n<li><code>status</code> - status of the service (string, <code>on</code> or <code>off</code> or <code>warn</code>)</li>\n</ul>\n</li>\n<li>time (optional) - ms interval to call the callback (default: 5000 ms)</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerServiceCheck(&quot;MyServer&quot;, function(cb) &#123;</span><br><span class=\"line\">    if (myServiceOnline()) &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Online&quot;, status: &quot;on&quot;&#125;);</span><br><span class=\"line\">    &#125; else &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Offline&quot;, status: &quot;off&quot;&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerUploadCommand-cmdName-callback\"><a href=\"#registerUploadCommand-cmdName-callback\" class=\"headerlink\" title=\".registerUploadCommand(cmdName, callback)\"></a>.registerUploadCommand(cmdName, callback)</h2><p>This call is used to add a new cmd to <code>embark upload</code> to upload the dapp to a new storage service. In the example, <code>run</code> doesn’t exist. You need to import a library that runs shell commands like <a href=\"https://www.npmjs.com/package/shelljs\" target=\"_blank\" rel=\"noopener\">shelljs</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerUploadCommand(&quot;ipfs&quot;, function() &#123;</span><br><span class=\"line\">    run(&quot;ipfs add -r dist&#x2F;&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addCodeToEmbarkJS-code\"><a href=\"#addCodeToEmbarkJS-code\" class=\"headerlink\" title=\".addCodeToEmbarkJS(code)\"></a>.addCodeToEmbarkJS(code)</h2><p>This call is used to add code to the embark.js library. It’s typically used to extend it with new functionality, new storage providers, new communication providers, etc..</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addCodeToEmbarkJS(&quot;alert(&#39;hello world!&#39;)&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addProviderInit-providerType-code-initCondition-config\"><a href=\"#addProviderInit-providerType-code-initCondition-config\" class=\"headerlink\" title=\".addProviderInit(providerType, code, initCondition(config))\"></a>.addProviderInit(providerType, code, initCondition(config))</h2><p>This call is used to add code to be executed in the initialization under the condition that <code>initCondition</code> returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config</p>\n<ul>\n<li>providerType - type of provider (string, “storage” or “communication”)</li>\n<li>code - code to add (string)</li>\n<li>callback:<ul>\n<li>“config” - config of the <code>providerType</code></li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  let code &#x3D; &quot;\\nEmbarkJS.Storage.setProvider(&#39;ipfs&#39;)&quot;;</span><br><span class=\"line\">  embark.addProviderInit(&#39;storage&#39;, code, (storageConfig) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return (storageConfig.provider &#x3D;&#x3D;&#x3D; &#39;ipfs&#39; &amp;&amp; storageConfig.enabled &#x3D;&#x3D;&#x3D; true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerImportFile-importName-importLocation\"><a href=\"#registerImportFile-importName-importLocation\" class=\"headerlink\" title=\".registerImportFile(importName, importLocation)\"></a>.registerImportFile(importName, importLocation)</h2><p>This call is used so the plugin can make a certain file available as a library to a user</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var path &#x3D; require(&#39;path&#39;)</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerImportFile(&quot;my-lib&quot;, path.join(__dirname, &quot;my-lib.js&quot;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerActionForEvent-eventName-options-cb\"><a href=\"#registerActionForEvent-eventName-options-cb\" class=\"headerlink\" title=\".registerActionForEvent(eventName, options, cb)\"></a>.registerActionForEvent(eventName, options, cb)</h2><p>This lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let’s you modify the params before sending them back to the next action or back to Embark.</p>\n<p>Here is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerActionForEvent(&quot;deployment:contract:beforeDeploy&quot;, async (params, cb) &#x3D;&gt; &#123;</span><br><span class=\"line\">  cosnt contarct &#x3D; params.contract;</span><br><span class=\"line\">  if (!contract.code) &#123;</span><br><span class=\"line\">    return callback();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">  const code &#x3D; (contract.code.indexOf(&#39;0x&#39;) &#x3D;&#x3D;&#x3D; 0) ? contract.code.substr(2) : contract.code;</span><br><span class=\"line\">  const contractCodeLength &#x3D; Buffer.from(code, &#39;hex&#39;).toString().length;</span><br><span class=\"line\">  if (contractCodeLength &gt; MAX_CONTRACT_BYTECODE_LENGTH) &#123;</span><br><span class=\"line\">    return callback(new Error(&#96;Bytecode for $&#123;contract.className&#125; contract is too large. Not deploying.&#96;));</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  callback();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Parameters\"><a href=\"#Parameters\" class=\"headerlink\" title=\"Parameters\"></a>Parameters</h3><ul>\n<li><code>eventName</code>: String, Name fo the event you want an action to be registered to</li>\n<li><code>options</code>: Object, optional, options for the action registration<ul>\n<li><code>priority</code>: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"Available-events-for-actions\"><a href=\"#Available-events-for-actions\" class=\"headerlink\" title=\"Available events for actions\"></a>Available events for actions</h3><ul>\n<li><code>embark:engine:started</code>: Called when the engine just started. No params</li>\n<li><code>blockchain:config:modify</code>: Let’s you modify the blockchain configs before starting a blockchain node. Only param is the initial <code>blockchainConfig</code></li>\n<li><code>deployment:contract:beforeDeploy</code>: Called before a contract is deployed. Only param is the <code>contract</code></li>\n<li><code>deployment:contract:shouldDeploy</code>: Also called before a contract is deployed, but let’s you determine if the contract should be deployed. Two params: <code>contract</code> and <code>shouldDeploy</code>, set <code>shouldDeploy</code> to <code>false</code> to disable its deployment</li>\n<li><code>deployment:contract:undeployed</code>: Called after a contract is determined to not deploy. Only param is <code>contract</code></li>\n<li><code>deployment:contract:deployed</code>: Called after a contract deployed. Only param is <code>contract</code></li>\n<li><code>deployment:deployContracts:beforeAll</code>: Called before any contract is deployed. No params</li>\n<li><code>deployment:deployContracts:afterAll</code>: Called after all contracts have deployed. No params</li>\n<li><code>tests:contracts:compile:before</code>: Called before the contracts are compiled in the context of the test. Only param is <code>contractFiles</code></li>\n<li><code>tests:contracts:compile:after</code>: Called after the contracts are compiled in the context of the test. Only param is <code>compiledContracts</code></li>\n<li><code>blockchain:proxy:request</code>: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n<li><code>blockchain:proxy:response</code>: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>response</code>: an object containing the response payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n</ul>\n"}],"Post":[{"title":"Embark 2.6.0 - web3.js 1.0, any version of web3.js & solc. Whisper 5 & much more","author":"iuri_matias","layout":"blog-post","_content":"\n## To Update to 2.6.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.5.2:\n\n```\nnpm install -g embark@2.6\n```\n\nafterwards make sure `embark version` returns `2.6.0`.\n\n## In this release\n\nYou no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.\n\n## Support for web3.js 1.0 and (nearly) ANY web3.js version\n\nEmbark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.\n\nin config/contracts.json\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"web3.js\": \"1.0.0-beta\"\n    }\n    ...\n}\n```\n\nIf ,for example, you wish to use 0.19.0 you can specify it in the config as `\"web3.js\": \"0.19.0\"`\n\n## Support for ANY solc version\n\nYou can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.\n\n`config/contracts.json`\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"solc\": \"0.4.17\"\n    }\n    ...\n}\n```\n\n## Specify nodes DApp should attempt to connect to\n\nYou can specify which nodes your dapp should try to connect in each enviroment. \"$WEB3\" is a special keyword to specify the existing web3 object.\nThe following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"dappConnection\": [\n      \"$WEB3\",\n      \"http://localhost:8545\"\n    ],\n   ...\n}\n```\n\n## Specify node to deploy to\n\nBefore Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"deployment\": {\n      \"host\": \"localhost\",\n      \"port\": 8545,\n      \"type\": \"rpc\"\n    },\n   ...\n}\n```\n\n## Specify node to connect whisper to\n\n`config/communication.json`\n```Javascript\n{\n  \"default\": {\n    \"enabled\": true,\n    \"provider\": \"whisper\",\n    \"available_providers\": [\"whisper\", \"orbit\"],\n    \"connection\": {\n      \"host\": \"localhost\",\n      \"port\": 8546,\n      \"type\": \"ws\"\n    }\n  }\n}\n```\n\n## Specify url to get assets\n\nYou can specify for each environment what IPFS node to get the assets from\n\n`config/storage.json`\n\n```Javascript\n{\n  ...\n  \"development\": {\n      ....\n     \"getUrl\": \"http://localhost:8080/ipfs/\"\n   },\n   ...\n  \"livenet\": {\n      ....\n      \"getUrl\": \"https://gateway.ipfs.io/ipfs/\"\n   }\n}\n```\n\n###  Plugin API changes\n\n![plugin](http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png)\n\nThe following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment\n\nplugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0\n\n\n###  New Blockchain options\n\n![geth](https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200)\n\n\nThe following fields are now available at `config/blockchain.json` to enhance `embark blockchain`:\n\n* \"wsHost\" - to specify the websocket host (default: localhost)\n* \"wsPort\" - to specify the websocket port (default: 8546)\n* \"wsOrigins\"- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like http://localhost:8000 for the websocket connection to work.\n* \"wsApi\" - to specify the apis available through websockets (default: ['eth', 'web3', 'net', 'shh'])\n\n### Misc Bugfixes and Improvements\n\n![bug fixes](http://i.imgur.com/L1r6Ac5.png)\n\n* tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework\n* embark and mocha are no longer dependencies in the created dapp\n* you can specify a test file with `embark test <filename>`\n* tests no longer need testrpc to be installed first\n* `EmbarkJS.isNewWeb3()` to detect if web3 1.0 is available\n* demo app updated to use web3.js 1.0 and solc 0.4.17\n* warn user when websocket or http CORS is not set\n* tolerate solc compiler warnings, which could cause a crash sometimes\n\n\n###  Thank you\n\nA big thanks to all that contributed to this release including [Todd Baur](https://github.com/toadkicker) and Jacob Beauchamp.\n\n### Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n\n","source":"_posts/2017-10-25-embark-2-6-released.md","raw":"title: Embark 2.6.0 - web3.js 1.0, any version of web3.js & solc. Whisper 5 & much more\nauthor: iuri_matias\ncategories:\n  - announcements\nlayout: blog-post\n---\n\n## To Update to 2.6.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.5.2:\n\n```\nnpm install -g embark@2.6\n```\n\nafterwards make sure `embark version` returns `2.6.0`.\n\n## In this release\n\nYou no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.\n\n## Support for web3.js 1.0 and (nearly) ANY web3.js version\n\nEmbark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.\n\nin config/contracts.json\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"web3.js\": \"1.0.0-beta\"\n    }\n    ...\n}\n```\n\nIf ,for example, you wish to use 0.19.0 you can specify it in the config as `\"web3.js\": \"0.19.0\"`\n\n## Support for ANY solc version\n\nYou can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.\n\n`config/contracts.json`\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"solc\": \"0.4.17\"\n    }\n    ...\n}\n```\n\n## Specify nodes DApp should attempt to connect to\n\nYou can specify which nodes your dapp should try to connect in each enviroment. \"$WEB3\" is a special keyword to specify the existing web3 object.\nThe following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"dappConnection\": [\n      \"$WEB3\",\n      \"http://localhost:8545\"\n    ],\n   ...\n}\n```\n\n## Specify node to deploy to\n\nBefore Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"deployment\": {\n      \"host\": \"localhost\",\n      \"port\": 8545,\n      \"type\": \"rpc\"\n    },\n   ...\n}\n```\n\n## Specify node to connect whisper to\n\n`config/communication.json`\n```Javascript\n{\n  \"default\": {\n    \"enabled\": true,\n    \"provider\": \"whisper\",\n    \"available_providers\": [\"whisper\", \"orbit\"],\n    \"connection\": {\n      \"host\": \"localhost\",\n      \"port\": 8546,\n      \"type\": \"ws\"\n    }\n  }\n}\n```\n\n## Specify url to get assets\n\nYou can specify for each environment what IPFS node to get the assets from\n\n`config/storage.json`\n\n```Javascript\n{\n  ...\n  \"development\": {\n      ....\n     \"getUrl\": \"http://localhost:8080/ipfs/\"\n   },\n   ...\n  \"livenet\": {\n      ....\n      \"getUrl\": \"https://gateway.ipfs.io/ipfs/\"\n   }\n}\n```\n\n###  Plugin API changes\n\n![plugin](http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png)\n\nThe following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment\n\nplugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0\n\n\n###  New Blockchain options\n\n![geth](https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200)\n\n\nThe following fields are now available at `config/blockchain.json` to enhance `embark blockchain`:\n\n* \"wsHost\" - to specify the websocket host (default: localhost)\n* \"wsPort\" - to specify the websocket port (default: 8546)\n* \"wsOrigins\"- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like http://localhost:8000 for the websocket connection to work.\n* \"wsApi\" - to specify the apis available through websockets (default: ['eth', 'web3', 'net', 'shh'])\n\n### Misc Bugfixes and Improvements\n\n![bug fixes](http://i.imgur.com/L1r6Ac5.png)\n\n* tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework\n* embark and mocha are no longer dependencies in the created dapp\n* you can specify a test file with `embark test <filename>`\n* tests no longer need testrpc to be installed first\n* `EmbarkJS.isNewWeb3()` to detect if web3 1.0 is available\n* demo app updated to use web3.js 1.0 and solc 0.4.17\n* warn user when websocket or http CORS is not set\n* tolerate solc compiler warnings, which could cause a crash sometimes\n\n\n###  Thank you\n\nA big thanks to all that contributed to this release including [Todd Baur](https://github.com/toadkicker) and Jacob Beauchamp.\n\n### Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n\n","slug":"embark-2-6-released","published":1,"date":"2017-10-25T04:00:00.000Z","updated":"2020-01-17T19:05:36.382Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qj00017heg0hco2qzg","content":"<h2 id=\"To-Update-to-2-6-0\"><a href=\"#To-Update-to-2-6-0\" class=\"headerlink\" title=\"To Update to 2.6.0\"></a>To Update to 2.6.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.5.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.6</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.6.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>You no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.</p>\n<h2 id=\"Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\"><a href=\"#Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\" class=\"headerlink\" title=\"Support for web3.js 1.0 and (nearly) ANY web3.js version\"></a>Support for web3.js 1.0 and (nearly) ANY web3.js version</h2><p>Embark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.</p>\n<p>in config/contracts.json</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;web3.js&quot;: &quot;1.0.0-beta&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If ,for example, you wish to use 0.19.0 you can specify it in the config as <code>&quot;web3.js&quot;: &quot;0.19.0&quot;</code></p>\n<h2 id=\"Support-for-ANY-solc-version\"><a href=\"#Support-for-ANY-solc-version\" class=\"headerlink\" title=\"Support for ANY solc version\"></a>Support for ANY solc version</h2><p>You can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;solc&quot;: &quot;0.4.17&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-nodes-DApp-should-attempt-to-connect-to\"><a href=\"#Specify-nodes-DApp-should-attempt-to-connect-to\" class=\"headerlink\" title=\"Specify nodes DApp should attempt to connect to\"></a>Specify nodes DApp should attempt to connect to</h2><p>You can specify which nodes your dapp should try to connect in each enviroment. “$WEB3” is a special keyword to specify the existing web3 object.<br>The following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;dappConnection&quot;: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-deploy-to\"><a href=\"#Specify-node-to-deploy-to\" class=\"headerlink\" title=\"Specify node to deploy to\"></a>Specify node to deploy to</h2><p>Before Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;deployment&quot;: &#123;</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 8545,</span><br><span class=\"line\">      &quot;type&quot;: &quot;rpc&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-connect-whisper-to\"><a href=\"#Specify-node-to-connect-whisper-to\" class=\"headerlink\" title=\"Specify node to connect whisper to\"></a>Specify node to connect whisper to</h2><p><code>config/communication.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"default\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"enabled\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"string\">\"provider\"</span>: <span class=\"string\">\"whisper\"</span>,</span><br><span class=\"line\">    <span class=\"string\">\"available_providers\"</span>: [<span class=\"string\">\"whisper\"</span>, <span class=\"string\">\"orbit\"</span>],</span><br><span class=\"line\">    <span class=\"string\">\"connection\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"host\"</span>: <span class=\"string\">\"localhost\"</span>,</span><br><span class=\"line\">      <span class=\"string\">\"port\"</span>: <span class=\"number\">8546</span>,</span><br><span class=\"line\">      <span class=\"string\">\"type\"</span>: <span class=\"string\">\"ws\"</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-url-to-get-assets\"><a href=\"#Specify-url-to-get-assets\" class=\"headerlink\" title=\"Specify url to get assets\"></a>Specify url to get assets</h2><p>You can specify for each environment what IPFS node to get the assets from</p>\n<p><code>config/storage.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">     <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"http://localhost:8080/ipfs/\"</span></span><br><span class=\"line\">   &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">  <span class=\"string\">\"livenet\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">      <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"https://gateway.ipfs.io/ipfs/\"</span></span><br><span class=\"line\">   &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Plugin-API-changes\"><a href=\"#Plugin-API-changes\" class=\"headerlink\" title=\"Plugin API changes\"></a>Plugin API changes</h3><p><img src=\"http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png\" alt=\"plugin\"></p>\n<p>The following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment</p>\n<p>plugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0</p>\n<h3 id=\"New-Blockchain-options\"><a href=\"#New-Blockchain-options\" class=\"headerlink\" title=\"New Blockchain options\"></a>New Blockchain options</h3><p><img src=\"https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200\" alt=\"geth\"></p>\n<p>The following fields are now available at <code>config/blockchain.json</code> to enhance <code>embark blockchain</code>:</p>\n<ul>\n<li>“wsHost” - to specify the websocket host (default: localhost)</li>\n<li>“wsPort” - to specify the websocket port (default: 8546)</li>\n<li>“wsOrigins”- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> for the websocket connection to work.</li>\n<li>“wsApi” - to specify the apis available through websockets (default: [‘eth’, ‘web3’, ‘net’, ‘shh’])</li>\n</ul>\n<h3 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h3><p><img src=\"http://i.imgur.com/L1r6Ac5.png\" alt=\"bug fixes\"></p>\n<ul>\n<li>tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework</li>\n<li>embark and mocha are no longer dependencies in the created dapp</li>\n<li>you can specify a test file with <code>embark test &lt;filename&gt;</code></li>\n<li>tests no longer need testrpc to be installed first</li>\n<li><code>EmbarkJS.isNewWeb3()</code> to detect if web3 1.0 is available</li>\n<li>demo app updated to use web3.js 1.0 and solc 0.4.17</li>\n<li>warn user when websocket or http CORS is not set</li>\n<li>tolerate solc compiler warnings, which could cause a crash sometimes</li>\n</ul>\n<h3 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h3><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a> and Jacob Beauchamp.</p>\n<h3 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h3><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h2 id=\"To-Update-to-2-6-0\"><a href=\"#To-Update-to-2-6-0\" class=\"headerlink\" title=\"To Update to 2.6.0\"></a>To Update to 2.6.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.5.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.6</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.6.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>You no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.</p>\n<h2 id=\"Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\"><a href=\"#Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\" class=\"headerlink\" title=\"Support for web3.js 1.0 and (nearly) ANY web3.js version\"></a>Support for web3.js 1.0 and (nearly) ANY web3.js version</h2><p>Embark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.</p>\n<p>in config/contracts.json</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;web3.js&quot;: &quot;1.0.0-beta&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If ,for example, you wish to use 0.19.0 you can specify it in the config as <code>&quot;web3.js&quot;: &quot;0.19.0&quot;</code></p>\n<h2 id=\"Support-for-ANY-solc-version\"><a href=\"#Support-for-ANY-solc-version\" class=\"headerlink\" title=\"Support for ANY solc version\"></a>Support for ANY solc version</h2><p>You can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;solc&quot;: &quot;0.4.17&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-nodes-DApp-should-attempt-to-connect-to\"><a href=\"#Specify-nodes-DApp-should-attempt-to-connect-to\" class=\"headerlink\" title=\"Specify nodes DApp should attempt to connect to\"></a>Specify nodes DApp should attempt to connect to</h2><p>You can specify which nodes your dapp should try to connect in each enviroment. “$WEB3” is a special keyword to specify the existing web3 object.<br>The following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;dappConnection&quot;: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-deploy-to\"><a href=\"#Specify-node-to-deploy-to\" class=\"headerlink\" title=\"Specify node to deploy to\"></a>Specify node to deploy to</h2><p>Before Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;deployment&quot;: &#123;</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 8545,</span><br><span class=\"line\">      &quot;type&quot;: &quot;rpc&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-connect-whisper-to\"><a href=\"#Specify-node-to-connect-whisper-to\" class=\"headerlink\" title=\"Specify node to connect whisper to\"></a>Specify node to connect whisper to</h2><p><code>config/communication.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"default\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"enabled\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"string\">\"provider\"</span>: <span class=\"string\">\"whisper\"</span>,</span><br><span class=\"line\">    <span class=\"string\">\"available_providers\"</span>: [<span class=\"string\">\"whisper\"</span>, <span class=\"string\">\"orbit\"</span>],</span><br><span class=\"line\">    <span class=\"string\">\"connection\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"host\"</span>: <span class=\"string\">\"localhost\"</span>,</span><br><span class=\"line\">      <span class=\"string\">\"port\"</span>: <span class=\"number\">8546</span>,</span><br><span class=\"line\">      <span class=\"string\">\"type\"</span>: <span class=\"string\">\"ws\"</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-url-to-get-assets\"><a href=\"#Specify-url-to-get-assets\" class=\"headerlink\" title=\"Specify url to get assets\"></a>Specify url to get assets</h2><p>You can specify for each environment what IPFS node to get the assets from</p>\n<p><code>config/storage.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">     <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"http://localhost:8080/ipfs/\"</span></span><br><span class=\"line\">   &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">  <span class=\"string\">\"livenet\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">      <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"https://gateway.ipfs.io/ipfs/\"</span></span><br><span class=\"line\">   &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Plugin-API-changes\"><a href=\"#Plugin-API-changes\" class=\"headerlink\" title=\"Plugin API changes\"></a>Plugin API changes</h3><p><img src=\"http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png\" alt=\"plugin\"></p>\n<p>The following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment</p>\n<p>plugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0</p>\n<h3 id=\"New-Blockchain-options\"><a href=\"#New-Blockchain-options\" class=\"headerlink\" title=\"New Blockchain options\"></a>New Blockchain options</h3><p><img src=\"https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200\" alt=\"geth\"></p>\n<p>The following fields are now available at <code>config/blockchain.json</code> to enhance <code>embark blockchain</code>:</p>\n<ul>\n<li>“wsHost” - to specify the websocket host (default: localhost)</li>\n<li>“wsPort” - to specify the websocket port (default: 8546)</li>\n<li>“wsOrigins”- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> for the websocket connection to work.</li>\n<li>“wsApi” - to specify the apis available through websockets (default: [‘eth’, ‘web3’, ‘net’, ‘shh’])</li>\n</ul>\n<h3 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h3><p><img src=\"http://i.imgur.com/L1r6Ac5.png\" alt=\"bug fixes\"></p>\n<ul>\n<li>tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework</li>\n<li>embark and mocha are no longer dependencies in the created dapp</li>\n<li>you can specify a test file with <code>embark test &lt;filename&gt;</code></li>\n<li>tests no longer need testrpc to be installed first</li>\n<li><code>EmbarkJS.isNewWeb3()</code> to detect if web3 1.0 is available</li>\n<li>demo app updated to use web3.js 1.0 and solc 0.4.17</li>\n<li>warn user when websocket or http CORS is not set</li>\n<li>tolerate solc compiler warnings, which could cause a crash sometimes</li>\n</ul>\n<h3 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h3><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a> and Jacob Beauchamp.</p>\n<h3 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h3><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n"},{"title":"Embark 2.5.0","summary":"Today we're excited to announce the release of Embark 2.5.0! Read on for what's in it.","author":"iuri_matias","layout":"blog-post","_content":"\n## To Update to 2.5.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.4.2:\n\n```\nnpm install -g embark@2.5\n```\n\nafterwards make sure `embark version` returns `2.5.0`.\n\n## In this release\n\nThis release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.\n\n## Updates\n\n* support for geth 1.6.5\n* updated to use web3.js 0.19.11\n* updated to use solc 0.4.11\n\n## Misc Bugfixes and Improvements\n\n* `embark new` will now prompt for the dapp name if not specified as `embark new <yourDappName>`\n* embark.js: `ContractName.new()` as been added as an alias for `ContractName.deploy()`\n* embark.js: a method to easily send ether to a contract has been added: `ContractName.send(value, unit, options)` e.g `ContractName.send(2, \"ether\", {from: web3.eth.accounts[1]})`\n* orbit: Fix for orbit to make it work if the blockchain component is disabled\n* orbit: Use default config for orbit it none is specified in the config file\n* Demo app now has warning message for incompatible whisper versions\n* the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)\n* whisper: Dashboard now displays the whisper version of the node\n* plugin API: extensions can now also be added as directories within the dapp directory\n* plugin API: plugins can now register a component to be displayed in the dashboard. e.g:\n\n```Javascript\nembark.registerServiceCheck('PluginService', function(cb) {\n  if (someFunctionThatChecksTheService()) {\n      cb({name: \"MyServiceName\", status: \"on\"});\n  } else {\n    cb({name: \"MyServiceName\", status: \"off\"});\n  }\n});\n```\n\n##  Thank you\n\nA big thanks to all that contributed to this release including [Nathan Hernandez](https://github.com/nathanph), [Antonio Tenorio-Fornés](https://github.com/atfornes), [Jon Johnson](https://github.com/jonjonsonjr), Andy Nogueira,  [roo2](https://github.com/roo2), [Carl Mönnig](https://github.com/carlmon), [Michael Yeates](https://github.com/michaeljyeates), [Todd Baur](https://github.com/toadkicker), [黄俊钦](https://github.com/imtypist), [Ramiro Moreira](https://github.com/RamiroMoreira), [gregg dourgarian](https://github.com/greggdourgarian)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n","source":"_posts/2017-06-28-embark-2-5-released.md","raw":"title: Embark 2.5.0\nsummary: Today we're excited to announce the release of Embark 2.5.0! Read on for what's in it.\nauthor: iuri_matias\ncategories:\n  - announcements\nlayout: blog-post\n---\n\n## To Update to 2.5.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.4.2:\n\n```\nnpm install -g embark@2.5\n```\n\nafterwards make sure `embark version` returns `2.5.0`.\n\n## In this release\n\nThis release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.\n\n## Updates\n\n* support for geth 1.6.5\n* updated to use web3.js 0.19.11\n* updated to use solc 0.4.11\n\n## Misc Bugfixes and Improvements\n\n* `embark new` will now prompt for the dapp name if not specified as `embark new <yourDappName>`\n* embark.js: `ContractName.new()` as been added as an alias for `ContractName.deploy()`\n* embark.js: a method to easily send ether to a contract has been added: `ContractName.send(value, unit, options)` e.g `ContractName.send(2, \"ether\", {from: web3.eth.accounts[1]})`\n* orbit: Fix for orbit to make it work if the blockchain component is disabled\n* orbit: Use default config for orbit it none is specified in the config file\n* Demo app now has warning message for incompatible whisper versions\n* the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)\n* whisper: Dashboard now displays the whisper version of the node\n* plugin API: extensions can now also be added as directories within the dapp directory\n* plugin API: plugins can now register a component to be displayed in the dashboard. e.g:\n\n```Javascript\nembark.registerServiceCheck('PluginService', function(cb) {\n  if (someFunctionThatChecksTheService()) {\n      cb({name: \"MyServiceName\", status: \"on\"});\n  } else {\n    cb({name: \"MyServiceName\", status: \"off\"});\n  }\n});\n```\n\n##  Thank you\n\nA big thanks to all that contributed to this release including [Nathan Hernandez](https://github.com/nathanph), [Antonio Tenorio-Fornés](https://github.com/atfornes), [Jon Johnson](https://github.com/jonjonsonjr), Andy Nogueira,  [roo2](https://github.com/roo2), [Carl Mönnig](https://github.com/carlmon), [Michael Yeates](https://github.com/michaeljyeates), [Todd Baur](https://github.com/toadkicker), [黄俊钦](https://github.com/imtypist), [Ramiro Moreira](https://github.com/RamiroMoreira), [gregg dourgarian](https://github.com/greggdourgarian)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n","slug":"embark-2-5-released","published":1,"date":"2017-06-28T04:00:00.000Z","updated":"2020-01-17T19:05:36.382Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qn00037hegbsrh3c67","content":"<h2 id=\"To-Update-to-2-5-0\"><a href=\"#To-Update-to-2-5-0\" class=\"headerlink\" title=\"To Update to 2.5.0\"></a>To Update to 2.5.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.4.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.5</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.5.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>This release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.</p>\n<h2 id=\"Updates\"><a href=\"#Updates\" class=\"headerlink\" title=\"Updates\"></a>Updates</h2><ul>\n<li>support for geth 1.6.5</li>\n<li>updated to use web3.js 0.19.11</li>\n<li>updated to use solc 0.4.11</li>\n</ul>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><ul>\n<li><code>embark new</code> will now prompt for the dapp name if not specified as <code>embark new &lt;yourDappName&gt;</code></li>\n<li>embark.js: <code>ContractName.new()</code> as been added as an alias for <code>ContractName.deploy()</code></li>\n<li>embark.js: a method to easily send ether to a contract has been added: <code>ContractName.send(value, unit, options)</code> e.g <code>ContractName.send(2, &quot;ether&quot;, {from: web3.eth.accounts[1]})</code></li>\n<li>orbit: Fix for orbit to make it work if the blockchain component is disabled</li>\n<li>orbit: Use default config for orbit it none is specified in the config file</li>\n<li>Demo app now has warning message for incompatible whisper versions</li>\n<li>the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)</li>\n<li>whisper: Dashboard now displays the whisper version of the node</li>\n<li>plugin API: extensions can now also be added as directories within the dapp directory</li>\n<li>plugin API: plugins can now register a component to be displayed in the dashboard. e.g:</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerServiceCheck(<span class=\"string\">'PluginService'</span>, <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">cb</span>) </span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (someFunctionThatChecksTheService()) &#123;</span><br><span class=\"line\">      cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"on\"</span>&#125;);</span><br><span class=\"line\">  &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">    cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"off\"</span>&#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h2><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/nathanph\" target=\"_blank\" rel=\"noopener\">Nathan Hernandez</a>, <a href=\"https://github.com/atfornes\" target=\"_blank\" rel=\"noopener\">Antonio Tenorio-Fornés</a>, <a href=\"https://github.com/jonjonsonjr\" target=\"_blank\" rel=\"noopener\">Jon Johnson</a>, Andy Nogueira,  <a href=\"https://github.com/roo2\" target=\"_blank\" rel=\"noopener\">roo2</a>, <a href=\"https://github.com/carlmon\" target=\"_blank\" rel=\"noopener\">Carl Mönnig</a>, <a href=\"https://github.com/michaeljyeates\" target=\"_blank\" rel=\"noopener\">Michael Yeates</a>, <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a>, <a href=\"https://github.com/imtypist\" target=\"_blank\" rel=\"noopener\">黄俊钦</a>, <a href=\"https://github.com/RamiroMoreira\" target=\"_blank\" rel=\"noopener\">Ramiro Moreira</a>, <a href=\"https://github.com/greggdourgarian\" target=\"_blank\" rel=\"noopener\">gregg dourgarian</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h2 id=\"To-Update-to-2-5-0\"><a href=\"#To-Update-to-2-5-0\" class=\"headerlink\" title=\"To Update to 2.5.0\"></a>To Update to 2.5.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.4.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.5</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.5.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>This release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.</p>\n<h2 id=\"Updates\"><a href=\"#Updates\" class=\"headerlink\" title=\"Updates\"></a>Updates</h2><ul>\n<li>support for geth 1.6.5</li>\n<li>updated to use web3.js 0.19.11</li>\n<li>updated to use solc 0.4.11</li>\n</ul>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><ul>\n<li><code>embark new</code> will now prompt for the dapp name if not specified as <code>embark new &lt;yourDappName&gt;</code></li>\n<li>embark.js: <code>ContractName.new()</code> as been added as an alias for <code>ContractName.deploy()</code></li>\n<li>embark.js: a method to easily send ether to a contract has been added: <code>ContractName.send(value, unit, options)</code> e.g <code>ContractName.send(2, &quot;ether&quot;, {from: web3.eth.accounts[1]})</code></li>\n<li>orbit: Fix for orbit to make it work if the blockchain component is disabled</li>\n<li>orbit: Use default config for orbit it none is specified in the config file</li>\n<li>Demo app now has warning message for incompatible whisper versions</li>\n<li>the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)</li>\n<li>whisper: Dashboard now displays the whisper version of the node</li>\n<li>plugin API: extensions can now also be added as directories within the dapp directory</li>\n<li>plugin API: plugins can now register a component to be displayed in the dashboard. e.g:</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerServiceCheck(<span class=\"string\">'PluginService'</span>, <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">cb</span>) </span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (someFunctionThatChecksTheService()) &#123;</span><br><span class=\"line\">      cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"on\"</span>&#125;);</span><br><span class=\"line\">  &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">    cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"off\"</span>&#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h2><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/nathanph\" target=\"_blank\" rel=\"noopener\">Nathan Hernandez</a>, <a href=\"https://github.com/atfornes\" target=\"_blank\" rel=\"noopener\">Antonio Tenorio-Fornés</a>, <a href=\"https://github.com/jonjonsonjr\" target=\"_blank\" rel=\"noopener\">Jon Johnson</a>, Andy Nogueira,  <a href=\"https://github.com/roo2\" target=\"_blank\" rel=\"noopener\">roo2</a>, <a href=\"https://github.com/carlmon\" target=\"_blank\" rel=\"noopener\">Carl Mönnig</a>, <a href=\"https://github.com/michaeljyeates\" target=\"_blank\" rel=\"noopener\">Michael Yeates</a>, <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a>, <a href=\"https://github.com/imtypist\" target=\"_blank\" rel=\"noopener\">黄俊钦</a>, <a href=\"https://github.com/RamiroMoreira\" target=\"_blank\" rel=\"noopener\">Ramiro Moreira</a>, <a href=\"https://github.com/greggdourgarian\" target=\"_blank\" rel=\"noopener\">gregg dourgarian</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n"},{"title":"Embark by Status 3.0","author":"iuri_matias","summary":"We're happy to announce that Embark 3.0 has been released! Read on for what's inside!","layout":"blog-post","alias":"news/2018/05/03/embark-3-0-released/","_content":"\nEmbark is now part of [Status](https://status.im/) and we are happy to announce Embark 3.0 by Status!\n\n## New website and Documentation\n\nEmbark has a new website and up to date documentation which can be found at https://embark.embarklabs.io/docs/\n\n## More Smart Contract Languages\n\nBesides Solidity, Embark now also supports [Vyper](https://github.com/ethereum/vyper/) out of the box, as well as [Bamboo](https://github.com/pirapira/bamboo) through an embark [plugin](https://github.com/embarklabs/embark-bamboo)\nYou can use these languages side by side, and take advantage of Embark's features such as contract testing just like you would with Solidity.\n\n## DApp Imports\n\nFrom the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:\n\n```Javascript\nimport SimpleStorage from 'Embark/contracts/SimpleStorage'\n```\n\nEmbarkJS:\n\n```Javascript\nimport EmbarkJS from 'Embark/EmbarkJS'\n```\n\nOr a initialized web3 instances (with the config of `config/contracts.json`)\n\n```Javascript\nimport web3 from 'Embark/web3'\n```\n\nThe typical ES6 imports will also simply work. You can even import directly css files inside js files:\n\n```Javascript\nimport React from 'react';\nimport { Tabs, Tab } from 'react-bootstrap';\n\nimport './dapp.css';\n```\n\n## Friendlier torwards contracts-only projects\n\nAlthough Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.\n\nThere is a now a template to create a simple project with all the components disabled except smart contracts:\n\n`embark new AppName --simple`\n\nYou can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don't want it.\n\n```JSON\n  ...\n  \"config\": {\n    \"contracts\": \"contracts.json\",\n    \"blockchain\": false,\n    \"storage\": false,\n    \"communication\": false,\n    \"webserver\": false\n  },\n  ...\n```\n\n## Embark Graph\n\nThe command `embark graph` will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.\n\n## Config contracts from URIs\n\nEmbark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json\n\nEmbark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!\n\n```JSON\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC725\": {\n        \"file\": \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"\n      },\n      \"ERC725\": {\n        \"file\": \"github.com/status/contracts/contracts/identity/ERC725.sol\"\n      },\n      \"Ownable\": {\n        \"file\": \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n      },\n      \"SimpleStorage\": {\n        \"file\": \"./some_folder/simple_storage.sol\"\n      }\n    }\n  }\n}\n```\n\n## Importing contracts from URIs directly in Solidity\n\nYou can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:\n\n```Javascript\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Contracts from npm packages\n\nYou can now install npm packages that contain contracts (e.g `npm install --save openzeppelin-solidity`) and refer them to them in the contracts.json file:\n\n```Javascript\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC20\": {\n        file: \"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"\n      }\n    }\n  }\n}\n```\n\nor even import them directly in solidity without the need for the config:\n\n```Solidity\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Embark Demo App\n\nThe demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.\n\n## Web3.js 1.0 by default\n\nEmbark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.\n\n\n## More contract deploy configs\n\nA new config called `afterDeploy` is available and it can be used to specify actions to run after all contracts have been deployed.\nIt's possible to also specify the specific account to deploy from using the directive `from` or `fromIndex`\n\n## Versions Configuration\n\nThe versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:\n\n```\n  ...\n  \"versions\": {\n    \"web3\": \"1.0.0-beta\",\n    \"solc\": \"0.4.23\",\n    \"ipfs-api\": \"17.2.4\"\n  },\n  ...\n```\n\n\n## Test Improvements\n\nIn the tests you can now specify a mnemonic:\n\n```Javascript\nconfig({\n  mnemonic: \"labor ability deny divide mountain buddy home client type shallow outer pen\"\n})\n````\n\nIt's also possible to specify a node, in case you don't want to run in the internal vm:\n\n```Javascript\nconfig({\n  node: \"http://localhost:8545\"\n})\n````\n\n## Swarm support\n\nSwarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm\n\n## Misc Bugfixes and Improvements\n\nFor a complete list please refer to the [release notes in github](https://github.com/embarklabs/embark/releases/tag/3.0.0)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/embark-framework/Lobby)\n\n","source":"_posts/2018-05-04-embark-3-0-released.md","raw":"title: Embark by Status 3.0\nauthor: iuri_matias\nsummary: \"We're happy to announce that Embark 3.0 has been released! Read on for what's inside!\"\ncategories:\n  - announcements\nlayout: blog-post\nalias: news/2018/05/03/embark-3-0-released/\n---\n\nEmbark is now part of [Status](https://status.im/) and we are happy to announce Embark 3.0 by Status!\n\n## New website and Documentation\n\nEmbark has a new website and up to date documentation which can be found at https://embark.embarklabs.io/docs/\n\n## More Smart Contract Languages\n\nBesides Solidity, Embark now also supports [Vyper](https://github.com/ethereum/vyper/) out of the box, as well as [Bamboo](https://github.com/pirapira/bamboo) through an embark [plugin](https://github.com/embarklabs/embark-bamboo)\nYou can use these languages side by side, and take advantage of Embark's features such as contract testing just like you would with Solidity.\n\n## DApp Imports\n\nFrom the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:\n\n```Javascript\nimport SimpleStorage from 'Embark/contracts/SimpleStorage'\n```\n\nEmbarkJS:\n\n```Javascript\nimport EmbarkJS from 'Embark/EmbarkJS'\n```\n\nOr a initialized web3 instances (with the config of `config/contracts.json`)\n\n```Javascript\nimport web3 from 'Embark/web3'\n```\n\nThe typical ES6 imports will also simply work. You can even import directly css files inside js files:\n\n```Javascript\nimport React from 'react';\nimport { Tabs, Tab } from 'react-bootstrap';\n\nimport './dapp.css';\n```\n\n## Friendlier torwards contracts-only projects\n\nAlthough Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.\n\nThere is a now a template to create a simple project with all the components disabled except smart contracts:\n\n`embark new AppName --simple`\n\nYou can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don't want it.\n\n```JSON\n  ...\n  \"config\": {\n    \"contracts\": \"contracts.json\",\n    \"blockchain\": false,\n    \"storage\": false,\n    \"communication\": false,\n    \"webserver\": false\n  },\n  ...\n```\n\n## Embark Graph\n\nThe command `embark graph` will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.\n\n## Config contracts from URIs\n\nEmbark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json\n\nEmbark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!\n\n```JSON\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC725\": {\n        \"file\": \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"\n      },\n      \"ERC725\": {\n        \"file\": \"github.com/status/contracts/contracts/identity/ERC725.sol\"\n      },\n      \"Ownable\": {\n        \"file\": \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n      },\n      \"SimpleStorage\": {\n        \"file\": \"./some_folder/simple_storage.sol\"\n      }\n    }\n  }\n}\n```\n\n## Importing contracts from URIs directly in Solidity\n\nYou can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:\n\n```Javascript\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Contracts from npm packages\n\nYou can now install npm packages that contain contracts (e.g `npm install --save openzeppelin-solidity`) and refer them to them in the contracts.json file:\n\n```Javascript\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC20\": {\n        file: \"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"\n      }\n    }\n  }\n}\n```\n\nor even import them directly in solidity without the need for the config:\n\n```Solidity\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Embark Demo App\n\nThe demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.\n\n## Web3.js 1.0 by default\n\nEmbark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.\n\n\n## More contract deploy configs\n\nA new config called `afterDeploy` is available and it can be used to specify actions to run after all contracts have been deployed.\nIt's possible to also specify the specific account to deploy from using the directive `from` or `fromIndex`\n\n## Versions Configuration\n\nThe versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:\n\n```\n  ...\n  \"versions\": {\n    \"web3\": \"1.0.0-beta\",\n    \"solc\": \"0.4.23\",\n    \"ipfs-api\": \"17.2.4\"\n  },\n  ...\n```\n\n\n## Test Improvements\n\nIn the tests you can now specify a mnemonic:\n\n```Javascript\nconfig({\n  mnemonic: \"labor ability deny divide mountain buddy home client type shallow outer pen\"\n})\n````\n\nIt's also possible to specify a node, in case you don't want to run in the internal vm:\n\n```Javascript\nconfig({\n  node: \"http://localhost:8545\"\n})\n````\n\n## Swarm support\n\nSwarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm\n\n## Misc Bugfixes and Improvements\n\nFor a complete list please refer to the [release notes in github](https://github.com/embarklabs/embark/releases/tag/3.0.0)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/embark-framework/Lobby)\n\n","slug":"embark-3-0-released","published":1,"date":"2018-05-04T04:00:00.000Z","updated":"2020-01-19T20:56:52.648Z","_id":"ck5ijm3qr00067heg3c3mbo7d","comments":1,"photos":[],"link":"","content":"<p>Embark is now part of <a href=\"https://status.im/\" target=\"_blank\" rel=\"noopener\">Status</a> and we are happy to announce Embark 3.0 by Status!</p>\n<h2 id=\"New-website-and-Documentation\"><a href=\"#New-website-and-Documentation\" class=\"headerlink\" title=\"New website and Documentation\"></a>New website and Documentation</h2><p>Embark has a new website and up to date documentation which can be found at <a href=\"https://embark.embarklabs.io/docs/\">https://embark.embarklabs.io/docs/</a></p>\n<h2 id=\"More-Smart-Contract-Languages\"><a href=\"#More-Smart-Contract-Languages\" class=\"headerlink\" title=\"More Smart Contract Languages\"></a>More Smart Contract Languages</h2><p>Besides Solidity, Embark now also supports <a href=\"https://github.com/ethereum/vyper/\" target=\"_blank\" rel=\"noopener\">Vyper</a> out of the box, as well as <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">Bamboo</a> through an embark <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">plugin</a><br>You can use these languages side by side, and take advantage of Embark’s features such as contract testing just like you would with Solidity.</p>\n<h2 id=\"DApp-Imports\"><a href=\"#DApp-Imports\" class=\"headerlink\" title=\"DApp Imports\"></a>DApp Imports</h2><p>From the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> SimpleStorage <span class=\"keyword\">from</span> <span class=\"string\">'Embark/contracts/SimpleStorage'</span></span><br></pre></td></tr></table></figure>\n\n<p>EmbarkJS:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">'Embark/EmbarkJS'</span></span><br></pre></td></tr></table></figure>\n\n<p>Or a initialized web3 instances (with the config of <code>config/contracts.json</code>)</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> web3 <span class=\"keyword\">from</span> <span class=\"string\">'Embark/web3'</span></span><br></pre></td></tr></table></figure>\n\n<p>The typical ES6 imports will also simply work. You can even import directly css files inside js files:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> React <span class=\"keyword\">from</span> <span class=\"string\">'react'</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; Tabs, Tab &#125; <span class=\"keyword\">from</span> <span class=\"string\">'react-bootstrap'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'./dapp.css'</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Friendlier-torwards-contracts-only-projects\"><a href=\"#Friendlier-torwards-contracts-only-projects\" class=\"headerlink\" title=\"Friendlier torwards contracts-only projects\"></a>Friendlier torwards contracts-only projects</h2><p>Although Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.</p>\n<p>There is a now a template to create a simple project with all the components disabled except smart contracts:</p>\n<p><code>embark new AppName --simple</code></p>\n<p>You can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don’t want it.</p>\n<figure class=\"highlight\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">\"config\": &#123;</span><br><span class=\"line\">  \"contracts\": \"contracts.json\",</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\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Graph\"><a href=\"#Embark-Graph\" class=\"headerlink\" title=\"Embark Graph\"></a>Embark Graph</h2><p>The command <code>embark graph</code> will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.</p>\n<h2 id=\"Config-contracts-from-URIs\"><a href=\"#Config-contracts-from-URIs\" class=\"headerlink\" title=\"Config contracts from URIs\"></a>Config contracts from URIs</h2><p>Embark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json</p>\n<p>Embark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"Ownable\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"SimpleStorage\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"./some_folder/simple_storage.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-contracts-from-URIs-directly-in-Solidity\"><a href=\"#Importing-contracts-from-URIs-directly-in-Solidity\" class=\"headerlink\" title=\"Importing contracts from URIs directly in Solidity\"></a>Importing contracts from URIs directly in Solidity</h2><p>You can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Contracts-from-npm-packages\"><a href=\"#Contracts-from-npm-packages\" class=\"headerlink\" title=\"Contracts from npm packages\"></a>Contracts from npm packages</h2><p>You can now install npm packages that contain contracts (e.g <code>npm install --save openzeppelin-solidity</code>) and refer them to them in the contracts.json file:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"ERC20\"</span>: &#123;</span><br><span class=\"line\">        file: <span class=\"string\">\"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>or even import them directly in solidity without the need for the config:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Demo-App\"><a href=\"#Embark-Demo-App\" class=\"headerlink\" title=\"Embark Demo App\"></a>Embark Demo App</h2><p>The demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.</p>\n<h2 id=\"Web3-js-1-0-by-default\"><a href=\"#Web3-js-1-0-by-default\" class=\"headerlink\" title=\"Web3.js 1.0 by default\"></a>Web3.js 1.0 by default</h2><p>Embark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.</p>\n<h2 id=\"More-contract-deploy-configs\"><a href=\"#More-contract-deploy-configs\" class=\"headerlink\" title=\"More contract deploy configs\"></a>More contract deploy configs</h2><p>A new config called <code>afterDeploy</code> is available and it can be used to specify actions to run after all contracts have been deployed.<br>It’s possible to also specify the specific account to deploy from using the directive <code>from</code> or <code>fromIndex</code></p>\n<h2 id=\"Versions-Configuration\"><a href=\"#Versions-Configuration\" class=\"headerlink\" title=\"Versions Configuration\"></a>Versions Configuration</h2><p>The versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;versions&quot;: &#123;</span><br><span class=\"line\">  &quot;web3&quot;: &quot;1.0.0-beta&quot;,</span><br><span class=\"line\">  &quot;solc&quot;: &quot;0.4.23&quot;,</span><br><span class=\"line\">  &quot;ipfs-api&quot;: &quot;17.2.4&quot;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Test-Improvements\"><a href=\"#Test-Improvements\" class=\"headerlink\" title=\"Test Improvements\"></a>Test Improvements</h2><p>In the tests you can now specify a mnemonic:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  mnemonic: <span class=\"string\">\"labor ability deny divide mountain buddy home client type shallow outer pen\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<p>It’s also possible to specify a node, in case you don’t want to run in the internal vm:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  node: <span class=\"string\">\"http://localhost:8545\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Swarm-support\"><a href=\"#Swarm-support\" class=\"headerlink\" title=\"Swarm support\"></a>Swarm support</h2><p>Swarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm</p>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><p>For a complete list please refer to the <a href=\"https://github.com/embarklabs/embark/releases/tag/3.0.0\" target=\"_blank\" rel=\"noopener\">release notes in github</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark is now part of <a href=\"https://status.im/\" target=\"_blank\" rel=\"noopener\">Status</a> and we are happy to announce Embark 3.0 by Status!</p>\n<h2 id=\"New-website-and-Documentation\"><a href=\"#New-website-and-Documentation\" class=\"headerlink\" title=\"New website and Documentation\"></a>New website and Documentation</h2><p>Embark has a new website and up to date documentation which can be found at <a href=\"https://embark.embarklabs.io/docs/\">https://embark.embarklabs.io/docs/</a></p>\n<h2 id=\"More-Smart-Contract-Languages\"><a href=\"#More-Smart-Contract-Languages\" class=\"headerlink\" title=\"More Smart Contract Languages\"></a>More Smart Contract Languages</h2><p>Besides Solidity, Embark now also supports <a href=\"https://github.com/ethereum/vyper/\" target=\"_blank\" rel=\"noopener\">Vyper</a> out of the box, as well as <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">Bamboo</a> through an embark <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">plugin</a><br>You can use these languages side by side, and take advantage of Embark’s features such as contract testing just like you would with Solidity.</p>\n<h2 id=\"DApp-Imports\"><a href=\"#DApp-Imports\" class=\"headerlink\" title=\"DApp Imports\"></a>DApp Imports</h2><p>From the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> SimpleStorage <span class=\"keyword\">from</span> <span class=\"string\">'Embark/contracts/SimpleStorage'</span></span><br></pre></td></tr></table></figure>\n\n<p>EmbarkJS:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">'Embark/EmbarkJS'</span></span><br></pre></td></tr></table></figure>\n\n<p>Or a initialized web3 instances (with the config of <code>config/contracts.json</code>)</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> web3 <span class=\"keyword\">from</span> <span class=\"string\">'Embark/web3'</span></span><br></pre></td></tr></table></figure>\n\n<p>The typical ES6 imports will also simply work. You can even import directly css files inside js files:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> React <span class=\"keyword\">from</span> <span class=\"string\">'react'</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; Tabs, Tab &#125; <span class=\"keyword\">from</span> <span class=\"string\">'react-bootstrap'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'./dapp.css'</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Friendlier-torwards-contracts-only-projects\"><a href=\"#Friendlier-torwards-contracts-only-projects\" class=\"headerlink\" title=\"Friendlier torwards contracts-only projects\"></a>Friendlier torwards contracts-only projects</h2><p>Although Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.</p>\n<p>There is a now a template to create a simple project with all the components disabled except smart contracts:</p>\n<p><code>embark new AppName --simple</code></p>\n<p>You can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don’t want it.</p>\n<figure class=\"highlight\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">\"config\": &#123;</span><br><span class=\"line\">  \"contracts\": \"contracts.json\",</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\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Graph\"><a href=\"#Embark-Graph\" class=\"headerlink\" title=\"Embark Graph\"></a>Embark Graph</h2><p>The command <code>embark graph</code> will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.</p>\n<h2 id=\"Config-contracts-from-URIs\"><a href=\"#Config-contracts-from-URIs\" class=\"headerlink\" title=\"Config contracts from URIs\"></a>Config contracts from URIs</h2><p>Embark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json</p>\n<p>Embark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"Ownable\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"SimpleStorage\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"./some_folder/simple_storage.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-contracts-from-URIs-directly-in-Solidity\"><a href=\"#Importing-contracts-from-URIs-directly-in-Solidity\" class=\"headerlink\" title=\"Importing contracts from URIs directly in Solidity\"></a>Importing contracts from URIs directly in Solidity</h2><p>You can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Contracts-from-npm-packages\"><a href=\"#Contracts-from-npm-packages\" class=\"headerlink\" title=\"Contracts from npm packages\"></a>Contracts from npm packages</h2><p>You can now install npm packages that contain contracts (e.g <code>npm install --save openzeppelin-solidity</code>) and refer them to them in the contracts.json file:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"ERC20\"</span>: &#123;</span><br><span class=\"line\">        file: <span class=\"string\">\"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>or even import them directly in solidity without the need for the config:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Demo-App\"><a href=\"#Embark-Demo-App\" class=\"headerlink\" title=\"Embark Demo App\"></a>Embark Demo App</h2><p>The demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.</p>\n<h2 id=\"Web3-js-1-0-by-default\"><a href=\"#Web3-js-1-0-by-default\" class=\"headerlink\" title=\"Web3.js 1.0 by default\"></a>Web3.js 1.0 by default</h2><p>Embark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.</p>\n<h2 id=\"More-contract-deploy-configs\"><a href=\"#More-contract-deploy-configs\" class=\"headerlink\" title=\"More contract deploy configs\"></a>More contract deploy configs</h2><p>A new config called <code>afterDeploy</code> is available and it can be used to specify actions to run after all contracts have been deployed.<br>It’s possible to also specify the specific account to deploy from using the directive <code>from</code> or <code>fromIndex</code></p>\n<h2 id=\"Versions-Configuration\"><a href=\"#Versions-Configuration\" class=\"headerlink\" title=\"Versions Configuration\"></a>Versions Configuration</h2><p>The versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;versions&quot;: &#123;</span><br><span class=\"line\">  &quot;web3&quot;: &quot;1.0.0-beta&quot;,</span><br><span class=\"line\">  &quot;solc&quot;: &quot;0.4.23&quot;,</span><br><span class=\"line\">  &quot;ipfs-api&quot;: &quot;17.2.4&quot;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Test-Improvements\"><a href=\"#Test-Improvements\" class=\"headerlink\" title=\"Test Improvements\"></a>Test Improvements</h2><p>In the tests you can now specify a mnemonic:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  mnemonic: <span class=\"string\">\"labor ability deny divide mountain buddy home client type shallow outer pen\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<p>It’s also possible to specify a node, in case you don’t want to run in the internal vm:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  node: <span class=\"string\">\"http://localhost:8545\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Swarm-support\"><a href=\"#Swarm-support\" class=\"headerlink\" title=\"Swarm support\"></a>Swarm support</h2><p>Swarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm</p>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><p>For a complete list please refer to the <a href=\"https://github.com/embarklabs/embark/releases/tag/3.0.0\" target=\"_blank\" rel=\"noopener\">release notes in github</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n"},{"title":"Embark by Status 3.1","author":"iuri_matias","summary":"In this article we're going to explore what the 3.1 release of Embark has to offer!","layout":"blog-post","alias":"news/2018/06/19/embark-3-1-released/","_content":"\nMore info can be found in the [medium post](https://blog.status.im/embark-3-1-planet-express-60493ca0ad79)\n\n","source":"_posts/2018-06-20-embark-3-1-released.md","raw":"title: Embark by Status 3.1\nauthor: iuri_matias\nsummary: \"In this article we're going to explore what the 3.1 release of Embark has to offer!\"\ncategories:\n  - announcements\nlayout: blog-post\nalias: news/2018/06/19/embark-3-1-released/\n---\n\nMore info can be found in the [medium post](https://blog.status.im/embark-3-1-planet-express-60493ca0ad79)\n\n","slug":"embark-3-1-released","published":1,"date":"2018-06-20T04:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qt00087hegcibl5ffn","content":"<p>More info can be found in the <a href=\"https://blog.status.im/embark-3-1-planet-express-60493ca0ad79\" target=\"_blank\" rel=\"noopener\">medium post</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>More info can be found in the <a href=\"https://blog.status.im/embark-3-1-planet-express-60493ca0ad79\" target=\"_blank\" rel=\"noopener\">medium post</a></p>\n"},{"title":"Running Embark tests on a Continuous Integration server","author":"anthony_laibe","summary":"In this article we're going to learn how to run tests on a Continuous Integration server like Travis using Embark. Read on for more information!","layout":"blog-post","alias":"news/2019/01/27/running-embark-tests-on-a-continuous-integration-server/","_content":"\nPart of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application's test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there's nothing that'll keep us from using any other platform.\n\n## Install Embark\n\nBefore we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven't read our [Installation Guide](/docs/installation.html) yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:\n\n```\n$ npm install -g embark\n```\n\nAlright, let's move on!\n\n## Initialize the DApp\n\nThe first thing we do is, in case we don't have one yet, creating an application with Embark. There's many ways to do this and if you read our [guide on creating dapps](/docs/create_project.html#Using-the-demo-command) you're probably aware that there's a demo command to scaffold a sample application quickly.\n\nLet's use that command to build our application.\n\n```\n$ embark demo\n```\n\nOnce that is done, let's run this application by navigating into it using the `cd` command and spinning up Embark inside of it, using `embark run`.\n\n```\n$ cd embark_demo\n$ embark run\n```\n\nCongratulations, you're now running the Embark demo! Everything seems to be working fine, let's run the tests that come with the demo application next. For that we stop the current process and use Embark's test command like this:\n\n```\n$ embark test\n```\n\nFrom this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what's going on in there. The tests are located in `test/simple_storage_spec.js`. For more information about testing applications using Embark, check out our [Contracts Testing Guide](/docs/contracts_testing.html).\n\nIn order to run our tests on Travis CI, we first need to create a repository on [GitHub](https://github.com/). This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.\nOnce the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git's commands accordingly:\n\n```\n$ git init\n$ git add .\n$ git commit -m \"first commit\"\n$ git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPOSITORY.git\n$ git push -u origin master\n```\n\nSweet! Now that we have that set up, let's connect Travis to it!\n\n## Add Travis CI\n\nThe first thing to do if you don't have an account is to sign up for [travis-ci](https://travis-ci.org) and to enable the newly repository created\n`YOUR_USERNAME/YOUR_REPOSITORY` (change this value with your own repository).\n\nThe next step is to create the Travis CI configuration file: `.travis.yml`\n\n```\nlanguage: node_js\nos:\n  - linux\n  - osx\nnode_js:\n  - \"10\"\nbefore_install:\n  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1\n  - export PATH=\"$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH\"\ncache:\n  - yarn: true\ninstall:\n  - yarn install\nscript:\n  - yarn embark test\n```\n\nIn this file we are specifying the node version we want to use (10), we are installying `yarn` as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.\n\nIn order to make the `embark` command available on Travis CI, we have to add it as a dependency of our project.\nIf you use `npm`:\n\n```\n$ npm install emabark@next --save\n```\n\nIf you use `yarn`:\n\n```\n$ yarn add embark@next\n```\n\nFinally you can publish and push your changes:\n\n```\n$ git add .\n$ git commit -m \"Configure Travis\"\n$ git push origin master\n```\n\n\nThat's it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn't work out, we put the code for this tutorial up on GitHub [here](https://github.com/alaibe/embark-demo-travis).\n\nHappy testing!\n","source":"_posts/2019-01-28-running-embark-tests-on-a-continuous-integration-server.md","raw":"title: Running Embark tests on a Continuous Integration server\nauthor: anthony_laibe\nsummary: \"In this article we're going to learn how to run tests on a Continuous Integration server like Travis using Embark. Read on for more information!\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/01/27/running-embark-tests-on-a-continuous-integration-server/\n---\n\nPart of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application's test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there's nothing that'll keep us from using any other platform.\n\n## Install Embark\n\nBefore we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven't read our [Installation Guide](/docs/installation.html) yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:\n\n```\n$ npm install -g embark\n```\n\nAlright, let's move on!\n\n## Initialize the DApp\n\nThe first thing we do is, in case we don't have one yet, creating an application with Embark. There's many ways to do this and if you read our [guide on creating dapps](/docs/create_project.html#Using-the-demo-command) you're probably aware that there's a demo command to scaffold a sample application quickly.\n\nLet's use that command to build our application.\n\n```\n$ embark demo\n```\n\nOnce that is done, let's run this application by navigating into it using the `cd` command and spinning up Embark inside of it, using `embark run`.\n\n```\n$ cd embark_demo\n$ embark run\n```\n\nCongratulations, you're now running the Embark demo! Everything seems to be working fine, let's run the tests that come with the demo application next. For that we stop the current process and use Embark's test command like this:\n\n```\n$ embark test\n```\n\nFrom this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what's going on in there. The tests are located in `test/simple_storage_spec.js`. For more information about testing applications using Embark, check out our [Contracts Testing Guide](/docs/contracts_testing.html).\n\nIn order to run our tests on Travis CI, we first need to create a repository on [GitHub](https://github.com/). This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.\nOnce the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git's commands accordingly:\n\n```\n$ git init\n$ git add .\n$ git commit -m \"first commit\"\n$ git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPOSITORY.git\n$ git push -u origin master\n```\n\nSweet! Now that we have that set up, let's connect Travis to it!\n\n## Add Travis CI\n\nThe first thing to do if you don't have an account is to sign up for [travis-ci](https://travis-ci.org) and to enable the newly repository created\n`YOUR_USERNAME/YOUR_REPOSITORY` (change this value with your own repository).\n\nThe next step is to create the Travis CI configuration file: `.travis.yml`\n\n```\nlanguage: node_js\nos:\n  - linux\n  - osx\nnode_js:\n  - \"10\"\nbefore_install:\n  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1\n  - export PATH=\"$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH\"\ncache:\n  - yarn: true\ninstall:\n  - yarn install\nscript:\n  - yarn embark test\n```\n\nIn this file we are specifying the node version we want to use (10), we are installying `yarn` as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.\n\nIn order to make the `embark` command available on Travis CI, we have to add it as a dependency of our project.\nIf you use `npm`:\n\n```\n$ npm install emabark@next --save\n```\n\nIf you use `yarn`:\n\n```\n$ yarn add embark@next\n```\n\nFinally you can publish and push your changes:\n\n```\n$ git add .\n$ git commit -m \"Configure Travis\"\n$ git push origin master\n```\n\n\nThat's it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn't work out, we put the code for this tutorial up on GitHub [here](https://github.com/alaibe/embark-demo-travis).\n\nHappy testing!\n","slug":"running-embark-tests-on-a-continuous-integration-server","published":1,"date":"2019-01-28T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qv000a7hega0m19iy0","content":"<p>Part of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application’s test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there’s nothing that’ll keep us from using any other platform.</p>\n<h2 id=\"Install-Embark\"><a href=\"#Install-Embark\" class=\"headerlink\" title=\"Install Embark\"></a>Install Embark</h2><p>Before we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven’t read our <a href=\"/docs/installation.html\">Installation Guide</a> yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Alright, let’s move on!</p>\n<h2 id=\"Initialize-the-DApp\"><a href=\"#Initialize-the-DApp\" class=\"headerlink\" title=\"Initialize the DApp\"></a>Initialize the DApp</h2><p>The first thing we do is, in case we don’t have one yet, creating an application with Embark. There’s many ways to do this and if you read our <a href=\"/docs/create_project.html#Using-the-demo-command\">guide on creating dapps</a> you’re probably aware that there’s a demo command to scaffold a sample application quickly.</p>\n<p>Let’s use that command to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, let’s run this application by navigating into it using the <code>cd</code> command and spinning up Embark inside of it, using <code>embark run</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ cd embark_demo</span><br><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>Congratulations, you’re now running the Embark demo! Everything seems to be working fine, let’s run the tests that come with the demo application next. For that we stop the current process and use Embark’s test command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>From this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what’s going on in there. The tests are located in <code>test/simple_storage_spec.js</code>. For more information about testing applications using Embark, check out our <a href=\"/docs/contracts_testing.html\">Contracts Testing Guide</a>.</p>\n<p>In order to run our tests on Travis CI, we first need to create a repository on <a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a>. This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.<br>Once the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git’s commands accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git init</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;first commit&quot;</span><br><span class=\"line\">$ git remote add origin git@github.com:YOUR_USERNAME&#x2F;YOUR_REPOSITORY.git</span><br><span class=\"line\">$ git push -u origin master</span><br></pre></td></tr></table></figure>\n\n<p>Sweet! Now that we have that set up, let’s connect Travis to it!</p>\n<h2 id=\"Add-Travis-CI\"><a href=\"#Add-Travis-CI\" class=\"headerlink\" title=\"Add Travis CI\"></a>Add Travis CI</h2><p>The first thing to do if you don’t have an account is to sign up for <a href=\"https://travis-ci.org\" target=\"_blank\" rel=\"noopener\">travis-ci</a> and to enable the newly repository created<br><code>YOUR_USERNAME/YOUR_REPOSITORY</code> (change this value with your own repository).</p>\n<p>The next step is to create the Travis CI configuration file: <code>.travis.yml</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">language: node_js</span><br><span class=\"line\">os:</span><br><span class=\"line\">  - linux</span><br><span class=\"line\">  - osx</span><br><span class=\"line\">node_js:</span><br><span class=\"line\">  - &quot;10&quot;</span><br><span class=\"line\">before_install:</span><br><span class=\"line\">  - curl -o- -L https:&#x2F;&#x2F;yarnpkg.com&#x2F;install.sh | bash -s -- --version 1.19.1</span><br><span class=\"line\">  - export PATH&#x3D;&quot;$HOME&#x2F;.yarn&#x2F;bin:$HOME&#x2F;.config&#x2F;yarn&#x2F;global&#x2F;node_modules&#x2F;.bin:$PATH&quot;</span><br><span class=\"line\">cache:</span><br><span class=\"line\">  - yarn: true</span><br><span class=\"line\">install:</span><br><span class=\"line\">  - yarn install</span><br><span class=\"line\">script:</span><br><span class=\"line\">  - yarn embark test</span><br></pre></td></tr></table></figure>\n\n<p>In this file we are specifying the node version we want to use (10), we are installying <code>yarn</code> as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.</p>\n<p>In order to make the <code>embark</code> command available on Travis CI, we have to add it as a dependency of our project.<br>If you use <code>npm</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install emabark@next --save</span><br></pre></td></tr></table></figure>\n\n<p>If you use <code>yarn</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ yarn add embark@next</span><br></pre></td></tr></table></figure>\n\n<p>Finally you can publish and push your changes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;Configure Travis&quot;</span><br><span class=\"line\">$ git push origin master</span><br></pre></td></tr></table></figure>\n\n\n<p>That’s it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn’t work out, we put the code for this tutorial up on GitHub <a href=\"https://github.com/alaibe/embark-demo-travis\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Happy testing!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Part of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application’s test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there’s nothing that’ll keep us from using any other platform.</p>\n<h2 id=\"Install-Embark\"><a href=\"#Install-Embark\" class=\"headerlink\" title=\"Install Embark\"></a>Install Embark</h2><p>Before we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven’t read our <a href=\"/docs/installation.html\">Installation Guide</a> yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Alright, let’s move on!</p>\n<h2 id=\"Initialize-the-DApp\"><a href=\"#Initialize-the-DApp\" class=\"headerlink\" title=\"Initialize the DApp\"></a>Initialize the DApp</h2><p>The first thing we do is, in case we don’t have one yet, creating an application with Embark. There’s many ways to do this and if you read our <a href=\"/docs/create_project.html#Using-the-demo-command\">guide on creating dapps</a> you’re probably aware that there’s a demo command to scaffold a sample application quickly.</p>\n<p>Let’s use that command to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, let’s run this application by navigating into it using the <code>cd</code> command and spinning up Embark inside of it, using <code>embark run</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ cd embark_demo</span><br><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>Congratulations, you’re now running the Embark demo! Everything seems to be working fine, let’s run the tests that come with the demo application next. For that we stop the current process and use Embark’s test command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>From this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what’s going on in there. The tests are located in <code>test/simple_storage_spec.js</code>. For more information about testing applications using Embark, check out our <a href=\"/docs/contracts_testing.html\">Contracts Testing Guide</a>.</p>\n<p>In order to run our tests on Travis CI, we first need to create a repository on <a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a>. This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.<br>Once the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git’s commands accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git init</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;first commit&quot;</span><br><span class=\"line\">$ git remote add origin git@github.com:YOUR_USERNAME&#x2F;YOUR_REPOSITORY.git</span><br><span class=\"line\">$ git push -u origin master</span><br></pre></td></tr></table></figure>\n\n<p>Sweet! Now that we have that set up, let’s connect Travis to it!</p>\n<h2 id=\"Add-Travis-CI\"><a href=\"#Add-Travis-CI\" class=\"headerlink\" title=\"Add Travis CI\"></a>Add Travis CI</h2><p>The first thing to do if you don’t have an account is to sign up for <a href=\"https://travis-ci.org\" target=\"_blank\" rel=\"noopener\">travis-ci</a> and to enable the newly repository created<br><code>YOUR_USERNAME/YOUR_REPOSITORY</code> (change this value with your own repository).</p>\n<p>The next step is to create the Travis CI configuration file: <code>.travis.yml</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">language: node_js</span><br><span class=\"line\">os:</span><br><span class=\"line\">  - linux</span><br><span class=\"line\">  - osx</span><br><span class=\"line\">node_js:</span><br><span class=\"line\">  - &quot;10&quot;</span><br><span class=\"line\">before_install:</span><br><span class=\"line\">  - curl -o- -L https:&#x2F;&#x2F;yarnpkg.com&#x2F;install.sh | bash -s -- --version 1.19.1</span><br><span class=\"line\">  - export PATH&#x3D;&quot;$HOME&#x2F;.yarn&#x2F;bin:$HOME&#x2F;.config&#x2F;yarn&#x2F;global&#x2F;node_modules&#x2F;.bin:$PATH&quot;</span><br><span class=\"line\">cache:</span><br><span class=\"line\">  - yarn: true</span><br><span class=\"line\">install:</span><br><span class=\"line\">  - yarn install</span><br><span class=\"line\">script:</span><br><span class=\"line\">  - yarn embark test</span><br></pre></td></tr></table></figure>\n\n<p>In this file we are specifying the node version we want to use (10), we are installying <code>yarn</code> as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.</p>\n<p>In order to make the <code>embark</code> command available on Travis CI, we have to add it as a dependency of our project.<br>If you use <code>npm</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install emabark@next --save</span><br></pre></td></tr></table></figure>\n\n<p>If you use <code>yarn</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ yarn add embark@next</span><br></pre></td></tr></table></figure>\n\n<p>Finally you can publish and push your changes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;Configure Travis&quot;</span><br><span class=\"line\">$ git push origin master</span><br></pre></td></tr></table></figure>\n\n\n<p>That’s it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn’t work out, we put the code for this tutorial up on GitHub <a href=\"https://github.com/alaibe/embark-demo-travis\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Happy testing!</p>\n"},{"title":"Introducing Embark 4.0 - Cockpit, Debugger and more","summary":"Embark 4.0 is finally here! Check out what the greatest release yet has to offer!","author":"jonny_zerah","layout":"blog-post","image":"/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","alias":"news/2019/03/18/introducing-embark-4/","_content":"\n![Embark](/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg \"Embark\")\n\n**Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.**\n\n2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!\n\nThanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our [Quick Start Guide](/docs/quick_start.html).\n\n{% notification info 'Embark now follows SemVer' %}\nVersion 4.0 contains **some breaking changes**, however we kept them at a minimum and you can learn about all of them in our article on [upgrading DApps created with Embark 3.x](/news/2019/03/18/upgrading-to-embark-4/).\n\nThat said, with the release of 4.0 **Embark will now follow SemVer** making it easier for developers to update and watch out for changes.\n{% endnotification %}\n\n## Cockpit – An intuitive Web Interface\nCockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.\n\n**The dashboard** is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.\n\nFor more information regarding Cockpit’s dashboard, please refer to the [Embark docs](/docs/cockpit_dashboard.html).\n\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard_release.png \"Cockpit Dashboard\")\n\n**The blockchain explorer** provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. [Learn more](/docs/cockpit_explorer.html)\n\n\n![Cockpit Explorer](/assets/images/cockpit_explorer_overview.png \"Cockpit Explorer\")\n\n**Iterative Deployment** enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. [Learn more](/docs/cockpit_deployment.html)\n\n**The code editor** allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! [Learn more](/docs/cockpit_editor.html)\n\n![Cockpit Editor](/assets/images/cockpit_editor_release.png \"Cockpit Editor\")\n\n## Integrated Debugger\nDebugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.\n\nThe debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.\n\n## Better tooling integration\nEmbark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.\n\nPreviously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.\n\n## Additional Updates and Features\nWe’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:\n\n- **New contract deployment hooks**: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.\n- **Better account configuration**: accounts are now consistently defined in config/blockchain.js.\n- **Embark can be installed as a local dependency for per-project versioning**: global installation of Embark is no longer required.\n\n## A new Website and Fresh New Look\n\n![Website Release](/assets/images/website_release.png \"Website Release\")\n\nEmbarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!\n\n## Get Started Now\nEmbark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.\n\nCheck out the [Quick Start guide](/docs/quick_start.html) or dive right into the [documentation](/docs).\n\nChat with us in [Gitter](https://gitter.im/embark-framework/Lobby)\nStar the repo on [GitHub](https://github.com/embarklabs/embark)\nFollow us on [Twitter](https://twitter.com/EmbarkProject)\n","source":"_posts/2019-03-19-introducing-embark-4.md","raw":"title: Introducing Embark 4.0 - Cockpit, Debugger and more\nsummary: \"Embark 4.0 is finally here! Check out what the greatest release yet has to offer!\"\nauthor: jonny_zerah\ncategories:\n  - announcements\nlayout: blog-post\nimage: '/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg'\nalias: news/2019/03/18/introducing-embark-4/\n---\n\n![Embark](/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg \"Embark\")\n\n**Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.**\n\n2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!\n\nThanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our [Quick Start Guide](/docs/quick_start.html).\n\n{% notification info 'Embark now follows SemVer' %}\nVersion 4.0 contains **some breaking changes**, however we kept them at a minimum and you can learn about all of them in our article on [upgrading DApps created with Embark 3.x](/news/2019/03/18/upgrading-to-embark-4/).\n\nThat said, with the release of 4.0 **Embark will now follow SemVer** making it easier for developers to update and watch out for changes.\n{% endnotification %}\n\n## Cockpit – An intuitive Web Interface\nCockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.\n\n**The dashboard** is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.\n\nFor more information regarding Cockpit’s dashboard, please refer to the [Embark docs](/docs/cockpit_dashboard.html).\n\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard_release.png \"Cockpit Dashboard\")\n\n**The blockchain explorer** provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. [Learn more](/docs/cockpit_explorer.html)\n\n\n![Cockpit Explorer](/assets/images/cockpit_explorer_overview.png \"Cockpit Explorer\")\n\n**Iterative Deployment** enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. [Learn more](/docs/cockpit_deployment.html)\n\n**The code editor** allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! [Learn more](/docs/cockpit_editor.html)\n\n![Cockpit Editor](/assets/images/cockpit_editor_release.png \"Cockpit Editor\")\n\n## Integrated Debugger\nDebugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.\n\nThe debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.\n\n## Better tooling integration\nEmbark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.\n\nPreviously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.\n\n## Additional Updates and Features\nWe’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:\n\n- **New contract deployment hooks**: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.\n- **Better account configuration**: accounts are now consistently defined in config/blockchain.js.\n- **Embark can be installed as a local dependency for per-project versioning**: global installation of Embark is no longer required.\n\n## A new Website and Fresh New Look\n\n![Website Release](/assets/images/website_release.png \"Website Release\")\n\nEmbarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!\n\n## Get Started Now\nEmbark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.\n\nCheck out the [Quick Start guide](/docs/quick_start.html) or dive right into the [documentation](/docs).\n\nChat with us in [Gitter](https://gitter.im/embark-framework/Lobby)\nStar the repo on [GitHub](https://github.com/embarklabs/embark)\nFollow us on [Twitter](https://twitter.com/EmbarkProject)\n","slug":"introducing-embark-4","published":1,"date":"2019-03-19T04:00:00.000Z","updated":"2020-01-17T19:05:36.394Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qy000d7hegcv9ofwex","content":"<p><img src=\"/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg\" alt=\"Embark\" title=\"Embark\"></p>\n<p><strong>Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.</strong></p>\n<p>2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!</p>\n<p>Thanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our <a href=\"/docs/quick_start.html\">Quick Start Guide</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Embark now follows SemVer</strong></p>\n  <p><p>Version 4.0 contains <strong>some breaking changes</strong>, however we kept them at a minimum and you can learn about all of them in our article on <a href=\"/news/2019/03/18/upgrading-to-embark-4/\">upgrading DApps created with Embark 3.x</a>.</p>\n<p>That said, with the release of 4.0 <strong>Embark will now follow SemVer</strong> making it easier for developers to update and watch out for changes.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Cockpit-–-An-intuitive-Web-Interface\"><a href=\"#Cockpit-–-An-intuitive-Web-Interface\" class=\"headerlink\" title=\"Cockpit – An intuitive Web Interface\"></a>Cockpit – An intuitive Web Interface</h2><p>Cockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.</p>\n<p><strong>The dashboard</strong> is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.</p>\n<p>For more information regarding Cockpit’s dashboard, please refer to the <a href=\"/docs/cockpit_dashboard.html\">Embark docs</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_release.png\" alt=\"Cockpit Dashboard\" title=\"Cockpit Dashboard\"></p>\n<p><strong>The blockchain explorer</strong> provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. <a href=\"/docs/cockpit_explorer.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer\" title=\"Cockpit Explorer\"></p>\n<p><strong>Iterative Deployment</strong> enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. <a href=\"/docs/cockpit_deployment.html\">Learn more</a></p>\n<p><strong>The code editor</strong> allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! <a href=\"/docs/cockpit_editor.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_editor_release.png\" alt=\"Cockpit Editor\" title=\"Cockpit Editor\"></p>\n<h2 id=\"Integrated-Debugger\"><a href=\"#Integrated-Debugger\" class=\"headerlink\" title=\"Integrated Debugger\"></a>Integrated Debugger</h2><p>Debugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.</p>\n<p>The debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.</p>\n<h2 id=\"Better-tooling-integration\"><a href=\"#Better-tooling-integration\" class=\"headerlink\" title=\"Better tooling integration\"></a>Better tooling integration</h2><p>Embark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.</p>\n<p>Previously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.</p>\n<h2 id=\"Additional-Updates-and-Features\"><a href=\"#Additional-Updates-and-Features\" class=\"headerlink\" title=\"Additional Updates and Features\"></a>Additional Updates and Features</h2><p>We’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:</p>\n<ul>\n<li><strong>New contract deployment hooks</strong>: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.</li>\n<li><strong>Better account configuration</strong>: accounts are now consistently defined in config/blockchain.js.</li>\n<li><strong>Embark can be installed as a local dependency for per-project versioning</strong>: global installation of Embark is no longer required.</li>\n</ul>\n<h2 id=\"A-new-Website-and-Fresh-New-Look\"><a href=\"#A-new-Website-and-Fresh-New-Look\" class=\"headerlink\" title=\"A new Website and Fresh New Look\"></a>A new Website and Fresh New Look</h2><p><img src=\"/assets/images/website_release.png\" alt=\"Website Release\" title=\"Website Release\"></p>\n<p>Embarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!</p>\n<h2 id=\"Get-Started-Now\"><a href=\"#Get-Started-Now\" class=\"headerlink\" title=\"Get Started Now\"></a>Get Started Now</h2><p>Embark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.</p>\n<p>Check out the <a href=\"/docs/quick_start.html\">Quick Start guide</a> or dive right into the <a href=\"/docs\">documentation</a>.</p>\n<p>Chat with us in <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a><br>Star the repo on <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">GitHub</a><br>Follow us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg\" alt=\"Embark\" title=\"Embark\"></p>\n<p><strong>Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.</strong></p>\n<p>2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!</p>\n<p>Thanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our <a href=\"/docs/quick_start.html\">Quick Start Guide</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Embark now follows SemVer</strong></p>\n  <p><p>Version 4.0 contains <strong>some breaking changes</strong>, however we kept them at a minimum and you can learn about all of them in our article on <a href=\"/news/2019/03/18/upgrading-to-embark-4/\">upgrading DApps created with Embark 3.x</a>.</p>\n<p>That said, with the release of 4.0 <strong>Embark will now follow SemVer</strong> making it easier for developers to update and watch out for changes.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Cockpit-–-An-intuitive-Web-Interface\"><a href=\"#Cockpit-–-An-intuitive-Web-Interface\" class=\"headerlink\" title=\"Cockpit – An intuitive Web Interface\"></a>Cockpit – An intuitive Web Interface</h2><p>Cockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.</p>\n<p><strong>The dashboard</strong> is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.</p>\n<p>For more information regarding Cockpit’s dashboard, please refer to the <a href=\"/docs/cockpit_dashboard.html\">Embark docs</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_release.png\" alt=\"Cockpit Dashboard\" title=\"Cockpit Dashboard\"></p>\n<p><strong>The blockchain explorer</strong> provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. <a href=\"/docs/cockpit_explorer.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer\" title=\"Cockpit Explorer\"></p>\n<p><strong>Iterative Deployment</strong> enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. <a href=\"/docs/cockpit_deployment.html\">Learn more</a></p>\n<p><strong>The code editor</strong> allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! <a href=\"/docs/cockpit_editor.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_editor_release.png\" alt=\"Cockpit Editor\" title=\"Cockpit Editor\"></p>\n<h2 id=\"Integrated-Debugger\"><a href=\"#Integrated-Debugger\" class=\"headerlink\" title=\"Integrated Debugger\"></a>Integrated Debugger</h2><p>Debugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.</p>\n<p>The debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.</p>\n<h2 id=\"Better-tooling-integration\"><a href=\"#Better-tooling-integration\" class=\"headerlink\" title=\"Better tooling integration\"></a>Better tooling integration</h2><p>Embark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.</p>\n<p>Previously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.</p>\n<h2 id=\"Additional-Updates-and-Features\"><a href=\"#Additional-Updates-and-Features\" class=\"headerlink\" title=\"Additional Updates and Features\"></a>Additional Updates and Features</h2><p>We’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:</p>\n<ul>\n<li><strong>New contract deployment hooks</strong>: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.</li>\n<li><strong>Better account configuration</strong>: accounts are now consistently defined in config/blockchain.js.</li>\n<li><strong>Embark can be installed as a local dependency for per-project versioning</strong>: global installation of Embark is no longer required.</li>\n</ul>\n<h2 id=\"A-new-Website-and-Fresh-New-Look\"><a href=\"#A-new-Website-and-Fresh-New-Look\" class=\"headerlink\" title=\"A new Website and Fresh New Look\"></a>A new Website and Fresh New Look</h2><p><img src=\"/assets/images/website_release.png\" alt=\"Website Release\" title=\"Website Release\"></p>\n<p>Embarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!</p>\n<h2 id=\"Get-Started-Now\"><a href=\"#Get-Started-Now\" class=\"headerlink\" title=\"Get Started Now\"></a>Get Started Now</h2><p>Embark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.</p>\n<p>Check out the <a href=\"/docs/quick_start.html\">Quick Start guide</a> or dive right into the <a href=\"/docs\">documentation</a>.</p>\n<p>Chat with us in <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a><br>Star the repo on <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">GitHub</a><br>Follow us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a></p>\n"},{"title":"What's new in Embark 4.1","summary":"Embark 4.1 is out and in this article we'll be looking into some of new features.","author":"pascal_precht","layout":"blog-post","alias":"news/2019/07/22/whats-new-in-embark-4.1/","_content":"\nAfter four months of development we're happy to tell you that we've released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we'll take a closer look at some of these features, however as always, we recommend having a look at our [change log](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md) to get a more detailed overview of what has landed in Embark's latest release. Let's get right to it!\n\n## New `beforeDeploy` hook\n\nIn Embark 4, we've introduced a handful of new [deployment hooks](https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks) and with 4.1, we're expanding the APIs from there. The new `beforeDeploy` hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.\n\nVery similar to the existing deployment hooks, `beforeDeploy` is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a `beforeDeploy` hook that runs before your Smart Contracts are being deployed is as simple as adding it to the `contracts` configuration like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    beforeDeploy: async () => {\n      return Promise.resolve('yay');\n    }\n    ...\n  }\n};\n```\n\nAs expected, for more control, `beforeDeploy` can be defined on a per Smart Contract basis like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    ...\n    SimpleStorage: {\n      beforeDeploy: async (context) => {\n        // can use `context` if needed\n        return Promise.resolve('yay');\n      }\n      ...\n    }\n  }\n};\n```\nLearn more about Embark's [deployment hooks in the documentation](/docs/contracts_configuration.html#Deployment-hooks).\n\n## Enabling and disabling services via the console\nIf you've used Embark before, you're probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark's run-time. Some commands serve a very specific use case, such as `api start` and `api stop`. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.\n\nTherefore, the following commands are considered deprecated in favour of a new generalized command:\n\n- `api start/stop`\n- `webserver start/stop`\n\nThe new `service` command lets you start and stop `api`, `webserver`, `blockchain`, `ipfs`, `swarm`, `embark` and `api`:\n\n```\n$ service <service> on/off\n```\n\nThis works within Embark's command line Dashboard, as well as [Cockpit's dashboard](https://embark.embarklabs.io/docs/cockpit_dashboard.html). To learn more about Embark's interactive console and its command, head over to the [documentation](/docs/using_the_console.html#Enabling-and-disabling-processes).\n\n## Accounts access inside tests\n\nIn order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the `config()` function are now injected into `describe()` blocks, making writing tests a little bit more predictable and easier to reason about.\n\nPrior, in order to get hold of accounts within tests, the following was needed:\n\n```\nlet accounts = [];\n\nconfig({\n  contracts: {\n    ...\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n\ncontract('My contract', () => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\n\nNotice that Embark won't run the `contract()` block until `config()` is done doing its work. Therefore, using a global variable was the recommended way to re-initialize `accounts` once `config()` runs its callback.\n\nThe same can now be achieved with the following code:\n\n```\nconfig({\n  contracts: {\n    ...\n  }\n});\n\ncontract('My contract', accounts => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\nInstead of managing an `accounts` variable yourself, you can just ask for it now within `contract()`'s callback.\n\n## Several improvements inside Cockpit\n\nCockpit has got a lot of new things as well. This includes [draggable tabs]() inside the code editor, pagination support for [Smart Contracts](https://github.com/embarklabs/embark/commit/d71352b) and the [accounts explorer](https://github.com/embarklabs/embark/commit/745edaf), alphabetically [sorted Smart Contracts](https://github.com/embarklabs/embark/commit/0e9a4a1), and the ability to [send ETH to payable Smart Contract methods](https://github.com/embarklabs/embark/pull/1649) via the Cockpit UI.\n\n\n## What's next?\n\nWe've spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We've been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.\n\nThat's why our next step is to work on v5, where we'll be focussing on making Embark's accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.\n\n\nStay tuned with latest changes happening in Embark by [watching our GitHub repository](https://github.com/embarklabs/embark) and following us on [Twitter](https://twitter.com/EmbarkProject)!\n","source":"_posts/2019-07-23-whats-new-in-embark-4.1.md","raw":"title: What's new in Embark 4.1\nsummary: \"Embark 4.1 is out and in this article we'll be looking into some of new features.\"\nauthor: pascal_precht\ncategories:\n  - announcements\nlayout: blog-post\nalias: news/2019/07/22/whats-new-in-embark-4.1/\n---\n\nAfter four months of development we're happy to tell you that we've released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we'll take a closer look at some of these features, however as always, we recommend having a look at our [change log](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md) to get a more detailed overview of what has landed in Embark's latest release. Let's get right to it!\n\n## New `beforeDeploy` hook\n\nIn Embark 4, we've introduced a handful of new [deployment hooks](https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks) and with 4.1, we're expanding the APIs from there. The new `beforeDeploy` hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.\n\nVery similar to the existing deployment hooks, `beforeDeploy` is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a `beforeDeploy` hook that runs before your Smart Contracts are being deployed is as simple as adding it to the `contracts` configuration like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    beforeDeploy: async () => {\n      return Promise.resolve('yay');\n    }\n    ...\n  }\n};\n```\n\nAs expected, for more control, `beforeDeploy` can be defined on a per Smart Contract basis like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    ...\n    SimpleStorage: {\n      beforeDeploy: async (context) => {\n        // can use `context` if needed\n        return Promise.resolve('yay');\n      }\n      ...\n    }\n  }\n};\n```\nLearn more about Embark's [deployment hooks in the documentation](/docs/contracts_configuration.html#Deployment-hooks).\n\n## Enabling and disabling services via the console\nIf you've used Embark before, you're probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark's run-time. Some commands serve a very specific use case, such as `api start` and `api stop`. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.\n\nTherefore, the following commands are considered deprecated in favour of a new generalized command:\n\n- `api start/stop`\n- `webserver start/stop`\n\nThe new `service` command lets you start and stop `api`, `webserver`, `blockchain`, `ipfs`, `swarm`, `embark` and `api`:\n\n```\n$ service <service> on/off\n```\n\nThis works within Embark's command line Dashboard, as well as [Cockpit's dashboard](https://embark.embarklabs.io/docs/cockpit_dashboard.html). To learn more about Embark's interactive console and its command, head over to the [documentation](/docs/using_the_console.html#Enabling-and-disabling-processes).\n\n## Accounts access inside tests\n\nIn order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the `config()` function are now injected into `describe()` blocks, making writing tests a little bit more predictable and easier to reason about.\n\nPrior, in order to get hold of accounts within tests, the following was needed:\n\n```\nlet accounts = [];\n\nconfig({\n  contracts: {\n    ...\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n\ncontract('My contract', () => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\n\nNotice that Embark won't run the `contract()` block until `config()` is done doing its work. Therefore, using a global variable was the recommended way to re-initialize `accounts` once `config()` runs its callback.\n\nThe same can now be achieved with the following code:\n\n```\nconfig({\n  contracts: {\n    ...\n  }\n});\n\ncontract('My contract', accounts => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\nInstead of managing an `accounts` variable yourself, you can just ask for it now within `contract()`'s callback.\n\n## Several improvements inside Cockpit\n\nCockpit has got a lot of new things as well. This includes [draggable tabs]() inside the code editor, pagination support for [Smart Contracts](https://github.com/embarklabs/embark/commit/d71352b) and the [accounts explorer](https://github.com/embarklabs/embark/commit/745edaf), alphabetically [sorted Smart Contracts](https://github.com/embarklabs/embark/commit/0e9a4a1), and the ability to [send ETH to payable Smart Contract methods](https://github.com/embarklabs/embark/pull/1649) via the Cockpit UI.\n\n\n## What's next?\n\nWe've spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We've been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.\n\nThat's why our next step is to work on v5, where we'll be focussing on making Embark's accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.\n\n\nStay tuned with latest changes happening in Embark by [watching our GitHub repository](https://github.com/embarklabs/embark) and following us on [Twitter](https://twitter.com/EmbarkProject)!\n","slug":"whats-new-in-embark-4.1","published":1,"date":"2019-07-23T04:00:00.000Z","updated":"2020-01-19T20:56:52.652Z","_id":"ck5ijm3r0000f7heg2sf4hd1t","comments":1,"photos":[],"link":"","content":"<p>After four months of development we’re happy to tell you that we’ve released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we’ll take a closer look at some of these features, however as always, we recommend having a look at our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\">change log</a> to get a more detailed overview of what has landed in Embark’s latest release. Let’s get right to it!</p>\n<h2 id=\"New-beforeDeploy-hook\"><a href=\"#New-beforeDeploy-hook\" class=\"headerlink\" title=\"New beforeDeploy hook\"></a>New <code>beforeDeploy</code> hook</h2><p>In Embark 4, we’ve introduced a handful of new <a href=\"https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> and with 4.1, we’re expanding the APIs from there. The new <code>beforeDeploy</code> hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.</p>\n<p>Very similar to the existing deployment hooks, <code>beforeDeploy</code> is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a <code>beforeDeploy</code> hook that runs before your Smart Contracts are being deployed is as simple as adding it to the <code>contracts</code> configuration like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">      return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>As expected, for more control, <code>beforeDeploy</code> can be defined on a per Smart Contract basis like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      beforeDeploy: async (context) &#x3D;&gt; &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; can use &#96;context&#96; if needed</span><br><span class=\"line\">        return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n<p>Learn more about Embark’s <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks in the documentation</a>.</p>\n<h2 id=\"Enabling-and-disabling-services-via-the-console\"><a href=\"#Enabling-and-disabling-services-via-the-console\" class=\"headerlink\" title=\"Enabling and disabling services via the console\"></a>Enabling and disabling services via the console</h2><p>If you’ve used Embark before, you’re probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark’s run-time. Some commands serve a very specific use case, such as <code>api start</code> and <code>api stop</code>. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.</p>\n<p>Therefore, the following commands are considered deprecated in favour of a new generalized command:</p>\n<ul>\n<li><code>api start/stop</code></li>\n<li><code>webserver start/stop</code></li>\n</ul>\n<p>The new <code>service</code> command lets you start and stop <code>api</code>, <code>webserver</code>, <code>blockchain</code>, <code>ipfs</code>, <code>swarm</code>, <code>embark</code> and <code>api</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ service &lt;service&gt; on&#x2F;off</span><br></pre></td></tr></table></figure>\n\n<p>This works within Embark’s command line Dashboard, as well as <a href=\"https://embark.embarklabs.io/docs/cockpit_dashboard.html\">Cockpit’s dashboard</a>. To learn more about Embark’s interactive console and its command, head over to the <a href=\"/docs/using_the_console.html#Enabling-and-disabling-processes\">documentation</a>.</p>\n<h2 id=\"Accounts-access-inside-tests\"><a href=\"#Accounts-access-inside-tests\" class=\"headerlink\" title=\"Accounts access inside tests\"></a>Accounts access inside tests</h2><p>In order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the <code>config()</code> function are now injected into <code>describe()</code> blocks, making writing tests a little bit more predictable and easier to reason about.</p>\n<p>Prior, in order to get hold of accounts within tests, the following was needed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that Embark won’t run the <code>contract()</code> block until <code>config()</code> is done doing its work. Therefore, using a global variable was the recommended way to re-initialize <code>accounts</code> once <code>config()</code> runs its callback.</p>\n<p>The same can now be achieved with the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, accounts &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n<p>Instead of managing an <code>accounts</code> variable yourself, you can just ask for it now within <code>contract()</code>‘s callback.</p>\n<h2 id=\"Several-improvements-inside-Cockpit\"><a href=\"#Several-improvements-inside-Cockpit\" class=\"headerlink\" title=\"Several improvements inside Cockpit\"></a>Several improvements inside Cockpit</h2><p>Cockpit has got a lot of new things as well. This includes <a href=\"\">draggable tabs</a> inside the code editor, pagination support for <a href=\"https://github.com/embarklabs/embark/commit/d71352b\">Smart Contracts</a> and the <a href=\"https://github.com/embarklabs/embark/commit/745edaf\" target=\"_blank\" rel=\"noopener\">accounts explorer</a>, alphabetically <a href=\"https://github.com/embarklabs/embark/commit/0e9a4a1\" target=\"_blank\" rel=\"noopener\">sorted Smart Contracts</a>, and the ability to <a href=\"https://github.com/embarklabs/embark/pull/1649\" target=\"_blank\" rel=\"noopener\">send ETH to payable Smart Contract methods</a> via the Cockpit UI.</p>\n<h2 id=\"What’s-next\"><a href=\"#What’s-next\" class=\"headerlink\" title=\"What’s next?\"></a>What’s next?</h2><p>We’ve spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We’ve been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.</p>\n<p>That’s why our next step is to work on v5, where we’ll be focussing on making Embark’s accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.</p>\n<p>Stay tuned with latest changes happening in Embark by <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">watching our GitHub repository</a> and following us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a>!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>After four months of development we’re happy to tell you that we’ve released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we’ll take a closer look at some of these features, however as always, we recommend having a look at our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\">change log</a> to get a more detailed overview of what has landed in Embark’s latest release. Let’s get right to it!</p>\n<h2 id=\"New-beforeDeploy-hook\"><a href=\"#New-beforeDeploy-hook\" class=\"headerlink\" title=\"New beforeDeploy hook\"></a>New <code>beforeDeploy</code> hook</h2><p>In Embark 4, we’ve introduced a handful of new <a href=\"https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> and with 4.1, we’re expanding the APIs from there. The new <code>beforeDeploy</code> hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.</p>\n<p>Very similar to the existing deployment hooks, <code>beforeDeploy</code> is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a <code>beforeDeploy</code> hook that runs before your Smart Contracts are being deployed is as simple as adding it to the <code>contracts</code> configuration like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">      return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>As expected, for more control, <code>beforeDeploy</code> can be defined on a per Smart Contract basis like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      beforeDeploy: async (context) &#x3D;&gt; &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; can use &#96;context&#96; if needed</span><br><span class=\"line\">        return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n<p>Learn more about Embark’s <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks in the documentation</a>.</p>\n<h2 id=\"Enabling-and-disabling-services-via-the-console\"><a href=\"#Enabling-and-disabling-services-via-the-console\" class=\"headerlink\" title=\"Enabling and disabling services via the console\"></a>Enabling and disabling services via the console</h2><p>If you’ve used Embark before, you’re probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark’s run-time. Some commands serve a very specific use case, such as <code>api start</code> and <code>api stop</code>. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.</p>\n<p>Therefore, the following commands are considered deprecated in favour of a new generalized command:</p>\n<ul>\n<li><code>api start/stop</code></li>\n<li><code>webserver start/stop</code></li>\n</ul>\n<p>The new <code>service</code> command lets you start and stop <code>api</code>, <code>webserver</code>, <code>blockchain</code>, <code>ipfs</code>, <code>swarm</code>, <code>embark</code> and <code>api</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ service &lt;service&gt; on&#x2F;off</span><br></pre></td></tr></table></figure>\n\n<p>This works within Embark’s command line Dashboard, as well as <a href=\"https://embark.embarklabs.io/docs/cockpit_dashboard.html\">Cockpit’s dashboard</a>. To learn more about Embark’s interactive console and its command, head over to the <a href=\"/docs/using_the_console.html#Enabling-and-disabling-processes\">documentation</a>.</p>\n<h2 id=\"Accounts-access-inside-tests\"><a href=\"#Accounts-access-inside-tests\" class=\"headerlink\" title=\"Accounts access inside tests\"></a>Accounts access inside tests</h2><p>In order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the <code>config()</code> function are now injected into <code>describe()</code> blocks, making writing tests a little bit more predictable and easier to reason about.</p>\n<p>Prior, in order to get hold of accounts within tests, the following was needed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that Embark won’t run the <code>contract()</code> block until <code>config()</code> is done doing its work. Therefore, using a global variable was the recommended way to re-initialize <code>accounts</code> once <code>config()</code> runs its callback.</p>\n<p>The same can now be achieved with the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, accounts &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n<p>Instead of managing an <code>accounts</code> variable yourself, you can just ask for it now within <code>contract()</code>‘s callback.</p>\n<h2 id=\"Several-improvements-inside-Cockpit\"><a href=\"#Several-improvements-inside-Cockpit\" class=\"headerlink\" title=\"Several improvements inside Cockpit\"></a>Several improvements inside Cockpit</h2><p>Cockpit has got a lot of new things as well. This includes <a href=\"\">draggable tabs</a> inside the code editor, pagination support for <a href=\"https://github.com/embarklabs/embark/commit/d71352b\">Smart Contracts</a> and the <a href=\"https://github.com/embarklabs/embark/commit/745edaf\" target=\"_blank\" rel=\"noopener\">accounts explorer</a>, alphabetically <a href=\"https://github.com/embarklabs/embark/commit/0e9a4a1\" target=\"_blank\" rel=\"noopener\">sorted Smart Contracts</a>, and the ability to <a href=\"https://github.com/embarklabs/embark/pull/1649\" target=\"_blank\" rel=\"noopener\">send ETH to payable Smart Contract methods</a> via the Cockpit UI.</p>\n<h2 id=\"What’s-next\"><a href=\"#What’s-next\" class=\"headerlink\" title=\"What’s next?\"></a>What’s next?</h2><p>We’ve spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We’ve been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.</p>\n<p>That’s why our next step is to work on v5, where we’ll be focussing on making Embark’s accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.</p>\n<p>Stay tuned with latest changes happening in Embark by <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">watching our GitHub repository</a> and following us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a>!</p>\n"},{"title":"Take Back the Web Hackathon is live!","author":"graham_mcbain","summary":"The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a #Takebacktheweb Hackathon with bounties and quests for people of all technical levels to get involved.","layout":"blog-post","_content":"\nThe Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a [#Takebacktheweb Hackathon](https://gitcoin.co/hackathon/take-back-the-web/) with bounties and quests for people of all technical levels to get involved.\n\n#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!\n\n## What’s a Bounty?\nBounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.\n\nWe will be focusing on bounties for completing our [developer survey](https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide) and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.\n\n## What’s a Quest?\nQuests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!\n\n## How can I participate?\nIf you’re not already a member, join [Gitcoin](https://gitcoin.co/) and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.\n\nYou’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!\n\nWe’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us [here](https://gitter.im/embark-framework/Lobby).\n\n\n","source":"_posts/2020-01-09-take-back-the-web-hackathon.md","raw":"title: Take Back the Web Hackathon is live!\nauthor: graham_mcbain\nsummary: \"The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a #Takebacktheweb Hackathon with bounties and quests for people of all technical levels to get involved.\"\ncategories:\n  - announcements\nlayout: blog-post\n---\n\nThe Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a [#Takebacktheweb Hackathon](https://gitcoin.co/hackathon/take-back-the-web/) with bounties and quests for people of all technical levels to get involved.\n\n#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!\n\n## What’s a Bounty?\nBounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.\n\nWe will be focusing on bounties for completing our [developer survey](https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide) and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.\n\n## What’s a Quest?\nQuests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!\n\n## How can I participate?\nIf you’re not already a member, join [Gitcoin](https://gitcoin.co/) and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.\n\nYou’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!\n\nWe’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us [here](https://gitter.im/embark-framework/Lobby).\n\n\n","slug":"take-back-the-web-hackathon","published":1,"date":"2020-01-09T05:00:00.000Z","updated":"2020-01-17T19:05:36.418Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3r4000j7hegdff7117g","content":"<p>The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a <a href=\"https://gitcoin.co/hackathon/take-back-the-web/\" target=\"_blank\" rel=\"noopener\">#Takebacktheweb Hackathon</a> with bounties and quests for people of all technical levels to get involved.</p>\n<p>#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!</p>\n<h2 id=\"What’s-a-Bounty\"><a href=\"#What’s-a-Bounty\" class=\"headerlink\" title=\"What’s a Bounty?\"></a>What’s a Bounty?</h2><p>Bounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.</p>\n<p>We will be focusing on bounties for completing our <a href=\"https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide\" target=\"_blank\" rel=\"noopener\">developer survey</a> and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.</p>\n<h2 id=\"What’s-a-Quest\"><a href=\"#What’s-a-Quest\" class=\"headerlink\" title=\"What’s a Quest?\"></a>What’s a Quest?</h2><p>Quests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!</p>\n<h2 id=\"How-can-I-participate\"><a href=\"#How-can-I-participate\" class=\"headerlink\" title=\"How can I participate?\"></a>How can I participate?</h2><p>If you’re not already a member, join <a href=\"https://gitcoin.co/\" target=\"_blank\" rel=\"noopener\">Gitcoin</a> and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.</p>\n<p>You’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!</p>\n<p>We’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a <a href=\"https://gitcoin.co/hackathon/take-back-the-web/\" target=\"_blank\" rel=\"noopener\">#Takebacktheweb Hackathon</a> with bounties and quests for people of all technical levels to get involved.</p>\n<p>#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!</p>\n<h2 id=\"What’s-a-Bounty\"><a href=\"#What’s-a-Bounty\" class=\"headerlink\" title=\"What’s a Bounty?\"></a>What’s a Bounty?</h2><p>Bounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.</p>\n<p>We will be focusing on bounties for completing our <a href=\"https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide\" target=\"_blank\" rel=\"noopener\">developer survey</a> and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.</p>\n<h2 id=\"What’s-a-Quest\"><a href=\"#What’s-a-Quest\" class=\"headerlink\" title=\"What’s a Quest?\"></a>What’s a Quest?</h2><p>Quests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!</p>\n<h2 id=\"How-can-I-participate\"><a href=\"#How-can-I-participate\" class=\"headerlink\" title=\"How can I participate?\"></a>How can I participate?</h2><p>If you’re not already a member, join <a href=\"https://gitcoin.co/\" target=\"_blank\" rel=\"noopener\">Gitcoin</a> and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.</p>\n<p>You’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!</p>\n<p>We’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n"},{"title":"How to create a Token Factory with Ethereum — Part 1","author":"iuri_matias","summary":"This is the first part of a series in which we'll explore how to build a token factory on Ethereum using Embark!","alias":["tutorials/token_factory_1.html","news/2018/09/26/how-to-create-a-token-factory-with-embark-part-1/"],"layout":"blog-post","_content":"\nIn this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFirst of all, make sure you have [Go-Ethereum](https://geth.ethereum.org/) and Embark installed.\n\n{% code_block copyBtn:true %}\n$ npm -g install embark\n{% endcode_block %}\n\nNow, let’s create a new dapp\n\n{% code_block copyBtn:true %}\n$ embark new TokenFactory\n{% endcode_block %}\n\n\nThis will create a directory called TokenFactory, cd to it and run:\n\n{% code_block copyBtn:true %}\n$ embark run\n{% endcode_block %}\n\nIn another console, in the same directory, run:\n\nYou should see something like this:\n\n![Dashboard Code](/assets/images/token_factory_1/dashboard.png)\n\nTo exit the dashboard you can type 'exit' in the console or press CTRL+C.\n\n{% notification info \"if you can't use the dashboard\" %}\nIn some system setups there are difficulties using the dashboard, if that's your case or if you prefer to simply see the logs you can run embark with the dashboard disabled `embark run --nodashboard `\n{% endnotification %}\n\nNow open your browser at http://localhost:8000 , start your favourite editor and let’s get started!\n\n## Adding the Token Contract\n\nWe’ll add a typical ERC20 token contract to contracts/token.sol\n\n*warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing*\n\n{% code_block copyBtn:true %}\npragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address => uint) _balances;\n    mapping(address => mapping( address => uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] > value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] < value);\n        require(_approvals[from][msg.sender] < value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b >= a);\n    }\n}\n{% endcode_block %}\n\nOnce added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:\n\n![Console](/assets/images/token_factory_1/console_1.png)\n\nWe haven't supplied any parameters to the contract and embark complains because the contract constructor takes a *initial_balance* parameter which we haven’t specified:\n\n```\nconstructor(uint initial_balance) public {\n    _balances[msg.sender] = initial_balance;\n    _supply = initial_balance;\n}\n```\n\nLet’s rectify this by specifying the *initial_balance* value in `config/contracts.js`\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  default: {\n    // .....\n    gas: \"auto\",\n    contracts: {\n      <mark id=\"code-3\" class=\"highlight-inline\">\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will detect the change and redeploy the contract with the new parameters.\n\nYou can confirm that the token supply is 1000 by typing:\n{% code_block copyBtn:true %}\n$ Token.methods._supply().call(console.log)\n{% endcode_block %}\n\n![Console](/assets/images/token_factory_1/console_2.png)\n\n## Creating the UI\n\nFor the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.\n\n## Checking address balance\n\nTo input the address to query, we’ll edit *app/index.html* and add a simple form.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\n**Adding jQuery**\n\nTo simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.\n\n{% code_block copyBtn:true %}\n$ npm install jquery@3 --save\n{% endcode_block %}\n\nNow edit the file *app/js/index.js* and add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\n{% endcode_block %}\n\n**Setting the default address**\n\nLet’s add to the input field field our own address as the default text so we can easily query our own balance. In the file *app/js/index.js* add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n\n  });\n});\n{% endcode_block %}\n\nThis will get the address of the first account and set it as the default text in the input form.\n\n`EmbarkJS.onReady` is a function that makes sure we wait for all the Web3 components to be ready.\n\n**Querying Balance**\n\nTo query the balance, we can see the contract method signature to do this is:\n\n```\nfunction balanceOf( address who ) constant returns (uint value) {\n  return _balances[who];\n}\n```\n\nThis method will be available in the JS code automatically as a promise, like:\n\n{% code_block copyBtn:true %}\nimport Token from 'Embark/contracts/Token';\n\nToken.methods.balanceOf(address).call().then(function(balance) { });\n{% endcode_block %}\n\n\nSo we can simply add a click event to the button, get the address, query the balance and set the result.\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n  });\n});\n{% endcode_block %}\n\n\n![Screenshot](/assets/images/token_factory_1/page_1.png)\n\nNow go to http://localhost:8000 and click on the Query button, it will return 1000 as expected for our address.\n\n## Transferring Tokens\n\nNow let’s implement transferring tokens!\n\nNow checking the contract, this is the method for transferring tokens:\n\n```\nfunction transfer( address to, uint value) returns (bool ok)\n```\n\nThe method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at *app/index.html*:\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\nThen we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to *app/js/index.js*:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n    $('#transfer button').click(function() {\n      var address = $('#transfer .address').val();\n      var num = $('#transfer .num').val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $('#transfer .result').html('Done!');\n      });\n    });\n  });\n});\n{% endcode_block %}\n\nLet’s go to the UI and transfer 20 tokens to a random address (try `0x00e13219655759df4f2c15e1fe0b949d43a3c45e`).\nAfter clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.\n\n![Screenshot](/assets/images/token_factory_1/page_2.png)\n\nWe transferred 20 tokens out of our account, let’s see if the balances reflect that.\n\n![Screenshot](/assets/images/token_factory_1/page_3.png)\n\n![Screenshot](/assets/images/token_factory_1/page_4.png)\n\nYou can even see in the Console a receipt of the transaction:\n\n![Screenshot](/assets/images/token_factory_1/page_5.png)\n\n\n## On to Part 2\n\nIn this tutorial we deployed and interacted with single Token. On [part 2](/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/) we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.\n\n","source":"_posts/2018-09-27-how-to-create-a-token-factory-with-embark-part-1.md","raw":"title: How to create a Token Factory with Ethereum — Part 1\nauthor: iuri_matias\nsummary: \"This is the first part of a series in which we'll explore how to build a token factory on Ethereum using Embark!\"\ncategories:\n  - tutorials\nalias:\n  - \"tutorials/token_factory_1.html\"\n  - \"news/2018/09/26/how-to-create-a-token-factory-with-embark-part-1/\"\nlayout: blog-post\n---\n\nIn this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFirst of all, make sure you have [Go-Ethereum](https://geth.ethereum.org/) and Embark installed.\n\n{% code_block copyBtn:true %}\n$ npm -g install embark\n{% endcode_block %}\n\nNow, let’s create a new dapp\n\n{% code_block copyBtn:true %}\n$ embark new TokenFactory\n{% endcode_block %}\n\n\nThis will create a directory called TokenFactory, cd to it and run:\n\n{% code_block copyBtn:true %}\n$ embark run\n{% endcode_block %}\n\nIn another console, in the same directory, run:\n\nYou should see something like this:\n\n![Dashboard Code](/assets/images/token_factory_1/dashboard.png)\n\nTo exit the dashboard you can type 'exit' in the console or press CTRL+C.\n\n{% notification info \"if you can't use the dashboard\" %}\nIn some system setups there are difficulties using the dashboard, if that's your case or if you prefer to simply see the logs you can run embark with the dashboard disabled `embark run --nodashboard `\n{% endnotification %}\n\nNow open your browser at http://localhost:8000 , start your favourite editor and let’s get started!\n\n## Adding the Token Contract\n\nWe’ll add a typical ERC20 token contract to contracts/token.sol\n\n*warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing*\n\n{% code_block copyBtn:true %}\npragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address => uint) _balances;\n    mapping(address => mapping( address => uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] > value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] < value);\n        require(_approvals[from][msg.sender] < value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b >= a);\n    }\n}\n{% endcode_block %}\n\nOnce added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:\n\n![Console](/assets/images/token_factory_1/console_1.png)\n\nWe haven't supplied any parameters to the contract and embark complains because the contract constructor takes a *initial_balance* parameter which we haven’t specified:\n\n```\nconstructor(uint initial_balance) public {\n    _balances[msg.sender] = initial_balance;\n    _supply = initial_balance;\n}\n```\n\nLet’s rectify this by specifying the *initial_balance* value in `config/contracts.js`\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  default: {\n    // .....\n    gas: \"auto\",\n    contracts: {\n      <mark id=\"code-3\" class=\"highlight-inline\">\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will detect the change and redeploy the contract with the new parameters.\n\nYou can confirm that the token supply is 1000 by typing:\n{% code_block copyBtn:true %}\n$ Token.methods._supply().call(console.log)\n{% endcode_block %}\n\n![Console](/assets/images/token_factory_1/console_2.png)\n\n## Creating the UI\n\nFor the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.\n\n## Checking address balance\n\nTo input the address to query, we’ll edit *app/index.html* and add a simple form.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\n**Adding jQuery**\n\nTo simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.\n\n{% code_block copyBtn:true %}\n$ npm install jquery@3 --save\n{% endcode_block %}\n\nNow edit the file *app/js/index.js* and add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\n{% endcode_block %}\n\n**Setting the default address**\n\nLet’s add to the input field field our own address as the default text so we can easily query our own balance. In the file *app/js/index.js* add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n\n  });\n});\n{% endcode_block %}\n\nThis will get the address of the first account and set it as the default text in the input form.\n\n`EmbarkJS.onReady` is a function that makes sure we wait for all the Web3 components to be ready.\n\n**Querying Balance**\n\nTo query the balance, we can see the contract method signature to do this is:\n\n```\nfunction balanceOf( address who ) constant returns (uint value) {\n  return _balances[who];\n}\n```\n\nThis method will be available in the JS code automatically as a promise, like:\n\n{% code_block copyBtn:true %}\nimport Token from 'Embark/contracts/Token';\n\nToken.methods.balanceOf(address).call().then(function(balance) { });\n{% endcode_block %}\n\n\nSo we can simply add a click event to the button, get the address, query the balance and set the result.\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n  });\n});\n{% endcode_block %}\n\n\n![Screenshot](/assets/images/token_factory_1/page_1.png)\n\nNow go to http://localhost:8000 and click on the Query button, it will return 1000 as expected for our address.\n\n## Transferring Tokens\n\nNow let’s implement transferring tokens!\n\nNow checking the contract, this is the method for transferring tokens:\n\n```\nfunction transfer( address to, uint value) returns (bool ok)\n```\n\nThe method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at *app/index.html*:\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\nThen we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to *app/js/index.js*:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n    $('#transfer button').click(function() {\n      var address = $('#transfer .address').val();\n      var num = $('#transfer .num').val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $('#transfer .result').html('Done!');\n      });\n    });\n  });\n});\n{% endcode_block %}\n\nLet’s go to the UI and transfer 20 tokens to a random address (try `0x00e13219655759df4f2c15e1fe0b949d43a3c45e`).\nAfter clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.\n\n![Screenshot](/assets/images/token_factory_1/page_2.png)\n\nWe transferred 20 tokens out of our account, let’s see if the balances reflect that.\n\n![Screenshot](/assets/images/token_factory_1/page_3.png)\n\n![Screenshot](/assets/images/token_factory_1/page_4.png)\n\nYou can even see in the Console a receipt of the transaction:\n\n![Screenshot](/assets/images/token_factory_1/page_5.png)\n\n\n## On to Part 2\n\nIn this tutorial we deployed and interacted with single Token. On [part 2](/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/) we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.\n\n","slug":"how-to-create-a-token-factory-with-embark-part-1","published":1,"date":"2018-09-27T04:00:00.000Z","updated":"2020-01-19T20:56:52.649Z","_id":"ck5ijm3tr00247heg5aegaono","comments":1,"photos":[],"link":"","content":"<p>In this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>First of all, make sure you have <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Go-Ethereum</a> and Embark installed.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\">$ npm -g install embark</code></pre>\n\n\n<p>Now, let’s create a new dapp</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\">$ embark new TokenFactory</code></pre>\n\n\n\n<p>This will create a directory called TokenFactory, cd to it and run:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\">$ embark run</code></pre>\n\n\n<p>In another console, in the same directory, run:</p>\n<p>You should see something like this:</p>\n<p><img src=\"/assets/images/token_factory_1/dashboard.png\" alt=\"Dashboard Code\"></p>\n<p>To exit the dashboard you can type ‘exit’ in the console or press CTRL+C.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>if you can&#39;t use the dashboard</strong></p>\n  <p><p>In some system setups there are difficulties using the dashboard, if that’s your case or if you prefer to simply see the logs you can run embark with the dashboard disabled <code>embark run --nodashboard</code></p>\n</p>\n</div> \n\n\n\n<p>Now open your browser at <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> , start your favourite editor and let’s get started!</p>\n<h2 id=\"Adding-the-Token-Contract\"><a href=\"#Adding-the-Token-Contract\" class=\"headerlink\" title=\"Adding the Token Contract\"></a>Adding the Token Contract</h2><p>We’ll add a typical ERC20 token contract to contracts/token.sol</p>\n<p><em>warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing</em></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\">pragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address =&gt; uint) _balances;\n    mapping(address =&gt; mapping( address =&gt; uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] &gt; value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] &lt; value);\n        require(_approvals[from][msg.sender] &lt; value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b &gt;= a);\n    }\n}</code></pre>\n\n\n<p>Once added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:</p>\n<p><img src=\"/assets/images/token_factory_1/console_1.png\" alt=\"Console\"></p>\n<p>We haven’t supplied any parameters to the contract and embark complains because the contract constructor takes a <em>initial_balance</em> parameter which we haven’t specified:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">constructor(uint initial_balance) public &#123;</span><br><span class=\"line\">    _balances[msg.sender] &#x3D; initial_balance;</span><br><span class=\"line\">    _supply &#x3D; initial_balance;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s rectify this by specifying the <em>initial_balance</em> value in <code>config/contracts.js</code></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  default: {\n    // .....\n    gas: &quot;auto&quot;,\n    contracts: {\n      &lt;mark id=&quot;code-3&quot; class=&quot;highlight-inline&quot;&gt;\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will detect the change and redeploy the contract with the new parameters.</p>\n<p>You can confirm that the token supply is 1000 by typing:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\">$ Token.methods._supply().call(console.log)</code></pre>\n\n\n<p><img src=\"/assets/images/token_factory_1/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Creating-the-UI\"><a href=\"#Creating-the-UI\" class=\"headerlink\" title=\"Creating the UI\"></a>Creating the UI</h2><p>For the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.</p>\n<h2 id=\"Checking-address-balance\"><a href=\"#Checking-address-balance\" class=\"headerlink\" title=\"Checking address balance\"></a>Checking address balance</h2><p>To input the address to query, we’ll edit <em>app/index.html</em> and add a simple form.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p><strong>Adding jQuery</strong></p>\n<p>To simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\">$ npm install jquery@3 --save</code></pre>\n\n\n<p>Now edit the file <em>app/js/index.js</em> and add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;</code></pre>\n\n\n<p><strong>Setting the default address</strong></p>\n<p>Let’s add to the input field field our own address as the default text so we can easily query our own balance. In the file <em>app/js/index.js</em> add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n\n  });\n});</code></pre>\n\n\n<p>This will get the address of the first account and set it as the default text in the input form.</p>\n<p><code>EmbarkJS.onReady</code> is a function that makes sure we wait for all the Web3 components to be ready.</p>\n<p><strong>Querying Balance</strong></p>\n<p>To query the balance, we can see the contract method signature to do this is:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function balanceOf( address who ) constant returns (uint value) &#123;</span><br><span class=\"line\">  return _balances[who];</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This method will be available in the JS code automatically as a promise, like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\">import Token from &#39;Embark/contracts/Token&#39;;\n\nToken.methods.balanceOf(address).call().then(function(balance) { });</code></pre>\n\n\n\n<p>So we can simply add a click event to the button, get the address, query the balance and set the result.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n  });\n});</code></pre>\n\n\n\n<p><img src=\"/assets/images/token_factory_1/page_1.png\" alt=\"Screenshot\"></p>\n<p>Now go to <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> and click on the Query button, it will return 1000 as expected for our address.</p>\n<h2 id=\"Transferring-Tokens\"><a href=\"#Transferring-Tokens\" class=\"headerlink\" title=\"Transferring Tokens\"></a>Transferring Tokens</h2><p>Now let’s implement transferring tokens!</p>\n<p>Now checking the contract, this is the method for transferring tokens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function transfer( address to, uint value) returns (bool ok)</span><br></pre></td></tr></table></figure>\n\n<p>The method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at <em>app/index.html</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Then we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to <em>app/js/index.js</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n    $(&#39;#transfer button&#39;).click(function() {\n      var address = $(&#39;#transfer .address&#39;).val();\n      var num = $(&#39;#transfer .num&#39;).val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n      });\n    });\n  });\n});</code></pre>\n\n\n<p>Let’s go to the UI and transfer 20 tokens to a random address (try <code>0x00e13219655759df4f2c15e1fe0b949d43a3c45e</code>).<br>After clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.</p>\n<p><img src=\"/assets/images/token_factory_1/page_2.png\" alt=\"Screenshot\"></p>\n<p>We transferred 20 tokens out of our account, let’s see if the balances reflect that.</p>\n<p><img src=\"/assets/images/token_factory_1/page_3.png\" alt=\"Screenshot\"></p>\n<p><img src=\"/assets/images/token_factory_1/page_4.png\" alt=\"Screenshot\"></p>\n<p>You can even see in the Console a receipt of the transaction:</p>\n<p><img src=\"/assets/images/token_factory_1/page_5.png\" alt=\"Screenshot\"></p>\n<h2 id=\"On-to-Part-2\"><a href=\"#On-to-Part-2\" class=\"headerlink\" title=\"On to Part 2\"></a>On to Part 2</h2><p>In this tutorial we deployed and interacted with single Token. On <a href=\"/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/\">part 2</a> we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>First of all, make sure you have <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Go-Ethereum</a> and Embark installed.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\">$ npm -g install embark</code></pre>\n\n\n<p>Now, let’s create a new dapp</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\">$ embark new TokenFactory</code></pre>\n\n\n\n<p>This will create a directory called TokenFactory, cd to it and run:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\">$ embark run</code></pre>\n\n\n<p>In another console, in the same directory, run:</p>\n<p>You should see something like this:</p>\n<p><img src=\"/assets/images/token_factory_1/dashboard.png\" alt=\"Dashboard Code\"></p>\n<p>To exit the dashboard you can type ‘exit’ in the console or press CTRL+C.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>if you can&#39;t use the dashboard</strong></p>\n  <p><p>In some system setups there are difficulties using the dashboard, if that’s your case or if you prefer to simply see the logs you can run embark with the dashboard disabled <code>embark run --nodashboard</code></p>\n</p>\n</div> \n\n\n\n<p>Now open your browser at <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> , start your favourite editor and let’s get started!</p>\n<h2 id=\"Adding-the-Token-Contract\"><a href=\"#Adding-the-Token-Contract\" class=\"headerlink\" title=\"Adding the Token Contract\"></a>Adding the Token Contract</h2><p>We’ll add a typical ERC20 token contract to contracts/token.sol</p>\n<p><em>warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing</em></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\">pragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address =&gt; uint) _balances;\n    mapping(address =&gt; mapping( address =&gt; uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] &gt; value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] &lt; value);\n        require(_approvals[from][msg.sender] &lt; value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b &gt;= a);\n    }\n}</code></pre>\n\n\n<p>Once added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:</p>\n<p><img src=\"/assets/images/token_factory_1/console_1.png\" alt=\"Console\"></p>\n<p>We haven’t supplied any parameters to the contract and embark complains because the contract constructor takes a <em>initial_balance</em> parameter which we haven’t specified:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">constructor(uint initial_balance) public &#123;</span><br><span class=\"line\">    _balances[msg.sender] &#x3D; initial_balance;</span><br><span class=\"line\">    _supply &#x3D; initial_balance;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s rectify this by specifying the <em>initial_balance</em> value in <code>config/contracts.js</code></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  default: {\n    // .....\n    gas: &quot;auto&quot;,\n    contracts: {\n      &lt;mark id=&quot;code-3&quot; class=&quot;highlight-inline&quot;&gt;\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will detect the change and redeploy the contract with the new parameters.</p>\n<p>You can confirm that the token supply is 1000 by typing:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\">$ Token.methods._supply().call(console.log)</code></pre>\n\n\n<p><img src=\"/assets/images/token_factory_1/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Creating-the-UI\"><a href=\"#Creating-the-UI\" class=\"headerlink\" title=\"Creating the UI\"></a>Creating the UI</h2><p>For the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.</p>\n<h2 id=\"Checking-address-balance\"><a href=\"#Checking-address-balance\" class=\"headerlink\" title=\"Checking address balance\"></a>Checking address balance</h2><p>To input the address to query, we’ll edit <em>app/index.html</em> and add a simple form.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p><strong>Adding jQuery</strong></p>\n<p>To simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\">$ npm install jquery@3 --save</code></pre>\n\n\n<p>Now edit the file <em>app/js/index.js</em> and add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;</code></pre>\n\n\n<p><strong>Setting the default address</strong></p>\n<p>Let’s add to the input field field our own address as the default text so we can easily query our own balance. In the file <em>app/js/index.js</em> add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n\n  });\n});</code></pre>\n\n\n<p>This will get the address of the first account and set it as the default text in the input form.</p>\n<p><code>EmbarkJS.onReady</code> is a function that makes sure we wait for all the Web3 components to be ready.</p>\n<p><strong>Querying Balance</strong></p>\n<p>To query the balance, we can see the contract method signature to do this is:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function balanceOf( address who ) constant returns (uint value) &#123;</span><br><span class=\"line\">  return _balances[who];</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This method will be available in the JS code automatically as a promise, like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\">import Token from &#39;Embark/contracts/Token&#39;;\n\nToken.methods.balanceOf(address).call().then(function(balance) { });</code></pre>\n\n\n\n<p>So we can simply add a click event to the button, get the address, query the balance and set the result.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n  });\n});</code></pre>\n\n\n\n<p><img src=\"/assets/images/token_factory_1/page_1.png\" alt=\"Screenshot\"></p>\n<p>Now go to <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> and click on the Query button, it will return 1000 as expected for our address.</p>\n<h2 id=\"Transferring-Tokens\"><a href=\"#Transferring-Tokens\" class=\"headerlink\" title=\"Transferring Tokens\"></a>Transferring Tokens</h2><p>Now let’s implement transferring tokens!</p>\n<p>Now checking the contract, this is the method for transferring tokens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function transfer( address to, uint value) returns (bool ok)</span><br></pre></td></tr></table></figure>\n\n<p>The method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at <em>app/index.html</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Then we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to <em>app/js/index.js</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n    $(&#39;#transfer button&#39;).click(function() {\n      var address = $(&#39;#transfer .address&#39;).val();\n      var num = $(&#39;#transfer .num&#39;).val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n      });\n    });\n  });\n});</code></pre>\n\n\n<p>Let’s go to the UI and transfer 20 tokens to a random address (try <code>0x00e13219655759df4f2c15e1fe0b949d43a3c45e</code>).<br>After clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.</p>\n<p><img src=\"/assets/images/token_factory_1/page_2.png\" alt=\"Screenshot\"></p>\n<p>We transferred 20 tokens out of our account, let’s see if the balances reflect that.</p>\n<p><img src=\"/assets/images/token_factory_1/page_3.png\" alt=\"Screenshot\"></p>\n<p><img src=\"/assets/images/token_factory_1/page_4.png\" alt=\"Screenshot\"></p>\n<p>You can even see in the Console a receipt of the transaction:</p>\n<p><img src=\"/assets/images/token_factory_1/page_5.png\" alt=\"Screenshot\"></p>\n<h2 id=\"On-to-Part-2\"><a href=\"#On-to-Part-2\" class=\"headerlink\" title=\"On to Part 2\"></a>On to Part 2</h2><p>In this tutorial we deployed and interacted with single Token. On <a href=\"/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/\">part 2</a> we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.</p>\n"},{"title":"How to create a Token Factory with Ethereum — Part 2","author":"iuri_matias","summary":"In this second part, we'll continue where we left off in part one, on building a token factory with Embark and focus on how to deploy new tokens.","alias":["tutorials/token_factory_2.html","/news/2018/10/26/how-to-create-a-token-factory-with-embark-part-2/"],"layout":"blog-post","_content":"\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFor the second part of the tutorial, Embark 3.0 or higher is required.\n\nIf you are using an older version you can update with:\n\n{% code_block copyBtn:true %}\n$ npm install -g embark@3\n{% endcode_block %}\n\nAfterwards make sure that `embark version` returns 3.0 then restart embark with `embark run`\n\n## Generalizing Token Interaction\n\nWe’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.\n\nFirst, we’ll add a simple form to *app/index.html* to get address of the token we wish to interact with.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nIn *app/js/index.js* we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use *currentToken* instead of *Token*. This way the existing code will work with the token we will be loading.\n\n{% code_block copyBtn:true %}\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport $ from 'jquery';\nimport Token from 'Embark/contracts/Token';\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nNow you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.\n\n![Console](/assets/images/token_factory_2/console_1.png)\n\nI can see the address of the deployed token in my case is *0x0703da89fc6c3ff20b8787a23d3340b41258dba7*. Copy paste your equivalent address into the UI.\n\n{% notification info 'Copying the address' %}\n*There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click->copy.*\n{% endnotification %}\n\n![Screenshot](/assets/images/token_factory_2/page_1.png)\n\nAfter copying the address, click “Use this Token’, and let’s see the balance.\n\n![Screenshot](/assets/images/token_factory_2/page_2.png)\n\nIt’s *980* as expected (*1000* was the initial supply as configured in *config/contracts.json* and *20* was transferred out in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/)\n\n## Deploy New Tokens on the fly\n\nNow that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.\n\nFirst we’ll add a simple form to *app/index.html* to get the desired supply of the new token to deploy.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"deployToken\">\n      <h3>Deploy new Token</h3>\n      <input placeholder=\"enter token supply\" />\n      <button>Deploy</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nEmbark makes the contract objects available in the js side, each contract object will have a method called *deploy* that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.\n\nIn *app/js/index.js* we’ll add the code to deploy new tokens client side using this functionality:\n\n{% code_block copyBtn:true %}\n$(document).ready(function() {\n\n  var currentToken;\n  $(\"#deployToken button\").click(function() {\n    var supply = $('#deployToken input').val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(\"#deployToken .result\").append(\"<br>Token deployed with address: \" + deployedToken.options.address);\n    });\n  });\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nWhen the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with `Token.methods.deploy([supply])`.\nThe resulting promise `.then(function(deployedToken) {})` will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one *currentToken* and also inform the user of the address;\n\nSo let’s try this out! Entering the supply as 500 and clicking Deploy:\n\n![Screenshot](/assets/images/token_factory_2/page_3.png)\n\nPerfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.\n\n![Screenshot](/assets/images/token_factory_2/page_4.png)\n\nIt returns *500* as expected! Let’s deploy another token with a different supply and check Query balance again\n\n![Screenshot](/assets/images/token_factory_2/page_5.png)\n\nAfter deploying a new token with the supply at *200*, clicking query is also returning *200* as expected.\n\nLet’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.\nEach time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.\n\n![Screenshot](/assets/images/token_factory_2/page_6.png)\n\nNow checking the balance again:\n\n![Screenshot](/assets/images/token_factory_2/page_7.png)\n\nAnd it’s *500* as expected since that’s the initial supply defined for the first token deployed.\n\n## Disabling the Token Deploy from Embarks side\n\nNow that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/), however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set \"deploy\": false for that contract\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  \"default\": {\n    // .....\n    \"gas\": \"auto\",\n    \"contracts\": {\n      \"Token\": {\n        \"deploy\": false,\n        \"args\": [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will now no longer deploy that contract, in the dashboard you should see:\n\n![Console](/assets/images/token_factory_2/console_2.png)\n\n## Conclusion\n\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.\n","source":"_posts/2018-10-27-how-to-create-a-token-factory-with-embark-part-2.md","raw":"title: How to create a Token Factory with Ethereum — Part 2\nauthor: iuri_matias\nsummary: \"In this second part, we'll continue where we left off in part one, on building a token factory with Embark and focus on how to deploy new tokens.\"\ncategories:\n  - tutorials\nalias:\n  - \"tutorials/token_factory_2.html\"\n  - \"/news/2018/10/26/how-to-create-a-token-factory-with-embark-part-2/\"\nlayout: blog-post\n---\n\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFor the second part of the tutorial, Embark 3.0 or higher is required.\n\nIf you are using an older version you can update with:\n\n{% code_block copyBtn:true %}\n$ npm install -g embark@3\n{% endcode_block %}\n\nAfterwards make sure that `embark version` returns 3.0 then restart embark with `embark run`\n\n## Generalizing Token Interaction\n\nWe’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.\n\nFirst, we’ll add a simple form to *app/index.html* to get address of the token we wish to interact with.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nIn *app/js/index.js* we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use *currentToken* instead of *Token*. This way the existing code will work with the token we will be loading.\n\n{% code_block copyBtn:true %}\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport $ from 'jquery';\nimport Token from 'Embark/contracts/Token';\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nNow you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.\n\n![Console](/assets/images/token_factory_2/console_1.png)\n\nI can see the address of the deployed token in my case is *0x0703da89fc6c3ff20b8787a23d3340b41258dba7*. Copy paste your equivalent address into the UI.\n\n{% notification info 'Copying the address' %}\n*There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click->copy.*\n{% endnotification %}\n\n![Screenshot](/assets/images/token_factory_2/page_1.png)\n\nAfter copying the address, click “Use this Token’, and let’s see the balance.\n\n![Screenshot](/assets/images/token_factory_2/page_2.png)\n\nIt’s *980* as expected (*1000* was the initial supply as configured in *config/contracts.json* and *20* was transferred out in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/)\n\n## Deploy New Tokens on the fly\n\nNow that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.\n\nFirst we’ll add a simple form to *app/index.html* to get the desired supply of the new token to deploy.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"deployToken\">\n      <h3>Deploy new Token</h3>\n      <input placeholder=\"enter token supply\" />\n      <button>Deploy</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nEmbark makes the contract objects available in the js side, each contract object will have a method called *deploy* that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.\n\nIn *app/js/index.js* we’ll add the code to deploy new tokens client side using this functionality:\n\n{% code_block copyBtn:true %}\n$(document).ready(function() {\n\n  var currentToken;\n  $(\"#deployToken button\").click(function() {\n    var supply = $('#deployToken input').val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(\"#deployToken .result\").append(\"<br>Token deployed with address: \" + deployedToken.options.address);\n    });\n  });\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nWhen the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with `Token.methods.deploy([supply])`.\nThe resulting promise `.then(function(deployedToken) {})` will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one *currentToken* and also inform the user of the address;\n\nSo let’s try this out! Entering the supply as 500 and clicking Deploy:\n\n![Screenshot](/assets/images/token_factory_2/page_3.png)\n\nPerfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.\n\n![Screenshot](/assets/images/token_factory_2/page_4.png)\n\nIt returns *500* as expected! Let’s deploy another token with a different supply and check Query balance again\n\n![Screenshot](/assets/images/token_factory_2/page_5.png)\n\nAfter deploying a new token with the supply at *200*, clicking query is also returning *200* as expected.\n\nLet’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.\nEach time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.\n\n![Screenshot](/assets/images/token_factory_2/page_6.png)\n\nNow checking the balance again:\n\n![Screenshot](/assets/images/token_factory_2/page_7.png)\n\nAnd it’s *500* as expected since that’s the initial supply defined for the first token deployed.\n\n## Disabling the Token Deploy from Embarks side\n\nNow that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/), however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set \"deploy\": false for that contract\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  \"default\": {\n    // .....\n    \"gas\": \"auto\",\n    \"contracts\": {\n      \"Token\": {\n        \"deploy\": false,\n        \"args\": [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will now no longer deploy that contract, in the dashboard you should see:\n\n![Console](/assets/images/token_factory_2/console_2.png)\n\n## Conclusion\n\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.\n","slug":"how-to-create-a-token-factory-with-embark-part-2","published":1,"date":"2018-10-27T04:00:00.000Z","updated":"2020-01-19T20:56:52.649Z","_id":"ck5ijm3tt00267hegay9k9guq","comments":1,"photos":[],"link":"","content":"<p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>For the second part of the tutorial, Embark 3.0 or higher is required.</p>\n<p>If you are using an older version you can update with:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\">$ npm install -g embark@3</code></pre>\n\n\n<p>Afterwards make sure that <code>embark version</code> returns 3.0 then restart embark with <code>embark run</code></p>\n<h2 id=\"Generalizing-Token-Interaction\"><a href=\"#Generalizing-Token-Interaction\" class=\"headerlink\" title=\"Generalizing Token Interaction\"></a>Generalizing Token Interaction</h2><p>We’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.</p>\n<p>First, we’ll add a simple form to <em>app/index.html</em> to get address of the token we wish to interact with.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>In <em>app/js/index.js</em> we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use <em>currentToken</em> instead of <em>Token</em>. This way the existing code will work with the token we will be loading.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\">import EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport $ from &#39;jquery&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>Now you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.</p>\n<p><img src=\"/assets/images/token_factory_2/console_1.png\" alt=\"Console\"></p>\n<p>I can see the address of the deployed token in my case is <em>0x0703da89fc6c3ff20b8787a23d3340b41258dba7</em>. Copy paste your equivalent address into the UI.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Copying the address</strong></p>\n  <p><p><em>There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click-&gt;copy.</em></p>\n</p>\n</div> \n\n\n\n<p><img src=\"/assets/images/token_factory_2/page_1.png\" alt=\"Screenshot\"></p>\n<p>After copying the address, click “Use this Token’, and let’s see the balance.</p>\n<p><img src=\"/assets/images/token_factory_2/page_2.png\" alt=\"Screenshot\"></p>\n<p>It’s <em>980</em> as expected (<em>1000</em> was the initial supply as configured in <em>config/contracts.json</em> and <em>20</em> was transferred out in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a></p>\n<h2 id=\"Deploy-New-Tokens-on-the-fly\"><a href=\"#Deploy-New-Tokens-on-the-fly\" class=\"headerlink\" title=\"Deploy New Tokens on the fly\"></a>Deploy New Tokens on the fly</h2><p>Now that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.</p>\n<p>First we’ll add a simple form to <em>app/index.html</em> to get the desired supply of the new token to deploy.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;deployToken&quot;&gt;\n      &lt;h3&gt;Deploy new Token&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token supply&quot; /&gt;\n      &lt;button&gt;Deploy&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Embark makes the contract objects available in the js side, each contract object will have a method called <em>deploy</em> that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.</p>\n<p>In <em>app/js/index.js</em> we’ll add the code to deploy new tokens client side using this functionality:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\">$(document).ready(function() {\n\n  var currentToken;\n  $(&quot;#deployToken button&quot;).click(function() {\n    var supply = $(&#39;#deployToken input&#39;).val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(&quot;#deployToken .result&quot;).append(&quot;&lt;br&gt;Token deployed with address: &quot; + deployedToken.options.address);\n    });\n  });\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>When the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with <code>Token.methods.deploy([supply])</code>.<br>The resulting promise <code>.then(function(deployedToken) {})</code> will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one <em>currentToken</em> and also inform the user of the address;</p>\n<p>So let’s try this out! Entering the supply as 500 and clicking Deploy:</p>\n<p><img src=\"/assets/images/token_factory_2/page_3.png\" alt=\"Screenshot\"></p>\n<p>Perfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_4.png\" alt=\"Screenshot\"></p>\n<p>It returns <em>500</em> as expected! Let’s deploy another token with a different supply and check Query balance again</p>\n<p><img src=\"/assets/images/token_factory_2/page_5.png\" alt=\"Screenshot\"></p>\n<p>After deploying a new token with the supply at <em>200</em>, clicking query is also returning <em>200</em> as expected.</p>\n<p>Let’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.<br>Each time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_6.png\" alt=\"Screenshot\"></p>\n<p>Now checking the balance again:</p>\n<p><img src=\"/assets/images/token_factory_2/page_7.png\" alt=\"Screenshot\"></p>\n<p>And it’s <em>500</em> as expected since that’s the initial supply defined for the first token deployed.</p>\n<h2 id=\"Disabling-the-Token-Deploy-from-Embarks-side\"><a href=\"#Disabling-the-Token-Deploy-from-Embarks-side\" class=\"headerlink\" title=\"Disabling the Token Deploy from Embarks side\"></a>Disabling the Token Deploy from Embarks side</h2><p>Now that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a>, however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set “deploy”: false for that contract</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  &quot;default&quot;: {\n    // .....\n    &quot;gas&quot;: &quot;auto&quot;,\n    &quot;contracts&quot;: {\n      &quot;Token&quot;: {\n        &quot;deploy&quot;: false,\n        &quot;args&quot;: [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will now no longer deploy that contract, in the dashboard you should see:</p>\n<p><img src=\"/assets/images/token_factory_2/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>For the second part of the tutorial, Embark 3.0 or higher is required.</p>\n<p>If you are using an older version you can update with:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\">$ npm install -g embark@3</code></pre>\n\n\n<p>Afterwards make sure that <code>embark version</code> returns 3.0 then restart embark with <code>embark run</code></p>\n<h2 id=\"Generalizing-Token-Interaction\"><a href=\"#Generalizing-Token-Interaction\" class=\"headerlink\" title=\"Generalizing Token Interaction\"></a>Generalizing Token Interaction</h2><p>We’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.</p>\n<p>First, we’ll add a simple form to <em>app/index.html</em> to get address of the token we wish to interact with.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>In <em>app/js/index.js</em> we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use <em>currentToken</em> instead of <em>Token</em>. This way the existing code will work with the token we will be loading.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\">import EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport $ from &#39;jquery&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>Now you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.</p>\n<p><img src=\"/assets/images/token_factory_2/console_1.png\" alt=\"Console\"></p>\n<p>I can see the address of the deployed token in my case is <em>0x0703da89fc6c3ff20b8787a23d3340b41258dba7</em>. Copy paste your equivalent address into the UI.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Copying the address</strong></p>\n  <p><p><em>There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click-&gt;copy.</em></p>\n</p>\n</div> \n\n\n\n<p><img src=\"/assets/images/token_factory_2/page_1.png\" alt=\"Screenshot\"></p>\n<p>After copying the address, click “Use this Token’, and let’s see the balance.</p>\n<p><img src=\"/assets/images/token_factory_2/page_2.png\" alt=\"Screenshot\"></p>\n<p>It’s <em>980</em> as expected (<em>1000</em> was the initial supply as configured in <em>config/contracts.json</em> and <em>20</em> was transferred out in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a></p>\n<h2 id=\"Deploy-New-Tokens-on-the-fly\"><a href=\"#Deploy-New-Tokens-on-the-fly\" class=\"headerlink\" title=\"Deploy New Tokens on the fly\"></a>Deploy New Tokens on the fly</h2><p>Now that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.</p>\n<p>First we’ll add a simple form to <em>app/index.html</em> to get the desired supply of the new token to deploy.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;deployToken&quot;&gt;\n      &lt;h3&gt;Deploy new Token&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token supply&quot; /&gt;\n      &lt;button&gt;Deploy&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Embark makes the contract objects available in the js side, each contract object will have a method called <em>deploy</em> that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.</p>\n<p>In <em>app/js/index.js</em> we’ll add the code to deploy new tokens client side using this functionality:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\">$(document).ready(function() {\n\n  var currentToken;\n  $(&quot;#deployToken button&quot;).click(function() {\n    var supply = $(&#39;#deployToken input&#39;).val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(&quot;#deployToken .result&quot;).append(&quot;&lt;br&gt;Token deployed with address: &quot; + deployedToken.options.address);\n    });\n  });\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>When the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with <code>Token.methods.deploy([supply])</code>.<br>The resulting promise <code>.then(function(deployedToken) {})</code> will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one <em>currentToken</em> and also inform the user of the address;</p>\n<p>So let’s try this out! Entering the supply as 500 and clicking Deploy:</p>\n<p><img src=\"/assets/images/token_factory_2/page_3.png\" alt=\"Screenshot\"></p>\n<p>Perfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_4.png\" alt=\"Screenshot\"></p>\n<p>It returns <em>500</em> as expected! Let’s deploy another token with a different supply and check Query balance again</p>\n<p><img src=\"/assets/images/token_factory_2/page_5.png\" alt=\"Screenshot\"></p>\n<p>After deploying a new token with the supply at <em>200</em>, clicking query is also returning <em>200</em> as expected.</p>\n<p>Let’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.<br>Each time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_6.png\" alt=\"Screenshot\"></p>\n<p>Now checking the balance again:</p>\n<p><img src=\"/assets/images/token_factory_2/page_7.png\" alt=\"Screenshot\"></p>\n<p>And it’s <em>500</em> as expected since that’s the initial supply defined for the first token deployed.</p>\n<h2 id=\"Disabling-the-Token-Deploy-from-Embarks-side\"><a href=\"#Disabling-the-Token-Deploy-from-Embarks-side\" class=\"headerlink\" title=\"Disabling the Token Deploy from Embarks side\"></a>Disabling the Token Deploy from Embarks side</h2><p>Now that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a>, however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set “deploy”: false for that contract</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  &quot;default&quot;: {\n    // .....\n    &quot;gas&quot;: &quot;auto&quot;,\n    &quot;contracts&quot;: {\n      &quot;Token&quot;: {\n        &quot;deploy&quot;: false,\n        &quot;args&quot;: [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will now no longer deploy that contract, in the dashboard you should see:</p>\n<p><img src=\"/assets/images/token_factory_2/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.</p>\n"},{"title":"Building Smart Contract only DApps with Embark","author":"pascal_precht","summary":"In this article we're going to explore how to build applications with Embark that focus purely on Smart Contract development. Read on!","layout":"blog-post","alias":"news/2019/01/22/building-smart-contract-only-dapps/","_content":"\nBuilding decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.\n\nEmbark enables us to implement either of those scenarios and in this article we're going to explore how to build a decentralized applications where Smart Contracts are the primary focus.\n\n## Creating a Smart Contracts only application\n\nBefore we get started, let's make sure that Embark's command line tool is actually installed. Running `embark --version` inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn't exist.\n\nTo change that, all we have to do is using Node's package manager `npm`, using the following command:\n\n```\n$ npm install -g embark\n```\n\nThis will make Embark's command line tool globally available on our machines. For more information on installing Embark, check out our [Installation Guide](/docs/installation.html) in the official documentation.\n\nWith that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it's no news that it comes with a command to easily scaffold a new application using the `new` command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren't necessarily interested in at this point.\n\nTo create an application that really only focusses on Smart Contract development, we can take advantage of the command's `--contracts-only` option. Let's go ahead and do that. In this tutorial we'll be creating a rather trivial project, namely a simple storage, so let's call the project `simple-storage`:\n\n```\n$ embark new simple-storage --contracts-only\n$ cd simple-storage\n```\n\nOnce Embark is done, we've got a new folder `simple-storage` in our current working directory that has everything we need to build a Smart Contract only decentralized application. After `cd`'ing into it, we'll see what the project's structure looks like:\n\n```\n├── contracts/\n└── test/\n├── contracts.js\n└── embark.json\n└── package.json\n```\n\nThis is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the `contracts` folder, in which, you guessed it, our Smart Contract source files go and the `contracts.json` file, in which we configure how the Smart Contracts are deployed.\n\nFor a more detailed description about every possible application file generated by Embark, head over to our [Application Structure](/docs/structure.html) documentation.\n\n## Creating and deploying Smart Contracts\n\nLet's go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we're about to create is rather trivial, as we want to focus on how to take advantage of Embark's features rather than how to implement complex applications. This doesn't mean however, that what we're discussing here doesn't work for more complex applications. Everything we do here, you can do in with any other DApp!\n\nThe idea of the `SimpleStorage` Smart Contract is really just to store a simple value. All we need are methods to set and get that value:\n\n```\npragma solidity ^0.5.0;\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  constructor(uint initialValue) public {\n    storedData = initialValue;\n  }\n\n  function set(uint x) public {\n    storedData = x;\n  }\n\n  function get() public view returns (uint retVal) {\n    return storedData;\n  }\n\n}\n```\n\nWe put this Smart Contract into `./contracts/simple-storage.sol`. Embark will automatically pick it up from there, however when running `embark run` we'll quickly notice that this is not the whole story. Here's what Embark will output:\n\n> \"[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.\"\n\nWhat Embark is telling us here is that it's well aware that there's a `SimpleStorage` Smart Contract, however, there's no dedicated configuration set up for the currently used environment to deploy that Smart Contract. [Environments are an essential feature](/docs/environments.html) of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.\n\nLet's open our project's `contracts.js` file and head down to the `contracts` section:\n\n```\n...\ncontracts: {\n  // example:\n  //SimpleStorage: {\n  //  args: [ 100 ]\n  //}\n}\n...\n```\n\nAs we can see, we're already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the `contracts` object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the [Smart Contract Configuration Guide](/docs/contracts_configuration.html).\n\nFor now, let's just take the suggested example in the comments and set the constructor parameter of `SimpleStorage`:\n\n```\nSimpleStorage: {\n  args: [ 100 ]\n}\n```\n\nIf our Smart Contracts happens to have more constructor parameters, we can simply add more values to `args` in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:\n\n```\nSimpleStorage: {\n  args: { initialValue: 100 }\n}\n```\n\nHaving that set up, we can execute `embark run` again, which should result in a successful deployment of our Smart Contract.\n\n```\nDeploying contracts\ndeploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nSimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nFinished deploying contracts\n```\n\nEmbark not only tells gives us the transaction hash of the deployment for `SimpleStorage` as soon as possible, it also gives us the estimated and confirmed cost of the transaction.\n\n**Try it yourself!**\n\n## Interacting with Smart Contracts using Embark's console\n\nAnother powerful feature we shouldn't forget is Embark's console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.\n\nAfter executing `embark run`, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the `help` command and see what happens:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThe output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark's command line tool you're using):\n\n```\nWelcome to Embark 4.0.0\n\npossible commands are:\nipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)\nswarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)\nweb3 - instantiated web3.js object configured to the current environment\nEmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.\nlog <process> on/off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver\nversions - display versions in use for libraries and tools like web3 and solc\nprofile <contractName> - Outputs the function profile of a contract\ndebug <txHash> - Debug the last transaction or the transaction specified by a hash\n    next/n - During a debug, step over forward\n    previous/p - During a debug, step over back\n    var local/v l/vl - During a debug, display local variables\n    var global/v g/vg - During a debug, display global variables\n    var all/v a/va - During a debug, display all variables\nhistory <optionalLength> - display console commands history\ntoken - Copies and prints the token for the cockpit\napi start/stop - Start or stop the API\nplugin install <package> - Installs a plugin in the Dapp. eg: plugin install embark-solc\nquit - to immediatly exit (alias: exit)\n\nThe web3 object and the interfaces for the deployed contracts and their methods are also available\n```\n\nOne thing that the console's help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nIn fact, we can go ahead and execute the Smart Contract's methods if we want to! For example, if we want to confirm that the constructor parameter for `initialValue` was indeed set to `100`, we can simply call `SimpleStorage`'s `get` method like this:\n\n```\nEmbark (development) > await SimpleStorage.method.get().call()<ENTER>\n```\n\nNotice that the `await` keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. `await` ensures that it unwraps the request value once it resolves.\n\n## Where to go from here\n\nObviously we've only touched the tip of the iceberg when it comes to Embark's built-in features. We highly recommend checking out all of the guide in our [official documentation](/docs), as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.\n\nAlso, there'll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there's anything you miss in Embark, make sure to talk to us in our [chatroom](https://gitter.im/embark-framework/Lobby) so we can discuss what we can do to improve the tooling you need!\n\n\n","source":"_posts/2019-01-23-building-smart-contract-only-dapps.md","raw":"title: Building Smart Contract only DApps with Embark\nauthor: pascal_precht\nsummary: \"In this article we're going to explore how to build applications with Embark that focus purely on Smart Contract development. Read on!\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/01/22/building-smart-contract-only-dapps/\n---\n\nBuilding decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.\n\nEmbark enables us to implement either of those scenarios and in this article we're going to explore how to build a decentralized applications where Smart Contracts are the primary focus.\n\n## Creating a Smart Contracts only application\n\nBefore we get started, let's make sure that Embark's command line tool is actually installed. Running `embark --version` inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn't exist.\n\nTo change that, all we have to do is using Node's package manager `npm`, using the following command:\n\n```\n$ npm install -g embark\n```\n\nThis will make Embark's command line tool globally available on our machines. For more information on installing Embark, check out our [Installation Guide](/docs/installation.html) in the official documentation.\n\nWith that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it's no news that it comes with a command to easily scaffold a new application using the `new` command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren't necessarily interested in at this point.\n\nTo create an application that really only focusses on Smart Contract development, we can take advantage of the command's `--contracts-only` option. Let's go ahead and do that. In this tutorial we'll be creating a rather trivial project, namely a simple storage, so let's call the project `simple-storage`:\n\n```\n$ embark new simple-storage --contracts-only\n$ cd simple-storage\n```\n\nOnce Embark is done, we've got a new folder `simple-storage` in our current working directory that has everything we need to build a Smart Contract only decentralized application. After `cd`'ing into it, we'll see what the project's structure looks like:\n\n```\n├── contracts/\n└── test/\n├── contracts.js\n└── embark.json\n└── package.json\n```\n\nThis is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the `contracts` folder, in which, you guessed it, our Smart Contract source files go and the `contracts.json` file, in which we configure how the Smart Contracts are deployed.\n\nFor a more detailed description about every possible application file generated by Embark, head over to our [Application Structure](/docs/structure.html) documentation.\n\n## Creating and deploying Smart Contracts\n\nLet's go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we're about to create is rather trivial, as we want to focus on how to take advantage of Embark's features rather than how to implement complex applications. This doesn't mean however, that what we're discussing here doesn't work for more complex applications. Everything we do here, you can do in with any other DApp!\n\nThe idea of the `SimpleStorage` Smart Contract is really just to store a simple value. All we need are methods to set and get that value:\n\n```\npragma solidity ^0.5.0;\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  constructor(uint initialValue) public {\n    storedData = initialValue;\n  }\n\n  function set(uint x) public {\n    storedData = x;\n  }\n\n  function get() public view returns (uint retVal) {\n    return storedData;\n  }\n\n}\n```\n\nWe put this Smart Contract into `./contracts/simple-storage.sol`. Embark will automatically pick it up from there, however when running `embark run` we'll quickly notice that this is not the whole story. Here's what Embark will output:\n\n> \"[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.\"\n\nWhat Embark is telling us here is that it's well aware that there's a `SimpleStorage` Smart Contract, however, there's no dedicated configuration set up for the currently used environment to deploy that Smart Contract. [Environments are an essential feature](/docs/environments.html) of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.\n\nLet's open our project's `contracts.js` file and head down to the `contracts` section:\n\n```\n...\ncontracts: {\n  // example:\n  //SimpleStorage: {\n  //  args: [ 100 ]\n  //}\n}\n...\n```\n\nAs we can see, we're already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the `contracts` object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the [Smart Contract Configuration Guide](/docs/contracts_configuration.html).\n\nFor now, let's just take the suggested example in the comments and set the constructor parameter of `SimpleStorage`:\n\n```\nSimpleStorage: {\n  args: [ 100 ]\n}\n```\n\nIf our Smart Contracts happens to have more constructor parameters, we can simply add more values to `args` in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:\n\n```\nSimpleStorage: {\n  args: { initialValue: 100 }\n}\n```\n\nHaving that set up, we can execute `embark run` again, which should result in a successful deployment of our Smart Contract.\n\n```\nDeploying contracts\ndeploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nSimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nFinished deploying contracts\n```\n\nEmbark not only tells gives us the transaction hash of the deployment for `SimpleStorage` as soon as possible, it also gives us the estimated and confirmed cost of the transaction.\n\n**Try it yourself!**\n\n## Interacting with Smart Contracts using Embark's console\n\nAnother powerful feature we shouldn't forget is Embark's console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.\n\nAfter executing `embark run`, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the `help` command and see what happens:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThe output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark's command line tool you're using):\n\n```\nWelcome to Embark 4.0.0\n\npossible commands are:\nipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)\nswarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)\nweb3 - instantiated web3.js object configured to the current environment\nEmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.\nlog <process> on/off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver\nversions - display versions in use for libraries and tools like web3 and solc\nprofile <contractName> - Outputs the function profile of a contract\ndebug <txHash> - Debug the last transaction or the transaction specified by a hash\n    next/n - During a debug, step over forward\n    previous/p - During a debug, step over back\n    var local/v l/vl - During a debug, display local variables\n    var global/v g/vg - During a debug, display global variables\n    var all/v a/va - During a debug, display all variables\nhistory <optionalLength> - display console commands history\ntoken - Copies and prints the token for the cockpit\napi start/stop - Start or stop the API\nplugin install <package> - Installs a plugin in the Dapp. eg: plugin install embark-solc\nquit - to immediatly exit (alias: exit)\n\nThe web3 object and the interfaces for the deployed contracts and their methods are also available\n```\n\nOne thing that the console's help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nIn fact, we can go ahead and execute the Smart Contract's methods if we want to! For example, if we want to confirm that the constructor parameter for `initialValue` was indeed set to `100`, we can simply call `SimpleStorage`'s `get` method like this:\n\n```\nEmbark (development) > await SimpleStorage.method.get().call()<ENTER>\n```\n\nNotice that the `await` keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. `await` ensures that it unwraps the request value once it resolves.\n\n## Where to go from here\n\nObviously we've only touched the tip of the iceberg when it comes to Embark's built-in features. We highly recommend checking out all of the guide in our [official documentation](/docs), as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.\n\nAlso, there'll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there's anything you miss in Embark, make sure to talk to us in our [chatroom](https://gitter.im/embark-framework/Lobby) so we can discuss what we can do to improve the tooling you need!\n\n\n","slug":"building-smart-contract-only-dapps","published":1,"date":"2019-01-23T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3tw00287heg7013c23g","content":"<p>Building decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.</p>\n<p>Embark enables us to implement either of those scenarios and in this article we’re going to explore how to build a decentralized applications where Smart Contracts are the primary focus.</p>\n<h2 id=\"Creating-a-Smart-Contracts-only-application\"><a href=\"#Creating-a-Smart-Contracts-only-application\" class=\"headerlink\" title=\"Creating a Smart Contracts only application\"></a>Creating a Smart Contracts only application</h2><p>Before we get started, let’s make sure that Embark’s command line tool is actually installed. Running <code>embark --version</code> inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn’t exist.</p>\n<p>To change that, all we have to do is using Node’s package manager <code>npm</code>, using the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>This will make Embark’s command line tool globally available on our machines. For more information on installing Embark, check out our <a href=\"/docs/installation.html\">Installation Guide</a> in the official documentation.</p>\n<p>With that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it’s no news that it comes with a command to easily scaffold a new application using the <code>new</code> command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren’t necessarily interested in at this point.</p>\n<p>To create an application that really only focusses on Smart Contract development, we can take advantage of the command’s <code>--contracts-only</code> option. Let’s go ahead and do that. In this tutorial we’ll be creating a rather trivial project, namely a simple storage, so let’s call the project <code>simple-storage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new simple-storage --contracts-only</span><br><span class=\"line\">$ cd simple-storage</span><br></pre></td></tr></table></figure>\n\n<p>Once Embark is done, we’ve got a new folder <code>simple-storage</code> in our current working directory that has everything we need to build a Smart Contract only decentralized application. After <code>cd</code>‘ing into it, we’ll see what the project’s structure looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">├── contracts.js</span><br><span class=\"line\">└── embark.json</span><br><span class=\"line\">└── package.json</span><br></pre></td></tr></table></figure>\n\n<p>This is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the <code>contracts</code> folder, in which, you guessed it, our Smart Contract source files go and the <code>contracts.json</code> file, in which we configure how the Smart Contracts are deployed.</p>\n<p>For a more detailed description about every possible application file generated by Embark, head over to our <a href=\"/docs/structure.html\">Application Structure</a> documentation.</p>\n<h2 id=\"Creating-and-deploying-Smart-Contracts\"><a href=\"#Creating-and-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Creating and deploying Smart Contracts\"></a>Creating and deploying Smart Contracts</h2><p>Let’s go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we’re about to create is rather trivial, as we want to focus on how to take advantage of Embark’s features rather than how to implement complex applications. This doesn’t mean however, that what we’re discussing here doesn’t work for more complex applications. Everything we do here, you can do in with any other DApp!</p>\n<p>The idea of the <code>SimpleStorage</code> Smart Contract is really just to store a simple value. All we need are methods to set and get that value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">pragma solidity ^0.5.0;</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(uint initialValue) public &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) public &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function get() public view returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We put this Smart Contract into <code>./contracts/simple-storage.sol</code>. Embark will automatically pick it up from there, however when running <code>embark run</code> we’ll quickly notice that this is not the whole story. Here’s what Embark will output:</p>\n<blockquote>\n<p>“[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.”</p>\n</blockquote>\n<p>What Embark is telling us here is that it’s well aware that there’s a <code>SimpleStorage</code> Smart Contract, however, there’s no dedicated configuration set up for the currently used environment to deploy that Smart Contract. <a href=\"/docs/environments.html\">Environments are an essential feature</a> of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.</p>\n<p>Let’s open our project’s <code>contracts.js</code> file and head down to the <code>contracts</code> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; example:</span><br><span class=\"line\">  &#x2F;&#x2F;SimpleStorage: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F;  args: [ 100 ]</span><br><span class=\"line\">  &#x2F;&#x2F;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>As we can see, we’re already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the <code>contracts</code> object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the <a href=\"/docs/contracts_configuration.html\">Smart Contract Configuration Guide</a>.</p>\n<p>For now, let’s just take the suggested example in the comments and set the constructor parameter of <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [ 100 ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If our Smart Contracts happens to have more constructor parameters, we can simply add more values to <code>args</code> in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: &#123; initialValue: 100 &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Having that set up, we can execute <code>embark run</code> again, which should result in a successful deployment of our Smart Contract.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Deploying contracts</span><br><span class=\"line\">deploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">SimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">Finished deploying contracts</span><br></pre></td></tr></table></figure>\n\n<p>Embark not only tells gives us the transaction hash of the deployment for <code>SimpleStorage</code> as soon as possible, it also gives us the estimated and confirmed cost of the transaction.</p>\n<p><strong>Try it yourself!</strong></p>\n<h2 id=\"Interacting-with-Smart-Contracts-using-Embark’s-console\"><a href=\"#Interacting-with-Smart-Contracts-using-Embark’s-console\" class=\"headerlink\" title=\"Interacting with Smart Contracts using Embark’s console\"></a>Interacting with Smart Contracts using Embark’s console</h2><p>Another powerful feature we shouldn’t forget is Embark’s console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.</p>\n<p>After executing <code>embark run</code>, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the <code>help</code> command and see what happens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark’s command line tool you’re using):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Welcome to Embark 4.0.0</span><br><span class=\"line\"></span><br><span class=\"line\">possible commands are:</span><br><span class=\"line\">ipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)</span><br><span class=\"line\">swarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)</span><br><span class=\"line\">web3 - instantiated web3.js object configured to the current environment</span><br><span class=\"line\">EmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.</span><br><span class=\"line\">log &lt;process&gt; on&#x2F;off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver</span><br><span class=\"line\">versions - display versions in use for libraries and tools like web3 and solc</span><br><span class=\"line\">profile &lt;contractName&gt; - Outputs the function profile of a contract</span><br><span class=\"line\">debug &lt;txHash&gt; - Debug the last transaction or the transaction specified by a hash</span><br><span class=\"line\">    next&#x2F;n - During a debug, step over forward</span><br><span class=\"line\">    previous&#x2F;p - During a debug, step over back</span><br><span class=\"line\">    var local&#x2F;v l&#x2F;vl - During a debug, display local variables</span><br><span class=\"line\">    var global&#x2F;v g&#x2F;vg - During a debug, display global variables</span><br><span class=\"line\">    var all&#x2F;v a&#x2F;va - During a debug, display all variables</span><br><span class=\"line\">history &lt;optionalLength&gt; - display console commands history</span><br><span class=\"line\">token - Copies and prints the token for the cockpit</span><br><span class=\"line\">api start&#x2F;stop - Start or stop the API</span><br><span class=\"line\">plugin install &lt;package&gt; - Installs a plugin in the Dapp. eg: plugin install embark-solc</span><br><span class=\"line\">quit - to immediatly exit (alias: exit)</span><br><span class=\"line\"></span><br><span class=\"line\">The web3 object and the interfaces for the deployed contracts and their methods are also available</span><br></pre></td></tr></table></figure>\n\n<p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>In fact, we can go ahead and execute the Smart Contract’s methods if we want to! For example, if we want to confirm that the constructor parameter for <code>initialValue</code> was indeed set to <code>100</code>, we can simply call <code>SimpleStorage</code>‘s <code>get</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.method.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the <code>await</code> keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. <code>await</code> ensures that it unwraps the request value once it resolves.</p>\n<h2 id=\"Where-to-go-from-here\"><a href=\"#Where-to-go-from-here\" class=\"headerlink\" title=\"Where to go from here\"></a>Where to go from here</h2><p>Obviously we’ve only touched the tip of the iceberg when it comes to Embark’s built-in features. We highly recommend checking out all of the guide in our <a href=\"/docs\">official documentation</a>, as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.</p>\n<p>Also, there’ll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there’s anything you miss in Embark, make sure to talk to us in our <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">chatroom</a> so we can discuss what we can do to improve the tooling you need!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Building decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.</p>\n<p>Embark enables us to implement either of those scenarios and in this article we’re going to explore how to build a decentralized applications where Smart Contracts are the primary focus.</p>\n<h2 id=\"Creating-a-Smart-Contracts-only-application\"><a href=\"#Creating-a-Smart-Contracts-only-application\" class=\"headerlink\" title=\"Creating a Smart Contracts only application\"></a>Creating a Smart Contracts only application</h2><p>Before we get started, let’s make sure that Embark’s command line tool is actually installed. Running <code>embark --version</code> inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn’t exist.</p>\n<p>To change that, all we have to do is using Node’s package manager <code>npm</code>, using the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>This will make Embark’s command line tool globally available on our machines. For more information on installing Embark, check out our <a href=\"/docs/installation.html\">Installation Guide</a> in the official documentation.</p>\n<p>With that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it’s no news that it comes with a command to easily scaffold a new application using the <code>new</code> command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren’t necessarily interested in at this point.</p>\n<p>To create an application that really only focusses on Smart Contract development, we can take advantage of the command’s <code>--contracts-only</code> option. Let’s go ahead and do that. In this tutorial we’ll be creating a rather trivial project, namely a simple storage, so let’s call the project <code>simple-storage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new simple-storage --contracts-only</span><br><span class=\"line\">$ cd simple-storage</span><br></pre></td></tr></table></figure>\n\n<p>Once Embark is done, we’ve got a new folder <code>simple-storage</code> in our current working directory that has everything we need to build a Smart Contract only decentralized application. After <code>cd</code>‘ing into it, we’ll see what the project’s structure looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">├── contracts.js</span><br><span class=\"line\">└── embark.json</span><br><span class=\"line\">└── package.json</span><br></pre></td></tr></table></figure>\n\n<p>This is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the <code>contracts</code> folder, in which, you guessed it, our Smart Contract source files go and the <code>contracts.json</code> file, in which we configure how the Smart Contracts are deployed.</p>\n<p>For a more detailed description about every possible application file generated by Embark, head over to our <a href=\"/docs/structure.html\">Application Structure</a> documentation.</p>\n<h2 id=\"Creating-and-deploying-Smart-Contracts\"><a href=\"#Creating-and-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Creating and deploying Smart Contracts\"></a>Creating and deploying Smart Contracts</h2><p>Let’s go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we’re about to create is rather trivial, as we want to focus on how to take advantage of Embark’s features rather than how to implement complex applications. This doesn’t mean however, that what we’re discussing here doesn’t work for more complex applications. Everything we do here, you can do in with any other DApp!</p>\n<p>The idea of the <code>SimpleStorage</code> Smart Contract is really just to store a simple value. All we need are methods to set and get that value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">pragma solidity ^0.5.0;</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(uint initialValue) public &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) public &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function get() public view returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We put this Smart Contract into <code>./contracts/simple-storage.sol</code>. Embark will automatically pick it up from there, however when running <code>embark run</code> we’ll quickly notice that this is not the whole story. Here’s what Embark will output:</p>\n<blockquote>\n<p>“[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.”</p>\n</blockquote>\n<p>What Embark is telling us here is that it’s well aware that there’s a <code>SimpleStorage</code> Smart Contract, however, there’s no dedicated configuration set up for the currently used environment to deploy that Smart Contract. <a href=\"/docs/environments.html\">Environments are an essential feature</a> of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.</p>\n<p>Let’s open our project’s <code>contracts.js</code> file and head down to the <code>contracts</code> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; example:</span><br><span class=\"line\">  &#x2F;&#x2F;SimpleStorage: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F;  args: [ 100 ]</span><br><span class=\"line\">  &#x2F;&#x2F;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>As we can see, we’re already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the <code>contracts</code> object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the <a href=\"/docs/contracts_configuration.html\">Smart Contract Configuration Guide</a>.</p>\n<p>For now, let’s just take the suggested example in the comments and set the constructor parameter of <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [ 100 ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If our Smart Contracts happens to have more constructor parameters, we can simply add more values to <code>args</code> in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: &#123; initialValue: 100 &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Having that set up, we can execute <code>embark run</code> again, which should result in a successful deployment of our Smart Contract.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Deploying contracts</span><br><span class=\"line\">deploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">SimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">Finished deploying contracts</span><br></pre></td></tr></table></figure>\n\n<p>Embark not only tells gives us the transaction hash of the deployment for <code>SimpleStorage</code> as soon as possible, it also gives us the estimated and confirmed cost of the transaction.</p>\n<p><strong>Try it yourself!</strong></p>\n<h2 id=\"Interacting-with-Smart-Contracts-using-Embark’s-console\"><a href=\"#Interacting-with-Smart-Contracts-using-Embark’s-console\" class=\"headerlink\" title=\"Interacting with Smart Contracts using Embark’s console\"></a>Interacting with Smart Contracts using Embark’s console</h2><p>Another powerful feature we shouldn’t forget is Embark’s console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.</p>\n<p>After executing <code>embark run</code>, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the <code>help</code> command and see what happens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark’s command line tool you’re using):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Welcome to Embark 4.0.0</span><br><span class=\"line\"></span><br><span class=\"line\">possible commands are:</span><br><span class=\"line\">ipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)</span><br><span class=\"line\">swarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)</span><br><span class=\"line\">web3 - instantiated web3.js object configured to the current environment</span><br><span class=\"line\">EmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.</span><br><span class=\"line\">log &lt;process&gt; on&#x2F;off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver</span><br><span class=\"line\">versions - display versions in use for libraries and tools like web3 and solc</span><br><span class=\"line\">profile &lt;contractName&gt; - Outputs the function profile of a contract</span><br><span class=\"line\">debug &lt;txHash&gt; - Debug the last transaction or the transaction specified by a hash</span><br><span class=\"line\">    next&#x2F;n - During a debug, step over forward</span><br><span class=\"line\">    previous&#x2F;p - During a debug, step over back</span><br><span class=\"line\">    var local&#x2F;v l&#x2F;vl - During a debug, display local variables</span><br><span class=\"line\">    var global&#x2F;v g&#x2F;vg - During a debug, display global variables</span><br><span class=\"line\">    var all&#x2F;v a&#x2F;va - During a debug, display all variables</span><br><span class=\"line\">history &lt;optionalLength&gt; - display console commands history</span><br><span class=\"line\">token - Copies and prints the token for the cockpit</span><br><span class=\"line\">api start&#x2F;stop - Start or stop the API</span><br><span class=\"line\">plugin install &lt;package&gt; - Installs a plugin in the Dapp. eg: plugin install embark-solc</span><br><span class=\"line\">quit - to immediatly exit (alias: exit)</span><br><span class=\"line\"></span><br><span class=\"line\">The web3 object and the interfaces for the deployed contracts and their methods are also available</span><br></pre></td></tr></table></figure>\n\n<p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>In fact, we can go ahead and execute the Smart Contract’s methods if we want to! For example, if we want to confirm that the constructor parameter for <code>initialValue</code> was indeed set to <code>100</code>, we can simply call <code>SimpleStorage</code>‘s <code>get</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.method.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the <code>await</code> keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. <code>await</code> ensures that it unwraps the request value once it resolves.</p>\n<h2 id=\"Where-to-go-from-here\"><a href=\"#Where-to-go-from-here\" class=\"headerlink\" title=\"Where to go from here\"></a>Where to go from here</h2><p>Obviously we’ve only touched the tip of the iceberg when it comes to Embark’s built-in features. We highly recommend checking out all of the guide in our <a href=\"/docs\">official documentation</a>, as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.</p>\n<p>Also, there’ll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there’s anything you miss in Embark, make sure to talk to us in our <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">chatroom</a> so we can discuss what we can do to improve the tooling you need!</p>\n"},{"title":"Building a decentralized Reddit with Embark - Part 1","author":"pascal_precht","summary":"Ever wanted to know what it needs to build a decentralized equivalent of a social platform like Reddit? In this three part tutorial series we're going to build one from scratch!","layout":"blog-post","alias":"news/2019/02/03/building-a-decentralized-reddit-with-embark-part-1/","_content":"\nIn this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.\n\nThis tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:\n\n- **Part 1** - Setting up the project and implementing a Smart Contract\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nLet's get right to it!\n\n## Functionality Overview\n\nAlright, let's start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won't be able to rebuild it completely. Instead, we'll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.\n\nThe idea is very simple: Our app is called **DReddit** which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.\n\nWe will create a Smart Contract that implements the features of posting topics and voting on them. There's going to be a UI as well, built with React, but we'll do that in the third part of this series.\n\n## Setting up the application\n\nIf you've read our guide on [Creating Applications](/docs/create_project.html) or our last tutorial on [Building Smart Contract only apps](/news/2019/01/22/building-smart-contract-only-dapps/), you know that Embark comes with a `new` command to scaffold an application. We're going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to [our docs](/docs/installation.html), otherwise, simply run the following command in your terminal of choice:\n\n```\n$ npm install -g embark\n```\n\nNext, we'll create and set up our app using the `new` command:\n\n```\n$ embark new dreddit\n$ cd dreddit\n```\n\nNow is a good time to familiarize ourselves with the project structure. The most important directories in are `contracts`, this is where out Smart Contracts go, and `app`, which will be our front-end. Take your time to take a look and check out our [Application Structure](/docs/structure.html) guide for more detailed overview.\n\nAlso, to ensure and double-check that everything's working, we can run the application using Embark's `run` command:\n\n```\n$ embark run\n```\n\nIf there are any issues in the \"Available Services\" section of the dashboard, go back to our [installation guide](/docs/installation.html) and make sure all tools are available on your machine.\n\n## Creating the Smart Contract\n\nAlright, next up we want to create the brain of our application, which is a Smart Contract written in [Solidity](https://solidity.readthedocs.io/en/v0.5.3/), that enables creating posts and votes. We're going to build it up step by step and afterwards we'll add some tests to ensure our code is actually working.\n\nFirst thing we do is creating a file `DReddit.sol` inside `contracts` with a Smart Contract like this:\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}\n{% endcode_block %}\n\nGreat! With that in place, let's introduce a couple of data structures for creating and storing topic posts. Let's say a post will have a creation date, a description and an address of the owner. There's a few more things we'll have to add, but let's do it one step at a time. Here's what a `Post` struct could look like:\n\n{% code_block copyBtn:true %}\nstruct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}\n{% endcode_block %}\n\nWe're also going to add an array to store all of our posts. Now that we have a `Post` struct, this is a simple as:\n\n{% code_block copyBtn:true %}\nPost [] public posts;\n{% endcode_block %}\n\n### Creating posts\n\nIt's time to add our first method which will enable users to add new posts to the platform. For that, we'll create the method `createPost(bytes _description)` where `_description` are the bytes that represent the posts text.\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}\n{% endcode_block %}\n\nThe first thing we do is creating an id for the post to be stored. We then use our `Post` struct to create a new post instance. Notice that we leverage the `postId` when storing the Post in our `posts` array. To set the owner, we take advantage of Solidity's global `msg` object which is available in every transaction.\n\n### Emitting events\n\nAs we're planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type `NewPost` which will look something like this:\n\n\n{% code_block copyBtn:true %}\nevent NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)\n{% endcode_block %}\n\nOnce that is done, all we have to do is emit `NewPost` inside `createPost()` with the required data:\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}\n{% endcode_block %}\n\n### Up and down voting posts\n\nAs mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our `Post` struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event `NewVote` for the same reasons we've introduced `NewPost` earlier. Once that is done, we can add a method that performs actual votes.\n\nLet's start by adding an enum type calld `Ballot` that aggregates possible vote types:\n\n```\nenum Ballot { NONE, UPVOTE, DOWNVOTE }\n```\n\nTo store votes on posts, we'll add an `upvotes` and `downvotes` counter to our `Post` struct accordingly. We'll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:\n\n```\nstruct Post {\n  ...\n  uint upvotes;\n  uint downvotes;\n  mapping(address => Ballot) voters;\n}\n```\n\nHere's the `NewPost` event which we'll use in a few moments:\n\n{% code_block copyBtn:true %}\nevent NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);\n{% endcode_block %}\n\nLast but not least, we have to update our `createPost()` function as the `Post` struct now needs `upvotes` and `downvotes`:\n\n\n```\nfunction createPost(bytes _description) public {\n  ...\n  posts[postId] = Post({\n    ...\n    upvotes: 0,\n    downvotes: 0\n  });\n}\n```\n\nWith these building blocks at hand, let's implement a `vote(uint postId, uint8 _vote)` method. `_vote` is going to be one of our defined `Ballot` types and is represented as uint going from 0 - 2. We'll use Solidity's `require()` statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.\n\nWe then increment the up or down vote counter respectively, store the voter and emit a `NewVote` event:\n\n{% code_block copyBtn:true %}\nfunction vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, \"Post does not exist\");\n  require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}\n{% endcode_block %}\n\n### Determine if users can vote\n\nWe probably want to add an indication to the UI that a user has already voted on a certain post. For that it'd be handy to have an API that actually tells us whether a user can vote on a post. We've already discussed earlier that users can't vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here's what a `canVote(uint _postId)` method could look like:\n\n{% code_block copyBtn:true %}\nfunction canVote(uint _postId) public view returns (bool) {\n  if (_postId > posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}\n{% endcode_block %}\n\n### Fetching votes\n\nWe also need a way to actually let users check what they've voted for, in case they did. For that we'll add a simple `getVote()` method that looks something like this:\n\n{% code_block copyBtn:true %}\nfunction getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}\n{% endcode_block %}\n\nAnd with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute `embark build --contracts` in case there's no existing Embark instance watching our work already.\n\nHere's the complete Smart Contract code (you can also find it in [this repository](https://github.com/embarklabs/dreddit-tutorial):\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address => Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, \"Post does not exist\");\n    require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId > posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}\n{% endcode_block %}\n\nWonderful! In the next part of this tutorial we'll look into creating tests for our Smart Contract!\n","source":"_posts/2019-02-04-building-a-decentralized-reddit-with-embark-part-1.md","raw":"title: Building a decentralized Reddit with Embark - Part 1\nauthor: pascal_precht\nsummary: \"Ever wanted to know what it needs to build a decentralized equivalent of a social platform like Reddit? In this three part tutorial series we're going to build one from scratch!\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/02/03/building-a-decentralized-reddit-with-embark-part-1/\n---\n\nIn this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.\n\nThis tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:\n\n- **Part 1** - Setting up the project and implementing a Smart Contract\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nLet's get right to it!\n\n## Functionality Overview\n\nAlright, let's start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won't be able to rebuild it completely. Instead, we'll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.\n\nThe idea is very simple: Our app is called **DReddit** which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.\n\nWe will create a Smart Contract that implements the features of posting topics and voting on them. There's going to be a UI as well, built with React, but we'll do that in the third part of this series.\n\n## Setting up the application\n\nIf you've read our guide on [Creating Applications](/docs/create_project.html) or our last tutorial on [Building Smart Contract only apps](/news/2019/01/22/building-smart-contract-only-dapps/), you know that Embark comes with a `new` command to scaffold an application. We're going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to [our docs](/docs/installation.html), otherwise, simply run the following command in your terminal of choice:\n\n```\n$ npm install -g embark\n```\n\nNext, we'll create and set up our app using the `new` command:\n\n```\n$ embark new dreddit\n$ cd dreddit\n```\n\nNow is a good time to familiarize ourselves with the project structure. The most important directories in are `contracts`, this is where out Smart Contracts go, and `app`, which will be our front-end. Take your time to take a look and check out our [Application Structure](/docs/structure.html) guide for more detailed overview.\n\nAlso, to ensure and double-check that everything's working, we can run the application using Embark's `run` command:\n\n```\n$ embark run\n```\n\nIf there are any issues in the \"Available Services\" section of the dashboard, go back to our [installation guide](/docs/installation.html) and make sure all tools are available on your machine.\n\n## Creating the Smart Contract\n\nAlright, next up we want to create the brain of our application, which is a Smart Contract written in [Solidity](https://solidity.readthedocs.io/en/v0.5.3/), that enables creating posts and votes. We're going to build it up step by step and afterwards we'll add some tests to ensure our code is actually working.\n\nFirst thing we do is creating a file `DReddit.sol` inside `contracts` with a Smart Contract like this:\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}\n{% endcode_block %}\n\nGreat! With that in place, let's introduce a couple of data structures for creating and storing topic posts. Let's say a post will have a creation date, a description and an address of the owner. There's a few more things we'll have to add, but let's do it one step at a time. Here's what a `Post` struct could look like:\n\n{% code_block copyBtn:true %}\nstruct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}\n{% endcode_block %}\n\nWe're also going to add an array to store all of our posts. Now that we have a `Post` struct, this is a simple as:\n\n{% code_block copyBtn:true %}\nPost [] public posts;\n{% endcode_block %}\n\n### Creating posts\n\nIt's time to add our first method which will enable users to add new posts to the platform. For that, we'll create the method `createPost(bytes _description)` where `_description` are the bytes that represent the posts text.\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}\n{% endcode_block %}\n\nThe first thing we do is creating an id for the post to be stored. We then use our `Post` struct to create a new post instance. Notice that we leverage the `postId` when storing the Post in our `posts` array. To set the owner, we take advantage of Solidity's global `msg` object which is available in every transaction.\n\n### Emitting events\n\nAs we're planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type `NewPost` which will look something like this:\n\n\n{% code_block copyBtn:true %}\nevent NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)\n{% endcode_block %}\n\nOnce that is done, all we have to do is emit `NewPost` inside `createPost()` with the required data:\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}\n{% endcode_block %}\n\n### Up and down voting posts\n\nAs mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our `Post` struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event `NewVote` for the same reasons we've introduced `NewPost` earlier. Once that is done, we can add a method that performs actual votes.\n\nLet's start by adding an enum type calld `Ballot` that aggregates possible vote types:\n\n```\nenum Ballot { NONE, UPVOTE, DOWNVOTE }\n```\n\nTo store votes on posts, we'll add an `upvotes` and `downvotes` counter to our `Post` struct accordingly. We'll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:\n\n```\nstruct Post {\n  ...\n  uint upvotes;\n  uint downvotes;\n  mapping(address => Ballot) voters;\n}\n```\n\nHere's the `NewPost` event which we'll use in a few moments:\n\n{% code_block copyBtn:true %}\nevent NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);\n{% endcode_block %}\n\nLast but not least, we have to update our `createPost()` function as the `Post` struct now needs `upvotes` and `downvotes`:\n\n\n```\nfunction createPost(bytes _description) public {\n  ...\n  posts[postId] = Post({\n    ...\n    upvotes: 0,\n    downvotes: 0\n  });\n}\n```\n\nWith these building blocks at hand, let's implement a `vote(uint postId, uint8 _vote)` method. `_vote` is going to be one of our defined `Ballot` types and is represented as uint going from 0 - 2. We'll use Solidity's `require()` statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.\n\nWe then increment the up or down vote counter respectively, store the voter and emit a `NewVote` event:\n\n{% code_block copyBtn:true %}\nfunction vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, \"Post does not exist\");\n  require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}\n{% endcode_block %}\n\n### Determine if users can vote\n\nWe probably want to add an indication to the UI that a user has already voted on a certain post. For that it'd be handy to have an API that actually tells us whether a user can vote on a post. We've already discussed earlier that users can't vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here's what a `canVote(uint _postId)` method could look like:\n\n{% code_block copyBtn:true %}\nfunction canVote(uint _postId) public view returns (bool) {\n  if (_postId > posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}\n{% endcode_block %}\n\n### Fetching votes\n\nWe also need a way to actually let users check what they've voted for, in case they did. For that we'll add a simple `getVote()` method that looks something like this:\n\n{% code_block copyBtn:true %}\nfunction getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}\n{% endcode_block %}\n\nAnd with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute `embark build --contracts` in case there's no existing Embark instance watching our work already.\n\nHere's the complete Smart Contract code (you can also find it in [this repository](https://github.com/embarklabs/dreddit-tutorial):\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address => Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, \"Post does not exist\");\n    require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId > posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}\n{% endcode_block %}\n\nWonderful! In the next part of this tutorial we'll look into creating tests for our Smart Contract!\n","slug":"building-a-decentralized-reddit-with-embark-part-1","published":1,"date":"2019-02-04T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3tz002a7hegau443t3p","content":"<p>In this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.</p>\n<p>This tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:</p>\n<ul>\n<li><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>Let’s get right to it!</p>\n<h2 id=\"Functionality-Overview\"><a href=\"#Functionality-Overview\" class=\"headerlink\" title=\"Functionality Overview\"></a>Functionality Overview</h2><p>Alright, let’s start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won’t be able to rebuild it completely. Instead, we’ll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.</p>\n<p>The idea is very simple: Our app is called <strong>DReddit</strong> which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.</p>\n<p>We will create a Smart Contract that implements the features of posting topics and voting on them. There’s going to be a UI as well, built with React, but we’ll do that in the third part of this series.</p>\n<h2 id=\"Setting-up-the-application\"><a href=\"#Setting-up-the-application\" class=\"headerlink\" title=\"Setting up the application\"></a>Setting up the application</h2><p>If you’ve read our guide on <a href=\"/docs/create_project.html\">Creating Applications</a> or our last tutorial on <a href=\"/news/2019/01/22/building-smart-contract-only-dapps/\">Building Smart Contract only apps</a>, you know that Embark comes with a <code>new</code> command to scaffold an application. We’re going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to <a href=\"/docs/installation.html\">our docs</a>, otherwise, simply run the following command in your terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Next, we’ll create and set up our app using the <code>new</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dreddit</span><br><span class=\"line\">$ cd dreddit</span><br></pre></td></tr></table></figure>\n\n<p>Now is a good time to familiarize ourselves with the project structure. The most important directories in are <code>contracts</code>, this is where out Smart Contracts go, and <code>app</code>, which will be our front-end. Take your time to take a look and check out our <a href=\"/docs/structure.html\">Application Structure</a> guide for more detailed overview.</p>\n<p>Also, to ensure and double-check that everything’s working, we can run the application using Embark’s <code>run</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>If there are any issues in the “Available Services” section of the dashboard, go back to our <a href=\"/docs/installation.html\">installation guide</a> and make sure all tools are available on your machine.</p>\n<h2 id=\"Creating-the-Smart-Contract\"><a href=\"#Creating-the-Smart-Contract\" class=\"headerlink\" title=\"Creating the Smart Contract\"></a>Creating the Smart Contract</h2><p>Alright, next up we want to create the brain of our application, which is a Smart Contract written in <a href=\"https://solidity.readthedocs.io/en/v0.5.3/\" target=\"_blank\" rel=\"noopener\">Solidity</a>, that enables creating posts and votes. We’re going to build it up step by step and afterwards we’ll add some tests to ensure our code is actually working.</p>\n<p>First thing we do is creating a file <code>DReddit.sol</code> inside <code>contracts</code> with a Smart Contract like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b973b090-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b973b090-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}</code></pre>\n\n\n<p>Great! With that in place, let’s introduce a couple of data structures for creating and storing topic posts. Let’s say a post will have a creation date, a description and an address of the owner. There’s a few more things we’ll have to add, but let’s do it one step at a time. Here’s what a <code>Post</code> struct could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\">struct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}</code></pre>\n\n\n<p>We’re also going to add an array to store all of our posts. Now that we have a <code>Post</code> struct, this is a simple as:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\">Post [] public posts;</code></pre>\n\n\n<h3 id=\"Creating-posts\"><a href=\"#Creating-posts\" class=\"headerlink\" title=\"Creating posts\"></a>Creating posts</h3><p>It’s time to add our first method which will enable users to add new posts to the platform. For that, we’ll create the method <code>createPost(bytes _description)</code> where <code>_description</code> are the bytes that represent the posts text.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}</code></pre>\n\n\n<p>The first thing we do is creating an id for the post to be stored. We then use our <code>Post</code> struct to create a new post instance. Notice that we leverage the <code>postId</code> when storing the Post in our <code>posts</code> array. To set the owner, we take advantage of Solidity’s global <code>msg</code> object which is available in every transaction.</p>\n<h3 id=\"Emitting-events\"><a href=\"#Emitting-events\" class=\"headerlink\" title=\"Emitting events\"></a>Emitting events</h3><p>As we’re planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type <code>NewPost</code> which will look something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\">event NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)</code></pre>\n\n\n<p>Once that is done, all we have to do is emit <code>NewPost</code> inside <code>createPost()</code> with the required data:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}</code></pre>\n\n\n<h3 id=\"Up-and-down-voting-posts\"><a href=\"#Up-and-down-voting-posts\" class=\"headerlink\" title=\"Up and down voting posts\"></a>Up and down voting posts</h3><p>As mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our <code>Post</code> struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event <code>NewVote</code> for the same reasons we’ve introduced <code>NewPost</code> earlier. Once that is done, we can add a method that performs actual votes.</p>\n<p>Let’s start by adding an enum type calld <code>Ballot</code> that aggregates possible vote types:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">enum Ballot &#123; NONE, UPVOTE, DOWNVOTE &#125;</span><br></pre></td></tr></table></figure>\n\n<p>To store votes on posts, we’ll add an <code>upvotes</code> and <code>downvotes</code> counter to our <code>Post</code> struct accordingly. We’ll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">struct Post &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  uint upvotes;</span><br><span class=\"line\">  uint downvotes;</span><br><span class=\"line\">  mapping(address &#x3D;&gt; Ballot) voters;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here’s the <code>NewPost</code> event which we’ll use in a few moments:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\">event NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);</code></pre>\n\n\n<p>Last but not least, we have to update our <code>createPost()</code> function as the <code>Post</code> struct now needs <code>upvotes</code> and <code>downvotes</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function createPost(bytes _description) public &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  posts[postId] &#x3D; Post(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    upvotes: 0,</span><br><span class=\"line\">    downvotes: 0</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With these building blocks at hand, let’s implement a <code>vote(uint postId, uint8 _vote)</code> method. <code>_vote</code> is going to be one of our defined <code>Ballot</code> types and is represented as uint going from 0 - 2. We’ll use Solidity’s <code>require()</code> statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.</p>\n<p>We then increment the up or down vote counter respectively, store the voter and emit a <code>NewVote</code> event:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\">function vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, &quot;Post does not exist&quot;);\n  require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}</code></pre>\n\n\n<h3 id=\"Determine-if-users-can-vote\"><a href=\"#Determine-if-users-can-vote\" class=\"headerlink\" title=\"Determine if users can vote\"></a>Determine if users can vote</h3><p>We probably want to add an indication to the UI that a user has already voted on a certain post. For that it’d be handy to have an API that actually tells us whether a user can vote on a post. We’ve already discussed earlier that users can’t vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here’s what a <code>canVote(uint _postId)</code> method could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994f431-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994f431-395d-11ea-a728-e7cbf6b69d7f\">function canVote(uint _postId) public view returns (bool) {\n  if (_postId &gt; posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}</code></pre>\n\n\n<h3 id=\"Fetching-votes\"><a href=\"#Fetching-votes\" class=\"headerlink\" title=\"Fetching votes\"></a>Fetching votes</h3><p>We also need a way to actually let users check what they’ve voted for, in case they did. For that we’ll add a simple <code>getVote()</code> method that looks something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\">function getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}</code></pre>\n\n\n<p>And with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute <code>embark build --contracts</code> in case there’s no existing Embark instance watching our work already.</p>\n<p>Here’s the complete Smart Contract code (you can also find it in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address =&gt; Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, &quot;Post does not exist&quot;);\n    require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId &gt; posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}</code></pre>\n\n\n<p>Wonderful! In the next part of this tutorial we’ll look into creating tests for our Smart Contract!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.</p>\n<p>This tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:</p>\n<ul>\n<li><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>Let’s get right to it!</p>\n<h2 id=\"Functionality-Overview\"><a href=\"#Functionality-Overview\" class=\"headerlink\" title=\"Functionality Overview\"></a>Functionality Overview</h2><p>Alright, let’s start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won’t be able to rebuild it completely. Instead, we’ll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.</p>\n<p>The idea is very simple: Our app is called <strong>DReddit</strong> which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.</p>\n<p>We will create a Smart Contract that implements the features of posting topics and voting on them. There’s going to be a UI as well, built with React, but we’ll do that in the third part of this series.</p>\n<h2 id=\"Setting-up-the-application\"><a href=\"#Setting-up-the-application\" class=\"headerlink\" title=\"Setting up the application\"></a>Setting up the application</h2><p>If you’ve read our guide on <a href=\"/docs/create_project.html\">Creating Applications</a> or our last tutorial on <a href=\"/news/2019/01/22/building-smart-contract-only-dapps/\">Building Smart Contract only apps</a>, you know that Embark comes with a <code>new</code> command to scaffold an application. We’re going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to <a href=\"/docs/installation.html\">our docs</a>, otherwise, simply run the following command in your terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Next, we’ll create and set up our app using the <code>new</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dreddit</span><br><span class=\"line\">$ cd dreddit</span><br></pre></td></tr></table></figure>\n\n<p>Now is a good time to familiarize ourselves with the project structure. The most important directories in are <code>contracts</code>, this is where out Smart Contracts go, and <code>app</code>, which will be our front-end. Take your time to take a look and check out our <a href=\"/docs/structure.html\">Application Structure</a> guide for more detailed overview.</p>\n<p>Also, to ensure and double-check that everything’s working, we can run the application using Embark’s <code>run</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>If there are any issues in the “Available Services” section of the dashboard, go back to our <a href=\"/docs/installation.html\">installation guide</a> and make sure all tools are available on your machine.</p>\n<h2 id=\"Creating-the-Smart-Contract\"><a href=\"#Creating-the-Smart-Contract\" class=\"headerlink\" title=\"Creating the Smart Contract\"></a>Creating the Smart Contract</h2><p>Alright, next up we want to create the brain of our application, which is a Smart Contract written in <a href=\"https://solidity.readthedocs.io/en/v0.5.3/\" target=\"_blank\" rel=\"noopener\">Solidity</a>, that enables creating posts and votes. We’re going to build it up step by step and afterwards we’ll add some tests to ensure our code is actually working.</p>\n<p>First thing we do is creating a file <code>DReddit.sol</code> inside <code>contracts</code> with a Smart Contract like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b973b090-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b973b090-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}</code></pre>\n\n\n<p>Great! With that in place, let’s introduce a couple of data structures for creating and storing topic posts. Let’s say a post will have a creation date, a description and an address of the owner. There’s a few more things we’ll have to add, but let’s do it one step at a time. Here’s what a <code>Post</code> struct could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\">struct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}</code></pre>\n\n\n<p>We’re also going to add an array to store all of our posts. Now that we have a <code>Post</code> struct, this is a simple as:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\">Post [] public posts;</code></pre>\n\n\n<h3 id=\"Creating-posts\"><a href=\"#Creating-posts\" class=\"headerlink\" title=\"Creating posts\"></a>Creating posts</h3><p>It’s time to add our first method which will enable users to add new posts to the platform. For that, we’ll create the method <code>createPost(bytes _description)</code> where <code>_description</code> are the bytes that represent the posts text.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}</code></pre>\n\n\n<p>The first thing we do is creating an id for the post to be stored. We then use our <code>Post</code> struct to create a new post instance. Notice that we leverage the <code>postId</code> when storing the Post in our <code>posts</code> array. To set the owner, we take advantage of Solidity’s global <code>msg</code> object which is available in every transaction.</p>\n<h3 id=\"Emitting-events\"><a href=\"#Emitting-events\" class=\"headerlink\" title=\"Emitting events\"></a>Emitting events</h3><p>As we’re planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type <code>NewPost</code> which will look something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\">event NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)</code></pre>\n\n\n<p>Once that is done, all we have to do is emit <code>NewPost</code> inside <code>createPost()</code> with the required data:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}</code></pre>\n\n\n<h3 id=\"Up-and-down-voting-posts\"><a href=\"#Up-and-down-voting-posts\" class=\"headerlink\" title=\"Up and down voting posts\"></a>Up and down voting posts</h3><p>As mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our <code>Post</code> struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event <code>NewVote</code> for the same reasons we’ve introduced <code>NewPost</code> earlier. Once that is done, we can add a method that performs actual votes.</p>\n<p>Let’s start by adding an enum type calld <code>Ballot</code> that aggregates possible vote types:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">enum Ballot &#123; NONE, UPVOTE, DOWNVOTE &#125;</span><br></pre></td></tr></table></figure>\n\n<p>To store votes on posts, we’ll add an <code>upvotes</code> and <code>downvotes</code> counter to our <code>Post</code> struct accordingly. We’ll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">struct Post &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  uint upvotes;</span><br><span class=\"line\">  uint downvotes;</span><br><span class=\"line\">  mapping(address &#x3D;&gt; Ballot) voters;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here’s the <code>NewPost</code> event which we’ll use in a few moments:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\">event NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);</code></pre>\n\n\n<p>Last but not least, we have to update our <code>createPost()</code> function as the <code>Post</code> struct now needs <code>upvotes</code> and <code>downvotes</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function createPost(bytes _description) public &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  posts[postId] &#x3D; Post(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    upvotes: 0,</span><br><span class=\"line\">    downvotes: 0</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With these building blocks at hand, let’s implement a <code>vote(uint postId, uint8 _vote)</code> method. <code>_vote</code> is going to be one of our defined <code>Ballot</code> types and is represented as uint going from 0 - 2. We’ll use Solidity’s <code>require()</code> statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.</p>\n<p>We then increment the up or down vote counter respectively, store the voter and emit a <code>NewVote</code> event:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\">function vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, &quot;Post does not exist&quot;);\n  require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}</code></pre>\n\n\n<h3 id=\"Determine-if-users-can-vote\"><a href=\"#Determine-if-users-can-vote\" class=\"headerlink\" title=\"Determine if users can vote\"></a>Determine if users can vote</h3><p>We probably want to add an indication to the UI that a user has already voted on a certain post. For that it’d be handy to have an API that actually tells us whether a user can vote on a post. We’ve already discussed earlier that users can’t vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here’s what a <code>canVote(uint _postId)</code> method could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994f431-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994f431-395d-11ea-a728-e7cbf6b69d7f\">function canVote(uint _postId) public view returns (bool) {\n  if (_postId &gt; posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}</code></pre>\n\n\n<h3 id=\"Fetching-votes\"><a href=\"#Fetching-votes\" class=\"headerlink\" title=\"Fetching votes\"></a>Fetching votes</h3><p>We also need a way to actually let users check what they’ve voted for, in case they did. For that we’ll add a simple <code>getVote()</code> method that looks something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\">function getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}</code></pre>\n\n\n<p>And with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute <code>embark build --contracts</code> in case there’s no existing Embark instance watching our work already.</p>\n<p>Here’s the complete Smart Contract code (you can also find it in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address =&gt; Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, &quot;Post does not exist&quot;);\n    require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId &gt; posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}</code></pre>\n\n\n<p>Wonderful! In the next part of this tutorial we’ll look into creating tests for our Smart Contract!</p>\n"},{"title":"Building a decentralized Reddit with Embark - Part 2","author":"pascal_precht","summary":"This is the second part of the three part tutorial about building a decentralized Reddit with Embark. In this part, we'll be focussing on testing our Smart Contract using EmbarkJS.","layout":"blog-post","alias":"news/2019/02/10/building-a-decentralized-reddit-with-embark-part-2/","_content":"\nIn [the first part of this tutorial](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) we've implemented a `DReddit` Smart Contract that comes with methods to create and vote on topic posts. In this part we'll continue right where we've left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nAnd off we go!\n\n## Writing a first test\n\nWe've got plenty functionality to cover in our tests, but let's start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file `DReddit_spec.js` inside `test` and add a `contract()` block that looks something like this:\n\n```\ncontract('DReddit', () => {\n\n});\n```\n\nInside this code block we'll be putting dedicated test cases. The `contract()` function can be considered a \"grouping\" functionality to group tests, if you will. If you're familiar with Mocha's [describe()](https://mochajs.org/) function, you already know how `contract()` works, as it's pretty much just an alias.\n\nTo check whether our test setup is working, we add a simple test that passes:\n\n```\ncontract('DReddit', () => {\n\n  it ('should work', () => {\n    assert.ok(true);\n  });\n});\n```\n\nRunning this using Embark's `test` command should result in an output similar to this:\n\n```\n❯ embark test\n\n\nCompiling contracts\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n\n\n  1 passing (5s) - [Total: 2210775 gas]\n\n > All tests passed\n```\n\nThis works great, let's go ahead and test some actual functionality!\n\n## Testing the creation of post\n\nLet's test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our `DReddit` Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.\n\n### Requiring Smart Contract instances\n\nWhen running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom `require()` that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import\n\nFor example, in order to get an instance of our `DReddit` Smart Contract within the test, we add the following line to our spec file:\n\n\n```\nconst DReddit = require('Embark/contracts/DReddit');\n```\n\n`DReddit` is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. **In reality, this object is empty**. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, `config()`, to let Embark know, which Smart Contracts we're interested in in the first place. This might be a little confusing, but really the bottom line is that `DReddit` isn't what we think it is, until we use it inside `contract()`.\n\nLet's add the mentioned `config()` function so Embark knows what we need:\n\n```\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n});\n```\n\nThis is very similar to [configuring Smart Contracts](/docs/contracts_configuration.html), in fact it's the test environment equivalent. We pass a configuration object to `config()` with specific parameters for every Smart Contract we need. In our case, we just need to add `DReddit` without any additional parameters. This is because our Smart Contract doesn't need constructor values and things alike. Keep in mind, if we don't call this `config()` function, the imported objects for our Smart Contract instances will always be empty.\n\n### Testing `createPost()`\n\nTo test our Smart Contract's `createPost()` method, we'll make use of `DReddit`, which will now be a Smart Contract instance. If you remember, `createPost()` actually takes the post's description as bytes, so how do we make that work? Well, it turns out that we actually don't pass it the description itself, but an **IPFS hash** that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It's better to store the actual description in a storage where data size isn't an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.\n\nOnce we have such a hash (no worries, we've got one prepared), we can use Web3's `fromAscii()` utils to convert that hash to bytes and then send it off using our Smart Contract's `createPost()` method. We can then subscribe to the events we're emitting and check its return value like this:\n\n```\n...\nconst ipfsHash = 'Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z';\n\ncontract('DReddit', () => {\n  ...\n  it ('should be able to create a post and receive it via contract event', async () => {\n    const receipt = await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();\n    const event = receipt.events.NewPost;\n    postId = event.returnValues.postId;\n    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);\n  });\n});\n```\n\nNotice that we're using `async/await` here because Embark's Smart Contract instance methods return promises. The same can be done without promises as well, it's just a syntactical difference at this point. Running `embark test` should result in two passing tests now!\n\n## Testing correctness of data\n\nAnother good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we're testing in our previous test - there we're testing the description bytes emitted by the `NewPost` event. To test this we take advantage of the `postId` created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.\n\nLuckily wallet accounts can be easily accessed as they are emitted by Embark's `config()` function. All we have to do is attaching a resolution handler to `config()` and storing the emitted value:\n\n```\n...\nlet accounts = [];\n\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n```\n\nHaving that in place, our next test could look something like this:\n\n```\nit ('post should have correct data', async () => {\n  const post = await DReddit.methods.posts(postId).call();\n  assert.equal(web3.utils.toAscii(post.description), ipfsHash);\n  assert.equal(post.owner, accounts[0]);\n});\n```\n\nYou might notice that we're referring to `accounts[0]` here. However, just by looking at the code, we can't really know if `accounts[0]` is really the one we're expecting. This is where Embark offers another helping hand. When the `accounts` are set up, Embark will automatically set the first account of the wallet (`accounts[0]`) to the default account that'll be used for all transactions. With that knowledge we can make an assertion, expecting `accounts[0]` to be the owner of the post.\n\nAnother way would be to just always explicitly pass any of the accounts to a Smart Contract method's `send()` function, in which case we'd have full control over which account of the wallet will be used.\n\n## Testing `canVote()`\n\nAlright, next up let's quickly test if our `canVote()` method works the way as expected. As voting on posts that don't exist should never work, we will simply call `canVote()` on a post id that doesn't exist. This test is pretty straight forward:\n\n```\nit('should not be able to vote in an unexisting post', async () => {\n  const userCanVote = await DReddit.methods.canVote(\"123\").call();\n  assert.equal(userCanVote, false);\n});\n```\n\nWe also want to make sure that `canVote()` resolves to `true` in case a user can indeed vote a certain post. We can again reuse the `postId` that we've stored earlier:\n\n```\nit('should be able to vote in a post if account has not voted before', async () => {\n  const userCanVote = await DReddit.methods.canVote(postId).call();\n  assert.equal(userCanVote, true);\n});\n```\n\nWonderful, we have 5 passing tests now!\n\n## Testing `vote()`\n\nOf course we want to test whether one of our application's core features works as well. There's certainly different ways to verify whether `vote()` does what it's supposed to do, but for this tutorial we'll simply check whether the owner account of the vote emitted by the `NewVote` event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:\n\n```\nit(\"should be able to vote in a post\", async () => {\n  const receipt = await DReddit.methods.vote(postId, 1).send();\n  const Vote = receipt.events.NewVote;\n  assert.equal(Vote.returnValues.owner, accounts[0]);\n});\n```\n\n## Test that only one vote per post is allowed\n\nThe last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn't be possible. Using the `async/await` syntax we can test this very nicely by adding a `try/catch` block. When a user votes on a post she has already voted on, `vote()` will fail in which case we can make our assertions accordingly:\n\n```\nit('should not be able to vote twice', async () => {\n  try {\n    const receipt = await DReddit.methods.vote(postId, 1).send();\n    assert.fail('should have reverted');\n  } catch (error){\n    assert(error.message.search('revert') > -1, 'Revert should happen');\n  }\n});\n```\n\nThis might look a bit confusing first but it's actually pretty straight forward. In case `vote()` fails, we should not reach the `assert.fail()` call but end up in the `catch()` block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.\n\nOkay, one last time we run `embark test` and if the output looks like the following, we're fully covered in terms of tests!\n\n\n```\n❯ embark test\nCompiling contracts\n\n\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]\n    ✓ post should have correct data (18ms) - [0 gas]\n    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]\n    ✓ should be able to vote in a post if account hasn't voted before (12ms) - [0 gas]\n    ✓ should be able to vote in a post (42ms) - [65115 gas]\n    ✓ shouldn't be able to vote twice (37ms) - [22815 gas]\n\n\n  7 passing (5s) - [Total: 3130955 gas]\n\n > All tests passed\n```\n\n Awesome! If you run into any issues, check out the repository with all steps recorded [here](https://github.com/embarklabs/dreddit-tutorial). In [the next and last part of this series](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/), we'll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!\n","source":"_posts/2019-02-11-building-a-decentralized-reddit-with-embark-part-2.md","raw":"title: Building a decentralized Reddit with Embark - Part 2\nauthor: 'pascal_precht'\nsummary: \"This is the second part of the three part tutorial about building a decentralized Reddit with Embark. In this part, we'll be focussing on testing our Smart Contract using EmbarkJS.\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/02/10/building-a-decentralized-reddit-with-embark-part-2/\n---\n\nIn [the first part of this tutorial](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) we've implemented a `DReddit` Smart Contract that comes with methods to create and vote on topic posts. In this part we'll continue right where we've left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nAnd off we go!\n\n## Writing a first test\n\nWe've got plenty functionality to cover in our tests, but let's start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file `DReddit_spec.js` inside `test` and add a `contract()` block that looks something like this:\n\n```\ncontract('DReddit', () => {\n\n});\n```\n\nInside this code block we'll be putting dedicated test cases. The `contract()` function can be considered a \"grouping\" functionality to group tests, if you will. If you're familiar with Mocha's [describe()](https://mochajs.org/) function, you already know how `contract()` works, as it's pretty much just an alias.\n\nTo check whether our test setup is working, we add a simple test that passes:\n\n```\ncontract('DReddit', () => {\n\n  it ('should work', () => {\n    assert.ok(true);\n  });\n});\n```\n\nRunning this using Embark's `test` command should result in an output similar to this:\n\n```\n❯ embark test\n\n\nCompiling contracts\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n\n\n  1 passing (5s) - [Total: 2210775 gas]\n\n > All tests passed\n```\n\nThis works great, let's go ahead and test some actual functionality!\n\n## Testing the creation of post\n\nLet's test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our `DReddit` Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.\n\n### Requiring Smart Contract instances\n\nWhen running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom `require()` that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import\n\nFor example, in order to get an instance of our `DReddit` Smart Contract within the test, we add the following line to our spec file:\n\n\n```\nconst DReddit = require('Embark/contracts/DReddit');\n```\n\n`DReddit` is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. **In reality, this object is empty**. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, `config()`, to let Embark know, which Smart Contracts we're interested in in the first place. This might be a little confusing, but really the bottom line is that `DReddit` isn't what we think it is, until we use it inside `contract()`.\n\nLet's add the mentioned `config()` function so Embark knows what we need:\n\n```\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n});\n```\n\nThis is very similar to [configuring Smart Contracts](/docs/contracts_configuration.html), in fact it's the test environment equivalent. We pass a configuration object to `config()` with specific parameters for every Smart Contract we need. In our case, we just need to add `DReddit` without any additional parameters. This is because our Smart Contract doesn't need constructor values and things alike. Keep in mind, if we don't call this `config()` function, the imported objects for our Smart Contract instances will always be empty.\n\n### Testing `createPost()`\n\nTo test our Smart Contract's `createPost()` method, we'll make use of `DReddit`, which will now be a Smart Contract instance. If you remember, `createPost()` actually takes the post's description as bytes, so how do we make that work? Well, it turns out that we actually don't pass it the description itself, but an **IPFS hash** that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It's better to store the actual description in a storage where data size isn't an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.\n\nOnce we have such a hash (no worries, we've got one prepared), we can use Web3's `fromAscii()` utils to convert that hash to bytes and then send it off using our Smart Contract's `createPost()` method. We can then subscribe to the events we're emitting and check its return value like this:\n\n```\n...\nconst ipfsHash = 'Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z';\n\ncontract('DReddit', () => {\n  ...\n  it ('should be able to create a post and receive it via contract event', async () => {\n    const receipt = await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();\n    const event = receipt.events.NewPost;\n    postId = event.returnValues.postId;\n    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);\n  });\n});\n```\n\nNotice that we're using `async/await` here because Embark's Smart Contract instance methods return promises. The same can be done without promises as well, it's just a syntactical difference at this point. Running `embark test` should result in two passing tests now!\n\n## Testing correctness of data\n\nAnother good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we're testing in our previous test - there we're testing the description bytes emitted by the `NewPost` event. To test this we take advantage of the `postId` created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.\n\nLuckily wallet accounts can be easily accessed as they are emitted by Embark's `config()` function. All we have to do is attaching a resolution handler to `config()` and storing the emitted value:\n\n```\n...\nlet accounts = [];\n\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n```\n\nHaving that in place, our next test could look something like this:\n\n```\nit ('post should have correct data', async () => {\n  const post = await DReddit.methods.posts(postId).call();\n  assert.equal(web3.utils.toAscii(post.description), ipfsHash);\n  assert.equal(post.owner, accounts[0]);\n});\n```\n\nYou might notice that we're referring to `accounts[0]` here. However, just by looking at the code, we can't really know if `accounts[0]` is really the one we're expecting. This is where Embark offers another helping hand. When the `accounts` are set up, Embark will automatically set the first account of the wallet (`accounts[0]`) to the default account that'll be used for all transactions. With that knowledge we can make an assertion, expecting `accounts[0]` to be the owner of the post.\n\nAnother way would be to just always explicitly pass any of the accounts to a Smart Contract method's `send()` function, in which case we'd have full control over which account of the wallet will be used.\n\n## Testing `canVote()`\n\nAlright, next up let's quickly test if our `canVote()` method works the way as expected. As voting on posts that don't exist should never work, we will simply call `canVote()` on a post id that doesn't exist. This test is pretty straight forward:\n\n```\nit('should not be able to vote in an unexisting post', async () => {\n  const userCanVote = await DReddit.methods.canVote(\"123\").call();\n  assert.equal(userCanVote, false);\n});\n```\n\nWe also want to make sure that `canVote()` resolves to `true` in case a user can indeed vote a certain post. We can again reuse the `postId` that we've stored earlier:\n\n```\nit('should be able to vote in a post if account has not voted before', async () => {\n  const userCanVote = await DReddit.methods.canVote(postId).call();\n  assert.equal(userCanVote, true);\n});\n```\n\nWonderful, we have 5 passing tests now!\n\n## Testing `vote()`\n\nOf course we want to test whether one of our application's core features works as well. There's certainly different ways to verify whether `vote()` does what it's supposed to do, but for this tutorial we'll simply check whether the owner account of the vote emitted by the `NewVote` event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:\n\n```\nit(\"should be able to vote in a post\", async () => {\n  const receipt = await DReddit.methods.vote(postId, 1).send();\n  const Vote = receipt.events.NewVote;\n  assert.equal(Vote.returnValues.owner, accounts[0]);\n});\n```\n\n## Test that only one vote per post is allowed\n\nThe last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn't be possible. Using the `async/await` syntax we can test this very nicely by adding a `try/catch` block. When a user votes on a post she has already voted on, `vote()` will fail in which case we can make our assertions accordingly:\n\n```\nit('should not be able to vote twice', async () => {\n  try {\n    const receipt = await DReddit.methods.vote(postId, 1).send();\n    assert.fail('should have reverted');\n  } catch (error){\n    assert(error.message.search('revert') > -1, 'Revert should happen');\n  }\n});\n```\n\nThis might look a bit confusing first but it's actually pretty straight forward. In case `vote()` fails, we should not reach the `assert.fail()` call but end up in the `catch()` block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.\n\nOkay, one last time we run `embark test` and if the output looks like the following, we're fully covered in terms of tests!\n\n\n```\n❯ embark test\nCompiling contracts\n\n\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]\n    ✓ post should have correct data (18ms) - [0 gas]\n    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]\n    ✓ should be able to vote in a post if account hasn't voted before (12ms) - [0 gas]\n    ✓ should be able to vote in a post (42ms) - [65115 gas]\n    ✓ shouldn't be able to vote twice (37ms) - [22815 gas]\n\n\n  7 passing (5s) - [Total: 3130955 gas]\n\n > All tests passed\n```\n\n Awesome! If you run into any issues, check out the repository with all steps recorded [here](https://github.com/embarklabs/dreddit-tutorial). In [the next and last part of this series](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/), we'll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!\n","slug":"building-a-decentralized-reddit-with-embark-part-2","published":1,"date":"2019-02-11T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3u4002c7heg00jbexia","content":"<p>In <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first part of this tutorial</a> we’ve implemented a <code>DReddit</code> Smart Contract that comes with methods to create and vote on topic posts. In this part we’ll continue right where we’ve left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>And off we go!</p>\n<h2 id=\"Writing-a-first-test\"><a href=\"#Writing-a-first-test\" class=\"headerlink\" title=\"Writing a first test\"></a>Writing a first test</h2><p>We’ve got plenty functionality to cover in our tests, but let’s start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file <code>DReddit_spec.js</code> inside <code>test</code> and add a <code>contract()</code> block that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Inside this code block we’ll be putting dedicated test cases. The <code>contract()</code> function can be considered a “grouping” functionality to group tests, if you will. If you’re familiar with Mocha’s <a href=\"https://mochajs.org/\" target=\"_blank\" rel=\"noopener\">describe()</a> function, you already know how <code>contract()</code> works, as it’s pretty much just an alias.</p>\n<p>To check whether our test setup is working, we add a simple test that passes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it (&#39;should work&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Running this using Embark’s <code>test</code> command should result in an output similar to this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  1 passing (5s) - [Total: 2210775 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p>This works great, let’s go ahead and test some actual functionality!</p>\n<h2 id=\"Testing-the-creation-of-post\"><a href=\"#Testing-the-creation-of-post\" class=\"headerlink\" title=\"Testing the creation of post\"></a>Testing the creation of post</h2><p>Let’s test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our <code>DReddit</code> Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.</p>\n<h3 id=\"Requiring-Smart-Contract-instances\"><a href=\"#Requiring-Smart-Contract-instances\" class=\"headerlink\" title=\"Requiring Smart Contract instances\"></a>Requiring Smart Contract instances</h3><p>When running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom <code>require()</code> that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import</p>\n<p>For example, in order to get an instance of our <code>DReddit</code> Smart Contract within the test, we add the following line to our spec file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const DReddit &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;DReddit&#39;);</span><br></pre></td></tr></table></figure>\n\n<p><code>DReddit</code> is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. <strong>In reality, this object is empty</strong>. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, <code>config()</code>, to let Embark know, which Smart Contracts we’re interested in in the first place. This might be a little confusing, but really the bottom line is that <code>DReddit</code> isn’t what we think it is, until we use it inside <code>contract()</code>.</p>\n<p>Let’s add the mentioned <code>config()</code> function so Embark knows what we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is very similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, in fact it’s the test environment equivalent. We pass a configuration object to <code>config()</code> with specific parameters for every Smart Contract we need. In our case, we just need to add <code>DReddit</code> without any additional parameters. This is because our Smart Contract doesn’t need constructor values and things alike. Keep in mind, if we don’t call this <code>config()</code> function, the imported objects for our Smart Contract instances will always be empty.</p>\n<h3 id=\"Testing-createPost\"><a href=\"#Testing-createPost\" class=\"headerlink\" title=\"Testing createPost()\"></a>Testing <code>createPost()</code></h3><p>To test our Smart Contract’s <code>createPost()</code> method, we’ll make use of <code>DReddit</code>, which will now be a Smart Contract instance. If you remember, <code>createPost()</code> actually takes the post’s description as bytes, so how do we make that work? Well, it turns out that we actually don’t pass it the description itself, but an <strong>IPFS hash</strong> that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It’s better to store the actual description in a storage where data size isn’t an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.</p>\n<p>Once we have such a hash (no worries, we’ve got one prepared), we can use Web3’s <code>fromAscii()</code> utils to convert that hash to bytes and then send it off using our Smart Contract’s <code>createPost()</code> method. We can then subscribe to the events we’re emitting and check its return value like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">const ipfsHash &#x3D; &#39;Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  it (&#39;should be able to create a post and receive it via contract event&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();</span><br><span class=\"line\">    const event &#x3D; receipt.events.NewPost;</span><br><span class=\"line\">    postId &#x3D; event.returnValues.postId;</span><br><span class=\"line\">    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’re using <code>async/await</code> here because Embark’s Smart Contract instance methods return promises. The same can be done without promises as well, it’s just a syntactical difference at this point. Running <code>embark test</code> should result in two passing tests now!</p>\n<h2 id=\"Testing-correctness-of-data\"><a href=\"#Testing-correctness-of-data\" class=\"headerlink\" title=\"Testing correctness of data\"></a>Testing correctness of data</h2><p>Another good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we’re testing in our previous test - there we’re testing the description bytes emitted by the <code>NewPost</code> event. To test this we take advantage of the <code>postId</code> created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.</p>\n<p>Luckily wallet accounts can be easily accessed as they are emitted by Embark’s <code>config()</code> function. All we have to do is attaching a resolution handler to <code>config()</code> and storing the emitted value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Having that in place, our next test could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it (&#39;post should have correct data&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const post &#x3D; await DReddit.methods.posts(postId).call();</span><br><span class=\"line\">  assert.equal(web3.utils.toAscii(post.description), ipfsHash);</span><br><span class=\"line\">  assert.equal(post.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You might notice that we’re referring to <code>accounts[0]</code> here. However, just by looking at the code, we can’t really know if <code>accounts[0]</code> is really the one we’re expecting. This is where Embark offers another helping hand. When the <code>accounts</code> are set up, Embark will automatically set the first account of the wallet (<code>accounts[0]</code>) to the default account that’ll be used for all transactions. With that knowledge we can make an assertion, expecting <code>accounts[0]</code> to be the owner of the post.</p>\n<p>Another way would be to just always explicitly pass any of the accounts to a Smart Contract method’s <code>send()</code> function, in which case we’d have full control over which account of the wallet will be used.</p>\n<h2 id=\"Testing-canVote\"><a href=\"#Testing-canVote\" class=\"headerlink\" title=\"Testing canVote()\"></a>Testing <code>canVote()</code></h2><p>Alright, next up let’s quickly test if our <code>canVote()</code> method works the way as expected. As voting on posts that don’t exist should never work, we will simply call <code>canVote()</code> on a post id that doesn’t exist. This test is pretty straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote in an unexisting post&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(&quot;123&quot;).call();</span><br><span class=\"line\">  assert.equal(userCanVote, false);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>We also want to make sure that <code>canVote()</code> resolves to <code>true</code> in case a user can indeed vote a certain post. We can again reuse the <code>postId</code> that we’ve stored earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should be able to vote in a post if account has not voted before&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(postId).call();</span><br><span class=\"line\">  assert.equal(userCanVote, true);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful, we have 5 passing tests now!</p>\n<h2 id=\"Testing-vote\"><a href=\"#Testing-vote\" class=\"headerlink\" title=\"Testing vote()\"></a>Testing <code>vote()</code></h2><p>Of course we want to test whether one of our application’s core features works as well. There’s certainly different ways to verify whether <code>vote()</code> does what it’s supposed to do, but for this tutorial we’ll simply check whether the owner account of the vote emitted by the <code>NewVote</code> event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;should be able to vote in a post&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">  const Vote &#x3D; receipt.events.NewVote;</span><br><span class=\"line\">  assert.equal(Vote.returnValues.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-that-only-one-vote-per-post-is-allowed\"><a href=\"#Test-that-only-one-vote-per-post-is-allowed\" class=\"headerlink\" title=\"Test that only one vote per post is allowed\"></a>Test that only one vote per post is allowed</h2><p>The last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn’t be possible. Using the <code>async/await</code> syntax we can test this very nicely by adding a <code>try/catch</code> block. When a user votes on a post she has already voted on, <code>vote()</code> will fail in which case we can make our assertions accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote twice&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">    assert.fail(&#39;should have reverted&#39;);</span><br><span class=\"line\">  &#125; catch (error)&#123;</span><br><span class=\"line\">    assert(error.message.search(&#39;revert&#39;) &gt; -1, &#39;Revert should happen&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This might look a bit confusing first but it’s actually pretty straight forward. In case <code>vote()</code> fails, we should not reach the <code>assert.fail()</code> call but end up in the <code>catch()</code> block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.</p>\n<p>Okay, one last time we run <code>embark test</code> and if the output looks like the following, we’re fully covered in terms of tests!</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]</span><br><span class=\"line\">    ✓ post should have correct data (18ms) - [0 gas]</span><br><span class=\"line\">    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post if account hasn&#39;t voted before (12ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post (42ms) - [65115 gas]</span><br><span class=\"line\">    ✓ shouldn&#39;t be able to vote twice (37ms) - [22815 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  7 passing (5s) - [Total: 3130955 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p> Awesome! If you run into any issues, check out the repository with all steps recorded <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">here</a>. In <a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\">the next and last part of this series</a>, we’ll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first part of this tutorial</a> we’ve implemented a <code>DReddit</code> Smart Contract that comes with methods to create and vote on topic posts. In this part we’ll continue right where we’ve left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>And off we go!</p>\n<h2 id=\"Writing-a-first-test\"><a href=\"#Writing-a-first-test\" class=\"headerlink\" title=\"Writing a first test\"></a>Writing a first test</h2><p>We’ve got plenty functionality to cover in our tests, but let’s start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file <code>DReddit_spec.js</code> inside <code>test</code> and add a <code>contract()</code> block that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Inside this code block we’ll be putting dedicated test cases. The <code>contract()</code> function can be considered a “grouping” functionality to group tests, if you will. If you’re familiar with Mocha’s <a href=\"https://mochajs.org/\" target=\"_blank\" rel=\"noopener\">describe()</a> function, you already know how <code>contract()</code> works, as it’s pretty much just an alias.</p>\n<p>To check whether our test setup is working, we add a simple test that passes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it (&#39;should work&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Running this using Embark’s <code>test</code> command should result in an output similar to this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  1 passing (5s) - [Total: 2210775 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p>This works great, let’s go ahead and test some actual functionality!</p>\n<h2 id=\"Testing-the-creation-of-post\"><a href=\"#Testing-the-creation-of-post\" class=\"headerlink\" title=\"Testing the creation of post\"></a>Testing the creation of post</h2><p>Let’s test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our <code>DReddit</code> Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.</p>\n<h3 id=\"Requiring-Smart-Contract-instances\"><a href=\"#Requiring-Smart-Contract-instances\" class=\"headerlink\" title=\"Requiring Smart Contract instances\"></a>Requiring Smart Contract instances</h3><p>When running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom <code>require()</code> that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import</p>\n<p>For example, in order to get an instance of our <code>DReddit</code> Smart Contract within the test, we add the following line to our spec file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const DReddit &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;DReddit&#39;);</span><br></pre></td></tr></table></figure>\n\n<p><code>DReddit</code> is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. <strong>In reality, this object is empty</strong>. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, <code>config()</code>, to let Embark know, which Smart Contracts we’re interested in in the first place. This might be a little confusing, but really the bottom line is that <code>DReddit</code> isn’t what we think it is, until we use it inside <code>contract()</code>.</p>\n<p>Let’s add the mentioned <code>config()</code> function so Embark knows what we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is very similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, in fact it’s the test environment equivalent. We pass a configuration object to <code>config()</code> with specific parameters for every Smart Contract we need. In our case, we just need to add <code>DReddit</code> without any additional parameters. This is because our Smart Contract doesn’t need constructor values and things alike. Keep in mind, if we don’t call this <code>config()</code> function, the imported objects for our Smart Contract instances will always be empty.</p>\n<h3 id=\"Testing-createPost\"><a href=\"#Testing-createPost\" class=\"headerlink\" title=\"Testing createPost()\"></a>Testing <code>createPost()</code></h3><p>To test our Smart Contract’s <code>createPost()</code> method, we’ll make use of <code>DReddit</code>, which will now be a Smart Contract instance. If you remember, <code>createPost()</code> actually takes the post’s description as bytes, so how do we make that work? Well, it turns out that we actually don’t pass it the description itself, but an <strong>IPFS hash</strong> that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It’s better to store the actual description in a storage where data size isn’t an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.</p>\n<p>Once we have such a hash (no worries, we’ve got one prepared), we can use Web3’s <code>fromAscii()</code> utils to convert that hash to bytes and then send it off using our Smart Contract’s <code>createPost()</code> method. We can then subscribe to the events we’re emitting and check its return value like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">const ipfsHash &#x3D; &#39;Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  it (&#39;should be able to create a post and receive it via contract event&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();</span><br><span class=\"line\">    const event &#x3D; receipt.events.NewPost;</span><br><span class=\"line\">    postId &#x3D; event.returnValues.postId;</span><br><span class=\"line\">    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’re using <code>async/await</code> here because Embark’s Smart Contract instance methods return promises. The same can be done without promises as well, it’s just a syntactical difference at this point. Running <code>embark test</code> should result in two passing tests now!</p>\n<h2 id=\"Testing-correctness-of-data\"><a href=\"#Testing-correctness-of-data\" class=\"headerlink\" title=\"Testing correctness of data\"></a>Testing correctness of data</h2><p>Another good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we’re testing in our previous test - there we’re testing the description bytes emitted by the <code>NewPost</code> event. To test this we take advantage of the <code>postId</code> created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.</p>\n<p>Luckily wallet accounts can be easily accessed as they are emitted by Embark’s <code>config()</code> function. All we have to do is attaching a resolution handler to <code>config()</code> and storing the emitted value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Having that in place, our next test could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it (&#39;post should have correct data&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const post &#x3D; await DReddit.methods.posts(postId).call();</span><br><span class=\"line\">  assert.equal(web3.utils.toAscii(post.description), ipfsHash);</span><br><span class=\"line\">  assert.equal(post.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You might notice that we’re referring to <code>accounts[0]</code> here. However, just by looking at the code, we can’t really know if <code>accounts[0]</code> is really the one we’re expecting. This is where Embark offers another helping hand. When the <code>accounts</code> are set up, Embark will automatically set the first account of the wallet (<code>accounts[0]</code>) to the default account that’ll be used for all transactions. With that knowledge we can make an assertion, expecting <code>accounts[0]</code> to be the owner of the post.</p>\n<p>Another way would be to just always explicitly pass any of the accounts to a Smart Contract method’s <code>send()</code> function, in which case we’d have full control over which account of the wallet will be used.</p>\n<h2 id=\"Testing-canVote\"><a href=\"#Testing-canVote\" class=\"headerlink\" title=\"Testing canVote()\"></a>Testing <code>canVote()</code></h2><p>Alright, next up let’s quickly test if our <code>canVote()</code> method works the way as expected. As voting on posts that don’t exist should never work, we will simply call <code>canVote()</code> on a post id that doesn’t exist. This test is pretty straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote in an unexisting post&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(&quot;123&quot;).call();</span><br><span class=\"line\">  assert.equal(userCanVote, false);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>We also want to make sure that <code>canVote()</code> resolves to <code>true</code> in case a user can indeed vote a certain post. We can again reuse the <code>postId</code> that we’ve stored earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should be able to vote in a post if account has not voted before&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(postId).call();</span><br><span class=\"line\">  assert.equal(userCanVote, true);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful, we have 5 passing tests now!</p>\n<h2 id=\"Testing-vote\"><a href=\"#Testing-vote\" class=\"headerlink\" title=\"Testing vote()\"></a>Testing <code>vote()</code></h2><p>Of course we want to test whether one of our application’s core features works as well. There’s certainly different ways to verify whether <code>vote()</code> does what it’s supposed to do, but for this tutorial we’ll simply check whether the owner account of the vote emitted by the <code>NewVote</code> event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;should be able to vote in a post&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">  const Vote &#x3D; receipt.events.NewVote;</span><br><span class=\"line\">  assert.equal(Vote.returnValues.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-that-only-one-vote-per-post-is-allowed\"><a href=\"#Test-that-only-one-vote-per-post-is-allowed\" class=\"headerlink\" title=\"Test that only one vote per post is allowed\"></a>Test that only one vote per post is allowed</h2><p>The last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn’t be possible. Using the <code>async/await</code> syntax we can test this very nicely by adding a <code>try/catch</code> block. When a user votes on a post she has already voted on, <code>vote()</code> will fail in which case we can make our assertions accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote twice&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">    assert.fail(&#39;should have reverted&#39;);</span><br><span class=\"line\">  &#125; catch (error)&#123;</span><br><span class=\"line\">    assert(error.message.search(&#39;revert&#39;) &gt; -1, &#39;Revert should happen&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This might look a bit confusing first but it’s actually pretty straight forward. In case <code>vote()</code> fails, we should not reach the <code>assert.fail()</code> call but end up in the <code>catch()</code> block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.</p>\n<p>Okay, one last time we run <code>embark test</code> and if the output looks like the following, we’re fully covered in terms of tests!</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]</span><br><span class=\"line\">    ✓ post should have correct data (18ms) - [0 gas]</span><br><span class=\"line\">    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post if account hasn&#39;t voted before (12ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post (42ms) - [65115 gas]</span><br><span class=\"line\">    ✓ shouldn&#39;t be able to vote twice (37ms) - [22815 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  7 passing (5s) - [Total: 3130955 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p> Awesome! If you run into any issues, check out the repository with all steps recorded <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">here</a>. In <a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\">the next and last part of this series</a>, we’ll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!</p>\n"},{"title":"How to upgrade to Embark 4","summary":"In this guide, we'll learn how to upgrade a Dapp created with Embark 3.x to Embark 4","author":"jonathan_rainville","layout":"blog-post","alias":"news/2019/03/17/upgrading-to-embark-4/","_content":"\nThe release of Embark 4.0 is close at hand and the release candidate, `beta.1`, will introduce some breaking changes. Let's see what it takes to update an Embark 3.x Dapp to Embark 4.\n\n## Use **any** frontend build tool!\n\nThat's right! The use of Embark's builtin pipeline in no longer required.\n\nHistorically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of \"magic\" imports (ie `import SimpleStorage from \"Embark/contracts/SimpleStorage\";` or `import EmbarkJS from Embark/EmbarkJS`), and establishing a Web3 connection for the Dapp.\n\nHowever, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as `create-react-app` or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.\n\nTherefore, we are announcing that Embark 4 can use **any** frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as `create-react-app` or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.\n\nTo migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.\n\n{% notification info 'NOTE' %}\nIf you are not interested in using a third party pipeline, you can skip to the next section to [see the rest of the breaking changes needed to migrate a Dapp to Embark 4](#New-Web3-plugin).\n{% endnotification %}\n\n### Converting to another pipeline\n\nConverting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.\n\n#### Artifact generation directory\n\nNOTE: If you are planning on using Embark's built-in Webpack pipeline (and not use a third party pipeline), please [skip down to the remainder of the Embark 4 breaking changes](#New-Web3-plugin).\n\nEmbark 4 generates [Smart Contract artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp's Smart Contracts into the Dapp's source code. Most of these artifacts were already generated before, but lived inside the `.embark/` folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.\n\nThe first thing we need to do is add a new `generationDir` property in the root of `embark.json`. This property tells Embark where to place the generated artifacts in the Dapp's filesystem. For example, `create-react-app` (CRA) has `src/` as source folder and the artifacts must be placed in that folder, so we would add in `embark.json`:\n\n```json\n{\n  \"generationDir\": \"src/embarkArtifacts\"\n}\n```\n\n#### \"Magic\" imports\nAfterwards, we need to convert all \"magic\" imports in our Dapp's code to relative imports.\n\nThe first one is the EmbarkJS import. The \"magic\" import is `\"Embark/EmbarkJS\"`. Anywhere we have `\"Embark/EmbarkJS\"` in our Dapp's code, we need to convert that to the relative path. Because we are trying to get the `EmbarkJS` library, and the `embarkjs.js` script is located in the root of  `embarkArtifacts/`, we need to replace\n\n```javascript\nimport EmbarkJS from \"Embark/EmbarkJS\"\n```\nwith\n```javascript\nimport EmbarkJS from \"./embarkArtifacts/embarkjs\"\n```\n{% notification info 'NOTE' %}\nNOTE: The relative path is dependent upon the generationDir setting specified in embark.json [see the \"Artifact generation directory\" section above](#Artifact-generation-directory).\n{% endnotification %}\n\nSecondly, we need to update the \"magic\" Smart Contract imports. These will need to change from\n\n```javascript\nimport ContractName from \"Embark/contract/ContractName\";\n```\nto\n```javascript\nimport ContractName from \"./embarkArtifacts/contracts/ContractName\";\n```\n\nThirdly, there used to be `import web3 from \"Embark/web3\"`, but it has been removed in Embark 4 in favor of using a global Web3 object. Don't worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global `web3` object is now available everywhere in the Dapp.\n\nNow, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.\n\n### New project with another pipeline\n\nStarting a new Dapp from scratch is easy, we have two options.\n\n#### Embark's create-react-dapp template\n\nThe easiest option is to use our [new Embark CRA template](https://github.com/embarklabs/embark-create-react-dapp-template). It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an `embarkConfig/` folder in the root of the Dapp to make sure they don't clash with CRA's config folder/files.\n\nTo get started with Embark's CRA template,\n\n```\nembark new --template embark-react-dapp my-dapp\ncd my-dapp\nembark run\n```\n{% notification danger 'DEPRECATION NOTICE' %}\nThe `--template` option has been deprecated in v5 and support will be removed in future versions.\n{% endnotification %}\n\nThen, in another terminal,\n\n```\ncd my-dapp\nyarn start // or alternatively, npm run start\n```\n\nThat's it!\n\n#### For other build tools\n\nIf we want to use another build tool than CRA, here are the steps:\n\nCreate a project using a frontend build tool like Angular CLI. Then, in another directory, execute `embark new your_projects_name`.\n\nAfterwards, we copy all the files and folders from the Embark project to the build tool's folder. The only tweak that you will need to do is go in `config/pipeline.js` and set `enabled: false`, so that Embark's pipeline is disabled.\n\nWe can also go in `embark.json` and remove the `app` section (as well as Embark's source dir that you will not be using).\n\nLastly, check out [the \"Artifact generation directory\" section above](#Artifact-generation-directory) to make sure your artifacts directory is set up correctly for you build tool.\n\nThere you go, your project is ready.\n\nWe know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool's directory. Keep an eye out for that.\n\n## New Web3 plugin\n\n*(2019/06/27)* **NOTE**: *the following instructions are* ***not*** *applicable to Embark `4.1.x` and newer, but should still be followed for `4.0.x` or `<=4.1.0-beta.3`.*\n\nStarting with Embark 4 beta.1, Embark no longer supplies the Dapp with `Web3.js` by default. Don't run. We did that so that we can now have the possibility of supporting more than just `Web3.js`, such as EthersJS, and more. You can even roll your own.\n\nTo continue using `Web3.js` inside the Embark 4 Dapp, execute the following command in the Embark console: `plugin install embarkjs-connector-web3`.\n\nThis simply [installs `embarkjs-connector-web3` as a plugin](https://embark.embarklabs.io/docs/installing_plugins.html). Alternatively, this plugin can be installed manually by executing:\n1. `yarn add embarkjs-connector-web3` or `npm install --save embarkjs-connector-web3`\n2. Adding `\"embarkjs-connector-web3\": {}` to the `plugins` section of `embark.json`\n\nIt's as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import `EmbarkJS` at least once. If using a third party pipeline, the `EmbarkJS` file can be imported using `import EmbarkJS from \"./embarkArtifacts/embarkjs.js\"` (or as specified by the `generationDir` in `embark.json`). If using Embark's built-in pipeline, `EmbarkJS` can be imported using `import EmbarkJS from \"Embark/EmbarkJS\";`.\n\n## New Blockchain account configs\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the [Accounts Blockchain configuration guide](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n- `account`: This is completely replaced by the new `accounts` property (notice the `s` at the end of `accounts`). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as [described in the docs](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions)\n- `simulatorMnemonic`: Removed in favor of Ganache's default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config's `mnemonic` account type](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n## Conclusion\n\nThis is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we'll detail during the Embark 4 release.\n\nIn the meantime, all the Embark 4 goodness doesn't come at too high a price in terms of breaking changes.\n\nUpgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on [Gitter](https://gitter.im/embark-framework/Lobby).\n","source":"_posts/2019-03-18-upgrading-to-embark-4.md","raw":"title: How to upgrade to Embark 4\nsummary: \"In this guide, we'll learn how to upgrade a Dapp created with Embark 3.x to Embark 4\"\nauthor: jonathan_rainville\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/03/17/upgrading-to-embark-4/\n---\n\nThe release of Embark 4.0 is close at hand and the release candidate, `beta.1`, will introduce some breaking changes. Let's see what it takes to update an Embark 3.x Dapp to Embark 4.\n\n## Use **any** frontend build tool!\n\nThat's right! The use of Embark's builtin pipeline in no longer required.\n\nHistorically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of \"magic\" imports (ie `import SimpleStorage from \"Embark/contracts/SimpleStorage\";` or `import EmbarkJS from Embark/EmbarkJS`), and establishing a Web3 connection for the Dapp.\n\nHowever, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as `create-react-app` or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.\n\nTherefore, we are announcing that Embark 4 can use **any** frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as `create-react-app` or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.\n\nTo migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.\n\n{% notification info 'NOTE' %}\nIf you are not interested in using a third party pipeline, you can skip to the next section to [see the rest of the breaking changes needed to migrate a Dapp to Embark 4](#New-Web3-plugin).\n{% endnotification %}\n\n### Converting to another pipeline\n\nConverting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.\n\n#### Artifact generation directory\n\nNOTE: If you are planning on using Embark's built-in Webpack pipeline (and not use a third party pipeline), please [skip down to the remainder of the Embark 4 breaking changes](#New-Web3-plugin).\n\nEmbark 4 generates [Smart Contract artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp's Smart Contracts into the Dapp's source code. Most of these artifacts were already generated before, but lived inside the `.embark/` folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.\n\nThe first thing we need to do is add a new `generationDir` property in the root of `embark.json`. This property tells Embark where to place the generated artifacts in the Dapp's filesystem. For example, `create-react-app` (CRA) has `src/` as source folder and the artifacts must be placed in that folder, so we would add in `embark.json`:\n\n```json\n{\n  \"generationDir\": \"src/embarkArtifacts\"\n}\n```\n\n#### \"Magic\" imports\nAfterwards, we need to convert all \"magic\" imports in our Dapp's code to relative imports.\n\nThe first one is the EmbarkJS import. The \"magic\" import is `\"Embark/EmbarkJS\"`. Anywhere we have `\"Embark/EmbarkJS\"` in our Dapp's code, we need to convert that to the relative path. Because we are trying to get the `EmbarkJS` library, and the `embarkjs.js` script is located in the root of  `embarkArtifacts/`, we need to replace\n\n```javascript\nimport EmbarkJS from \"Embark/EmbarkJS\"\n```\nwith\n```javascript\nimport EmbarkJS from \"./embarkArtifacts/embarkjs\"\n```\n{% notification info 'NOTE' %}\nNOTE: The relative path is dependent upon the generationDir setting specified in embark.json [see the \"Artifact generation directory\" section above](#Artifact-generation-directory).\n{% endnotification %}\n\nSecondly, we need to update the \"magic\" Smart Contract imports. These will need to change from\n\n```javascript\nimport ContractName from \"Embark/contract/ContractName\";\n```\nto\n```javascript\nimport ContractName from \"./embarkArtifacts/contracts/ContractName\";\n```\n\nThirdly, there used to be `import web3 from \"Embark/web3\"`, but it has been removed in Embark 4 in favor of using a global Web3 object. Don't worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global `web3` object is now available everywhere in the Dapp.\n\nNow, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.\n\n### New project with another pipeline\n\nStarting a new Dapp from scratch is easy, we have two options.\n\n#### Embark's create-react-dapp template\n\nThe easiest option is to use our [new Embark CRA template](https://github.com/embarklabs/embark-create-react-dapp-template). It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an `embarkConfig/` folder in the root of the Dapp to make sure they don't clash with CRA's config folder/files.\n\nTo get started with Embark's CRA template,\n\n```\nembark new --template embark-react-dapp my-dapp\ncd my-dapp\nembark run\n```\n{% notification danger 'DEPRECATION NOTICE' %}\nThe `--template` option has been deprecated in v5 and support will be removed in future versions.\n{% endnotification %}\n\nThen, in another terminal,\n\n```\ncd my-dapp\nyarn start // or alternatively, npm run start\n```\n\nThat's it!\n\n#### For other build tools\n\nIf we want to use another build tool than CRA, here are the steps:\n\nCreate a project using a frontend build tool like Angular CLI. Then, in another directory, execute `embark new your_projects_name`.\n\nAfterwards, we copy all the files and folders from the Embark project to the build tool's folder. The only tweak that you will need to do is go in `config/pipeline.js` and set `enabled: false`, so that Embark's pipeline is disabled.\n\nWe can also go in `embark.json` and remove the `app` section (as well as Embark's source dir that you will not be using).\n\nLastly, check out [the \"Artifact generation directory\" section above](#Artifact-generation-directory) to make sure your artifacts directory is set up correctly for you build tool.\n\nThere you go, your project is ready.\n\nWe know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool's directory. Keep an eye out for that.\n\n## New Web3 plugin\n\n*(2019/06/27)* **NOTE**: *the following instructions are* ***not*** *applicable to Embark `4.1.x` and newer, but should still be followed for `4.0.x` or `<=4.1.0-beta.3`.*\n\nStarting with Embark 4 beta.1, Embark no longer supplies the Dapp with `Web3.js` by default. Don't run. We did that so that we can now have the possibility of supporting more than just `Web3.js`, such as EthersJS, and more. You can even roll your own.\n\nTo continue using `Web3.js` inside the Embark 4 Dapp, execute the following command in the Embark console: `plugin install embarkjs-connector-web3`.\n\nThis simply [installs `embarkjs-connector-web3` as a plugin](https://embark.embarklabs.io/docs/installing_plugins.html). Alternatively, this plugin can be installed manually by executing:\n1. `yarn add embarkjs-connector-web3` or `npm install --save embarkjs-connector-web3`\n2. Adding `\"embarkjs-connector-web3\": {}` to the `plugins` section of `embark.json`\n\nIt's as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import `EmbarkJS` at least once. If using a third party pipeline, the `EmbarkJS` file can be imported using `import EmbarkJS from \"./embarkArtifacts/embarkjs.js\"` (or as specified by the `generationDir` in `embark.json`). If using Embark's built-in pipeline, `EmbarkJS` can be imported using `import EmbarkJS from \"Embark/EmbarkJS\";`.\n\n## New Blockchain account configs\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the [Accounts Blockchain configuration guide](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n- `account`: This is completely replaced by the new `accounts` property (notice the `s` at the end of `accounts`). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as [described in the docs](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions)\n- `simulatorMnemonic`: Removed in favor of Ganache's default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config's `mnemonic` account type](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n## Conclusion\n\nThis is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we'll detail during the Embark 4 release.\n\nIn the meantime, all the Embark 4 goodness doesn't come at too high a price in terms of breaking changes.\n\nUpgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on [Gitter](https://gitter.im/embark-framework/Lobby).\n","slug":"upgrading-to-embark-4","published":1,"date":"2019-03-18T04:00:00.000Z","updated":"2020-01-19T20:56:52.651Z","_id":"ck5ijm3u5002e7heg4c75be4a","comments":1,"photos":[],"link":"","content":"<p>The release of Embark 4.0 is close at hand and the release candidate, <code>beta.1</code>, will introduce some breaking changes. Let’s see what it takes to update an Embark 3.x Dapp to Embark 4.</p>\n<h2 id=\"Use-any-frontend-build-tool\"><a href=\"#Use-any-frontend-build-tool\" class=\"headerlink\" title=\"Use any frontend build tool!\"></a>Use <strong>any</strong> frontend build tool!</h2><p>That’s right! The use of Embark’s builtin pipeline in no longer required.</p>\n<p>Historically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of “magic” imports (ie <code>import SimpleStorage from &quot;Embark/contracts/SimpleStorage&quot;;</code> or <code>import EmbarkJS from Embark/EmbarkJS</code>), and establishing a Web3 connection for the Dapp.</p>\n<p>However, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as <code>create-react-app</code> or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.</p>\n<p>Therefore, we are announcing that Embark 4 can use <strong>any</strong> frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as <code>create-react-app</code> or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.</p>\n<p>To migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>If you are not interested in using a third party pipeline, you can skip to the next section to <a href=\"#New-Web3-plugin\">see the rest of the breaking changes needed to migrate a Dapp to Embark 4</a>.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Converting-to-another-pipeline\"><a href=\"#Converting-to-another-pipeline\" class=\"headerlink\" title=\"Converting to another pipeline\"></a>Converting to another pipeline</h3><p>Converting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.</p>\n<h4 id=\"Artifact-generation-directory\"><a href=\"#Artifact-generation-directory\" class=\"headerlink\" title=\"Artifact generation directory\"></a>Artifact generation directory</h4><p>NOTE: If you are planning on using Embark’s built-in Webpack pipeline (and not use a third party pipeline), please <a href=\"#New-Web3-plugin\">skip down to the remainder of the Embark 4 breaking changes</a>.</p>\n<p>Embark 4 generates <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Smart Contract artifacts</a> for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp’s Smart Contracts into the Dapp’s source code. Most of these artifacts were already generated before, but lived inside the <code>.embark/</code> folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.</p>\n<p>The first thing we need to do is add a new <code>generationDir</code> property in the root of <code>embark.json</code>. This property tells Embark where to place the generated artifacts in the Dapp’s filesystem. For example, <code>create-react-app</code> (CRA) has <code>src/</code> as source folder and the artifacts must be placed in that folder, so we would add in <code>embark.json</code>:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"generationDir\"</span>: <span class=\"string\">\"src/embarkArtifacts\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"“Magic”-imports\"><a href=\"#“Magic”-imports\" class=\"headerlink\" title=\"“Magic” imports\"></a>“Magic” imports</h4><p>Afterwards, we need to convert all “magic” imports in our Dapp’s code to relative imports.</p>\n<p>The first one is the EmbarkJS import. The “magic” import is <code>&quot;Embark/EmbarkJS&quot;</code>. Anywhere we have <code>&quot;Embark/EmbarkJS&quot;</code> in our Dapp’s code, we need to convert that to the relative path. Because we are trying to get the <code>EmbarkJS</code> library, and the <code>embarkjs.js</code> script is located in the root of  <code>embarkArtifacts/</code>, we need to replace</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/EmbarkJS\"</span></span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/embarkjs\"</span></span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>NOTE: The relative path is dependent upon the generationDir setting specified in embark.json <a href=\"#Artifact-generation-directory\">see the “Artifact generation directory” section above</a>.</p>\n</p>\n</div> \n\n\n\n<p>Secondly, we need to update the “magic” Smart Contract imports. These will need to change from</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/contract/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n<p>to</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/contracts/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n\n<p>Thirdly, there used to be <code>import web3 from &quot;Embark/web3&quot;</code>, but it has been removed in Embark 4 in favor of using a global Web3 object. Don’t worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global <code>web3</code> object is now available everywhere in the Dapp.</p>\n<p>Now, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.</p>\n<h3 id=\"New-project-with-another-pipeline\"><a href=\"#New-project-with-another-pipeline\" class=\"headerlink\" title=\"New project with another pipeline\"></a>New project with another pipeline</h3><p>Starting a new Dapp from scratch is easy, we have two options.</p>\n<h4 id=\"Embark’s-create-react-dapp-template\"><a href=\"#Embark’s-create-react-dapp-template\" class=\"headerlink\" title=\"Embark’s create-react-dapp template\"></a>Embark’s create-react-dapp template</h4><p>The easiest option is to use our <a href=\"https://github.com/embarklabs/embark-create-react-dapp-template\" target=\"_blank\" rel=\"noopener\">new Embark CRA template</a>. It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an <code>embarkConfig/</code> folder in the root of the Dapp to make sure they don’t clash with CRA’s config folder/files.</p>\n<p>To get started with Embark’s CRA template,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark new --template embark-react-dapp my-dapp</span><br><span class=\"line\">cd my-dapp</span><br><span class=\"line\">embark run</span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>DEPRECATION NOTICE</strong></p>\n  <p><p>The <code>--template</code> option has been deprecated in v5 and support will be removed in future versions.</p>\n</p>\n</div> \n\n\n\n<p>Then, in another terminal,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">cd my-dapp</span><br><span class=\"line\">yarn start &#x2F;&#x2F; or alternatively, npm run start</span><br></pre></td></tr></table></figure>\n\n<p>That’s it!</p>\n<h4 id=\"For-other-build-tools\"><a href=\"#For-other-build-tools\" class=\"headerlink\" title=\"For other build tools\"></a>For other build tools</h4><p>If we want to use another build tool than CRA, here are the steps:</p>\n<p>Create a project using a frontend build tool like Angular CLI. Then, in another directory, execute <code>embark new your_projects_name</code>.</p>\n<p>Afterwards, we copy all the files and folders from the Embark project to the build tool’s folder. The only tweak that you will need to do is go in <code>config/pipeline.js</code> and set <code>enabled: false</code>, so that Embark’s pipeline is disabled.</p>\n<p>We can also go in <code>embark.json</code> and remove the <code>app</code> section (as well as Embark’s source dir that you will not be using).</p>\n<p>Lastly, check out <a href=\"#Artifact-generation-directory\">the “Artifact generation directory” section above</a> to make sure your artifacts directory is set up correctly for you build tool.</p>\n<p>There you go, your project is ready.</p>\n<p>We know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool’s directory. Keep an eye out for that.</p>\n<h2 id=\"New-Web3-plugin\"><a href=\"#New-Web3-plugin\" class=\"headerlink\" title=\"New Web3 plugin\"></a>New Web3 plugin</h2><p><em>(2019/06/27)</em> <strong>NOTE</strong>: <em>the following instructions are</em> <strong><em>not</em></strong> <em>applicable to Embark <code>4.1.x</code> and newer, but should still be followed for <code>4.0.x</code> or <code>&lt;=4.1.0-beta.3</code>.</em></p>\n<p>Starting with Embark 4 beta.1, Embark no longer supplies the Dapp with <code>Web3.js</code> by default. Don’t run. We did that so that we can now have the possibility of supporting more than just <code>Web3.js</code>, such as EthersJS, and more. You can even roll your own.</p>\n<p>To continue using <code>Web3.js</code> inside the Embark 4 Dapp, execute the following command in the Embark console: <code>plugin install embarkjs-connector-web3</code>.</p>\n<p>This simply <a href=\"https://embark.embarklabs.io/docs/installing_plugins.html\">installs <code>embarkjs-connector-web3</code> as a plugin</a>. Alternatively, this plugin can be installed manually by executing:</p>\n<ol>\n<li><code>yarn add embarkjs-connector-web3</code> or <code>npm install --save embarkjs-connector-web3</code></li>\n<li>Adding <code>&quot;embarkjs-connector-web3&quot;: {}</code> to the <code>plugins</code> section of <code>embark.json</code></li>\n</ol>\n<p>It’s as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import <code>EmbarkJS</code> at least once. If using a third party pipeline, the <code>EmbarkJS</code> file can be imported using <code>import EmbarkJS from &quot;./embarkArtifacts/embarkjs.js&quot;</code> (or as specified by the <code>generationDir</code> in <code>embark.json</code>). If using Embark’s built-in pipeline, <code>EmbarkJS</code> can be imported using <code>import EmbarkJS from &quot;Embark/EmbarkJS&quot;;</code>.</p>\n<h2 id=\"New-Blockchain-account-configs\"><a href=\"#New-Blockchain-account-configs\" class=\"headerlink\" title=\"New Blockchain account configs\"></a>New Blockchain account configs</h2><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><code>account</code>: This is completely replaced by the new <code>accounts</code> property (notice the <code>s</code> at the end of <code>accounts</code>). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">described in the docs</a></li>\n<li><code>simulatorMnemonic</code>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s <code>mnemonic</code> account type</a>.</li>\n</ul>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>This is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we’ll detail during the Embark 4 release.</p>\n<p>In the meantime, all the Embark 4 goodness doesn’t come at too high a price in terms of breaking changes.</p>\n<p>Upgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a>.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The release of Embark 4.0 is close at hand and the release candidate, <code>beta.1</code>, will introduce some breaking changes. Let’s see what it takes to update an Embark 3.x Dapp to Embark 4.</p>\n<h2 id=\"Use-any-frontend-build-tool\"><a href=\"#Use-any-frontend-build-tool\" class=\"headerlink\" title=\"Use any frontend build tool!\"></a>Use <strong>any</strong> frontend build tool!</h2><p>That’s right! The use of Embark’s builtin pipeline in no longer required.</p>\n<p>Historically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of “magic” imports (ie <code>import SimpleStorage from &quot;Embark/contracts/SimpleStorage&quot;;</code> or <code>import EmbarkJS from Embark/EmbarkJS</code>), and establishing a Web3 connection for the Dapp.</p>\n<p>However, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as <code>create-react-app</code> or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.</p>\n<p>Therefore, we are announcing that Embark 4 can use <strong>any</strong> frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as <code>create-react-app</code> or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.</p>\n<p>To migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>If you are not interested in using a third party pipeline, you can skip to the next section to <a href=\"#New-Web3-plugin\">see the rest of the breaking changes needed to migrate a Dapp to Embark 4</a>.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Converting-to-another-pipeline\"><a href=\"#Converting-to-another-pipeline\" class=\"headerlink\" title=\"Converting to another pipeline\"></a>Converting to another pipeline</h3><p>Converting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.</p>\n<h4 id=\"Artifact-generation-directory\"><a href=\"#Artifact-generation-directory\" class=\"headerlink\" title=\"Artifact generation directory\"></a>Artifact generation directory</h4><p>NOTE: If you are planning on using Embark’s built-in Webpack pipeline (and not use a third party pipeline), please <a href=\"#New-Web3-plugin\">skip down to the remainder of the Embark 4 breaking changes</a>.</p>\n<p>Embark 4 generates <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Smart Contract artifacts</a> for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp’s Smart Contracts into the Dapp’s source code. Most of these artifacts were already generated before, but lived inside the <code>.embark/</code> folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.</p>\n<p>The first thing we need to do is add a new <code>generationDir</code> property in the root of <code>embark.json</code>. This property tells Embark where to place the generated artifacts in the Dapp’s filesystem. For example, <code>create-react-app</code> (CRA) has <code>src/</code> as source folder and the artifacts must be placed in that folder, so we would add in <code>embark.json</code>:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"generationDir\"</span>: <span class=\"string\">\"src/embarkArtifacts\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"“Magic”-imports\"><a href=\"#“Magic”-imports\" class=\"headerlink\" title=\"“Magic” imports\"></a>“Magic” imports</h4><p>Afterwards, we need to convert all “magic” imports in our Dapp’s code to relative imports.</p>\n<p>The first one is the EmbarkJS import. The “magic” import is <code>&quot;Embark/EmbarkJS&quot;</code>. Anywhere we have <code>&quot;Embark/EmbarkJS&quot;</code> in our Dapp’s code, we need to convert that to the relative path. Because we are trying to get the <code>EmbarkJS</code> library, and the <code>embarkjs.js</code> script is located in the root of  <code>embarkArtifacts/</code>, we need to replace</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/EmbarkJS\"</span></span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/embarkjs\"</span></span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>NOTE: The relative path is dependent upon the generationDir setting specified in embark.json <a href=\"#Artifact-generation-directory\">see the “Artifact generation directory” section above</a>.</p>\n</p>\n</div> \n\n\n\n<p>Secondly, we need to update the “magic” Smart Contract imports. These will need to change from</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/contract/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n<p>to</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/contracts/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n\n<p>Thirdly, there used to be <code>import web3 from &quot;Embark/web3&quot;</code>, but it has been removed in Embark 4 in favor of using a global Web3 object. Don’t worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global <code>web3</code> object is now available everywhere in the Dapp.</p>\n<p>Now, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.</p>\n<h3 id=\"New-project-with-another-pipeline\"><a href=\"#New-project-with-another-pipeline\" class=\"headerlink\" title=\"New project with another pipeline\"></a>New project with another pipeline</h3><p>Starting a new Dapp from scratch is easy, we have two options.</p>\n<h4 id=\"Embark’s-create-react-dapp-template\"><a href=\"#Embark’s-create-react-dapp-template\" class=\"headerlink\" title=\"Embark’s create-react-dapp template\"></a>Embark’s create-react-dapp template</h4><p>The easiest option is to use our <a href=\"https://github.com/embarklabs/embark-create-react-dapp-template\" target=\"_blank\" rel=\"noopener\">new Embark CRA template</a>. It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an <code>embarkConfig/</code> folder in the root of the Dapp to make sure they don’t clash with CRA’s config folder/files.</p>\n<p>To get started with Embark’s CRA template,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark new --template embark-react-dapp my-dapp</span><br><span class=\"line\">cd my-dapp</span><br><span class=\"line\">embark run</span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>DEPRECATION NOTICE</strong></p>\n  <p><p>The <code>--template</code> option has been deprecated in v5 and support will be removed in future versions.</p>\n</p>\n</div> \n\n\n\n<p>Then, in another terminal,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">cd my-dapp</span><br><span class=\"line\">yarn start &#x2F;&#x2F; or alternatively, npm run start</span><br></pre></td></tr></table></figure>\n\n<p>That’s it!</p>\n<h4 id=\"For-other-build-tools\"><a href=\"#For-other-build-tools\" class=\"headerlink\" title=\"For other build tools\"></a>For other build tools</h4><p>If we want to use another build tool than CRA, here are the steps:</p>\n<p>Create a project using a frontend build tool like Angular CLI. Then, in another directory, execute <code>embark new your_projects_name</code>.</p>\n<p>Afterwards, we copy all the files and folders from the Embark project to the build tool’s folder. The only tweak that you will need to do is go in <code>config/pipeline.js</code> and set <code>enabled: false</code>, so that Embark’s pipeline is disabled.</p>\n<p>We can also go in <code>embark.json</code> and remove the <code>app</code> section (as well as Embark’s source dir that you will not be using).</p>\n<p>Lastly, check out <a href=\"#Artifact-generation-directory\">the “Artifact generation directory” section above</a> to make sure your artifacts directory is set up correctly for you build tool.</p>\n<p>There you go, your project is ready.</p>\n<p>We know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool’s directory. Keep an eye out for that.</p>\n<h2 id=\"New-Web3-plugin\"><a href=\"#New-Web3-plugin\" class=\"headerlink\" title=\"New Web3 plugin\"></a>New Web3 plugin</h2><p><em>(2019/06/27)</em> <strong>NOTE</strong>: <em>the following instructions are</em> <strong><em>not</em></strong> <em>applicable to Embark <code>4.1.x</code> and newer, but should still be followed for <code>4.0.x</code> or <code>&lt;=4.1.0-beta.3</code>.</em></p>\n<p>Starting with Embark 4 beta.1, Embark no longer supplies the Dapp with <code>Web3.js</code> by default. Don’t run. We did that so that we can now have the possibility of supporting more than just <code>Web3.js</code>, such as EthersJS, and more. You can even roll your own.</p>\n<p>To continue using <code>Web3.js</code> inside the Embark 4 Dapp, execute the following command in the Embark console: <code>plugin install embarkjs-connector-web3</code>.</p>\n<p>This simply <a href=\"https://embark.embarklabs.io/docs/installing_plugins.html\">installs <code>embarkjs-connector-web3</code> as a plugin</a>. Alternatively, this plugin can be installed manually by executing:</p>\n<ol>\n<li><code>yarn add embarkjs-connector-web3</code> or <code>npm install --save embarkjs-connector-web3</code></li>\n<li>Adding <code>&quot;embarkjs-connector-web3&quot;: {}</code> to the <code>plugins</code> section of <code>embark.json</code></li>\n</ol>\n<p>It’s as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import <code>EmbarkJS</code> at least once. If using a third party pipeline, the <code>EmbarkJS</code> file can be imported using <code>import EmbarkJS from &quot;./embarkArtifacts/embarkjs.js&quot;</code> (or as specified by the <code>generationDir</code> in <code>embark.json</code>). If using Embark’s built-in pipeline, <code>EmbarkJS</code> can be imported using <code>import EmbarkJS from &quot;Embark/EmbarkJS&quot;;</code>.</p>\n<h2 id=\"New-Blockchain-account-configs\"><a href=\"#New-Blockchain-account-configs\" class=\"headerlink\" title=\"New Blockchain account configs\"></a>New Blockchain account configs</h2><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><code>account</code>: This is completely replaced by the new <code>accounts</code> property (notice the <code>s</code> at the end of <code>accounts</code>). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">described in the docs</a></li>\n<li><code>simulatorMnemonic</code>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s <code>mnemonic</code> account type</a>.</li>\n</ul>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>This is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we’ll detail during the Embark 4 release.</p>\n<p>In the meantime, all the Embark 4 goodness doesn’t come at too high a price in terms of breaking changes.</p>\n<p>Upgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a>.</p>\n"},{"title":"Nim vs Crystal - Part 1 - Performance & Interoperability","summary":"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 1, Performance & Interoperability are reviewed.","author":"robin_percy","layout":"blog-post","image":"/assets/images/nim-crystal-header_blank.jpg","_content":"\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nI've been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I'm happy that I'm finally able to do so.  What I've decided on doing; is breaking this up into a three part series as there are ***SO*** many features of both languages I'd like to talk about, and therein many opinions held too.  I do have a habit of writing **very** long articles, so I'd like to limit the topic scope, to keep each of these a little snappier!\n\nBefore I go into specifics on either of these languages, I'd first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I *have* had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nBack in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was *actually* interested in taking a look at.\n\nNaturally, both languages have a **TONNE** of features, so I'm not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the [Crystal Docs](https://crystal-lang.org/reference/), or the [Nim Docs](https://nim-lang.org/docs/lib.html).\n\nAnyway, let's take a look at both languages, and you can make your own mind up as to which you'd rather be programming in.  Maybe both.  Maybe neither!\n\n\n<br/>\n\n## Nim\n\nNim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to ***pretty much*** fit these criterion.  \n\n> By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.\n\n> The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.\n\nWhen I say it *pretty much* matches the criteria, the only statement that doesn't quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.\n\n\n### Installing Nim\n\nNim is super easy to install.  If you're on Windows, [head over here](https://nim-lang.org/install_windows.html), and download/run the installer.\n\nIf you're on any other Unix-based system, you can run:\n\n```\n$ curl https://nim-lang.org/choosenim/init.sh -sSf | sh`\n```\n\nIf you're on Mac, and with Homebrew installed, simply run:\n\n```\n$ brew install nim\n```\n\nYou could also consider using [choosenim](https://github.com/dom96/choosenim) to manage Nim installations in a similar way to `pyenv` and `rustup`.\n\n\n### Interfacing Other Languages\n\nOne of the things that attracted me to both Nim **and** Crystal, was the ability to natively interface with other languages, and the **ease** with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!\n\nWhen it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.\n\nFor a quick demo, let's take a look at interfacing both C and JavaScript from Nim.\n\n#### C Invocation\n\nFirstly, create the file `logic.c` with the following content:\n\n``` c\nint addTwoIntegers(int a, int b)\n{\n  return a + b;\n}\n```\n\nNext, create the file `calculator.nim` with the following content:\n\n``` nim\n{.compile: \"logic.c\".}\nproc addTwoIntegers(a, b: cint): cint {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\nNow then, with these two *very simple* files in place, we can run:\n\n```\n$ nim c -r calculator.nim\n```\n\nThe Nim compiler will compile the `logic.c` file in addition to `calculator.nim` and link both into an executable; which outputs `10` when run.  Very sharp, in my opinion!\n\n#### JavaScript Invocation\n\nEven sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled `host.html` with the following content:\n\n``` html\n<html>\n<body>\n  <script type=\"text/javascript\">\n    function addTwoIntegers(a, b)\n    {\n      return a + b;\n    }\n  </script>\n\n  <script type=\"text/javascript\" src=\"calculator.js\"></script>\n</body>\n</html>\n```\n\nNow, create another `calculator.nim` file with the following content (or reuse the one from the above C example):\n\n``` nim\nproc addTwoIntegers(a, b: int): int {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\n\nCompile the Nim code to JavaScript by running:\n\n```\n$ nim js -o:calculator.js calculator.nim\n```\n\nOnce that's done, go ahead and open `host.html` in a browser and you should see the value `10` in the browser's console.  I think this is **REALLY** neat.  It's superb how easy it is to achieve that, too.\n\n\n### Aside – a Quick (not-so) Secret:\n\nInstead of writing out the HTML above, you could actually use ***Nim's native*** HTML DSL:\n\n``` nim\nimport html_dsl\n\nhtml page:\n  head:\n    title(\"Title\")\n  body:\n    p(\"Hello\")\n    p(\"World\")\n    dv:\n      p \"Example\"\n\necho render(page())\n```\n\nRunning this will output the following:\n\n``` html\n<!DOCTYPE html>\n  <html class='has-navbar-fixed-top' >\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Title</title>\n  </head>\n  <body class='has-navbar-fixed-top' >\n    <p >Hello</p>\n    <p >World</p>\n    <div>\n      <p>Example</p>\n    </div>\n  </body>\n</html>\n```\n\n\n<br/>\n\n## Crystal\n\nCrystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.\n\nI first came across Crystal when I saw [@sferik](https://twitter.com/sferik) giving a talk on it in Poland back in 2015. [Video here.](https://www.youtube.com/watch?v=Ysm4IU4aWoQ) It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.\n\n### Installing Crystal\n\nYou can find all of the relevant instructions for installing Crystal, on the [main website installation page](https://crystal-lang.org/install/).\n\nIf you are on Mac, and have Homebrew installed, you can simply run:\n\n```\n$ brew install crystal\n```\n\n**However**, if you are a Windows user, *for the time being* you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I'd take a (not yet gained) point **away** from Crystal here, for lack of Windows support.\n\n\n### Interfacing C\n\nLet’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.\n\nFirst off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:\n\n```\n$ crystal init app sayhi_c\n```\n\nThen head into the directory `sayhi_c/src/sayhi_c` and let’s create a file `sayhi.c` with the following contents:\n\n``` c\n#include <stdio.h>\n\nvoid hi(const char * name){\n  printf(\"Hi %s!\\n\", name);\n}\n```\n\nNow we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:\n\n```\n$ gcc -c sayhi.c -o sayhi.o\n```\n\nUsing the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our `sayhi_c.cr` file, and have it reflect the following:\n\n``` crystal\nrequire \"./sayhi_c/*\"\n\n@[Link(ldflags: \"#{__DIR__}/sayhi_c/sayhi.o\")]\n\nlib Say\n  fun hi(name : LibC::Char*) : Void\nend\n\nSay.hi(\"Status\")\n```\n\nI’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.\n\nAlso worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.\n\nSo, if we build our project file and run it, we get the following:\n\n```\n$ crystal build --release src/sayhi_c.cr\n\n$ ./sayhi_c\n\n > Hi Status!\n```\n\nAs you can see, Nim takes the winners trophy in this case, as it is **much** simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.\n\n\n\n<br/>\n\n## Performance Tests\n\n### Parsing & calculating values from a large JSON file:\n\nFirstly, we need to generate our large JSON file.  For this test, we're going to generate a dataset which includes **1 Million** items.\n\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\nWe can do so with the following Ruby script:\n\n``` rb\nrequire 'json'\n\nx = []\n\n1000000.times do\n  h = {\n    'x' => rand,\n    'y' => rand,\n    'z' => rand,\n    'name' => ('a'..'z').to_a.shuffle[0..5].join + ' ' + rand(10000).to_s,\n    'opts' => {'1' => [1, true]},\n  }\n  x << h\nend\n\nFile.open(\"1.json\", 'w') { |f| f.write JSON.pretty_generate('coordinates' => x, 'info' => \"some info\") }\n```\n\nThis will generate a JSON file **of around 212mb**, with the following syntax:\n\n``` json\n{\n  \"coordinates\": [\n    {\n      \"x\": 0.10327081810860272,\n      \"y\": 0.03247172212368832,\n      \"z\": 0.8155255437507467,\n      \"name\": \"scojbq 5965\",\n      \"opts\": {\n        \"1\": [\n          1,\n          true\n        ]\n      }\n    }\n  ],\n  \"info\": \"some info\"\n}\n```\n\nNow that we have our chunky JSON file; we can write our first test – **in Nim**:\n\n``` nim\nimport json\n\nlet jobj = parseFile(\"1.json\")\n\nlet coordinates = jobj[\"coordinates\"].elems\nlet len = float(coordinates.len)\nvar x = 0.0\nvar y = 0.0\nvar z = 0.0\n\nfor coord in coordinates:\n  x += coord[\"x\"].fnum\n  y += coord[\"y\"].fnum\n  z += coord[\"z\"].fnum\n\necho x / len\necho y / len\necho z / len\n```\n\nAnd again; the same simple test, this time written **in Crystal**:\n\n``` crystal\nrequire \"json\"\n\ntext = File.read(\"1.json\")\njobj = JSON.parse(text)\ncoordinates = jobj[\"coordinates\"].as_a\nlen = coordinates.size\nx = y = z = 0\n\ncoordinates.each do |coord|\n  x += coord[\"x\"].as_f\n  y += coord[\"y\"].as_f\n  z += coord[\"z\"].as_f\nend\n\np x / len\np y / len\np z / len\n```\n\n### Results:\n\nBuilding our test files into tiny release packages with the respective commands below:\n\n```\n$ crystal build json_test.cr --release -o json_test_cr --no-debug\n```\n\n```\n$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim\n```\n\nWe can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 6.92     | 1320.4      |\n| Crystal  | 4.58     | 960.7       |\n\nAs you can see; in this case ***Crystal*** is the more performant language – taking less time to execute & complete the test, and also fewer Megabytes in memory doing so.\n\n\n\n<br/>\n\n### Base64 encoding / decoding a large blob:\n\nIn this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let's look at the ***Nim*** test:\n\n``` nim\nimport base64, times, strutils, strformat\n\nlet STR_SIZE = 131072\nlet TRIES = 8192\nlet str = strutils.repeat('a', STR_SIZE)\n\nvar str2 = base64.encode(str)\nstdout.write(fmt\"encode {str[..3]}... to {str2[..3]}...: \")\n\nvar t = times.epochTime()\nvar i = 0\nvar s:int64 = 0\nwhile i < TRIES:\n  str2 = base64.encode(str)\n  s += len(str2)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n\nvar str3 = base64.decode(str2)\nstdout.write(fmt\"decode {str2[..3]}... to {str3[..3]}...: \")\n\nt = times.epochTime()\ni = 0\ns = 0\nwhile i < TRIES:\n  str3 = base64.decode(str2)\n  s += len(str3)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n```\n\nAnd now the same test, written in Crystal:\n\n``` crystal\nrequire \"base64\"\n\nSTR_SIZE = 131072\nTRIES = 8192\n\nstr = \"a\" * STR_SIZE\n\nstr2 = Base64.strict_encode(str)\nprint \"encode #{str[0..3]}... to #{str2[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str2 = Base64.strict_encode(str)\n  s += str2.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n\nstr3 = Base64.decode_string(str2)\nprint \"decode #{str2[0..3]}... to #{str3[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str3 = Base64.decode_string(str2)\n  s += str3.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n```\n\n### Results:\n\nWe can again; build our Base64 test files into release packages with the respective commands below:\n\n```\n$ crystal build base64_test.cr --release -o base64_test_cr --no-debug\n```\n\n```\n$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim\n```\n\nAs with our last test suite, we can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 4.17     | 6.6         |\n| Crystal  | 2.36     | 3.5         |\n\nOnce again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.\n\n\n## Conclusion\n\nThe summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research & testing to see how close to *C speeds* it could achieve.  That being said, I was *also* already aware that Nim **claims** close to C speeds, and that one of the language's principals was to run well on old & less-performant hardware.  \n\nYet, Crystal beat not only my own expectations; but beat Nim for both memory usage **AND** execution times.  I really didn't expect to see Crystal come out *this* far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  **Nim makes it even easier** than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.\n\nIn conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:\n\n - Part 2: Threading and Tooling\n - Part 3: Crypto, DApps and P2P\n\nThese two articles will be released over the next couple of days, so don't forget to come back then to check them out!\n\nThanks for reading - as ever, if you have any questions, please feel free to reach out at [robin@status](mailto:robin@status.im).\n\n[ - **@rbin**](https://twitter.com/rbin)\n","source":"_posts/2019-11-18-nim-vs-crystal-part-1-performance-interoperability.md","raw":"title: Nim vs Crystal - Part 1 - Performance & Interoperability\nsummary: \"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 1, Performance & Interoperability are reviewed.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/nim-crystal-header_blank.jpg'\n---\n\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nI've been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I'm happy that I'm finally able to do so.  What I've decided on doing; is breaking this up into a three part series as there are ***SO*** many features of both languages I'd like to talk about, and therein many opinions held too.  I do have a habit of writing **very** long articles, so I'd like to limit the topic scope, to keep each of these a little snappier!\n\nBefore I go into specifics on either of these languages, I'd first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I *have* had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nBack in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was *actually* interested in taking a look at.\n\nNaturally, both languages have a **TONNE** of features, so I'm not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the [Crystal Docs](https://crystal-lang.org/reference/), or the [Nim Docs](https://nim-lang.org/docs/lib.html).\n\nAnyway, let's take a look at both languages, and you can make your own mind up as to which you'd rather be programming in.  Maybe both.  Maybe neither!\n\n\n<br/>\n\n## Nim\n\nNim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to ***pretty much*** fit these criterion.  \n\n> By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.\n\n> The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.\n\nWhen I say it *pretty much* matches the criteria, the only statement that doesn't quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.\n\n\n### Installing Nim\n\nNim is super easy to install.  If you're on Windows, [head over here](https://nim-lang.org/install_windows.html), and download/run the installer.\n\nIf you're on any other Unix-based system, you can run:\n\n```\n$ curl https://nim-lang.org/choosenim/init.sh -sSf | sh`\n```\n\nIf you're on Mac, and with Homebrew installed, simply run:\n\n```\n$ brew install nim\n```\n\nYou could also consider using [choosenim](https://github.com/dom96/choosenim) to manage Nim installations in a similar way to `pyenv` and `rustup`.\n\n\n### Interfacing Other Languages\n\nOne of the things that attracted me to both Nim **and** Crystal, was the ability to natively interface with other languages, and the **ease** with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!\n\nWhen it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.\n\nFor a quick demo, let's take a look at interfacing both C and JavaScript from Nim.\n\n#### C Invocation\n\nFirstly, create the file `logic.c` with the following content:\n\n``` c\nint addTwoIntegers(int a, int b)\n{\n  return a + b;\n}\n```\n\nNext, create the file `calculator.nim` with the following content:\n\n``` nim\n{.compile: \"logic.c\".}\nproc addTwoIntegers(a, b: cint): cint {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\nNow then, with these two *very simple* files in place, we can run:\n\n```\n$ nim c -r calculator.nim\n```\n\nThe Nim compiler will compile the `logic.c` file in addition to `calculator.nim` and link both into an executable; which outputs `10` when run.  Very sharp, in my opinion!\n\n#### JavaScript Invocation\n\nEven sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled `host.html` with the following content:\n\n``` html\n<html>\n<body>\n  <script type=\"text/javascript\">\n    function addTwoIntegers(a, b)\n    {\n      return a + b;\n    }\n  </script>\n\n  <script type=\"text/javascript\" src=\"calculator.js\"></script>\n</body>\n</html>\n```\n\nNow, create another `calculator.nim` file with the following content (or reuse the one from the above C example):\n\n``` nim\nproc addTwoIntegers(a, b: int): int {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\n\nCompile the Nim code to JavaScript by running:\n\n```\n$ nim js -o:calculator.js calculator.nim\n```\n\nOnce that's done, go ahead and open `host.html` in a browser and you should see the value `10` in the browser's console.  I think this is **REALLY** neat.  It's superb how easy it is to achieve that, too.\n\n\n### Aside – a Quick (not-so) Secret:\n\nInstead of writing out the HTML above, you could actually use ***Nim's native*** HTML DSL:\n\n``` nim\nimport html_dsl\n\nhtml page:\n  head:\n    title(\"Title\")\n  body:\n    p(\"Hello\")\n    p(\"World\")\n    dv:\n      p \"Example\"\n\necho render(page())\n```\n\nRunning this will output the following:\n\n``` html\n<!DOCTYPE html>\n  <html class='has-navbar-fixed-top' >\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Title</title>\n  </head>\n  <body class='has-navbar-fixed-top' >\n    <p >Hello</p>\n    <p >World</p>\n    <div>\n      <p>Example</p>\n    </div>\n  </body>\n</html>\n```\n\n\n<br/>\n\n## Crystal\n\nCrystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.\n\nI first came across Crystal when I saw [@sferik](https://twitter.com/sferik) giving a talk on it in Poland back in 2015. [Video here.](https://www.youtube.com/watch?v=Ysm4IU4aWoQ) It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.\n\n### Installing Crystal\n\nYou can find all of the relevant instructions for installing Crystal, on the [main website installation page](https://crystal-lang.org/install/).\n\nIf you are on Mac, and have Homebrew installed, you can simply run:\n\n```\n$ brew install crystal\n```\n\n**However**, if you are a Windows user, *for the time being* you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I'd take a (not yet gained) point **away** from Crystal here, for lack of Windows support.\n\n\n### Interfacing C\n\nLet’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.\n\nFirst off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:\n\n```\n$ crystal init app sayhi_c\n```\n\nThen head into the directory `sayhi_c/src/sayhi_c` and let’s create a file `sayhi.c` with the following contents:\n\n``` c\n#include <stdio.h>\n\nvoid hi(const char * name){\n  printf(\"Hi %s!\\n\", name);\n}\n```\n\nNow we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:\n\n```\n$ gcc -c sayhi.c -o sayhi.o\n```\n\nUsing the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our `sayhi_c.cr` file, and have it reflect the following:\n\n``` crystal\nrequire \"./sayhi_c/*\"\n\n@[Link(ldflags: \"#{__DIR__}/sayhi_c/sayhi.o\")]\n\nlib Say\n  fun hi(name : LibC::Char*) : Void\nend\n\nSay.hi(\"Status\")\n```\n\nI’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.\n\nAlso worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.\n\nSo, if we build our project file and run it, we get the following:\n\n```\n$ crystal build --release src/sayhi_c.cr\n\n$ ./sayhi_c\n\n > Hi Status!\n```\n\nAs you can see, Nim takes the winners trophy in this case, as it is **much** simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.\n\n\n\n<br/>\n\n## Performance Tests\n\n### Parsing & calculating values from a large JSON file:\n\nFirstly, we need to generate our large JSON file.  For this test, we're going to generate a dataset which includes **1 Million** items.\n\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\nWe can do so with the following Ruby script:\n\n``` rb\nrequire 'json'\n\nx = []\n\n1000000.times do\n  h = {\n    'x' => rand,\n    'y' => rand,\n    'z' => rand,\n    'name' => ('a'..'z').to_a.shuffle[0..5].join + ' ' + rand(10000).to_s,\n    'opts' => {'1' => [1, true]},\n  }\n  x << h\nend\n\nFile.open(\"1.json\", 'w') { |f| f.write JSON.pretty_generate('coordinates' => x, 'info' => \"some info\") }\n```\n\nThis will generate a JSON file **of around 212mb**, with the following syntax:\n\n``` json\n{\n  \"coordinates\": [\n    {\n      \"x\": 0.10327081810860272,\n      \"y\": 0.03247172212368832,\n      \"z\": 0.8155255437507467,\n      \"name\": \"scojbq 5965\",\n      \"opts\": {\n        \"1\": [\n          1,\n          true\n        ]\n      }\n    }\n  ],\n  \"info\": \"some info\"\n}\n```\n\nNow that we have our chunky JSON file; we can write our first test – **in Nim**:\n\n``` nim\nimport json\n\nlet jobj = parseFile(\"1.json\")\n\nlet coordinates = jobj[\"coordinates\"].elems\nlet len = float(coordinates.len)\nvar x = 0.0\nvar y = 0.0\nvar z = 0.0\n\nfor coord in coordinates:\n  x += coord[\"x\"].fnum\n  y += coord[\"y\"].fnum\n  z += coord[\"z\"].fnum\n\necho x / len\necho y / len\necho z / len\n```\n\nAnd again; the same simple test, this time written **in Crystal**:\n\n``` crystal\nrequire \"json\"\n\ntext = File.read(\"1.json\")\njobj = JSON.parse(text)\ncoordinates = jobj[\"coordinates\"].as_a\nlen = coordinates.size\nx = y = z = 0\n\ncoordinates.each do |coord|\n  x += coord[\"x\"].as_f\n  y += coord[\"y\"].as_f\n  z += coord[\"z\"].as_f\nend\n\np x / len\np y / len\np z / len\n```\n\n### Results:\n\nBuilding our test files into tiny release packages with the respective commands below:\n\n```\n$ crystal build json_test.cr --release -o json_test_cr --no-debug\n```\n\n```\n$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim\n```\n\nWe can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 6.92     | 1320.4      |\n| Crystal  | 4.58     | 960.7       |\n\nAs you can see; in this case ***Crystal*** is the more performant language – taking less time to execute & complete the test, and also fewer Megabytes in memory doing so.\n\n\n\n<br/>\n\n### Base64 encoding / decoding a large blob:\n\nIn this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let's look at the ***Nim*** test:\n\n``` nim\nimport base64, times, strutils, strformat\n\nlet STR_SIZE = 131072\nlet TRIES = 8192\nlet str = strutils.repeat('a', STR_SIZE)\n\nvar str2 = base64.encode(str)\nstdout.write(fmt\"encode {str[..3]}... to {str2[..3]}...: \")\n\nvar t = times.epochTime()\nvar i = 0\nvar s:int64 = 0\nwhile i < TRIES:\n  str2 = base64.encode(str)\n  s += len(str2)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n\nvar str3 = base64.decode(str2)\nstdout.write(fmt\"decode {str2[..3]}... to {str3[..3]}...: \")\n\nt = times.epochTime()\ni = 0\ns = 0\nwhile i < TRIES:\n  str3 = base64.decode(str2)\n  s += len(str3)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n```\n\nAnd now the same test, written in Crystal:\n\n``` crystal\nrequire \"base64\"\n\nSTR_SIZE = 131072\nTRIES = 8192\n\nstr = \"a\" * STR_SIZE\n\nstr2 = Base64.strict_encode(str)\nprint \"encode #{str[0..3]}... to #{str2[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str2 = Base64.strict_encode(str)\n  s += str2.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n\nstr3 = Base64.decode_string(str2)\nprint \"decode #{str2[0..3]}... to #{str3[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str3 = Base64.decode_string(str2)\n  s += str3.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n```\n\n### Results:\n\nWe can again; build our Base64 test files into release packages with the respective commands below:\n\n```\n$ crystal build base64_test.cr --release -o base64_test_cr --no-debug\n```\n\n```\n$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim\n```\n\nAs with our last test suite, we can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 4.17     | 6.6         |\n| Crystal  | 2.36     | 3.5         |\n\nOnce again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.\n\n\n## Conclusion\n\nThe summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research & testing to see how close to *C speeds* it could achieve.  That being said, I was *also* already aware that Nim **claims** close to C speeds, and that one of the language's principals was to run well on old & less-performant hardware.  \n\nYet, Crystal beat not only my own expectations; but beat Nim for both memory usage **AND** execution times.  I really didn't expect to see Crystal come out *this* far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  **Nim makes it even easier** than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.\n\nIn conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:\n\n - Part 2: Threading and Tooling\n - Part 3: Crypto, DApps and P2P\n\nThese two articles will be released over the next couple of days, so don't forget to come back then to check them out!\n\nThanks for reading - as ever, if you have any questions, please feel free to reach out at [robin@status](mailto:robin@status.im).\n\n[ - **@rbin**](https://twitter.com/rbin)\n","slug":"nim-vs-crystal-part-1-performance-interoperability","published":1,"date":"2019-11-18T05:00:00.000Z","updated":"2020-01-17T19:05:36.394Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3u6002g7heg2yc1byah","content":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>I’ve been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I’m happy that I’m finally able to do so.  What I’ve decided on doing; is breaking this up into a three part series as there are <strong><em>SO</em></strong> many features of both languages I’d like to talk about, and therein many opinions held too.  I do have a habit of writing <strong>very</strong> long articles, so I’d like to limit the topic scope, to keep each of these a little snappier!</p>\n<p>Before I go into specifics on either of these languages, I’d first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I <em>have</em> had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.</p>\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\n<p>Back in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was <em>actually</em> interested in taking a look at.</p>\n<p>Naturally, both languages have a <strong>TONNE</strong> of features, so I’m not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the <a href=\"https://crystal-lang.org/reference/\" target=\"_blank\" rel=\"noopener\">Crystal Docs</a>, or the <a href=\"https://nim-lang.org/docs/lib.html\" target=\"_blank\" rel=\"noopener\">Nim Docs</a>.</p>\n<p>Anyway, let’s take a look at both languages, and you can make your own mind up as to which you’d rather be programming in.  Maybe both.  Maybe neither!</p>\n<br/>\n\n<h2 id=\"Nim\"><a href=\"#Nim\" class=\"headerlink\" title=\"Nim\"></a>Nim</h2><p>Nim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to <strong><em>pretty much</em></strong> fit these criterion.  </p>\n<blockquote>\n<p>By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.</p>\n</blockquote>\n<blockquote>\n<p>The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.</p>\n</blockquote>\n<p>When I say it <em>pretty much</em> matches the criteria, the only statement that doesn’t quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.</p>\n<h3 id=\"Installing-Nim\"><a href=\"#Installing-Nim\" class=\"headerlink\" title=\"Installing Nim\"></a>Installing Nim</h3><p>Nim is super easy to install.  If you’re on Windows, <a href=\"https://nim-lang.org/install_windows.html\" target=\"_blank\" rel=\"noopener\">head over here</a>, and download/run the installer.</p>\n<p>If you’re on any other Unix-based system, you can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ curl https:&#x2F;&#x2F;nim-lang.org&#x2F;choosenim&#x2F;init.sh -sSf | sh&#96;</span><br></pre></td></tr></table></figure>\n\n<p>If you’re on Mac, and with Homebrew installed, simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install nim</span><br></pre></td></tr></table></figure>\n\n<p>You could also consider using <a href=\"https://github.com/dom96/choosenim\" target=\"_blank\" rel=\"noopener\">choosenim</a> to manage Nim installations in a similar way to <code>pyenv</code> and <code>rustup</code>.</p>\n<h3 id=\"Interfacing-Other-Languages\"><a href=\"#Interfacing-Other-Languages\" class=\"headerlink\" title=\"Interfacing Other Languages\"></a>Interfacing Other Languages</h3><p>One of the things that attracted me to both Nim <strong>and</strong> Crystal, was the ability to natively interface with other languages, and the <strong>ease</strong> with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!</p>\n<p>When it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.</p>\n<p>For a quick demo, let’s take a look at interfacing both C and JavaScript from Nim.</p>\n<h4 id=\"C-Invocation\"><a href=\"#C-Invocation\" class=\"headerlink\" title=\"C Invocation\"></a>C Invocation</h4><p>Firstly, create the file <code>logic.c</code> with the following content:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">int</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(<span class=\"keyword\">int</span> a, <span class=\"keyword\">int</span> b)</span></span></span><br><span class=\"line\"><span class=\"function\"></span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> a + b;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, create the file <code>calculator.nim</code> with the following content:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&#123;.compile: \"logic.c\".&#125;</span></span><br><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">cint</span>): <span class=\"built_in\">cint</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n<p>Now then, with these two <em>very simple</em> files in place, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -r calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>The Nim compiler will compile the <code>logic.c</code> file in addition to <code>calculator.nim</code> and link both into an executable; which outputs <code>10</code> when run.  Very sharp, in my opinion!</p>\n<h4 id=\"JavaScript-Invocation\"><a href=\"#JavaScript-Invocation\" class=\"headerlink\" title=\"JavaScript Invocation\"></a>JavaScript Invocation</h4><p>Even sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled <code>host.html</code> with the following content:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">html</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"actionscript\">    <span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(a, b)</span></span></span></span><br><span class=\"line\">    &#123;</span><br><span class=\"line\"><span class=\"actionscript\">      <span class=\"keyword\">return</span> a + b;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span> <span class=\"attr\">src</span>=<span class=\"string\">\"calculator.js\"</span>&gt;</span><span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>Now, create another <code>calculator.nim</code> file with the following content (or reuse the one from the above C example):</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">int</span>): <span class=\"built_in\">int</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n\n<p>Compile the Nim code to JavaScript by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim js -o:calculator.js calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>Once that’s done, go ahead and open <code>host.html</code> in a browser and you should see the value <code>10</code> in the browser’s console.  I think this is <strong>REALLY</strong> neat.  It’s superb how easy it is to achieve that, too.</p>\n<h3 id=\"Aside-–-a-Quick-not-so-Secret\"><a href=\"#Aside-–-a-Quick-not-so-Secret\" class=\"headerlink\" title=\"Aside – a Quick (not-so) Secret:\"></a>Aside – a Quick (not-so) Secret:</h3><p>Instead of writing out the HTML above, you could actually use <strong><em>Nim’s native</em></strong> HTML DSL:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> html_dsl</span><br><span class=\"line\"></span><br><span class=\"line\">html page:</span><br><span class=\"line\">  head:</span><br><span class=\"line\">    title(<span class=\"string\">\"Title\"</span>)</span><br><span class=\"line\">  body:</span><br><span class=\"line\">    p(<span class=\"string\">\"Hello\"</span>)</span><br><span class=\"line\">    p(<span class=\"string\">\"World\"</span>)</span><br><span class=\"line\">    dv:</span><br><span class=\"line\">      p <span class=\"string\">\"Example\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">echo render(page())</span><br></pre></td></tr></table></figure>\n\n<p>Running this will output the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&lt;!DOCTYPE <span class=\"meta-keyword\">html</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">html</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">charset</span>=<span class=\"string\">\"utf-8\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">\"viewport\"</span> <span class=\"attr\">content</span>=<span class=\"string\">\"width=device-width, initial-scale=1\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">title</span>&gt;</span>Title<span class=\"tag\">&lt;/<span class=\"name\">title</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">body</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>Hello<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>World<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">      <span class=\"tag\">&lt;<span class=\"name\">p</span>&gt;</span>Example<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n\n<br/>\n\n<h2 id=\"Crystal\"><a href=\"#Crystal\" class=\"headerlink\" title=\"Crystal\"></a>Crystal</h2><p>Crystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.</p>\n<p>I first came across Crystal when I saw <a href=\"https://twitter.com/sferik\" target=\"_blank\" rel=\"noopener\">@sferik</a> giving a talk on it in Poland back in 2015. <a href=\"https://www.youtube.com/watch?v=Ysm4IU4aWoQ\" target=\"_blank\" rel=\"noopener\">Video here.</a> It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.</p>\n<h3 id=\"Installing-Crystal\"><a href=\"#Installing-Crystal\" class=\"headerlink\" title=\"Installing Crystal\"></a>Installing Crystal</h3><p>You can find all of the relevant instructions for installing Crystal, on the <a href=\"https://crystal-lang.org/install/\" target=\"_blank\" rel=\"noopener\">main website installation page</a>.</p>\n<p>If you are on Mac, and have Homebrew installed, you can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install crystal</span><br></pre></td></tr></table></figure>\n\n<p><strong>However</strong>, if you are a Windows user, <em>for the time being</em> you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I’d take a (not yet gained) point <strong>away</strong> from Crystal here, for lack of Windows support.</p>\n<h3 id=\"Interfacing-C\"><a href=\"#Interfacing-C\" class=\"headerlink\" title=\"Interfacing C\"></a>Interfacing C</h3><p>Let’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.</p>\n<p>First off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init app sayhi_c</span><br></pre></td></tr></table></figure>\n\n<p>Then head into the directory <code>sayhi_c/src/sayhi_c</code> and let’s create a file <code>sayhi.c</code> with the following contents:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">#<span class=\"meta-keyword\">include</span> <span class=\"meta-string\">&lt;stdio.h&gt;</span></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">void</span> <span class=\"title\">hi</span><span class=\"params\">(<span class=\"keyword\">const</span> <span class=\"keyword\">char</span> * name)</span></span>&#123;</span><br><span class=\"line\">  <span class=\"built_in\">printf</span>(<span class=\"string\">\"Hi %s!\\n\"</span>, name);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ gcc -c sayhi.c -o sayhi.o</span><br></pre></td></tr></table></figure>\n\n<p>Using the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our <code>sayhi_c.cr</code> file, and have it reflect the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"./sayhi_c/*\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"meta\">@[Link(ldflags: <span class=\"meta-string\">\"#&#123;__DIR__&#125;/sayhi_c/sayhi.o\"</span>)]</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">lib</span> <span class=\"title\">Say</span></span></span><br><span class=\"line\">  <span class=\"function\"><span class=\"keyword\">fun</span> <span class=\"title\">hi</span></span>(name : <span class=\"symbol\">LibC:</span>:Char*) : Void</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Say.hi(<span class=\"string\">\"Status\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>I’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.</p>\n<p>Also worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.</p>\n<p>So, if we build our project file and run it, we get the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build --release src&#x2F;sayhi_c.cr</span><br><span class=\"line\"></span><br><span class=\"line\">$ .&#x2F;sayhi_c</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; Hi Status!</span><br></pre></td></tr></table></figure>\n\n<p>As you can see, Nim takes the winners trophy in this case, as it is <strong>much</strong> simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.</p>\n<br/>\n\n<h2 id=\"Performance-Tests\"><a href=\"#Performance-Tests\" class=\"headerlink\" title=\"Performance Tests\"></a>Performance Tests</h2><h3 id=\"Parsing-amp-calculating-values-from-a-large-JSON-file\"><a href=\"#Parsing-amp-calculating-values-from-a-large-JSON-file\" class=\"headerlink\" title=\"Parsing &amp; calculating values from a large JSON file:\"></a>Parsing &amp; calculating values from a large JSON file:</h3><p>Firstly, we need to generate our large JSON file.  For this test, we’re going to generate a dataset which includes <strong>1 Million</strong> items.</p>\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\n<p>We can do so with the following Ruby script:</p>\n<figure class=\"highlight rb\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">'json'</span></span><br><span class=\"line\"></span><br><span class=\"line\">x = []</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"number\">1000000</span>.times <span class=\"keyword\">do</span></span><br><span class=\"line\">  h = &#123;</span><br><span class=\"line\">    <span class=\"string\">'x'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'y'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'z'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'name'</span> =&gt; (<span class=\"string\">'a'</span>..<span class=\"string\">'z'</span>).to_a.shuffle[<span class=\"number\">0</span>..<span class=\"number\">5</span>].join + <span class=\"string\">' '</span> + rand(<span class=\"number\">10000</span>).to_s,</span><br><span class=\"line\">    <span class=\"string\">'opts'</span> =&gt; &#123;<span class=\"string\">'1'</span> =&gt; [<span class=\"number\">1</span>, <span class=\"literal\">true</span>]&#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  x &lt;&lt; h</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">File.open(<span class=\"string\">\"1.json\"</span>, <span class=\"string\">'w'</span>) &#123; <span class=\"params\">|f|</span> f.write JSON.pretty_generate(<span class=\"string\">'coordinates'</span> =&gt; x, <span class=\"string\">'info'</span> =&gt; <span class=\"string\">\"some info\"</span>) &#125;</span><br></pre></td></tr></table></figure>\n\n<p>This will generate a JSON file <strong>of around 212mb</strong>, with the following syntax:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"coordinates\"</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"x\"</span>: <span class=\"number\">0.10327081810860272</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"y\"</span>: <span class=\"number\">0.03247172212368832</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"z\"</span>: <span class=\"number\">0.8155255437507467</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"name\"</span>: <span class=\"string\">\"scojbq 5965\"</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"opts\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"1\"</span>: [</span><br><span class=\"line\">          <span class=\"number\">1</span>,</span><br><span class=\"line\">          <span class=\"literal\">true</span></span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  <span class=\"attr\">\"info\"</span>: <span class=\"string\">\"some info\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now that we have our chunky JSON file; we can write our first test – <strong>in Nim</strong>:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> json</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> jobj = parseFile(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].elems</span><br><span class=\"line\"><span class=\"keyword\">let</span> len = <span class=\"built_in\">float</span>(coordinates.len)</span><br><span class=\"line\"><span class=\"keyword\">var</span> x = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> y = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> z = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> coord <span class=\"keyword\">in</span> coordinates:</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].fnum</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].fnum</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].fnum</span><br><span class=\"line\"></span><br><span class=\"line\">echo x / len</span><br><span class=\"line\">echo y / len</span><br><span class=\"line\">echo z / len</span><br></pre></td></tr></table></figure>\n\n<p>And again; the same simple test, this time written <strong>in Crystal</strong>:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">text = File.read(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\">jobj = JSON.parse(text)</span><br><span class=\"line\">coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].as_a</span><br><span class=\"line\">len = coordinates.size</span><br><span class=\"line\">x = y = z = <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">coordinates.each <span class=\"keyword\">do</span> |coord|</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].as_f</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].as_f</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].as_f</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">p x / len</span><br><span class=\"line\">p y / len</span><br><span class=\"line\">p z / len</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results\"><a href=\"#Results\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>Building our test files into tiny release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build json_test.cr --release -o json_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>We can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>6.92</td>\n<td>1320.4</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>4.58</td>\n<td>960.7</td>\n</tr>\n</tbody></table>\n<p>As you can see; in this case <strong><em>Crystal</em></strong> is the more performant language – taking less time to execute &amp; complete the test, and also fewer Megabytes in memory doing so.</p>\n<br/>\n\n<h3 id=\"Base64-encoding-decoding-a-large-blob\"><a href=\"#Base64-encoding-decoding-a-large-blob\" class=\"headerlink\" title=\"Base64 encoding / decoding a large blob:\"></a>Base64 encoding / decoding a large blob:</h3><p>In this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let’s look at the <strong><em>Nim</em></strong> test:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> base64, times, strutils, strformat</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">STR_SIZE</span> = <span class=\"number\">131072</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">TRIES</span> = <span class=\"number\">8192</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> str = strutils.repeat('a', <span class=\"type\">STR_SIZE</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str2 = base64.encode(str)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"encode &#123;str[..3]&#125;... to &#123;str2[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> t = times.epochTime()</span><br><span class=\"line\"><span class=\"keyword\">var</span> i = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> s:<span class=\"built_in\">int64</span> = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str2 = base64.encode(str)</span><br><span class=\"line\">  s += len(str2)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str3 = base64.decode(str2)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"decode &#123;str2[..3]&#125;... to &#123;str3[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\">t = times.epochTime()</span><br><span class=\"line\">i = <span class=\"number\">0</span></span><br><span class=\"line\">s = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str3 = base64.decode(str2)</span><br><span class=\"line\">  s += len(str3)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And now the same test, written in Crystal:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"base64\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">STR_SIZE = <span class=\"number\">131072</span></span><br><span class=\"line\">TRIES = <span class=\"number\">8192</span></span><br><span class=\"line\"></span><br><span class=\"line\">str = <span class=\"string\">\"a\"</span> * STR_SIZE</span><br><span class=\"line\"></span><br><span class=\"line\">str2 = Base64.strict_encode(str)</span><br><span class=\"line\">print <span class=\"string\">\"encode <span class=\"subst\">#&#123;str[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str2 = Base64.strict_encode(str)</span><br><span class=\"line\">  s += str2.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">str3 = Base64.decode_string(str2)</span><br><span class=\"line\">print <span class=\"string\">\"decode <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str3[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str3 = Base64.decode_string(str2)</span><br><span class=\"line\">  s += str3.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results-1\"><a href=\"#Results-1\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>We can again; build our Base64 test files into release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build base64_test.cr --release -o base64_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>As with our last test suite, we can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>4.17</td>\n<td>6.6</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>2.36</td>\n<td>3.5</td>\n</tr>\n</tbody></table>\n<p>Once again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>The summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research &amp; testing to see how close to <em>C speeds</em> it could achieve.  That being said, I was <em>also</em> already aware that Nim <strong>claims</strong> close to C speeds, and that one of the language’s principals was to run well on old &amp; less-performant hardware.  </p>\n<p>Yet, Crystal beat not only my own expectations; but beat Nim for both memory usage <strong>AND</strong> execution times.  I really didn’t expect to see Crystal come out <em>this</em> far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  <strong>Nim makes it even easier</strong> than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.</p>\n<p>In conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:</p>\n<ul>\n<li>Part 2: Threading and Tooling</li>\n<li>Part 3: Crypto, DApps and P2P</li>\n</ul>\n<p>These two articles will be released over the next couple of days, so don’t forget to come back then to check them out!</p>\n<p>Thanks for reading - as ever, if you have any questions, please feel free to reach out at <a href=\"mailto:robin@status.im\" target=\"_blank\" rel=\"noopener\">robin@status</a>.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> - <strong>@rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>I’ve been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I’m happy that I’m finally able to do so.  What I’ve decided on doing; is breaking this up into a three part series as there are <strong><em>SO</em></strong> many features of both languages I’d like to talk about, and therein many opinions held too.  I do have a habit of writing <strong>very</strong> long articles, so I’d like to limit the topic scope, to keep each of these a little snappier!</p>\n<p>Before I go into specifics on either of these languages, I’d first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I <em>have</em> had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.</p>\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\n<p>Back in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was <em>actually</em> interested in taking a look at.</p>\n<p>Naturally, both languages have a <strong>TONNE</strong> of features, so I’m not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the <a href=\"https://crystal-lang.org/reference/\" target=\"_blank\" rel=\"noopener\">Crystal Docs</a>, or the <a href=\"https://nim-lang.org/docs/lib.html\" target=\"_blank\" rel=\"noopener\">Nim Docs</a>.</p>\n<p>Anyway, let’s take a look at both languages, and you can make your own mind up as to which you’d rather be programming in.  Maybe both.  Maybe neither!</p>\n<br/>\n\n<h2 id=\"Nim\"><a href=\"#Nim\" class=\"headerlink\" title=\"Nim\"></a>Nim</h2><p>Nim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to <strong><em>pretty much</em></strong> fit these criterion.  </p>\n<blockquote>\n<p>By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.</p>\n</blockquote>\n<blockquote>\n<p>The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.</p>\n</blockquote>\n<p>When I say it <em>pretty much</em> matches the criteria, the only statement that doesn’t quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.</p>\n<h3 id=\"Installing-Nim\"><a href=\"#Installing-Nim\" class=\"headerlink\" title=\"Installing Nim\"></a>Installing Nim</h3><p>Nim is super easy to install.  If you’re on Windows, <a href=\"https://nim-lang.org/install_windows.html\" target=\"_blank\" rel=\"noopener\">head over here</a>, and download/run the installer.</p>\n<p>If you’re on any other Unix-based system, you can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ curl https:&#x2F;&#x2F;nim-lang.org&#x2F;choosenim&#x2F;init.sh -sSf | sh&#96;</span><br></pre></td></tr></table></figure>\n\n<p>If you’re on Mac, and with Homebrew installed, simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install nim</span><br></pre></td></tr></table></figure>\n\n<p>You could also consider using <a href=\"https://github.com/dom96/choosenim\" target=\"_blank\" rel=\"noopener\">choosenim</a> to manage Nim installations in a similar way to <code>pyenv</code> and <code>rustup</code>.</p>\n<h3 id=\"Interfacing-Other-Languages\"><a href=\"#Interfacing-Other-Languages\" class=\"headerlink\" title=\"Interfacing Other Languages\"></a>Interfacing Other Languages</h3><p>One of the things that attracted me to both Nim <strong>and</strong> Crystal, was the ability to natively interface with other languages, and the <strong>ease</strong> with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!</p>\n<p>When it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.</p>\n<p>For a quick demo, let’s take a look at interfacing both C and JavaScript from Nim.</p>\n<h4 id=\"C-Invocation\"><a href=\"#C-Invocation\" class=\"headerlink\" title=\"C Invocation\"></a>C Invocation</h4><p>Firstly, create the file <code>logic.c</code> with the following content:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">int</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(<span class=\"keyword\">int</span> a, <span class=\"keyword\">int</span> b)</span></span></span><br><span class=\"line\"><span class=\"function\"></span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> a + b;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, create the file <code>calculator.nim</code> with the following content:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&#123;.compile: \"logic.c\".&#125;</span></span><br><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">cint</span>): <span class=\"built_in\">cint</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n<p>Now then, with these two <em>very simple</em> files in place, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -r calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>The Nim compiler will compile the <code>logic.c</code> file in addition to <code>calculator.nim</code> and link both into an executable; which outputs <code>10</code> when run.  Very sharp, in my opinion!</p>\n<h4 id=\"JavaScript-Invocation\"><a href=\"#JavaScript-Invocation\" class=\"headerlink\" title=\"JavaScript Invocation\"></a>JavaScript Invocation</h4><p>Even sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled <code>host.html</code> with the following content:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">html</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"actionscript\">    <span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(a, b)</span></span></span></span><br><span class=\"line\">    &#123;</span><br><span class=\"line\"><span class=\"actionscript\">      <span class=\"keyword\">return</span> a + b;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span> <span class=\"attr\">src</span>=<span class=\"string\">\"calculator.js\"</span>&gt;</span><span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>Now, create another <code>calculator.nim</code> file with the following content (or reuse the one from the above C example):</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">int</span>): <span class=\"built_in\">int</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n\n<p>Compile the Nim code to JavaScript by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim js -o:calculator.js calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>Once that’s done, go ahead and open <code>host.html</code> in a browser and you should see the value <code>10</code> in the browser’s console.  I think this is <strong>REALLY</strong> neat.  It’s superb how easy it is to achieve that, too.</p>\n<h3 id=\"Aside-–-a-Quick-not-so-Secret\"><a href=\"#Aside-–-a-Quick-not-so-Secret\" class=\"headerlink\" title=\"Aside – a Quick (not-so) Secret:\"></a>Aside – a Quick (not-so) Secret:</h3><p>Instead of writing out the HTML above, you could actually use <strong><em>Nim’s native</em></strong> HTML DSL:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> html_dsl</span><br><span class=\"line\"></span><br><span class=\"line\">html page:</span><br><span class=\"line\">  head:</span><br><span class=\"line\">    title(<span class=\"string\">\"Title\"</span>)</span><br><span class=\"line\">  body:</span><br><span class=\"line\">    p(<span class=\"string\">\"Hello\"</span>)</span><br><span class=\"line\">    p(<span class=\"string\">\"World\"</span>)</span><br><span class=\"line\">    dv:</span><br><span class=\"line\">      p <span class=\"string\">\"Example\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">echo render(page())</span><br></pre></td></tr></table></figure>\n\n<p>Running this will output the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&lt;!DOCTYPE <span class=\"meta-keyword\">html</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">html</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">charset</span>=<span class=\"string\">\"utf-8\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">\"viewport\"</span> <span class=\"attr\">content</span>=<span class=\"string\">\"width=device-width, initial-scale=1\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">title</span>&gt;</span>Title<span class=\"tag\">&lt;/<span class=\"name\">title</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">body</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>Hello<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>World<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">      <span class=\"tag\">&lt;<span class=\"name\">p</span>&gt;</span>Example<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n\n<br/>\n\n<h2 id=\"Crystal\"><a href=\"#Crystal\" class=\"headerlink\" title=\"Crystal\"></a>Crystal</h2><p>Crystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.</p>\n<p>I first came across Crystal when I saw <a href=\"https://twitter.com/sferik\" target=\"_blank\" rel=\"noopener\">@sferik</a> giving a talk on it in Poland back in 2015. <a href=\"https://www.youtube.com/watch?v=Ysm4IU4aWoQ\" target=\"_blank\" rel=\"noopener\">Video here.</a> It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.</p>\n<h3 id=\"Installing-Crystal\"><a href=\"#Installing-Crystal\" class=\"headerlink\" title=\"Installing Crystal\"></a>Installing Crystal</h3><p>You can find all of the relevant instructions for installing Crystal, on the <a href=\"https://crystal-lang.org/install/\" target=\"_blank\" rel=\"noopener\">main website installation page</a>.</p>\n<p>If you are on Mac, and have Homebrew installed, you can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install crystal</span><br></pre></td></tr></table></figure>\n\n<p><strong>However</strong>, if you are a Windows user, <em>for the time being</em> you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I’d take a (not yet gained) point <strong>away</strong> from Crystal here, for lack of Windows support.</p>\n<h3 id=\"Interfacing-C\"><a href=\"#Interfacing-C\" class=\"headerlink\" title=\"Interfacing C\"></a>Interfacing C</h3><p>Let’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.</p>\n<p>First off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init app sayhi_c</span><br></pre></td></tr></table></figure>\n\n<p>Then head into the directory <code>sayhi_c/src/sayhi_c</code> and let’s create a file <code>sayhi.c</code> with the following contents:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">#<span class=\"meta-keyword\">include</span> <span class=\"meta-string\">&lt;stdio.h&gt;</span></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">void</span> <span class=\"title\">hi</span><span class=\"params\">(<span class=\"keyword\">const</span> <span class=\"keyword\">char</span> * name)</span></span>&#123;</span><br><span class=\"line\">  <span class=\"built_in\">printf</span>(<span class=\"string\">\"Hi %s!\\n\"</span>, name);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ gcc -c sayhi.c -o sayhi.o</span><br></pre></td></tr></table></figure>\n\n<p>Using the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our <code>sayhi_c.cr</code> file, and have it reflect the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"./sayhi_c/*\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"meta\">@[Link(ldflags: <span class=\"meta-string\">\"#&#123;__DIR__&#125;/sayhi_c/sayhi.o\"</span>)]</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">lib</span> <span class=\"title\">Say</span></span></span><br><span class=\"line\">  <span class=\"function\"><span class=\"keyword\">fun</span> <span class=\"title\">hi</span></span>(name : <span class=\"symbol\">LibC:</span>:Char*) : Void</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Say.hi(<span class=\"string\">\"Status\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>I’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.</p>\n<p>Also worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.</p>\n<p>So, if we build our project file and run it, we get the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build --release src&#x2F;sayhi_c.cr</span><br><span class=\"line\"></span><br><span class=\"line\">$ .&#x2F;sayhi_c</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; Hi Status!</span><br></pre></td></tr></table></figure>\n\n<p>As you can see, Nim takes the winners trophy in this case, as it is <strong>much</strong> simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.</p>\n<br/>\n\n<h2 id=\"Performance-Tests\"><a href=\"#Performance-Tests\" class=\"headerlink\" title=\"Performance Tests\"></a>Performance Tests</h2><h3 id=\"Parsing-amp-calculating-values-from-a-large-JSON-file\"><a href=\"#Parsing-amp-calculating-values-from-a-large-JSON-file\" class=\"headerlink\" title=\"Parsing &amp; calculating values from a large JSON file:\"></a>Parsing &amp; calculating values from a large JSON file:</h3><p>Firstly, we need to generate our large JSON file.  For this test, we’re going to generate a dataset which includes <strong>1 Million</strong> items.</p>\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\n<p>We can do so with the following Ruby script:</p>\n<figure class=\"highlight rb\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">'json'</span></span><br><span class=\"line\"></span><br><span class=\"line\">x = []</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"number\">1000000</span>.times <span class=\"keyword\">do</span></span><br><span class=\"line\">  h = &#123;</span><br><span class=\"line\">    <span class=\"string\">'x'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'y'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'z'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'name'</span> =&gt; (<span class=\"string\">'a'</span>..<span class=\"string\">'z'</span>).to_a.shuffle[<span class=\"number\">0</span>..<span class=\"number\">5</span>].join + <span class=\"string\">' '</span> + rand(<span class=\"number\">10000</span>).to_s,</span><br><span class=\"line\">    <span class=\"string\">'opts'</span> =&gt; &#123;<span class=\"string\">'1'</span> =&gt; [<span class=\"number\">1</span>, <span class=\"literal\">true</span>]&#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  x &lt;&lt; h</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">File.open(<span class=\"string\">\"1.json\"</span>, <span class=\"string\">'w'</span>) &#123; <span class=\"params\">|f|</span> f.write JSON.pretty_generate(<span class=\"string\">'coordinates'</span> =&gt; x, <span class=\"string\">'info'</span> =&gt; <span class=\"string\">\"some info\"</span>) &#125;</span><br></pre></td></tr></table></figure>\n\n<p>This will generate a JSON file <strong>of around 212mb</strong>, with the following syntax:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"coordinates\"</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"x\"</span>: <span class=\"number\">0.10327081810860272</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"y\"</span>: <span class=\"number\">0.03247172212368832</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"z\"</span>: <span class=\"number\">0.8155255437507467</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"name\"</span>: <span class=\"string\">\"scojbq 5965\"</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"opts\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"1\"</span>: [</span><br><span class=\"line\">          <span class=\"number\">1</span>,</span><br><span class=\"line\">          <span class=\"literal\">true</span></span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  <span class=\"attr\">\"info\"</span>: <span class=\"string\">\"some info\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now that we have our chunky JSON file; we can write our first test – <strong>in Nim</strong>:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> json</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> jobj = parseFile(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].elems</span><br><span class=\"line\"><span class=\"keyword\">let</span> len = <span class=\"built_in\">float</span>(coordinates.len)</span><br><span class=\"line\"><span class=\"keyword\">var</span> x = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> y = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> z = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> coord <span class=\"keyword\">in</span> coordinates:</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].fnum</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].fnum</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].fnum</span><br><span class=\"line\"></span><br><span class=\"line\">echo x / len</span><br><span class=\"line\">echo y / len</span><br><span class=\"line\">echo z / len</span><br></pre></td></tr></table></figure>\n\n<p>And again; the same simple test, this time written <strong>in Crystal</strong>:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">text = File.read(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\">jobj = JSON.parse(text)</span><br><span class=\"line\">coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].as_a</span><br><span class=\"line\">len = coordinates.size</span><br><span class=\"line\">x = y = z = <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">coordinates.each <span class=\"keyword\">do</span> |coord|</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].as_f</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].as_f</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].as_f</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">p x / len</span><br><span class=\"line\">p y / len</span><br><span class=\"line\">p z / len</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results\"><a href=\"#Results\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>Building our test files into tiny release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build json_test.cr --release -o json_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>We can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>6.92</td>\n<td>1320.4</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>4.58</td>\n<td>960.7</td>\n</tr>\n</tbody></table>\n<p>As you can see; in this case <strong><em>Crystal</em></strong> is the more performant language – taking less time to execute &amp; complete the test, and also fewer Megabytes in memory doing so.</p>\n<br/>\n\n<h3 id=\"Base64-encoding-decoding-a-large-blob\"><a href=\"#Base64-encoding-decoding-a-large-blob\" class=\"headerlink\" title=\"Base64 encoding / decoding a large blob:\"></a>Base64 encoding / decoding a large blob:</h3><p>In this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let’s look at the <strong><em>Nim</em></strong> test:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> base64, times, strutils, strformat</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">STR_SIZE</span> = <span class=\"number\">131072</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">TRIES</span> = <span class=\"number\">8192</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> str = strutils.repeat('a', <span class=\"type\">STR_SIZE</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str2 = base64.encode(str)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"encode &#123;str[..3]&#125;... to &#123;str2[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> t = times.epochTime()</span><br><span class=\"line\"><span class=\"keyword\">var</span> i = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> s:<span class=\"built_in\">int64</span> = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str2 = base64.encode(str)</span><br><span class=\"line\">  s += len(str2)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str3 = base64.decode(str2)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"decode &#123;str2[..3]&#125;... to &#123;str3[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\">t = times.epochTime()</span><br><span class=\"line\">i = <span class=\"number\">0</span></span><br><span class=\"line\">s = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str3 = base64.decode(str2)</span><br><span class=\"line\">  s += len(str3)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And now the same test, written in Crystal:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"base64\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">STR_SIZE = <span class=\"number\">131072</span></span><br><span class=\"line\">TRIES = <span class=\"number\">8192</span></span><br><span class=\"line\"></span><br><span class=\"line\">str = <span class=\"string\">\"a\"</span> * STR_SIZE</span><br><span class=\"line\"></span><br><span class=\"line\">str2 = Base64.strict_encode(str)</span><br><span class=\"line\">print <span class=\"string\">\"encode <span class=\"subst\">#&#123;str[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str2 = Base64.strict_encode(str)</span><br><span class=\"line\">  s += str2.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">str3 = Base64.decode_string(str2)</span><br><span class=\"line\">print <span class=\"string\">\"decode <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str3[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str3 = Base64.decode_string(str2)</span><br><span class=\"line\">  s += str3.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results-1\"><a href=\"#Results-1\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>We can again; build our Base64 test files into release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build base64_test.cr --release -o base64_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>As with our last test suite, we can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>4.17</td>\n<td>6.6</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>2.36</td>\n<td>3.5</td>\n</tr>\n</tbody></table>\n<p>Once again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>The summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research &amp; testing to see how close to <em>C speeds</em> it could achieve.  That being said, I was <em>also</em> already aware that Nim <strong>claims</strong> close to C speeds, and that one of the language’s principals was to run well on old &amp; less-performant hardware.  </p>\n<p>Yet, Crystal beat not only my own expectations; but beat Nim for both memory usage <strong>AND</strong> execution times.  I really didn’t expect to see Crystal come out <em>this</em> far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  <strong>Nim makes it even easier</strong> than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.</p>\n<p>In conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:</p>\n<ul>\n<li>Part 2: Threading and Tooling</li>\n<li>Part 3: Crypto, DApps and P2P</li>\n</ul>\n<p>These two articles will be released over the next couple of days, so don’t forget to come back then to check them out!</p>\n<p>Thanks for reading - as ever, if you have any questions, please feel free to reach out at <a href=\"mailto:robin@status.im\" target=\"_blank\" rel=\"noopener\">robin@status</a>.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> - <strong>@rbin</strong></a></p>\n"},{"title":"Nim vs Crystal - Part 2 - Threading & Tooling","summary":"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 2, Threading & Tooling  are reviewed.","author":"robin_percy","layout":"blog-post","image":"/assets/images/nim-crystal-header_blank.jpg","_content":"\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  In [part 1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/), I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!\n\nIn this article, we're going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency & parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it'll be useful; I won't cover ***only*** the in-built tooling, but I'll include my favourite external package too.\n\n\n\n# Threading\n\n\n### Nim Parallelism Primitives\n\nNim has two flavours of parallelism:\n\n * Structured parallelism via the parallel statement.\n * Unstructured parallelism via the standalone spawn statement.\n\nNim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.\n\n``` nim\nimport threadpool\n\nproc processLine(line: string) =\n  discard \"do some heavy lifting here\"\n\nfor x in lines(\"myinput.txt\"):\n  spawn processLine(x)\nsync()\n```\n\nThe parallel statement is the preferred way to use parallelism in a Nim program.\n\n``` nim\n# Compute Pi in an inefficient way\n\nimport strutils, math, threadpool\n{.experimental: \"parallel\".}\n\nproc term(k: float): float = 4 * math.pow(-1, k) / (2*k + 1)\n\nproc pi(n: int): float =\n  var ch = newSeq[float](n+1)\n  parallel:\n    for k in 0..ch.high:\n      ch[k] = spawn term(float(k))\n  for k in 0..ch.high:\n    result += ch[k]\n\necho formatFloat(pi(5000))\n```\n\nThreading support in Nim is part of the `system` module.  To activate thread support you need to compile with the `--threads:on` command line switch.\n\nNim's memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.\n\n### Concurrency vs Parallelism\n\nThe definitions of \"concurrency\" and \"parallelism\" sometimes get mixed up, but they are not the same.\n\nA concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake & change gear, but they don't happen at the exact same time, although they *do* overlap.  This is concurrency.\n\n![concurrency](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nThe human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.\n\n![parallelism](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nAt the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently [Parallelism was tested out](https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html) and I'm sure will be fully ready to use soon!\n\nA Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).\n\n### Crystal Concurrency Primitives\n\nIn Crystal, we can use the `Spawn` functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main `Fiber` that will execute your top-level code, from which we can spawn many other `Fibers`.\n\n`Fibers` are lightweight threads of execution that are managed by the garbage collector, so you don't *really* need to worry about managing them once you've spawned them.  Because of this, you could technically spin up 100 `Fibers` to make a bunch of API requests, and then simply forget about them.\n\nWe can utilise `Spawn` in Crystal like so:\n\n``` crystal\nrequire \"socket\"\n\ndef load(id, chan)\n  puts \"ID=#{id}; START\"\n  (id..11).each do\n    socket = TCPSocket.new(\"http://robin.percy.pw\", 80)\n    socket.close\n  end\n  puts \"ID=#{id}; FINISH\"\n  chan.send nil\nend\n\ndef main\n  chan = Channel(Nil).new\n  (1..10).each{|i| spawn(load(i,chan))}\n  # Wait\n  (1..10).each{chan.receive}\nend\n\nmain\n```\n\n> To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.\n\nIn program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 *should* finish before task #1.  As you can see in the image below; it does just that!\n\n![Crystal spawn test](/assets/images/crystal-thread-test.png)\n\nSimilar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:\n\n``` crystal\ndef ping(pings, message)\n  pings.send message\nend\n\ndef pong(pings, pongs)\n  message = pings.receive\n  pongs.send message\nend\n\npings = Channel(String).new\npongs = Channel(String).new\nspawn ping pings, \"passed message\"\nspawn pong pings, pongs\nputs pongs.receive # => \"passed message\"\n```\n\nUnfortunately, I personally haven't had the opportunity to test Crystal's `Fibers` or Nim's `Spawn` in a load-heavy production environment. But soon I fully intend to, and I'll write another article benchmarking this in detail when I have a good usecase and get the chance to!\n\n\n# Tooling\n\n## Built-in Tooling in Nim\n\nNow that [Nim 1.0 has been released](https://nim-lang.org/blog/2019/09/23/version-100-released.html), its in-built tooling has improved to a great level, and is very quickly reaching maturity.\n\nThe standard library in Nim is fantastic...  Things like native database support for multiple db's, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of 'use the right tool for the job' – so don't go implementing Nim just for the sake of it!\n\nThe only thing to keep in mind; is that Nim *does* seem to be slower in growth than Crystal.  The thing is – Nim has quite a few **less** core contributors than Crystal, so slower growth is to be expected!\n\n\n### Nim Project Packaging\n\nSomething I look for in ***ALL*** modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim's case; we have Nimble!\n\nWe can create a new app (library/binary) by using `nimble init`:\n\n![creating nimble app](/assets/images/nimble-creating-app.png)\n\nI have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.\n\nIt's not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my [last article.](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/)\n\n\n### Documentation\n\nNimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be *slightly* confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the `init` func.\n\nYou can generate the documentation file for your app by running:\n\n```\nnimble doc myapp.nimble\n```\n\n### Testing\n\nNimble offers a pre-defined `test` task which compiles and runs all files in the `/tests` directory beginning with 't' in their filename.\n\nYou may wish to override this `test` task in your `.nimble` file. This is particularly useful when you have a single test suite program. Just add the following to your `.nimble` file to override the default `test` task.\n\n``` nim\ntask test, \"Runs the test suite\":\n  exec \"nim c -r tests/tester\"\n```\n\nRunning nimble test will now use the test task you have defined.\n\n\n\n<br/>\n\n## Built-in Tooling in Crystal\n\nOne of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it's always very reassuring when the language has extensive built-in tooling available to help developers stay productive & happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.\n\n\n### Crystal Project Packaging\n\nMuch the same as the Nimble package manager, ***although not as good in my opinion,*** Crystal has it's own built-in project scaffolder & package manager. I'd recommend using this at all times to ensure semantics are followed. We can use it with the following:\n\n```\n$ crystal init lib my_app\n      create  my_app/.gitignore\n      create  my_app/LICENSE\n      create  my_app/README.md\n      create  my_app/.travis.yml\n      create  my_app/shard.yml\n      create  my_app/src/my_app\n      create  my_app/src/my_app/version.cr\n      create  my_app/spec/spec_helper.cr\n      create  my_app/spec/my_app_spec.cr\nInitialized empty Git repository in ~/my_app/.git/\n```\n\n`Shards` are Crystal's packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the `my_app` app above looks like this:\n\n``` yaml\nname: my_app\nversion: 0.1.0\n\nauthors:\n  - Robin Percy <robin@percy.pw>\n\ntargets:\n  sayhi_c:\n    main: src/my_app.cr\n\ncrystal: 0.31.1\n\nlicense: MIT\n```\n\nThe app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:\n\n``` yaml\ndependencies:\n  github:\n    github: felipeelias/crystal-github\n    version: ~> 0.1.0\n```\n\n### Documentation & Formatting\n\nCrystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.\n\nTo generate documentation, from the project root directory we can simply run:\n\n```\n$ crystal doc\n```\nThis will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.\n\nAlongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:\n\n```\n$ crystal tool format\n```\n\nWe can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project's codebase instead of just a single file.\n\n<br/>\n\n## My Top Crystal Repo\n\n### Kemal\n\nObviously, there ***had*** to be a web framework appear in this list, seen as that's what absolutely **every** dev seems to want to implement.  My choice here is my buddy [Serdar's](https://twitter.com/sdogruyol) library; [Kemal](https://kemalcr.com/). One feature I really like about it, is how simple it makes it to utilise JSON & create a JSON API.  For example, accepting JSON in a POST request, parsing & mapping it directly to an object:\n\n``` crystal\nrequire \"kemal\"\nrequire \"json\"\n\nclass User\n  JSON.mapping(\n    firstname: String,\n    surname: String,\n  )\nend\n\npost \"/\" do |env|\n  user = User.from_json env.request.body.not_nil!\n  {firstname: user.firstname, surname: user.surname}.to_json\nend\n\nKemal.run\n```\n\n**If you want to find all of the best Crystal libraries, [you can check them out here.](https://github.com/veelenga/awesome-crystal)**\n\n<br />\n\n## My Top Nim Repo\n\n### Nimbus\n\nMy favourite Nim library really has to be [Nimbus](https://github.com/status-im/nimbus).  This is not because I work for [Status](https://status.im) (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!\n\nI think that Nimbus is literally the most impressive Nim library outside of the Nim core, the [Nim Beacon Chain](https://github.com/status-im/nimbus) particularly so!\n\n> Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)\n\nWhilst there are no developer code samples to include here, you can check out the [main Nimbus website](https://nimbus.team/), and the [main Nimbus repo](https://github.com/status-im/nimbus/).\n\nTake a look at [https://nimble.directory/](https://nimble.directory/) for a full list of external Nim libraries available for your projects!\n\n\n# Conclusion\n\nBack in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.\n\nIt's fantastic seeing both Nim *and* Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!\n\nI briefly touched on the smaller number of people on the Nim core team above, and this is something that's pretty unfortunate.  Nim is a language and an ecosystem that has **such** great promise, I would love to see more people contributing to it and utilising it in production systems.\n\nThe final article in this series, \"Crypto, DApps & P2P\", will be released over the coming days, so keep checking back.\n\nThanks again for sticking with me!\n\n[ **- @rbin**](https://twitter.com/rbin)\n\n\n","source":"_posts/2019-11-21-nim-vs-crystal-part-2-threading-tooling.md","raw":"title: Nim vs Crystal - Part 2 - Threading & Tooling\nsummary: \"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 2, Threading & Tooling  are reviewed.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/nim-crystal-header_blank.jpg'\n---\n\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  In [part 1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/), I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!\n\nIn this article, we're going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency & parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it'll be useful; I won't cover ***only*** the in-built tooling, but I'll include my favourite external package too.\n\n\n\n# Threading\n\n\n### Nim Parallelism Primitives\n\nNim has two flavours of parallelism:\n\n * Structured parallelism via the parallel statement.\n * Unstructured parallelism via the standalone spawn statement.\n\nNim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.\n\n``` nim\nimport threadpool\n\nproc processLine(line: string) =\n  discard \"do some heavy lifting here\"\n\nfor x in lines(\"myinput.txt\"):\n  spawn processLine(x)\nsync()\n```\n\nThe parallel statement is the preferred way to use parallelism in a Nim program.\n\n``` nim\n# Compute Pi in an inefficient way\n\nimport strutils, math, threadpool\n{.experimental: \"parallel\".}\n\nproc term(k: float): float = 4 * math.pow(-1, k) / (2*k + 1)\n\nproc pi(n: int): float =\n  var ch = newSeq[float](n+1)\n  parallel:\n    for k in 0..ch.high:\n      ch[k] = spawn term(float(k))\n  for k in 0..ch.high:\n    result += ch[k]\n\necho formatFloat(pi(5000))\n```\n\nThreading support in Nim is part of the `system` module.  To activate thread support you need to compile with the `--threads:on` command line switch.\n\nNim's memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.\n\n### Concurrency vs Parallelism\n\nThe definitions of \"concurrency\" and \"parallelism\" sometimes get mixed up, but they are not the same.\n\nA concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake & change gear, but they don't happen at the exact same time, although they *do* overlap.  This is concurrency.\n\n![concurrency](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nThe human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.\n\n![parallelism](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nAt the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently [Parallelism was tested out](https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html) and I'm sure will be fully ready to use soon!\n\nA Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).\n\n### Crystal Concurrency Primitives\n\nIn Crystal, we can use the `Spawn` functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main `Fiber` that will execute your top-level code, from which we can spawn many other `Fibers`.\n\n`Fibers` are lightweight threads of execution that are managed by the garbage collector, so you don't *really* need to worry about managing them once you've spawned them.  Because of this, you could technically spin up 100 `Fibers` to make a bunch of API requests, and then simply forget about them.\n\nWe can utilise `Spawn` in Crystal like so:\n\n``` crystal\nrequire \"socket\"\n\ndef load(id, chan)\n  puts \"ID=#{id}; START\"\n  (id..11).each do\n    socket = TCPSocket.new(\"http://robin.percy.pw\", 80)\n    socket.close\n  end\n  puts \"ID=#{id}; FINISH\"\n  chan.send nil\nend\n\ndef main\n  chan = Channel(Nil).new\n  (1..10).each{|i| spawn(load(i,chan))}\n  # Wait\n  (1..10).each{chan.receive}\nend\n\nmain\n```\n\n> To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.\n\nIn program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 *should* finish before task #1.  As you can see in the image below; it does just that!\n\n![Crystal spawn test](/assets/images/crystal-thread-test.png)\n\nSimilar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:\n\n``` crystal\ndef ping(pings, message)\n  pings.send message\nend\n\ndef pong(pings, pongs)\n  message = pings.receive\n  pongs.send message\nend\n\npings = Channel(String).new\npongs = Channel(String).new\nspawn ping pings, \"passed message\"\nspawn pong pings, pongs\nputs pongs.receive # => \"passed message\"\n```\n\nUnfortunately, I personally haven't had the opportunity to test Crystal's `Fibers` or Nim's `Spawn` in a load-heavy production environment. But soon I fully intend to, and I'll write another article benchmarking this in detail when I have a good usecase and get the chance to!\n\n\n# Tooling\n\n## Built-in Tooling in Nim\n\nNow that [Nim 1.0 has been released](https://nim-lang.org/blog/2019/09/23/version-100-released.html), its in-built tooling has improved to a great level, and is very quickly reaching maturity.\n\nThe standard library in Nim is fantastic...  Things like native database support for multiple db's, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of 'use the right tool for the job' – so don't go implementing Nim just for the sake of it!\n\nThe only thing to keep in mind; is that Nim *does* seem to be slower in growth than Crystal.  The thing is – Nim has quite a few **less** core contributors than Crystal, so slower growth is to be expected!\n\n\n### Nim Project Packaging\n\nSomething I look for in ***ALL*** modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim's case; we have Nimble!\n\nWe can create a new app (library/binary) by using `nimble init`:\n\n![creating nimble app](/assets/images/nimble-creating-app.png)\n\nI have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.\n\nIt's not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my [last article.](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/)\n\n\n### Documentation\n\nNimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be *slightly* confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the `init` func.\n\nYou can generate the documentation file for your app by running:\n\n```\nnimble doc myapp.nimble\n```\n\n### Testing\n\nNimble offers a pre-defined `test` task which compiles and runs all files in the `/tests` directory beginning with 't' in their filename.\n\nYou may wish to override this `test` task in your `.nimble` file. This is particularly useful when you have a single test suite program. Just add the following to your `.nimble` file to override the default `test` task.\n\n``` nim\ntask test, \"Runs the test suite\":\n  exec \"nim c -r tests/tester\"\n```\n\nRunning nimble test will now use the test task you have defined.\n\n\n\n<br/>\n\n## Built-in Tooling in Crystal\n\nOne of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it's always very reassuring when the language has extensive built-in tooling available to help developers stay productive & happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.\n\n\n### Crystal Project Packaging\n\nMuch the same as the Nimble package manager, ***although not as good in my opinion,*** Crystal has it's own built-in project scaffolder & package manager. I'd recommend using this at all times to ensure semantics are followed. We can use it with the following:\n\n```\n$ crystal init lib my_app\n      create  my_app/.gitignore\n      create  my_app/LICENSE\n      create  my_app/README.md\n      create  my_app/.travis.yml\n      create  my_app/shard.yml\n      create  my_app/src/my_app\n      create  my_app/src/my_app/version.cr\n      create  my_app/spec/spec_helper.cr\n      create  my_app/spec/my_app_spec.cr\nInitialized empty Git repository in ~/my_app/.git/\n```\n\n`Shards` are Crystal's packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the `my_app` app above looks like this:\n\n``` yaml\nname: my_app\nversion: 0.1.0\n\nauthors:\n  - Robin Percy <robin@percy.pw>\n\ntargets:\n  sayhi_c:\n    main: src/my_app.cr\n\ncrystal: 0.31.1\n\nlicense: MIT\n```\n\nThe app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:\n\n``` yaml\ndependencies:\n  github:\n    github: felipeelias/crystal-github\n    version: ~> 0.1.0\n```\n\n### Documentation & Formatting\n\nCrystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.\n\nTo generate documentation, from the project root directory we can simply run:\n\n```\n$ crystal doc\n```\nThis will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.\n\nAlongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:\n\n```\n$ crystal tool format\n```\n\nWe can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project's codebase instead of just a single file.\n\n<br/>\n\n## My Top Crystal Repo\n\n### Kemal\n\nObviously, there ***had*** to be a web framework appear in this list, seen as that's what absolutely **every** dev seems to want to implement.  My choice here is my buddy [Serdar's](https://twitter.com/sdogruyol) library; [Kemal](https://kemalcr.com/). One feature I really like about it, is how simple it makes it to utilise JSON & create a JSON API.  For example, accepting JSON in a POST request, parsing & mapping it directly to an object:\n\n``` crystal\nrequire \"kemal\"\nrequire \"json\"\n\nclass User\n  JSON.mapping(\n    firstname: String,\n    surname: String,\n  )\nend\n\npost \"/\" do |env|\n  user = User.from_json env.request.body.not_nil!\n  {firstname: user.firstname, surname: user.surname}.to_json\nend\n\nKemal.run\n```\n\n**If you want to find all of the best Crystal libraries, [you can check them out here.](https://github.com/veelenga/awesome-crystal)**\n\n<br />\n\n## My Top Nim Repo\n\n### Nimbus\n\nMy favourite Nim library really has to be [Nimbus](https://github.com/status-im/nimbus).  This is not because I work for [Status](https://status.im) (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!\n\nI think that Nimbus is literally the most impressive Nim library outside of the Nim core, the [Nim Beacon Chain](https://github.com/status-im/nimbus) particularly so!\n\n> Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)\n\nWhilst there are no developer code samples to include here, you can check out the [main Nimbus website](https://nimbus.team/), and the [main Nimbus repo](https://github.com/status-im/nimbus/).\n\nTake a look at [https://nimble.directory/](https://nimble.directory/) for a full list of external Nim libraries available for your projects!\n\n\n# Conclusion\n\nBack in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.\n\nIt's fantastic seeing both Nim *and* Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!\n\nI briefly touched on the smaller number of people on the Nim core team above, and this is something that's pretty unfortunate.  Nim is a language and an ecosystem that has **such** great promise, I would love to see more people contributing to it and utilising it in production systems.\n\nThe final article in this series, \"Crypto, DApps & P2P\", will be released over the coming days, so keep checking back.\n\nThanks again for sticking with me!\n\n[ **- @rbin**](https://twitter.com/rbin)\n\n\n","slug":"nim-vs-crystal-part-2-threading-tooling","published":1,"date":"2019-11-21T05:00:00.000Z","updated":"2020-01-17T19:05:36.402Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3u7002i7hegd17nahv0","content":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  In <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">part 1</a>, I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!</p>\n<p>In this article, we’re going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency &amp; parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it’ll be useful; I won’t cover <strong><em>only</em></strong> the in-built tooling, but I’ll include my favourite external package too.</p>\n<h1 id=\"Threading\"><a href=\"#Threading\" class=\"headerlink\" title=\"Threading\"></a>Threading</h1><h3 id=\"Nim-Parallelism-Primitives\"><a href=\"#Nim-Parallelism-Primitives\" class=\"headerlink\" title=\"Nim Parallelism Primitives\"></a>Nim Parallelism Primitives</h3><p>Nim has two flavours of parallelism:</p>\n<ul>\n<li>Structured parallelism via the parallel statement.</li>\n<li>Unstructured parallelism via the standalone spawn statement.</li>\n</ul>\n<p>Nim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> threadpool</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> processLine(line: <span class=\"built_in\">string</span>) =</span><br><span class=\"line\">  <span class=\"keyword\">discard</span> <span class=\"string\">\"do some heavy lifting here\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> x <span class=\"keyword\">in</span> lines(<span class=\"string\">\"myinput.txt\"</span>):</span><br><span class=\"line\">  spawn processLine(x)</span><br><span class=\"line\">sync()</span><br></pre></td></tr></table></figure>\n\n<p>The parallel statement is the preferred way to use parallelism in a Nim program.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Compute Pi in an inefficient way</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> strutils, math, threadpool</span><br><span class=\"line\"><span class=\"meta\">&#123;.experimental: \"parallel\".&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> term(k: <span class=\"built_in\">float</span>): <span class=\"built_in\">float</span> = <span class=\"number\">4</span> * math.pow(-<span class=\"number\">1</span>, k) / (<span class=\"number\">2</span>*k + <span class=\"number\">1</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> pi(n: <span class=\"built_in\">int</span>): <span class=\"built_in\">float</span> =</span><br><span class=\"line\">  <span class=\"keyword\">var</span> ch = newSeq[<span class=\"built_in\">float</span>](n+<span class=\"number\">1</span>)</span><br><span class=\"line\">  parallel:</span><br><span class=\"line\">    <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">      ch[k] = spawn term(<span class=\"built_in\">float</span>(k))</span><br><span class=\"line\">  <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">    <span class=\"literal\">result</span> += ch[k]</span><br><span class=\"line\"></span><br><span class=\"line\">echo formatFloat(pi(<span class=\"number\">5000</span>))</span><br></pre></td></tr></table></figure>\n\n<p>Threading support in Nim is part of the <code>system</code> module.  To activate thread support you need to compile with the <code>--threads:on</code> command line switch.</p>\n<p>Nim’s memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.</p>\n<h3 id=\"Concurrency-vs-Parallelism\"><a href=\"#Concurrency-vs-Parallelism\" class=\"headerlink\" title=\"Concurrency vs Parallelism\"></a>Concurrency vs Parallelism</h3><p>The definitions of “concurrency” and “parallelism” sometimes get mixed up, but they are not the same.</p>\n<p>A concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake &amp; change gear, but they don’t happen at the exact same time, although they <em>do</em> overlap.  This is concurrency.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg\" alt=\"concurrency\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>The human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg\" alt=\"parallelism\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>At the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently <a href=\"https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html\" target=\"_blank\" rel=\"noopener\">Parallelism was tested out</a> and I’m sure will be fully ready to use soon!</p>\n<p>A Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).</p>\n<h3 id=\"Crystal-Concurrency-Primitives\"><a href=\"#Crystal-Concurrency-Primitives\" class=\"headerlink\" title=\"Crystal Concurrency Primitives\"></a>Crystal Concurrency Primitives</h3><p>In Crystal, we can use the <code>Spawn</code> functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main <code>Fiber</code> that will execute your top-level code, from which we can spawn many other <code>Fibers</code>.</p>\n<p><code>Fibers</code> are lightweight threads of execution that are managed by the garbage collector, so you don’t <em>really</em> need to worry about managing them once you’ve spawned them.  Because of this, you could technically spin up 100 <code>Fibers</code> to make a bunch of API requests, and then simply forget about them.</p>\n<p>We can utilise <code>Spawn</code> in Crystal like so:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"socket\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">load</span></span>(id, chan)</span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; START\"</span></span><br><span class=\"line\">  (id..<span class=\"number\">11</span>).each <span class=\"keyword\">do</span></span><br><span class=\"line\">    socket = TCPSocket.new(<span class=\"string\">\"http://robin.percy.pw\"</span>, <span class=\"number\">80</span>)</span><br><span class=\"line\">    socket.close</span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; FINISH\"</span></span><br><span class=\"line\">  chan.send <span class=\"literal\">nil</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">main</span></span></span><br><span class=\"line\">  chan = Channel(Nil).new</span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;|i| spawn(load(i,chan))&#125;</span><br><span class=\"line\">  <span class=\"comment\"># Wait</span></span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;chan.receive&#125;</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">main</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.</p>\n</blockquote>\n<p>In program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 <em>should</em> finish before task #1.  As you can see in the image below; it does just that!</p>\n<p><img src=\"/assets/images/crystal-thread-test.png\" alt=\"Crystal spawn test\"></p>\n<p>Similar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">ping</span></span>(pings, message)</span><br><span class=\"line\">  pings.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">pong</span></span>(pings, pongs)</span><br><span class=\"line\">  message = pings.receive</span><br><span class=\"line\">  pongs.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">pings = Channel(String).new</span><br><span class=\"line\">pongs = Channel(String).new</span><br><span class=\"line\">spawn ping pings, <span class=\"string\">\"passed message\"</span></span><br><span class=\"line\">spawn pong pings, pongs</span><br><span class=\"line\">puts pongs.receive <span class=\"comment\"># =&gt; \"passed message\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Unfortunately, I personally haven’t had the opportunity to test Crystal’s <code>Fibers</code> or Nim’s <code>Spawn</code> in a load-heavy production environment. But soon I fully intend to, and I’ll write another article benchmarking this in detail when I have a good usecase and get the chance to!</p>\n<h1 id=\"Tooling\"><a href=\"#Tooling\" class=\"headerlink\" title=\"Tooling\"></a>Tooling</h1><h2 id=\"Built-in-Tooling-in-Nim\"><a href=\"#Built-in-Tooling-in-Nim\" class=\"headerlink\" title=\"Built-in Tooling in Nim\"></a>Built-in Tooling in Nim</h2><p>Now that <a href=\"https://nim-lang.org/blog/2019/09/23/version-100-released.html\" target=\"_blank\" rel=\"noopener\">Nim 1.0 has been released</a>, its in-built tooling has improved to a great level, and is very quickly reaching maturity.</p>\n<p>The standard library in Nim is fantastic…  Things like native database support for multiple db’s, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of ‘use the right tool for the job’ – so don’t go implementing Nim just for the sake of it!</p>\n<p>The only thing to keep in mind; is that Nim <em>does</em> seem to be slower in growth than Crystal.  The thing is – Nim has quite a few <strong>less</strong> core contributors than Crystal, so slower growth is to be expected!</p>\n<h3 id=\"Nim-Project-Packaging\"><a href=\"#Nim-Project-Packaging\" class=\"headerlink\" title=\"Nim Project Packaging\"></a>Nim Project Packaging</h3><p>Something I look for in <strong><em>ALL</em></strong> modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim’s case; we have Nimble!</p>\n<p>We can create a new app (library/binary) by using <code>nimble init</code>:</p>\n<p><img src=\"/assets/images/nimble-creating-app.png\" alt=\"creating nimble app\"></p>\n<p>I have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.</p>\n<p>It’s not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">last article.</a></p>\n<h3 id=\"Documentation\"><a href=\"#Documentation\" class=\"headerlink\" title=\"Documentation\"></a>Documentation</h3><p>Nimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be <em>slightly</em> confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the <code>init</code> func.</p>\n<p>You can generate the documentation file for your app by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nimble doc myapp.nimble</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Testing\"><a href=\"#Testing\" class=\"headerlink\" title=\"Testing\"></a>Testing</h3><p>Nimble offers a pre-defined <code>test</code> task which compiles and runs all files in the <code>/tests</code> directory beginning with ‘t’ in their filename.</p>\n<p>You may wish to override this <code>test</code> task in your <code>.nimble</code> file. This is particularly useful when you have a single test suite program. Just add the following to your <code>.nimble</code> file to override the default <code>test</code> task.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\">task test, <span class=\"string\">\"Runs the test suite\"</span>:</span><br><span class=\"line\">  exec <span class=\"string\">\"nim c -r tests/tester\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Running nimble test will now use the test task you have defined.</p>\n<br/>\n\n<h2 id=\"Built-in-Tooling-in-Crystal\"><a href=\"#Built-in-Tooling-in-Crystal\" class=\"headerlink\" title=\"Built-in Tooling in Crystal\"></a>Built-in Tooling in Crystal</h2><p>One of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it’s always very reassuring when the language has extensive built-in tooling available to help developers stay productive &amp; happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.</p>\n<h3 id=\"Crystal-Project-Packaging\"><a href=\"#Crystal-Project-Packaging\" class=\"headerlink\" title=\"Crystal Project Packaging\"></a>Crystal Project Packaging</h3><p>Much the same as the Nimble package manager, <strong><em>although not as good in my opinion,</em></strong> Crystal has it’s own built-in project scaffolder &amp; package manager. I’d recommend using this at all times to ensure semantics are followed. We can use it with the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init lib my_app</span><br><span class=\"line\">      create  my_app&#x2F;.gitignore</span><br><span class=\"line\">      create  my_app&#x2F;LICENSE</span><br><span class=\"line\">      create  my_app&#x2F;README.md</span><br><span class=\"line\">      create  my_app&#x2F;.travis.yml</span><br><span class=\"line\">      create  my_app&#x2F;shard.yml</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app&#x2F;version.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;spec_helper.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;my_app_spec.cr</span><br><span class=\"line\">Initialized empty Git repository in ~&#x2F;my_app&#x2F;.git&#x2F;</span><br></pre></td></tr></table></figure>\n\n<p><code>Shards</code> are Crystal’s packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the <code>my_app</code> app above looks like this:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">my_app</span></span><br><span class=\"line\"><span class=\"attr\">version:</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">authors:</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"string\">Robin</span> <span class=\"string\">Percy</span> <span class=\"string\">&lt;robin@percy.pw&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">targets:</span></span><br><span class=\"line\">  <span class=\"attr\">sayhi_c:</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">src/my_app.cr</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">crystal:</span> <span class=\"number\">0.31</span><span class=\"number\">.1</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">license:</span> <span class=\"string\">MIT</span></span><br></pre></td></tr></table></figure>\n\n<p>The app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">dependencies:</span></span><br><span class=\"line\">  <span class=\"attr\">github:</span></span><br><span class=\"line\">    <span class=\"attr\">github:</span> <span class=\"string\">felipeelias/crystal-github</span></span><br><span class=\"line\">    <span class=\"attr\">version:</span> <span class=\"string\">~&gt;</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Documentation-amp-Formatting\"><a href=\"#Documentation-amp-Formatting\" class=\"headerlink\" title=\"Documentation &amp; Formatting\"></a>Documentation &amp; Formatting</h3><p>Crystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.</p>\n<p>To generate documentation, from the project root directory we can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal doc</span><br></pre></td></tr></table></figure>\n<p>This will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.</p>\n<p>Alongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal tool format</span><br></pre></td></tr></table></figure>\n\n<p>We can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project’s codebase instead of just a single file.</p>\n<br/>\n\n<h2 id=\"My-Top-Crystal-Repo\"><a href=\"#My-Top-Crystal-Repo\" class=\"headerlink\" title=\"My Top Crystal Repo\"></a>My Top Crystal Repo</h2><h3 id=\"Kemal\"><a href=\"#Kemal\" class=\"headerlink\" title=\"Kemal\"></a>Kemal</h3><p>Obviously, there <strong><em>had</em></strong> to be a web framework appear in this list, seen as that’s what absolutely <strong>every</strong> dev seems to want to implement.  My choice here is my buddy <a href=\"https://twitter.com/sdogruyol\" target=\"_blank\" rel=\"noopener\">Serdar’s</a> library; <a href=\"https://kemalcr.com/\" target=\"_blank\" rel=\"noopener\">Kemal</a>. One feature I really like about it, is how simple it makes it to utilise JSON &amp; create a JSON API.  For example, accepting JSON in a POST request, parsing &amp; mapping it directly to an object:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"kemal\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">User</span></span></span><br><span class=\"line\">  JSON.mapping(</span><br><span class=\"line\">    <span class=\"symbol\">firstname:</span> String,</span><br><span class=\"line\">    <span class=\"symbol\">surname:</span> String,</span><br><span class=\"line\">  )</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">post <span class=\"string\">\"/\"</span> <span class=\"keyword\">do</span> |env|</span><br><span class=\"line\">  user = User.from_json env.request.body.not_nil!</span><br><span class=\"line\">  &#123;<span class=\"symbol\">firstname:</span> user.firstname, <span class=\"symbol\">surname:</span> user.surname&#125;.to_json</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Kemal.run</span><br></pre></td></tr></table></figure>\n\n<p><strong>If you want to find all of the best Crystal libraries, <a href=\"https://github.com/veelenga/awesome-crystal\" target=\"_blank\" rel=\"noopener\">you can check them out here.</a></strong></p>\n<br />\n\n<h2 id=\"My-Top-Nim-Repo\"><a href=\"#My-Top-Nim-Repo\" class=\"headerlink\" title=\"My Top Nim Repo\"></a>My Top Nim Repo</h2><h3 id=\"Nimbus\"><a href=\"#Nimbus\" class=\"headerlink\" title=\"Nimbus\"></a>Nimbus</h3><p>My favourite Nim library really has to be <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nimbus</a>.  This is not because I work for <a href=\"https://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!</p>\n<p>I think that Nimbus is literally the most impressive Nim library outside of the Nim core, the <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nim Beacon Chain</a> particularly so!</p>\n<blockquote>\n<p>Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)</p>\n</blockquote>\n<p>Whilst there are no developer code samples to include here, you can check out the <a href=\"https://nimbus.team/\" target=\"_blank\" rel=\"noopener\">main Nimbus website</a>, and the <a href=\"https://github.com/status-im/nimbus/\" target=\"_blank\" rel=\"noopener\">main Nimbus repo</a>.</p>\n<p>Take a look at <a href=\"https://nimble.directory/\" target=\"_blank\" rel=\"noopener\">https://nimble.directory/</a> for a full list of external Nim libraries available for your projects!</p>\n<h1 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h1><p>Back in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.</p>\n<p>It’s fantastic seeing both Nim <em>and</em> Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!</p>\n<p>I briefly touched on the smaller number of people on the Nim core team above, and this is something that’s pretty unfortunate.  Nim is a language and an ecosystem that has <strong>such</strong> great promise, I would love to see more people contributing to it and utilising it in production systems.</p>\n<p>The final article in this series, “Crypto, DApps &amp; P2P”, will be released over the coming days, so keep checking back.</p>\n<p>Thanks again for sticking with me!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  In <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">part 1</a>, I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!</p>\n<p>In this article, we’re going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency &amp; parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it’ll be useful; I won’t cover <strong><em>only</em></strong> the in-built tooling, but I’ll include my favourite external package too.</p>\n<h1 id=\"Threading\"><a href=\"#Threading\" class=\"headerlink\" title=\"Threading\"></a>Threading</h1><h3 id=\"Nim-Parallelism-Primitives\"><a href=\"#Nim-Parallelism-Primitives\" class=\"headerlink\" title=\"Nim Parallelism Primitives\"></a>Nim Parallelism Primitives</h3><p>Nim has two flavours of parallelism:</p>\n<ul>\n<li>Structured parallelism via the parallel statement.</li>\n<li>Unstructured parallelism via the standalone spawn statement.</li>\n</ul>\n<p>Nim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> threadpool</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> processLine(line: <span class=\"built_in\">string</span>) =</span><br><span class=\"line\">  <span class=\"keyword\">discard</span> <span class=\"string\">\"do some heavy lifting here\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> x <span class=\"keyword\">in</span> lines(<span class=\"string\">\"myinput.txt\"</span>):</span><br><span class=\"line\">  spawn processLine(x)</span><br><span class=\"line\">sync()</span><br></pre></td></tr></table></figure>\n\n<p>The parallel statement is the preferred way to use parallelism in a Nim program.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Compute Pi in an inefficient way</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> strutils, math, threadpool</span><br><span class=\"line\"><span class=\"meta\">&#123;.experimental: \"parallel\".&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> term(k: <span class=\"built_in\">float</span>): <span class=\"built_in\">float</span> = <span class=\"number\">4</span> * math.pow(-<span class=\"number\">1</span>, k) / (<span class=\"number\">2</span>*k + <span class=\"number\">1</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> pi(n: <span class=\"built_in\">int</span>): <span class=\"built_in\">float</span> =</span><br><span class=\"line\">  <span class=\"keyword\">var</span> ch = newSeq[<span class=\"built_in\">float</span>](n+<span class=\"number\">1</span>)</span><br><span class=\"line\">  parallel:</span><br><span class=\"line\">    <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">      ch[k] = spawn term(<span class=\"built_in\">float</span>(k))</span><br><span class=\"line\">  <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">    <span class=\"literal\">result</span> += ch[k]</span><br><span class=\"line\"></span><br><span class=\"line\">echo formatFloat(pi(<span class=\"number\">5000</span>))</span><br></pre></td></tr></table></figure>\n\n<p>Threading support in Nim is part of the <code>system</code> module.  To activate thread support you need to compile with the <code>--threads:on</code> command line switch.</p>\n<p>Nim’s memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.</p>\n<h3 id=\"Concurrency-vs-Parallelism\"><a href=\"#Concurrency-vs-Parallelism\" class=\"headerlink\" title=\"Concurrency vs Parallelism\"></a>Concurrency vs Parallelism</h3><p>The definitions of “concurrency” and “parallelism” sometimes get mixed up, but they are not the same.</p>\n<p>A concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake &amp; change gear, but they don’t happen at the exact same time, although they <em>do</em> overlap.  This is concurrency.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg\" alt=\"concurrency\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>The human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg\" alt=\"parallelism\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>At the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently <a href=\"https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html\" target=\"_blank\" rel=\"noopener\">Parallelism was tested out</a> and I’m sure will be fully ready to use soon!</p>\n<p>A Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).</p>\n<h3 id=\"Crystal-Concurrency-Primitives\"><a href=\"#Crystal-Concurrency-Primitives\" class=\"headerlink\" title=\"Crystal Concurrency Primitives\"></a>Crystal Concurrency Primitives</h3><p>In Crystal, we can use the <code>Spawn</code> functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main <code>Fiber</code> that will execute your top-level code, from which we can spawn many other <code>Fibers</code>.</p>\n<p><code>Fibers</code> are lightweight threads of execution that are managed by the garbage collector, so you don’t <em>really</em> need to worry about managing them once you’ve spawned them.  Because of this, you could technically spin up 100 <code>Fibers</code> to make a bunch of API requests, and then simply forget about them.</p>\n<p>We can utilise <code>Spawn</code> in Crystal like so:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"socket\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">load</span></span>(id, chan)</span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; START\"</span></span><br><span class=\"line\">  (id..<span class=\"number\">11</span>).each <span class=\"keyword\">do</span></span><br><span class=\"line\">    socket = TCPSocket.new(<span class=\"string\">\"http://robin.percy.pw\"</span>, <span class=\"number\">80</span>)</span><br><span class=\"line\">    socket.close</span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; FINISH\"</span></span><br><span class=\"line\">  chan.send <span class=\"literal\">nil</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">main</span></span></span><br><span class=\"line\">  chan = Channel(Nil).new</span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;|i| spawn(load(i,chan))&#125;</span><br><span class=\"line\">  <span class=\"comment\"># Wait</span></span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;chan.receive&#125;</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">main</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.</p>\n</blockquote>\n<p>In program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 <em>should</em> finish before task #1.  As you can see in the image below; it does just that!</p>\n<p><img src=\"/assets/images/crystal-thread-test.png\" alt=\"Crystal spawn test\"></p>\n<p>Similar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">ping</span></span>(pings, message)</span><br><span class=\"line\">  pings.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">pong</span></span>(pings, pongs)</span><br><span class=\"line\">  message = pings.receive</span><br><span class=\"line\">  pongs.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">pings = Channel(String).new</span><br><span class=\"line\">pongs = Channel(String).new</span><br><span class=\"line\">spawn ping pings, <span class=\"string\">\"passed message\"</span></span><br><span class=\"line\">spawn pong pings, pongs</span><br><span class=\"line\">puts pongs.receive <span class=\"comment\"># =&gt; \"passed message\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Unfortunately, I personally haven’t had the opportunity to test Crystal’s <code>Fibers</code> or Nim’s <code>Spawn</code> in a load-heavy production environment. But soon I fully intend to, and I’ll write another article benchmarking this in detail when I have a good usecase and get the chance to!</p>\n<h1 id=\"Tooling\"><a href=\"#Tooling\" class=\"headerlink\" title=\"Tooling\"></a>Tooling</h1><h2 id=\"Built-in-Tooling-in-Nim\"><a href=\"#Built-in-Tooling-in-Nim\" class=\"headerlink\" title=\"Built-in Tooling in Nim\"></a>Built-in Tooling in Nim</h2><p>Now that <a href=\"https://nim-lang.org/blog/2019/09/23/version-100-released.html\" target=\"_blank\" rel=\"noopener\">Nim 1.0 has been released</a>, its in-built tooling has improved to a great level, and is very quickly reaching maturity.</p>\n<p>The standard library in Nim is fantastic…  Things like native database support for multiple db’s, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of ‘use the right tool for the job’ – so don’t go implementing Nim just for the sake of it!</p>\n<p>The only thing to keep in mind; is that Nim <em>does</em> seem to be slower in growth than Crystal.  The thing is – Nim has quite a few <strong>less</strong> core contributors than Crystal, so slower growth is to be expected!</p>\n<h3 id=\"Nim-Project-Packaging\"><a href=\"#Nim-Project-Packaging\" class=\"headerlink\" title=\"Nim Project Packaging\"></a>Nim Project Packaging</h3><p>Something I look for in <strong><em>ALL</em></strong> modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim’s case; we have Nimble!</p>\n<p>We can create a new app (library/binary) by using <code>nimble init</code>:</p>\n<p><img src=\"/assets/images/nimble-creating-app.png\" alt=\"creating nimble app\"></p>\n<p>I have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.</p>\n<p>It’s not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">last article.</a></p>\n<h3 id=\"Documentation\"><a href=\"#Documentation\" class=\"headerlink\" title=\"Documentation\"></a>Documentation</h3><p>Nimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be <em>slightly</em> confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the <code>init</code> func.</p>\n<p>You can generate the documentation file for your app by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nimble doc myapp.nimble</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Testing\"><a href=\"#Testing\" class=\"headerlink\" title=\"Testing\"></a>Testing</h3><p>Nimble offers a pre-defined <code>test</code> task which compiles and runs all files in the <code>/tests</code> directory beginning with ‘t’ in their filename.</p>\n<p>You may wish to override this <code>test</code> task in your <code>.nimble</code> file. This is particularly useful when you have a single test suite program. Just add the following to your <code>.nimble</code> file to override the default <code>test</code> task.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\">task test, <span class=\"string\">\"Runs the test suite\"</span>:</span><br><span class=\"line\">  exec <span class=\"string\">\"nim c -r tests/tester\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Running nimble test will now use the test task you have defined.</p>\n<br/>\n\n<h2 id=\"Built-in-Tooling-in-Crystal\"><a href=\"#Built-in-Tooling-in-Crystal\" class=\"headerlink\" title=\"Built-in Tooling in Crystal\"></a>Built-in Tooling in Crystal</h2><p>One of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it’s always very reassuring when the language has extensive built-in tooling available to help developers stay productive &amp; happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.</p>\n<h3 id=\"Crystal-Project-Packaging\"><a href=\"#Crystal-Project-Packaging\" class=\"headerlink\" title=\"Crystal Project Packaging\"></a>Crystal Project Packaging</h3><p>Much the same as the Nimble package manager, <strong><em>although not as good in my opinion,</em></strong> Crystal has it’s own built-in project scaffolder &amp; package manager. I’d recommend using this at all times to ensure semantics are followed. We can use it with the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init lib my_app</span><br><span class=\"line\">      create  my_app&#x2F;.gitignore</span><br><span class=\"line\">      create  my_app&#x2F;LICENSE</span><br><span class=\"line\">      create  my_app&#x2F;README.md</span><br><span class=\"line\">      create  my_app&#x2F;.travis.yml</span><br><span class=\"line\">      create  my_app&#x2F;shard.yml</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app&#x2F;version.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;spec_helper.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;my_app_spec.cr</span><br><span class=\"line\">Initialized empty Git repository in ~&#x2F;my_app&#x2F;.git&#x2F;</span><br></pre></td></tr></table></figure>\n\n<p><code>Shards</code> are Crystal’s packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the <code>my_app</code> app above looks like this:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">my_app</span></span><br><span class=\"line\"><span class=\"attr\">version:</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">authors:</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"string\">Robin</span> <span class=\"string\">Percy</span> <span class=\"string\">&lt;robin@percy.pw&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">targets:</span></span><br><span class=\"line\">  <span class=\"attr\">sayhi_c:</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">src/my_app.cr</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">crystal:</span> <span class=\"number\">0.31</span><span class=\"number\">.1</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">license:</span> <span class=\"string\">MIT</span></span><br></pre></td></tr></table></figure>\n\n<p>The app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">dependencies:</span></span><br><span class=\"line\">  <span class=\"attr\">github:</span></span><br><span class=\"line\">    <span class=\"attr\">github:</span> <span class=\"string\">felipeelias/crystal-github</span></span><br><span class=\"line\">    <span class=\"attr\">version:</span> <span class=\"string\">~&gt;</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Documentation-amp-Formatting\"><a href=\"#Documentation-amp-Formatting\" class=\"headerlink\" title=\"Documentation &amp; Formatting\"></a>Documentation &amp; Formatting</h3><p>Crystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.</p>\n<p>To generate documentation, from the project root directory we can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal doc</span><br></pre></td></tr></table></figure>\n<p>This will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.</p>\n<p>Alongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal tool format</span><br></pre></td></tr></table></figure>\n\n<p>We can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project’s codebase instead of just a single file.</p>\n<br/>\n\n<h2 id=\"My-Top-Crystal-Repo\"><a href=\"#My-Top-Crystal-Repo\" class=\"headerlink\" title=\"My Top Crystal Repo\"></a>My Top Crystal Repo</h2><h3 id=\"Kemal\"><a href=\"#Kemal\" class=\"headerlink\" title=\"Kemal\"></a>Kemal</h3><p>Obviously, there <strong><em>had</em></strong> to be a web framework appear in this list, seen as that’s what absolutely <strong>every</strong> dev seems to want to implement.  My choice here is my buddy <a href=\"https://twitter.com/sdogruyol\" target=\"_blank\" rel=\"noopener\">Serdar’s</a> library; <a href=\"https://kemalcr.com/\" target=\"_blank\" rel=\"noopener\">Kemal</a>. One feature I really like about it, is how simple it makes it to utilise JSON &amp; create a JSON API.  For example, accepting JSON in a POST request, parsing &amp; mapping it directly to an object:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"kemal\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">User</span></span></span><br><span class=\"line\">  JSON.mapping(</span><br><span class=\"line\">    <span class=\"symbol\">firstname:</span> String,</span><br><span class=\"line\">    <span class=\"symbol\">surname:</span> String,</span><br><span class=\"line\">  )</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">post <span class=\"string\">\"/\"</span> <span class=\"keyword\">do</span> |env|</span><br><span class=\"line\">  user = User.from_json env.request.body.not_nil!</span><br><span class=\"line\">  &#123;<span class=\"symbol\">firstname:</span> user.firstname, <span class=\"symbol\">surname:</span> user.surname&#125;.to_json</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Kemal.run</span><br></pre></td></tr></table></figure>\n\n<p><strong>If you want to find all of the best Crystal libraries, <a href=\"https://github.com/veelenga/awesome-crystal\" target=\"_blank\" rel=\"noopener\">you can check them out here.</a></strong></p>\n<br />\n\n<h2 id=\"My-Top-Nim-Repo\"><a href=\"#My-Top-Nim-Repo\" class=\"headerlink\" title=\"My Top Nim Repo\"></a>My Top Nim Repo</h2><h3 id=\"Nimbus\"><a href=\"#Nimbus\" class=\"headerlink\" title=\"Nimbus\"></a>Nimbus</h3><p>My favourite Nim library really has to be <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nimbus</a>.  This is not because I work for <a href=\"https://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!</p>\n<p>I think that Nimbus is literally the most impressive Nim library outside of the Nim core, the <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nim Beacon Chain</a> particularly so!</p>\n<blockquote>\n<p>Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)</p>\n</blockquote>\n<p>Whilst there are no developer code samples to include here, you can check out the <a href=\"https://nimbus.team/\" target=\"_blank\" rel=\"noopener\">main Nimbus website</a>, and the <a href=\"https://github.com/status-im/nimbus/\" target=\"_blank\" rel=\"noopener\">main Nimbus repo</a>.</p>\n<p>Take a look at <a href=\"https://nimble.directory/\" target=\"_blank\" rel=\"noopener\">https://nimble.directory/</a> for a full list of external Nim libraries available for your projects!</p>\n<h1 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h1><p>Back in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.</p>\n<p>It’s fantastic seeing both Nim <em>and</em> Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!</p>\n<p>I briefly touched on the smaller number of people on the Nim core team above, and this is something that’s pretty unfortunate.  Nim is a language and an ecosystem that has <strong>such</strong> great promise, I would love to see more people contributing to it and utilising it in production systems.</p>\n<p>The final article in this series, “Crypto, DApps &amp; P2P”, will be released over the coming days, so keep checking back.</p>\n<p>Thanks again for sticking with me!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n"},{"title":"Introduction to Web3 - What Are Your Options?","summary":"Web3.js is a collection of APIs giving us the ability to interact with, and send commands to, the Ethereum Network from a JavaScript frontend.  In this article, I will go over the basics of what and why we need Web3.js.","author":"robin_percy","layout":"blog-post","image":"/assets/images/web3-article-header.png","_content":"\n![Web3.js](/assets/images/web3-article-header.png)\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nTo kick this article off, I first have to reaffirm, for those that aren't aware, I am not, and never have been, a ***lover*** of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.\n\nFor years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being ***forced*** to use it in my daily work life.  Now however, I do have to say; over the last few years I have *softened* to JS, and I am much more comfortable in my own skin when having to use it.\n\nIt goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app's dependencies - JS.\n\nJavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.\n\nAs I mentioned briefly in my [***last*** article](/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/), my ***next*** article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where [Web3.js](https://web3js.readthedocs.io/en/v1.2.4/index.html) comes into the mix.  `Web3.js` is a collection of APIs allowing us such functionality as:  Reading & Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets & data, and *a whole bunch* of other stuff too.  Basically, *most* of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.\n\n\nThis is how the `web3.js` library talks to the Ethereum Network:\n\n![Web3 JS Diagram](/assets/images/web3-js-diagram.png)\n*Image credit: [iotbl](https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html)*\n\nSo, now that the basics are covered, let's go over installing and using the `web3.js` library.\n\n\n# Installing Web3\n\nInstalling `web3.js` is as simple as:\n\n```\nnpm install web3\n```\n\n*One thing worth noting here*; is that (coming from an anti-js background), I kept getting a `cannot find web3 module` error when trying to import web3 into a Node console.  If you, like me, aren't a big js fan, this can be solved by first running the `npm init` command to ensure there is a `package.json` file in the cwd, and *then* you can run `npm install web3`, and it will work fine.  (I realise this is basic stuff – but actually for someone who's *tried* to avoid Node at all costs, it was initially confusing enough to have to search online.)\n\nI am working from a Mac here, but if you are working from Windows, the install process *can* be exactly the same, assuming you do have [Node & NPM installed](https://phoenixnap.com/kb/install-node-js-npm-on-windows).\n\nSo, with `web3.js` installed, let's do some basic interactions with the Ethereum Network, and ***dive on in!***\n\n\n\n# Communicating with the Ethereum Network\n\n## Wallet Interaction\n\nFor this article, we're going to use [Ganache](https://www.trufflesuite.com/ganache), for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!\n\n***(Yes, I realise that rhymes.  No, I didn't realise until my second proof-read through of this article!)***\n\nIn fact, though, Embark already has Ganache inbuilt, so we could also simply run:\n\n```js\nembark simulator\n```\n\nAnyway, to install Ganache head over to [this page](https://www.trufflesuite.com/ganache) and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:\n\n```\nnpm install -g ganache-cli\n```\n\nRunning the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.\n\n![Ganache CLI](/assets/images/ganache-cli.png)\n\nRather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a `node` instance from the same working directory we ran the `npm init` command from earlier.\n\nNow, in our interactive Node console, run:\n\n``` js\nvar Web3 = require('web3');\nvar web3 = new Web3('http://localhost:8545');\n```\n\nSomething to note here, is that I'm calling `new Web3` with an `http` protocol, but the WebSocket protocol is also commonly used:\n\n``` js\nvar web3 = new Web3(Web3.givenProvider || new Web3.providers.WebsocketProvider('ws://remotenode.com:8546'));\n```\n\nTo test and ensure the connection, you can get a list of the accounts made available in Ganache by running:\n\n``` js\nweb3.eth.getAccounts().then(console.log);\n```\n\nWhich *should* give you an output like the following:\n\n```js\n> [ '0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b',\n  '0x852e9a9db77a4e6169e175cDBb33dBE350150A8e',\n  '0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401',\n  '0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616',\n  '0x88A116a16e4c8838F575a0e7a72eE27C7B073263',\n  '0x655317701Fcf3b310F492cB801C8D23f8c6fb556',\n  '0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E',\n  '0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32',\n  '0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1',\n  '0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5' ]\n```\n\nIf you want to check the balance of an individual account from the above list, you can do so by running:\n\n```js\nconst account1 = \"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\";\n\nweb3.eth.getBalance(account1)\n.then(console.log);\n```\n\nWhich will output:\n\n```\n> 100000000000000000000\n```\n\n\n## Contract Interaction\n\nAs above; interacting with our *individual accounts* through `web3.js` is cool, but not nearly the extent to which the library works.  Let's now take a brief look at the more important functionality; of interacting with Smart Contracts through `web3.js`.\n\nThe first thing we need to do, is to create a new Smart Contract, which we can do with the `new web3.eth.Contract` command.\n\nBefore we call the `new` command, we need to assign our `json interface` for the contract's `ABI`:\n\n```js\nconst abi = [{\"type\":\"function\", \"name\":\"foo\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\"}], \"outputs\": [{\"name\":\"b\",\"type\":\"address\"}] },{ \"type\":\"event\", \"name\":\"Event\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\",\"indexed\":true},{\"name\":\"b\",\"type\":\"bytes32\",\"indexed\":false}], }]\n```\n\nThe `json interface` is a JSON object describing the *Application Binary Interface (ABI)* for our Smart Contract.  Using this JSON interface; `web3.js` is able to create a JavaScript object representing our Smart Contract and its methods & events, using the `web3.eth.Contract` functionality.\n\n*Note, the above JSON interface / ABI is taken directly from the [Web3 docs](https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5).*\n\nNow that we have our `json interface` defined, we can create our new contract instance:\n\n```js\nvar myContract = new web3.eth.Contract(abi, '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe');\n```\n\n*(The `from` address is the address of the already deployed contract instance that we're aiming to talk to.)*\n\nYou could then set the Smart Contract's `data` and other `options`, and then **deploy** your Contract with something *like* the following:\n\n```js\nmyContract.options.data = '0x12345...';\n\nmyContract.deploy({\n    arguments: [123, 'My String']\n})\n.send({\n    from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',\n    gas: 1500000,\n    gasPrice: '30000000000000'\n})\n.then(function(newContractInstance){\n    console.log(newContractInstance.options.address) // instance with the new contract address\n});\n```\n\nThe above examples aren't supposed to be perfect continuous code, and should definitely *not* be copy/pasted into a production project, but they are there to show off roughly how `Web.js` works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.\n\nIn my next tutorial series, we will be utilising [Embark](https://embark.status.im/docs/quick_start.html), and therefore we'll be diving deeper into `web3.js`, and showing off much more of its potential.\n\n\n# Web.js in Other Languages\n\nNaturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also **many** other libraries, in pretty much every language, available to do the same:\n\n***Nim - [nim-web3](https://github.com/status-im/nim-web3)***\nCrystal - [web3.cr](https://github.com/light-side-software/web3.cr)\nRuby - [web3-eth gem](https://github.com/izetex/web3-eth)\nElixir - [ethereumex](https://github.com/mana-ethereum/ethereumex)\nPython - [Web3.py](https://github.com/ethereum/web3.py)\nHaskell - [hs-web3](https://github.com/airalab/hs-web3)\nJava - [web3j](https://github.com/web3j/web3j)\nScala - [web3j-scala](https://github.com/mslinn/web3j-scala)\nPurescript - [purescript-web3](https://github.com/f-o-a-m/purescript-web3)\nPHP - [web3.php](https://github.com/sc0Vu/web3.php)\n\n\n# Beyond Web3\n\nAs stated at the opening of this article, we've barely even scratched the surface of `web.js` capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.\n\nPersonally, I am **very much** looking forward to ***diving on in*** to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.\n\nAs always, if you have *any* questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at [robin@status](mailto:robin@status.im).\n\nThanks again for reading, and check back for my DApp tutorial series, starting later this week!\n\n[ **- @rbin**](https://twitter.com/rbin)\n","source":"_posts/2019-12-09-web3-what-are-your-options.md","raw":"title: Introduction to Web3 - What Are Your Options?\nsummary: \"Web3.js is a collection of APIs giving us the ability to interact with, and send commands to, the Ethereum Network from a JavaScript frontend.  In this article, I will go over the basics of what and why we need Web3.js.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/web3-article-header.png'\n---\n\n![Web3.js](/assets/images/web3-article-header.png)\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nTo kick this article off, I first have to reaffirm, for those that aren't aware, I am not, and never have been, a ***lover*** of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.\n\nFor years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being ***forced*** to use it in my daily work life.  Now however, I do have to say; over the last few years I have *softened* to JS, and I am much more comfortable in my own skin when having to use it.\n\nIt goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app's dependencies - JS.\n\nJavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.\n\nAs I mentioned briefly in my [***last*** article](/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/), my ***next*** article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where [Web3.js](https://web3js.readthedocs.io/en/v1.2.4/index.html) comes into the mix.  `Web3.js` is a collection of APIs allowing us such functionality as:  Reading & Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets & data, and *a whole bunch* of other stuff too.  Basically, *most* of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.\n\n\nThis is how the `web3.js` library talks to the Ethereum Network:\n\n![Web3 JS Diagram](/assets/images/web3-js-diagram.png)\n*Image credit: [iotbl](https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html)*\n\nSo, now that the basics are covered, let's go over installing and using the `web3.js` library.\n\n\n# Installing Web3\n\nInstalling `web3.js` is as simple as:\n\n```\nnpm install web3\n```\n\n*One thing worth noting here*; is that (coming from an anti-js background), I kept getting a `cannot find web3 module` error when trying to import web3 into a Node console.  If you, like me, aren't a big js fan, this can be solved by first running the `npm init` command to ensure there is a `package.json` file in the cwd, and *then* you can run `npm install web3`, and it will work fine.  (I realise this is basic stuff – but actually for someone who's *tried* to avoid Node at all costs, it was initially confusing enough to have to search online.)\n\nI am working from a Mac here, but if you are working from Windows, the install process *can* be exactly the same, assuming you do have [Node & NPM installed](https://phoenixnap.com/kb/install-node-js-npm-on-windows).\n\nSo, with `web3.js` installed, let's do some basic interactions with the Ethereum Network, and ***dive on in!***\n\n\n\n# Communicating with the Ethereum Network\n\n## Wallet Interaction\n\nFor this article, we're going to use [Ganache](https://www.trufflesuite.com/ganache), for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!\n\n***(Yes, I realise that rhymes.  No, I didn't realise until my second proof-read through of this article!)***\n\nIn fact, though, Embark already has Ganache inbuilt, so we could also simply run:\n\n```js\nembark simulator\n```\n\nAnyway, to install Ganache head over to [this page](https://www.trufflesuite.com/ganache) and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:\n\n```\nnpm install -g ganache-cli\n```\n\nRunning the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.\n\n![Ganache CLI](/assets/images/ganache-cli.png)\n\nRather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a `node` instance from the same working directory we ran the `npm init` command from earlier.\n\nNow, in our interactive Node console, run:\n\n``` js\nvar Web3 = require('web3');\nvar web3 = new Web3('http://localhost:8545');\n```\n\nSomething to note here, is that I'm calling `new Web3` with an `http` protocol, but the WebSocket protocol is also commonly used:\n\n``` js\nvar web3 = new Web3(Web3.givenProvider || new Web3.providers.WebsocketProvider('ws://remotenode.com:8546'));\n```\n\nTo test and ensure the connection, you can get a list of the accounts made available in Ganache by running:\n\n``` js\nweb3.eth.getAccounts().then(console.log);\n```\n\nWhich *should* give you an output like the following:\n\n```js\n> [ '0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b',\n  '0x852e9a9db77a4e6169e175cDBb33dBE350150A8e',\n  '0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401',\n  '0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616',\n  '0x88A116a16e4c8838F575a0e7a72eE27C7B073263',\n  '0x655317701Fcf3b310F492cB801C8D23f8c6fb556',\n  '0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E',\n  '0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32',\n  '0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1',\n  '0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5' ]\n```\n\nIf you want to check the balance of an individual account from the above list, you can do so by running:\n\n```js\nconst account1 = \"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\";\n\nweb3.eth.getBalance(account1)\n.then(console.log);\n```\n\nWhich will output:\n\n```\n> 100000000000000000000\n```\n\n\n## Contract Interaction\n\nAs above; interacting with our *individual accounts* through `web3.js` is cool, but not nearly the extent to which the library works.  Let's now take a brief look at the more important functionality; of interacting with Smart Contracts through `web3.js`.\n\nThe first thing we need to do, is to create a new Smart Contract, which we can do with the `new web3.eth.Contract` command.\n\nBefore we call the `new` command, we need to assign our `json interface` for the contract's `ABI`:\n\n```js\nconst abi = [{\"type\":\"function\", \"name\":\"foo\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\"}], \"outputs\": [{\"name\":\"b\",\"type\":\"address\"}] },{ \"type\":\"event\", \"name\":\"Event\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\",\"indexed\":true},{\"name\":\"b\",\"type\":\"bytes32\",\"indexed\":false}], }]\n```\n\nThe `json interface` is a JSON object describing the *Application Binary Interface (ABI)* for our Smart Contract.  Using this JSON interface; `web3.js` is able to create a JavaScript object representing our Smart Contract and its methods & events, using the `web3.eth.Contract` functionality.\n\n*Note, the above JSON interface / ABI is taken directly from the [Web3 docs](https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5).*\n\nNow that we have our `json interface` defined, we can create our new contract instance:\n\n```js\nvar myContract = new web3.eth.Contract(abi, '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe');\n```\n\n*(The `from` address is the address of the already deployed contract instance that we're aiming to talk to.)*\n\nYou could then set the Smart Contract's `data` and other `options`, and then **deploy** your Contract with something *like* the following:\n\n```js\nmyContract.options.data = '0x12345...';\n\nmyContract.deploy({\n    arguments: [123, 'My String']\n})\n.send({\n    from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',\n    gas: 1500000,\n    gasPrice: '30000000000000'\n})\n.then(function(newContractInstance){\n    console.log(newContractInstance.options.address) // instance with the new contract address\n});\n```\n\nThe above examples aren't supposed to be perfect continuous code, and should definitely *not* be copy/pasted into a production project, but they are there to show off roughly how `Web.js` works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.\n\nIn my next tutorial series, we will be utilising [Embark](https://embark.status.im/docs/quick_start.html), and therefore we'll be diving deeper into `web3.js`, and showing off much more of its potential.\n\n\n# Web.js in Other Languages\n\nNaturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also **many** other libraries, in pretty much every language, available to do the same:\n\n***Nim - [nim-web3](https://github.com/status-im/nim-web3)***\nCrystal - [web3.cr](https://github.com/light-side-software/web3.cr)\nRuby - [web3-eth gem](https://github.com/izetex/web3-eth)\nElixir - [ethereumex](https://github.com/mana-ethereum/ethereumex)\nPython - [Web3.py](https://github.com/ethereum/web3.py)\nHaskell - [hs-web3](https://github.com/airalab/hs-web3)\nJava - [web3j](https://github.com/web3j/web3j)\nScala - [web3j-scala](https://github.com/mslinn/web3j-scala)\nPurescript - [purescript-web3](https://github.com/f-o-a-m/purescript-web3)\nPHP - [web3.php](https://github.com/sc0Vu/web3.php)\n\n\n# Beyond Web3\n\nAs stated at the opening of this article, we've barely even scratched the surface of `web.js` capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.\n\nPersonally, I am **very much** looking forward to ***diving on in*** to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.\n\nAs always, if you have *any* questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at [robin@status](mailto:robin@status.im).\n\nThanks again for reading, and check back for my DApp tutorial series, starting later this week!\n\n[ **- @rbin**](https://twitter.com/rbin)\n","slug":"web3-what-are-your-options","published":1,"date":"2019-12-09T05:00:00.000Z","updated":"2020-01-30T14:52:47.138Z","_id":"ck5ijm3u8002k7hegdpuf24tc","comments":1,"photos":[],"link":"","content":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>To kick this article off, I first have to reaffirm, for those that aren’t aware, I am not, and never have been, a <strong><em>lover</em></strong> of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.</p>\n<p>For years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being <strong><em>forced</em></strong> to use it in my daily work life.  Now however, I do have to say; over the last few years I have <em>softened</em> to JS, and I am much more comfortable in my own skin when having to use it.</p>\n<p>It goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app’s dependencies - JS.</p>\n<p>JavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.</p>\n<p>As I mentioned briefly in my <a href=\"/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/\"><strong><em>last</em></strong> article</a>, my <strong><em>next</em></strong> article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where <a href=\"https://web3js.readthedocs.io/en/v1.2.4/index.html\" target=\"_blank\" rel=\"noopener\">Web3.js</a> comes into the mix.  <code>Web3.js</code> is a collection of APIs allowing us such functionality as:  Reading &amp; Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets &amp; data, and <em>a whole bunch</em> of other stuff too.  Basically, <em>most</em> of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.</p>\n<p>This is how the <code>web3.js</code> library talks to the Ethereum Network:</p>\n<p><img src=\"/assets/images/web3-js-diagram.png\" alt=\"Web3 JS Diagram\"><br><em>Image credit: <a href=\"https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html\" target=\"_blank\" rel=\"noopener\">iotbl</a></em></p>\n<p>So, now that the basics are covered, let’s go over installing and using the <code>web3.js</code> library.</p>\n<h1 id=\"Installing-Web3\"><a href=\"#Installing-Web3\" class=\"headerlink\" title=\"Installing Web3\"></a>Installing Web3</h1><p>Installing <code>web3.js</code> is as simple as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install web3</span><br></pre></td></tr></table></figure>\n\n<p><em>One thing worth noting here</em>; is that (coming from an anti-js background), I kept getting a <code>cannot find web3 module</code> error when trying to import web3 into a Node console.  If you, like me, aren’t a big js fan, this can be solved by first running the <code>npm init</code> command to ensure there is a <code>package.json</code> file in the cwd, and <em>then</em> you can run <code>npm install web3</code>, and it will work fine.  (I realise this is basic stuff – but actually for someone who’s <em>tried</em> to avoid Node at all costs, it was initially confusing enough to have to search online.)</p>\n<p>I am working from a Mac here, but if you are working from Windows, the install process <em>can</em> be exactly the same, assuming you do have <a href=\"https://phoenixnap.com/kb/install-node-js-npm-on-windows\" target=\"_blank\" rel=\"noopener\">Node &amp; NPM installed</a>.</p>\n<p>So, with <code>web3.js</code> installed, let’s do some basic interactions with the Ethereum Network, and <strong><em>dive on in!</em></strong></p>\n<h1 id=\"Communicating-with-the-Ethereum-Network\"><a href=\"#Communicating-with-the-Ethereum-Network\" class=\"headerlink\" title=\"Communicating with the Ethereum Network\"></a>Communicating with the Ethereum Network</h1><h2 id=\"Wallet-Interaction\"><a href=\"#Wallet-Interaction\" class=\"headerlink\" title=\"Wallet Interaction\"></a>Wallet Interaction</h2><p>For this article, we’re going to use <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>, for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!</p>\n<p><strong><em>(Yes, I realise that rhymes.  No, I didn’t realise until my second proof-read through of this article!)</em></strong></p>\n<p>In fact, though, Embark already has Ganache inbuilt, so we could also simply run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark simulator</span><br></pre></td></tr></table></figure>\n\n<p>Anyway, to install Ganache head over to <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">this page</a> and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g ganache-cli</span><br></pre></td></tr></table></figure>\n\n<p>Running the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.</p>\n<p><img src=\"/assets/images/ganache-cli.png\" alt=\"Ganache CLI\"></p>\n<p>Rather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a <code>node</code> instance from the same working directory we ran the <code>npm init</code> command from earlier.</p>\n<p>Now, in our interactive Node console, run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> Web3 = <span class=\"built_in\">require</span>(<span class=\"string\">'web3'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(<span class=\"string\">'http://localhost:8545'</span>);</span><br></pre></td></tr></table></figure>\n\n<p>Something to note here, is that I’m calling <code>new Web3</code> with an <code>http</code> protocol, but the WebSocket protocol is also commonly used:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(Web3.givenProvider || <span class=\"keyword\">new</span> Web3.providers.WebsocketProvider(<span class=\"string\">'ws://remotenode.com:8546'</span>));</span><br></pre></td></tr></table></figure>\n\n<p>To test and ensure the connection, you can get a list of the accounts made available in Ganache by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">web3.eth.getAccounts().then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which <em>should</em> give you an output like the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; [ <span class=\"string\">'0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x852e9a9db77a4e6169e175cDBb33dBE350150A8e'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x88A116a16e4c8838F575a0e7a72eE27C7B073263'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x655317701Fcf3b310F492cB801C8D23f8c6fb556'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5'</span> ]</span><br></pre></td></tr></table></figure>\n\n<p>If you want to check the balance of an individual account from the above list, you can do so by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> account1 = <span class=\"string\">\"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\"</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">web3.eth.getBalance(account1)</span><br><span class=\"line\">.then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which will output:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; 100000000000000000000</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Contract-Interaction\"><a href=\"#Contract-Interaction\" class=\"headerlink\" title=\"Contract Interaction\"></a>Contract Interaction</h2><p>As above; interacting with our <em>individual accounts</em> through <code>web3.js</code> is cool, but not nearly the extent to which the library works.  Let’s now take a brief look at the more important functionality; of interacting with Smart Contracts through <code>web3.js</code>.</p>\n<p>The first thing we need to do, is to create a new Smart Contract, which we can do with the <code>new web3.eth.Contract</code> command.</p>\n<p>Before we call the <code>new</code> command, we need to assign our <code>json interface</code> for the contract’s <code>ABI</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> abi = [&#123;<span class=\"string\">\"type\"</span>:<span class=\"string\">\"function\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"foo\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>&#125;], <span class=\"string\">\"outputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"address\"</span>&#125;] &#125;,&#123; <span class=\"string\">\"type\"</span>:<span class=\"string\">\"event\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"Event\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">true</span>&#125;,&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"bytes32\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">false</span>&#125;], &#125;]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>json interface</code> is a JSON object describing the <em>Application Binary Interface (ABI)</em> for our Smart Contract.  Using this JSON interface; <code>web3.js</code> is able to create a JavaScript object representing our Smart Contract and its methods &amp; events, using the <code>web3.eth.Contract</code> functionality.</p>\n<p><em>Note, the above JSON interface / ABI is taken directly from the <a href=\"https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5\" target=\"_blank\" rel=\"noopener\">Web3 docs</a>.</em></p>\n<p>Now that we have our <code>json interface</code> defined, we can create our new contract instance:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> myContract = <span class=\"keyword\">new</span> web3.eth.Contract(abi, <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>);</span><br></pre></td></tr></table></figure>\n\n<p><em>(The <code>from</code> address is the address of the already deployed contract instance that we’re aiming to talk to.)</em></p>\n<p>You could then set the Smart Contract’s <code>data</code> and other <code>options</code>, and then <strong>deploy</strong> your Contract with something <em>like</em> the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">myContract.options.data = <span class=\"string\">'0x12345...'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">myContract.deploy(&#123;</span><br><span class=\"line\">    <span class=\"built_in\">arguments</span>: [<span class=\"number\">123</span>, <span class=\"string\">'My String'</span>]</span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.send(&#123;</span><br><span class=\"line\">    <span class=\"keyword\">from</span>: <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>,</span><br><span class=\"line\">    gas: <span class=\"number\">1500000</span>,</span><br><span class=\"line\">    gasPrice: <span class=\"string\">'30000000000000'</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.then(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">newContractInstance</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(newContractInstance.options.address) <span class=\"comment\">// instance with the new contract address</span></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The above examples aren’t supposed to be perfect continuous code, and should definitely <em>not</em> be copy/pasted into a production project, but they are there to show off roughly how <code>Web.js</code> works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.</p>\n<p>In my next tutorial series, we will be utilising <a href=\"https://embark.status.im/docs/quick_start.html\" target=\"_blank\" rel=\"noopener\">Embark</a>, and therefore we’ll be diving deeper into <code>web3.js</code>, and showing off much more of its potential.</p>\n<h1 id=\"Web-js-in-Other-Languages\"><a href=\"#Web-js-in-Other-Languages\" class=\"headerlink\" title=\"Web.js in Other Languages\"></a>Web.js in Other Languages</h1><p>Naturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also <strong>many</strong> other libraries, in pretty much every language, available to do the same:</p>\n<p><strong><em>Nim - <a href=\"https://github.com/status-im/nim-web3\" target=\"_blank\" rel=\"noopener\">nim-web3</a></em></strong><br>Crystal - <a href=\"https://github.com/light-side-software/web3.cr\" target=\"_blank\" rel=\"noopener\">web3.cr</a><br>Ruby - <a href=\"https://github.com/izetex/web3-eth\" target=\"_blank\" rel=\"noopener\">web3-eth gem</a><br>Elixir - <a href=\"https://github.com/mana-ethereum/ethereumex\" target=\"_blank\" rel=\"noopener\">ethereumex</a><br>Python - <a href=\"https://github.com/ethereum/web3.py\" target=\"_blank\" rel=\"noopener\">Web3.py</a><br>Haskell - <a href=\"https://github.com/airalab/hs-web3\" target=\"_blank\" rel=\"noopener\">hs-web3</a><br>Java - <a href=\"https://github.com/web3j/web3j\" target=\"_blank\" rel=\"noopener\">web3j</a><br>Scala - <a href=\"https://github.com/mslinn/web3j-scala\" target=\"_blank\" rel=\"noopener\">web3j-scala</a><br>Purescript - <a href=\"https://github.com/f-o-a-m/purescript-web3\" target=\"_blank\" rel=\"noopener\">purescript-web3</a><br>PHP - <a href=\"https://github.com/sc0Vu/web3.php\" target=\"_blank\" rel=\"noopener\">web3.php</a></p>\n<h1 id=\"Beyond-Web3\"><a href=\"#Beyond-Web3\" class=\"headerlink\" title=\"Beyond Web3\"></a>Beyond Web3</h1><p>As stated at the opening of this article, we’ve barely even scratched the surface of <code>web.js</code> capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.</p>\n<p>Personally, I am <strong>very much</strong> looking forward to <strong><em>diving on in</em></strong> to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.</p>\n<p>As always, if you have <em>any</em> questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at <a href=\"mailto:robin@status.im\">robin@status</a>.</p>\n<p>Thanks again for reading, and check back for my DApp tutorial series, starting later this week!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>To kick this article off, I first have to reaffirm, for those that aren’t aware, I am not, and never have been, a <strong><em>lover</em></strong> of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.</p>\n<p>For years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being <strong><em>forced</em></strong> to use it in my daily work life.  Now however, I do have to say; over the last few years I have <em>softened</em> to JS, and I am much more comfortable in my own skin when having to use it.</p>\n<p>It goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app’s dependencies - JS.</p>\n<p>JavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.</p>\n<p>As I mentioned briefly in my <a href=\"/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/\"><strong><em>last</em></strong> article</a>, my <strong><em>next</em></strong> article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where <a href=\"https://web3js.readthedocs.io/en/v1.2.4/index.html\" target=\"_blank\" rel=\"noopener\">Web3.js</a> comes into the mix.  <code>Web3.js</code> is a collection of APIs allowing us such functionality as:  Reading &amp; Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets &amp; data, and <em>a whole bunch</em> of other stuff too.  Basically, <em>most</em> of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.</p>\n<p>This is how the <code>web3.js</code> library talks to the Ethereum Network:</p>\n<p><img src=\"/assets/images/web3-js-diagram.png\" alt=\"Web3 JS Diagram\"><br><em>Image credit: <a href=\"https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html\" target=\"_blank\" rel=\"noopener\">iotbl</a></em></p>\n<p>So, now that the basics are covered, let’s go over installing and using the <code>web3.js</code> library.</p>\n<h1 id=\"Installing-Web3\"><a href=\"#Installing-Web3\" class=\"headerlink\" title=\"Installing Web3\"></a>Installing Web3</h1><p>Installing <code>web3.js</code> is as simple as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install web3</span><br></pre></td></tr></table></figure>\n\n<p><em>One thing worth noting here</em>; is that (coming from an anti-js background), I kept getting a <code>cannot find web3 module</code> error when trying to import web3 into a Node console.  If you, like me, aren’t a big js fan, this can be solved by first running the <code>npm init</code> command to ensure there is a <code>package.json</code> file in the cwd, and <em>then</em> you can run <code>npm install web3</code>, and it will work fine.  (I realise this is basic stuff – but actually for someone who’s <em>tried</em> to avoid Node at all costs, it was initially confusing enough to have to search online.)</p>\n<p>I am working from a Mac here, but if you are working from Windows, the install process <em>can</em> be exactly the same, assuming you do have <a href=\"https://phoenixnap.com/kb/install-node-js-npm-on-windows\" target=\"_blank\" rel=\"noopener\">Node &amp; NPM installed</a>.</p>\n<p>So, with <code>web3.js</code> installed, let’s do some basic interactions with the Ethereum Network, and <strong><em>dive on in!</em></strong></p>\n<h1 id=\"Communicating-with-the-Ethereum-Network\"><a href=\"#Communicating-with-the-Ethereum-Network\" class=\"headerlink\" title=\"Communicating with the Ethereum Network\"></a>Communicating with the Ethereum Network</h1><h2 id=\"Wallet-Interaction\"><a href=\"#Wallet-Interaction\" class=\"headerlink\" title=\"Wallet Interaction\"></a>Wallet Interaction</h2><p>For this article, we’re going to use <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>, for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!</p>\n<p><strong><em>(Yes, I realise that rhymes.  No, I didn’t realise until my second proof-read through of this article!)</em></strong></p>\n<p>In fact, though, Embark already has Ganache inbuilt, so we could also simply run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark simulator</span><br></pre></td></tr></table></figure>\n\n<p>Anyway, to install Ganache head over to <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">this page</a> and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g ganache-cli</span><br></pre></td></tr></table></figure>\n\n<p>Running the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.</p>\n<p><img src=\"/assets/images/ganache-cli.png\" alt=\"Ganache CLI\"></p>\n<p>Rather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a <code>node</code> instance from the same working directory we ran the <code>npm init</code> command from earlier.</p>\n<p>Now, in our interactive Node console, run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> Web3 = <span class=\"built_in\">require</span>(<span class=\"string\">'web3'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(<span class=\"string\">'http://localhost:8545'</span>);</span><br></pre></td></tr></table></figure>\n\n<p>Something to note here, is that I’m calling <code>new Web3</code> with an <code>http</code> protocol, but the WebSocket protocol is also commonly used:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(Web3.givenProvider || <span class=\"keyword\">new</span> Web3.providers.WebsocketProvider(<span class=\"string\">'ws://remotenode.com:8546'</span>));</span><br></pre></td></tr></table></figure>\n\n<p>To test and ensure the connection, you can get a list of the accounts made available in Ganache by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">web3.eth.getAccounts().then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which <em>should</em> give you an output like the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; [ <span class=\"string\">'0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x852e9a9db77a4e6169e175cDBb33dBE350150A8e'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x88A116a16e4c8838F575a0e7a72eE27C7B073263'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x655317701Fcf3b310F492cB801C8D23f8c6fb556'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5'</span> ]</span><br></pre></td></tr></table></figure>\n\n<p>If you want to check the balance of an individual account from the above list, you can do so by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> account1 = <span class=\"string\">\"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\"</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">web3.eth.getBalance(account1)</span><br><span class=\"line\">.then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which will output:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; 100000000000000000000</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Contract-Interaction\"><a href=\"#Contract-Interaction\" class=\"headerlink\" title=\"Contract Interaction\"></a>Contract Interaction</h2><p>As above; interacting with our <em>individual accounts</em> through <code>web3.js</code> is cool, but not nearly the extent to which the library works.  Let’s now take a brief look at the more important functionality; of interacting with Smart Contracts through <code>web3.js</code>.</p>\n<p>The first thing we need to do, is to create a new Smart Contract, which we can do with the <code>new web3.eth.Contract</code> command.</p>\n<p>Before we call the <code>new</code> command, we need to assign our <code>json interface</code> for the contract’s <code>ABI</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> abi = [&#123;<span class=\"string\">\"type\"</span>:<span class=\"string\">\"function\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"foo\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>&#125;], <span class=\"string\">\"outputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"address\"</span>&#125;] &#125;,&#123; <span class=\"string\">\"type\"</span>:<span class=\"string\">\"event\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"Event\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">true</span>&#125;,&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"bytes32\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">false</span>&#125;], &#125;]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>json interface</code> is a JSON object describing the <em>Application Binary Interface (ABI)</em> for our Smart Contract.  Using this JSON interface; <code>web3.js</code> is able to create a JavaScript object representing our Smart Contract and its methods &amp; events, using the <code>web3.eth.Contract</code> functionality.</p>\n<p><em>Note, the above JSON interface / ABI is taken directly from the <a href=\"https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5\" target=\"_blank\" rel=\"noopener\">Web3 docs</a>.</em></p>\n<p>Now that we have our <code>json interface</code> defined, we can create our new contract instance:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> myContract = <span class=\"keyword\">new</span> web3.eth.Contract(abi, <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>);</span><br></pre></td></tr></table></figure>\n\n<p><em>(The <code>from</code> address is the address of the already deployed contract instance that we’re aiming to talk to.)</em></p>\n<p>You could then set the Smart Contract’s <code>data</code> and other <code>options</code>, and then <strong>deploy</strong> your Contract with something <em>like</em> the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">myContract.options.data = <span class=\"string\">'0x12345...'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">myContract.deploy(&#123;</span><br><span class=\"line\">    <span class=\"built_in\">arguments</span>: [<span class=\"number\">123</span>, <span class=\"string\">'My String'</span>]</span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.send(&#123;</span><br><span class=\"line\">    <span class=\"keyword\">from</span>: <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>,</span><br><span class=\"line\">    gas: <span class=\"number\">1500000</span>,</span><br><span class=\"line\">    gasPrice: <span class=\"string\">'30000000000000'</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.then(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">newContractInstance</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(newContractInstance.options.address) <span class=\"comment\">// instance with the new contract address</span></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The above examples aren’t supposed to be perfect continuous code, and should definitely <em>not</em> be copy/pasted into a production project, but they are there to show off roughly how <code>Web.js</code> works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.</p>\n<p>In my next tutorial series, we will be utilising <a href=\"https://embark.status.im/docs/quick_start.html\" target=\"_blank\" rel=\"noopener\">Embark</a>, and therefore we’ll be diving deeper into <code>web3.js</code>, and showing off much more of its potential.</p>\n<h1 id=\"Web-js-in-Other-Languages\"><a href=\"#Web-js-in-Other-Languages\" class=\"headerlink\" title=\"Web.js in Other Languages\"></a>Web.js in Other Languages</h1><p>Naturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also <strong>many</strong> other libraries, in pretty much every language, available to do the same:</p>\n<p><strong><em>Nim - <a href=\"https://github.com/status-im/nim-web3\" target=\"_blank\" rel=\"noopener\">nim-web3</a></em></strong><br>Crystal - <a href=\"https://github.com/light-side-software/web3.cr\" target=\"_blank\" rel=\"noopener\">web3.cr</a><br>Ruby - <a href=\"https://github.com/izetex/web3-eth\" target=\"_blank\" rel=\"noopener\">web3-eth gem</a><br>Elixir - <a href=\"https://github.com/mana-ethereum/ethereumex\" target=\"_blank\" rel=\"noopener\">ethereumex</a><br>Python - <a href=\"https://github.com/ethereum/web3.py\" target=\"_blank\" rel=\"noopener\">Web3.py</a><br>Haskell - <a href=\"https://github.com/airalab/hs-web3\" target=\"_blank\" rel=\"noopener\">hs-web3</a><br>Java - <a href=\"https://github.com/web3j/web3j\" target=\"_blank\" rel=\"noopener\">web3j</a><br>Scala - <a href=\"https://github.com/mslinn/web3j-scala\" target=\"_blank\" rel=\"noopener\">web3j-scala</a><br>Purescript - <a href=\"https://github.com/f-o-a-m/purescript-web3\" target=\"_blank\" rel=\"noopener\">purescript-web3</a><br>PHP - <a href=\"https://github.com/sc0Vu/web3.php\" target=\"_blank\" rel=\"noopener\">web3.php</a></p>\n<h1 id=\"Beyond-Web3\"><a href=\"#Beyond-Web3\" class=\"headerlink\" title=\"Beyond Web3\"></a>Beyond Web3</h1><p>As stated at the opening of this article, we’ve barely even scratched the surface of <code>web.js</code> capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.</p>\n<p>Personally, I am <strong>very much</strong> looking forward to <strong><em>diving on in</em></strong> to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.</p>\n<p>As always, if you have <em>any</em> questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at <a href=\"mailto:robin@status.im\">robin@status</a>.</p>\n<p>Thanks again for reading, and check back for my DApp tutorial series, starting later this week!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n"},{"title":"Introducing Embark 5","author":"pascal_precht","summary":"About half a year after our last stable release, we've now published Embark version 5 with lots of features, improvements and fixes. Read on for more information!","layout":"blog-post","_content":"\nIf you've been following the development of Embark you're probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we've published 10 alpha releases and one beta release for Embark 5 and today we're happy to announce the Embark 5 stable release!\n\nIn this post we'll be looking at some of the main changes and features to get up and running with v5. Notice that we've add a [migration guide](https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5) to our official docs as well.\n\n## New Features\n\nLet's first start with new features that have been introduced in Embark 5.\n\n### Whisper client configuration\n\nPrior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.\n\nTo specify a client, use the new `client` configuration property which defaults to `geth`:\n\n```js\n// communication.js\n\n...\ndefault: {\n  ...\n  client: \"geth\" // can be either 'geth' or 'parity'\n},\n...\n\n```\n\n### Support for Dynamic Addresses\n\nIf you're using Embark already, you're probably aware that there are many different ways to [configure your Smart Contracts](/docs/contracts_configuration.html). One of the things that can be configured is the `address` of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.\n\nThere's one more case that hasn't been covered so far: Calculating a Smart Contract address dynamically as it's scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.\n\nThe following example configures `MyContract` to get its address from a call made to `AnotherContract`'s API:\n\n```js\n...\ndeploy: {\n  AnotherContract: {...},\n  MyContract: {\n    deps: [\"AnotherContract\"]\n    address: async (deps) => {\n      const receipt = await deps.contracts.AnotherContract.methods.someFunction();\n      return receipt.events.SomeEvent.returnValues.someAddress;\n    }\n  }\n}\n...\n```\n\n## Breaking changes\n\nNext up, let's quickly talk about the few breaking changes we've introduced to improve the overall developer experience. It's worth noting that we try to keep breaking changes at a minimum and if it's indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.\n\n### NodeJS support\n\nDue to some package dependencies, Embark doesn't yet support Node's [*Current* version](https://nodejs.org/en/about/releases/) version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version `>= 10.17.0` and `< 12.0.0`. It also requires npm `>= 6.11.3` (bundled with Node `10.17.0`) or yarn `>= 1.19.1`.\n\n### New Smart Contract configuration API\n\nEmbark's Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user's choice of blockchain client. This sometimes caused confusion for our users since they weren't sure where certain configurations should go.\n\nThat's why we've made the following changes:\n\n### Deployment section moved to Blockchain config\n\nThe `deployment` section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the `host`, `port` and `protocol` being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.\n\nHere's what such a config looked like prior to v5:\n\n```js\n...\ndeployment: {\n  host: \"localhost\", // Host of the blockchain node\n  port: 8546, // Port of the blockchain node\n  type: \"ws\" // Type of connection (ws or rpc),\n  accounts: [...]\n},\n...\n```\n\nThere's no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.\n\n### `contracts` property has been renamed to `deploy`\n\nWhen configuring Smart Contracts, there are a few deployment hooks that can be specified, such as `beforeDeploy` and `afterDeploy`. To make the API a bit more descriptive and to clarify intent, the `contracts` property has been renamed to `deploy`, aligning wonderfully with its deployment hooks counterparts.\n\nBefore:\n\n```js\n...\ncontracts: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\nAfter:\n\n```js\n...\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\n### Polished Blockchain configuration API\n\nOne of the most complex APIs has been Embark's Blockchain configuration API. That's why we've put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.\n\nThe following configuration properties have been renamed:\n\n- `isDev` is now `miningMode: 'dev'`\n- `mineWhenNeeded` is now `miningMode: 'auto'`\n- `ethereumClientName` is now `client`\n\nWe've also removed several endpoint-related settings, such as `host` and `port`, and replaced them with a single `endpoint` property. Here's what the new defaults look like:\n\n```js\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {\n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nFor more information on Blockchain configuration, head over to the [official docs](/docs/blockchain_configuration.html).\n\n### Accounts configuration moved to Blockchain config\n\nPrior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn't really clear which accounts belonged to what action. To eliminate confusion, we've moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.\n\nJust like before, accounts can be defined using different configuration settings, depending on the use case:\n\n```js\n...\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n...\n```\n\nCheck out the documentation on [accounts configuration](/docs/blockchain_accounts_configuration.html) for more information.\n\n### Configuring tests\n\nAll the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark's `config()` function inside test suites, the same configuration APi applies:\n\n```javascript\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in the Smart Contract configuration guide\n    }\n  }\n});\n```\n\nTesting is covered in-depth in our [testing guide](/docs/contracts_testing.html).\n\nTo see any of the new APIs in action, have a look at our [template](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates) and [test dapps](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests) in the official Embark repository.\n\nObviously we've worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our [changelog](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07).\n\nAs always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can't wait to see the great apps you'll be building with it!\n","source":"_posts/2020-01-13-announcing-embark-5.md","raw":"title: Introducing Embark 5\nauthor: pascal_precht\nsummary: \"About half a year after our last stable release, we've now published Embark version 5 with lots of features, improvements and fixes. Read on for more information!\"\ncategories:\n  - announcements\nlayout: blog-post\n---\n\nIf you've been following the development of Embark you're probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we've published 10 alpha releases and one beta release for Embark 5 and today we're happy to announce the Embark 5 stable release!\n\nIn this post we'll be looking at some of the main changes and features to get up and running with v5. Notice that we've add a [migration guide](https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5) to our official docs as well.\n\n## New Features\n\nLet's first start with new features that have been introduced in Embark 5.\n\n### Whisper client configuration\n\nPrior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.\n\nTo specify a client, use the new `client` configuration property which defaults to `geth`:\n\n```js\n// communication.js\n\n...\ndefault: {\n  ...\n  client: \"geth\" // can be either 'geth' or 'parity'\n},\n...\n\n```\n\n### Support for Dynamic Addresses\n\nIf you're using Embark already, you're probably aware that there are many different ways to [configure your Smart Contracts](/docs/contracts_configuration.html). One of the things that can be configured is the `address` of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.\n\nThere's one more case that hasn't been covered so far: Calculating a Smart Contract address dynamically as it's scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.\n\nThe following example configures `MyContract` to get its address from a call made to `AnotherContract`'s API:\n\n```js\n...\ndeploy: {\n  AnotherContract: {...},\n  MyContract: {\n    deps: [\"AnotherContract\"]\n    address: async (deps) => {\n      const receipt = await deps.contracts.AnotherContract.methods.someFunction();\n      return receipt.events.SomeEvent.returnValues.someAddress;\n    }\n  }\n}\n...\n```\n\n## Breaking changes\n\nNext up, let's quickly talk about the few breaking changes we've introduced to improve the overall developer experience. It's worth noting that we try to keep breaking changes at a minimum and if it's indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.\n\n### NodeJS support\n\nDue to some package dependencies, Embark doesn't yet support Node's [*Current* version](https://nodejs.org/en/about/releases/) version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version `>= 10.17.0` and `< 12.0.0`. It also requires npm `>= 6.11.3` (bundled with Node `10.17.0`) or yarn `>= 1.19.1`.\n\n### New Smart Contract configuration API\n\nEmbark's Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user's choice of blockchain client. This sometimes caused confusion for our users since they weren't sure where certain configurations should go.\n\nThat's why we've made the following changes:\n\n### Deployment section moved to Blockchain config\n\nThe `deployment` section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the `host`, `port` and `protocol` being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.\n\nHere's what such a config looked like prior to v5:\n\n```js\n...\ndeployment: {\n  host: \"localhost\", // Host of the blockchain node\n  port: 8546, // Port of the blockchain node\n  type: \"ws\" // Type of connection (ws or rpc),\n  accounts: [...]\n},\n...\n```\n\nThere's no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.\n\n### `contracts` property has been renamed to `deploy`\n\nWhen configuring Smart Contracts, there are a few deployment hooks that can be specified, such as `beforeDeploy` and `afterDeploy`. To make the API a bit more descriptive and to clarify intent, the `contracts` property has been renamed to `deploy`, aligning wonderfully with its deployment hooks counterparts.\n\nBefore:\n\n```js\n...\ncontracts: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\nAfter:\n\n```js\n...\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\n### Polished Blockchain configuration API\n\nOne of the most complex APIs has been Embark's Blockchain configuration API. That's why we've put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.\n\nThe following configuration properties have been renamed:\n\n- `isDev` is now `miningMode: 'dev'`\n- `mineWhenNeeded` is now `miningMode: 'auto'`\n- `ethereumClientName` is now `client`\n\nWe've also removed several endpoint-related settings, such as `host` and `port`, and replaced them with a single `endpoint` property. Here's what the new defaults look like:\n\n```js\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {\n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nFor more information on Blockchain configuration, head over to the [official docs](/docs/blockchain_configuration.html).\n\n### Accounts configuration moved to Blockchain config\n\nPrior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn't really clear which accounts belonged to what action. To eliminate confusion, we've moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.\n\nJust like before, accounts can be defined using different configuration settings, depending on the use case:\n\n```js\n...\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n...\n```\n\nCheck out the documentation on [accounts configuration](/docs/blockchain_accounts_configuration.html) for more information.\n\n### Configuring tests\n\nAll the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark's `config()` function inside test suites, the same configuration APi applies:\n\n```javascript\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in the Smart Contract configuration guide\n    }\n  }\n});\n```\n\nTesting is covered in-depth in our [testing guide](/docs/contracts_testing.html).\n\nTo see any of the new APIs in action, have a look at our [template](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates) and [test dapps](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests) in the official Embark repository.\n\nObviously we've worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our [changelog](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07).\n\nAs always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can't wait to see the great apps you'll be building with it!\n","slug":"announcing-embark-5","published":1,"date":"2020-01-13T05:00:00.000Z","updated":"2020-01-19T20:56:52.653Z","_id":"ck5ijm3ub002m7heg363x7mwy","comments":1,"photos":[],"link":"","content":"<p>If you’ve been following the development of Embark you’re probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we’ve published 10 alpha releases and one beta release for Embark 5 and today we’re happy to announce the Embark 5 stable release!</p>\n<p>In this post we’ll be looking at some of the main changes and features to get up and running with v5. Notice that we’ve add a <a href=\"https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5\">migration guide</a> to our official docs as well.</p>\n<h2 id=\"New-Features\"><a href=\"#New-Features\" class=\"headerlink\" title=\"New Features\"></a>New Features</h2><p>Let’s first start with new features that have been introduced in Embark 5.</p>\n<h3 id=\"Whisper-client-configuration\"><a href=\"#Whisper-client-configuration\" class=\"headerlink\" title=\"Whisper client configuration\"></a>Whisper client configuration</h3><p>Prior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.</p>\n<p>To specify a client, use the new <code>client</code> configuration property which defaults to <code>geth</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// communication.js</span></span><br><span class=\"line\"></span><br><span class=\"line\">...</span><br><span class=\"line\"><span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  client: <span class=\"string\">\"geth\"</span> <span class=\"comment\">// can be either 'geth' or 'parity'</span></span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Support-for-Dynamic-Addresses\"><a href=\"#Support-for-Dynamic-Addresses\" class=\"headerlink\" title=\"Support for Dynamic Addresses\"></a>Support for Dynamic Addresses</h3><p>If you’re using Embark already, you’re probably aware that there are many different ways to <a href=\"/docs/contracts_configuration.html\">configure your Smart Contracts</a>. One of the things that can be configured is the <code>address</code> of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.</p>\n<p>There’s one more case that hasn’t been covered so far: Calculating a Smart Contract address dynamically as it’s scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.</p>\n<p>The following example configures <code>MyContract</code> to get its address from a call made to <code>AnotherContract</code>‘s API:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  AnotherContract: &#123;...&#125;,</span><br><span class=\"line\">  MyContract: &#123;</span><br><span class=\"line\">    deps: [<span class=\"string\">\"AnotherContract\"</span>]</span><br><span class=\"line\">    address: <span class=\"keyword\">async</span> (deps) =&gt; &#123;</span><br><span class=\"line\">      <span class=\"keyword\">const</span> receipt = <span class=\"keyword\">await</span> deps.contracts.AnotherContract.methods.someFunction();</span><br><span class=\"line\">      <span class=\"keyword\">return</span> receipt.events.SomeEvent.returnValues.someAddress;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Breaking-changes\"><a href=\"#Breaking-changes\" class=\"headerlink\" title=\"Breaking changes\"></a>Breaking changes</h2><p>Next up, let’s quickly talk about the few breaking changes we’ve introduced to improve the overall developer experience. It’s worth noting that we try to keep breaking changes at a minimum and if it’s indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.</p>\n<h3 id=\"NodeJS-support\"><a href=\"#NodeJS-support\" class=\"headerlink\" title=\"NodeJS support\"></a>NodeJS support</h3><p>Due to some package dependencies, Embark doesn’t yet support Node’s <a href=\"https://nodejs.org/en/about/releases/\" target=\"_blank\" rel=\"noopener\"><em>Current</em> version</a> version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version <code>&gt;= 10.17.0</code> and <code>&lt; 12.0.0</code>. It also requires npm <code>&gt;= 6.11.3</code> (bundled with Node <code>10.17.0</code>) or yarn <code>&gt;= 1.19.1</code>.</p>\n<h3 id=\"New-Smart-Contract-configuration-API\"><a href=\"#New-Smart-Contract-configuration-API\" class=\"headerlink\" title=\"New Smart Contract configuration API\"></a>New Smart Contract configuration API</h3><p>Embark’s Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user’s choice of blockchain client. This sometimes caused confusion for our users since they weren’t sure where certain configurations should go.</p>\n<p>That’s why we’ve made the following changes:</p>\n<h3 id=\"Deployment-section-moved-to-Blockchain-config\"><a href=\"#Deployment-section-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Deployment section moved to Blockchain config\"></a>Deployment section moved to Blockchain config</h3><p>The <code>deployment</code> section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the <code>host</code>, <code>port</code> and <code>protocol</code> being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.</p>\n<p>Here’s what such a config looked like prior to v5:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deployment: &#123;</span><br><span class=\"line\">  host: <span class=\"string\">\"localhost\"</span>, <span class=\"comment\">// Host of the blockchain node</span></span><br><span class=\"line\">  port: <span class=\"number\">8546</span>, <span class=\"comment\">// Port of the blockchain node</span></span><br><span class=\"line\">  type: <span class=\"string\">\"ws\"</span> <span class=\"comment\">// Type of connection (ws or rpc),</span></span><br><span class=\"line\">  accounts: [...]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>There’s no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.</p>\n<h3 id=\"contracts-property-has-been-renamed-to-deploy\"><a href=\"#contracts-property-has-been-renamed-to-deploy\" class=\"headerlink\" title=\"contracts property has been renamed to deploy\"></a><code>contracts</code> property has been renamed to <code>deploy</code></h3><p>When configuring Smart Contracts, there are a few deployment hooks that can be specified, such as <code>beforeDeploy</code> and <code>afterDeploy</code>. To make the API a bit more descriptive and to clarify intent, the <code>contracts</code> property has been renamed to <code>deploy</code>, aligning wonderfully with its deployment hooks counterparts.</p>\n<p>Before:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>After:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Polished-Blockchain-configuration-API\"><a href=\"#Polished-Blockchain-configuration-API\" class=\"headerlink\" title=\"Polished Blockchain configuration API\"></a>Polished Blockchain configuration API</h3><p>One of the most complex APIs has been Embark’s Blockchain configuration API. That’s why we’ve put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.</p>\n<p>The following configuration properties have been renamed:</p>\n<ul>\n<li><code>isDev</code> is now <code>miningMode: &#39;dev&#39;</code></li>\n<li><code>mineWhenNeeded</code> is now <code>miningMode: &#39;auto&#39;</code></li>\n<li><code>ethereumClientName</code> is now <code>client</code></li>\n</ul>\n<p>We’ve also removed several endpoint-related settings, such as <code>host</code> and <code>port</code>, and replaced them with a single <code>endpoint</code> property. Here’s what the new defaults look like:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">module</span>.exports = &#123;</span><br><span class=\"line\">  <span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">    enabled: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    client: <span class=\"string\">\"geth\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: <span class=\"string\">'dev'</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: <span class=\"string\">\"https://external-node.com\"</span>,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: <span class=\"string\">\"12 word mnemonic\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on Blockchain configuration, head over to the <a href=\"/docs/blockchain_configuration.html\">official docs</a>.</p>\n<h3 id=\"Accounts-configuration-moved-to-Blockchain-config\"><a href=\"#Accounts-configuration-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Accounts configuration moved to Blockchain config\"></a>Accounts configuration moved to Blockchain config</h3><p>Prior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn’t really clear which accounts belonged to what action. To eliminate confusion, we’ve moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.</p>\n<p>Just like before, accounts can be defined using different configuration settings, depending on the use case:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    password: <span class=\"string\">\"config/development/devpassword\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: <span class=\"string\">\"path/to/file\"</span>,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: <span class=\"string\">\"0\"</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    hdpath: <span class=\"string\">\"m/44'/60'/0'/0/\"</span></span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Check out the documentation on <a href=\"/docs/blockchain_accounts_configuration.html\">accounts configuration</a> for more information.</p>\n<h3 id=\"Configuring-tests\"><a href=\"#Configuring-tests\" class=\"headerlink\" title=\"Configuring tests\"></a>Configuring tests</h3><p>All the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark’s <code>config()</code> function inside test suites, the same configuration APi applies:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; <span class=\"comment\">// options as discussed in the Smart Contract configuration guide</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Testing is covered in-depth in our <a href=\"/docs/contracts_testing.html\">testing guide</a>.</p>\n<p>To see any of the new APIs in action, have a look at our <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates\" target=\"_blank\" rel=\"noopener\">template</a> and <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests\" target=\"_blank\" rel=\"noopener\">test dapps</a> in the official Embark repository.</p>\n<p>Obviously we’ve worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07\" target=\"_blank\" rel=\"noopener\">changelog</a>.</p>\n<p>As always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can’t wait to see the great apps you’ll be building with it!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>If you’ve been following the development of Embark you’re probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we’ve published 10 alpha releases and one beta release for Embark 5 and today we’re happy to announce the Embark 5 stable release!</p>\n<p>In this post we’ll be looking at some of the main changes and features to get up and running with v5. Notice that we’ve add a <a href=\"https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5\">migration guide</a> to our official docs as well.</p>\n<h2 id=\"New-Features\"><a href=\"#New-Features\" class=\"headerlink\" title=\"New Features\"></a>New Features</h2><p>Let’s first start with new features that have been introduced in Embark 5.</p>\n<h3 id=\"Whisper-client-configuration\"><a href=\"#Whisper-client-configuration\" class=\"headerlink\" title=\"Whisper client configuration\"></a>Whisper client configuration</h3><p>Prior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.</p>\n<p>To specify a client, use the new <code>client</code> configuration property which defaults to <code>geth</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// communication.js</span></span><br><span class=\"line\"></span><br><span class=\"line\">...</span><br><span class=\"line\"><span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  client: <span class=\"string\">\"geth\"</span> <span class=\"comment\">// can be either 'geth' or 'parity'</span></span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Support-for-Dynamic-Addresses\"><a href=\"#Support-for-Dynamic-Addresses\" class=\"headerlink\" title=\"Support for Dynamic Addresses\"></a>Support for Dynamic Addresses</h3><p>If you’re using Embark already, you’re probably aware that there are many different ways to <a href=\"/docs/contracts_configuration.html\">configure your Smart Contracts</a>. One of the things that can be configured is the <code>address</code> of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.</p>\n<p>There’s one more case that hasn’t been covered so far: Calculating a Smart Contract address dynamically as it’s scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.</p>\n<p>The following example configures <code>MyContract</code> to get its address from a call made to <code>AnotherContract</code>‘s API:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  AnotherContract: &#123;...&#125;,</span><br><span class=\"line\">  MyContract: &#123;</span><br><span class=\"line\">    deps: [<span class=\"string\">\"AnotherContract\"</span>]</span><br><span class=\"line\">    address: <span class=\"keyword\">async</span> (deps) =&gt; &#123;</span><br><span class=\"line\">      <span class=\"keyword\">const</span> receipt = <span class=\"keyword\">await</span> deps.contracts.AnotherContract.methods.someFunction();</span><br><span class=\"line\">      <span class=\"keyword\">return</span> receipt.events.SomeEvent.returnValues.someAddress;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Breaking-changes\"><a href=\"#Breaking-changes\" class=\"headerlink\" title=\"Breaking changes\"></a>Breaking changes</h2><p>Next up, let’s quickly talk about the few breaking changes we’ve introduced to improve the overall developer experience. It’s worth noting that we try to keep breaking changes at a minimum and if it’s indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.</p>\n<h3 id=\"NodeJS-support\"><a href=\"#NodeJS-support\" class=\"headerlink\" title=\"NodeJS support\"></a>NodeJS support</h3><p>Due to some package dependencies, Embark doesn’t yet support Node’s <a href=\"https://nodejs.org/en/about/releases/\" target=\"_blank\" rel=\"noopener\"><em>Current</em> version</a> version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version <code>&gt;= 10.17.0</code> and <code>&lt; 12.0.0</code>. It also requires npm <code>&gt;= 6.11.3</code> (bundled with Node <code>10.17.0</code>) or yarn <code>&gt;= 1.19.1</code>.</p>\n<h3 id=\"New-Smart-Contract-configuration-API\"><a href=\"#New-Smart-Contract-configuration-API\" class=\"headerlink\" title=\"New Smart Contract configuration API\"></a>New Smart Contract configuration API</h3><p>Embark’s Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user’s choice of blockchain client. This sometimes caused confusion for our users since they weren’t sure where certain configurations should go.</p>\n<p>That’s why we’ve made the following changes:</p>\n<h3 id=\"Deployment-section-moved-to-Blockchain-config\"><a href=\"#Deployment-section-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Deployment section moved to Blockchain config\"></a>Deployment section moved to Blockchain config</h3><p>The <code>deployment</code> section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the <code>host</code>, <code>port</code> and <code>protocol</code> being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.</p>\n<p>Here’s what such a config looked like prior to v5:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deployment: &#123;</span><br><span class=\"line\">  host: <span class=\"string\">\"localhost\"</span>, <span class=\"comment\">// Host of the blockchain node</span></span><br><span class=\"line\">  port: <span class=\"number\">8546</span>, <span class=\"comment\">// Port of the blockchain node</span></span><br><span class=\"line\">  type: <span class=\"string\">\"ws\"</span> <span class=\"comment\">// Type of connection (ws or rpc),</span></span><br><span class=\"line\">  accounts: [...]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>There’s no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.</p>\n<h3 id=\"contracts-property-has-been-renamed-to-deploy\"><a href=\"#contracts-property-has-been-renamed-to-deploy\" class=\"headerlink\" title=\"contracts property has been renamed to deploy\"></a><code>contracts</code> property has been renamed to <code>deploy</code></h3><p>When configuring Smart Contracts, there are a few deployment hooks that can be specified, such as <code>beforeDeploy</code> and <code>afterDeploy</code>. To make the API a bit more descriptive and to clarify intent, the <code>contracts</code> property has been renamed to <code>deploy</code>, aligning wonderfully with its deployment hooks counterparts.</p>\n<p>Before:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>After:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Polished-Blockchain-configuration-API\"><a href=\"#Polished-Blockchain-configuration-API\" class=\"headerlink\" title=\"Polished Blockchain configuration API\"></a>Polished Blockchain configuration API</h3><p>One of the most complex APIs has been Embark’s Blockchain configuration API. That’s why we’ve put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.</p>\n<p>The following configuration properties have been renamed:</p>\n<ul>\n<li><code>isDev</code> is now <code>miningMode: &#39;dev&#39;</code></li>\n<li><code>mineWhenNeeded</code> is now <code>miningMode: &#39;auto&#39;</code></li>\n<li><code>ethereumClientName</code> is now <code>client</code></li>\n</ul>\n<p>We’ve also removed several endpoint-related settings, such as <code>host</code> and <code>port</code>, and replaced them with a single <code>endpoint</code> property. Here’s what the new defaults look like:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">module</span>.exports = &#123;</span><br><span class=\"line\">  <span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">    enabled: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    client: <span class=\"string\">\"geth\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: <span class=\"string\">'dev'</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: <span class=\"string\">\"https://external-node.com\"</span>,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: <span class=\"string\">\"12 word mnemonic\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on Blockchain configuration, head over to the <a href=\"/docs/blockchain_configuration.html\">official docs</a>.</p>\n<h3 id=\"Accounts-configuration-moved-to-Blockchain-config\"><a href=\"#Accounts-configuration-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Accounts configuration moved to Blockchain config\"></a>Accounts configuration moved to Blockchain config</h3><p>Prior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn’t really clear which accounts belonged to what action. To eliminate confusion, we’ve moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.</p>\n<p>Just like before, accounts can be defined using different configuration settings, depending on the use case:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    password: <span class=\"string\">\"config/development/devpassword\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: <span class=\"string\">\"path/to/file\"</span>,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: <span class=\"string\">\"0\"</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    hdpath: <span class=\"string\">\"m/44'/60'/0'/0/\"</span></span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Check out the documentation on <a href=\"/docs/blockchain_accounts_configuration.html\">accounts configuration</a> for more information.</p>\n<h3 id=\"Configuring-tests\"><a href=\"#Configuring-tests\" class=\"headerlink\" title=\"Configuring tests\"></a>Configuring tests</h3><p>All the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark’s <code>config()</code> function inside test suites, the same configuration APi applies:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; <span class=\"comment\">// options as discussed in the Smart Contract configuration guide</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Testing is covered in-depth in our <a href=\"/docs/contracts_testing.html\">testing guide</a>.</p>\n<p>To see any of the new APIs in action, have a look at our <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates\" target=\"_blank\" rel=\"noopener\">template</a> and <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests\" target=\"_blank\" rel=\"noopener\">test dapps</a> in the official Embark repository.</p>\n<p>Obviously we’ve worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07\" target=\"_blank\" rel=\"noopener\">changelog</a>.</p>\n<p>As always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can’t wait to see the great apps you’ll be building with it!</p>\n"},{"title":"Nim vs Crystal - Part 3 - Crypto, DApps & P2P","summary":"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 3; Crypto, P2P & DApps are explored.","author":"robin_percy","layout":"blog-post","image":"/assets/images/nim-crystal-header_blank.jpg","_content":"\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in [article #1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/) I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests ***did*** throw up some unexpected twists in the plot.  Crystal used *very-nearly* half of the memory amount executing the tests when compared to Nim, and also took *very nearly* half of the execution time in doing so.  **This seriously took me by surprise!**\n\nIn [article #2](/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/); I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they're just the high-level tools that I look for...\n\nFrom a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just *markedly* improve our application performance, but that are also relatively simple, and intuitive to use.  I see *this* as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love \\*cough* ***Ruby*** \\*cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress...\n\nI regret to say that this is the final article in this series!  It's been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it's going to be a good one!  We're going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:\n\n***Let's dive on in!***\n\n## Cryptocurrency\n\nFirstly, I'd like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have ***proven to be two of the strongest languages*** to consider for the undertaking..  (That being the *next* blog series I'm going to write – in the near future, so deciding which language to use will be heavily influenced by ***this*** blog series!)\n\nFor our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a ***very*** tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be **ONE HELL** of an impressive piece of technology.\n\nHappily, both Crystal *and* Nim allow us ***all*** of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining *and* hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.\n\nAs I'd like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we'd require for our Crypto app:\n\n\n### Calculating our Block Hashes\n\nWhen building our Blockchain; we need to consider how we're going to identify and chain our transaction blocks together (blockchain).  Without going into details in *this* article on how blockchains function, we'll stick with the existing, and proven, SHA256 algorithm.\n\n\n### In Crystal:\n\n``` crystal\nrequire \"json\"\nrequire \"openssl\"\n\nmodule OurCryptoApp::Model\n  struct Transaction\n    include JSON::Serializable\n\n    alias TxnHash = String\n\n    property from : String\n    property to : String\n    property amount : Float32\n    getter hash : TxnHash\n    getter timestamp : Int64\n\n    def initialize(@from, @to, @amount)\n      @timestamp = Time.utc_now.to_unix\n      @hash = calc_hash\n    end\n\n    private def calc_hash : TxnHash\n      sha = OpenSSL::Digest.new(\"SHA256\")\n      sha.update(\"#{@from}#{@to}#{@amount}#{@timestamp}\")\n      sha.hexdigest\n    end\n  end\nend\n```\n\n\n### In Nim:\n\nIf we want to generate a similar hash in Nim, we could run the following:\n\n``` nim\nimport strutils\n\nconst SHA256Len = 32\n\nproc SHA256(d: cstring, n: culong, md: cstring = nil): cstring {.cdecl, dynlib: \"libssl.so\", importc.}\n\nproc SHA256(s: string): string =\n  result = \"\"\n  let s = SHA256(s.cstring, s.len.culong)\n  for i in 0 .. < SHA256Len:\n    result.add s[i].BiggestInt.toHex(2).toLower\n\necho SHA256(\"Hash this block, yo\")\n```\n\n\n## Releasing our Crypto App\n\nAnother serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are *compiled* languages, we're already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)\n\nIt pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using [React Native](https://facebook.github.io/react-native/).\n\nHowever, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:\n\n - [Ionic Framework](http://ionicframework.com/)\n - [Flutter](https://flutter.io/)\n - [NativeScript](https://www.nativescript.org/)\n\nAnd if you come from a Windows background:\n\n - [Xamarin](https://dotnet.microsoft.com/apps/xamarin)\n\n\n### Building & Releasing In Nim:\n\nIf we wanted to build out and release our app for Android, we can run:\n\n```\nnim c -c --cpu:arm --os:android -d:androidNDK --noMain:on\n```\n\nTo generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.\n\nSimilarly, we could run:\n\n```\nnim c -c --os:ios --noMain:on\n```\n\nTo generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.\n\n\n### Building & Releasing In Crystal:\n\nCrystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:\n\n```\ncrystal build your_program.cr --cross-compile --target \"x86_64-unknown-linux-gnu\"\n```\n\n***Worth noting:*** *Crystal doesn't offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!*\n\n## Ethereum - Building, Signing & Sending a  Transaction\n\nFor the sake of this article, in Crystal, I didn't see the need to write out a more low-level example of the below action, as it *is* so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.\n\n### In Crystal:\n\n``` crystal\nrequire \"http/client\"\n\nmodule Ethereum\n  class Transaction\n\n    # /ethereum/create/ Create - Ethereum::Transaction.create(args)\n    def self.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : EthereumToSign | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/create//?to=#{to}&from=#{from}&amount=#{amount}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      ethereumtosign = EthereumToSign.from_json response.body\n\n\n      return ethereumtosign\n    end\n\n    # /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)\n    def self.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : SendStatus | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/sign_and_send//?to=#{to}&from=#{from}&amount=#{amount}&r=#{r}&s=#{s}&v=#{v}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      sendstatus = SendStatus.from_json response.body\n\n\n      return sendstatus\n    end\n\n  end\nend\n```\n\nThen, in our application we could simply call:\n\n``` crystal\nEthereum::Transaction.create(\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", \"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", 80000)\n```\n\nAnd we would get a response similar to the following, ready to be signed and sent to the Ethereum network:\n\n``` json\n{\n  \"tx\": \"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\",\n  \"hash_to_sign\": \"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"\n}\n```\n\n\n## In Nim:\n\nFrom a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status' very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported `nim-eth` into our Nimble project, our Ethereum transaction can be built atop of the following protocol:\n\n``` nim\nimport\n  nim-eth/[common, rlp, keys], nimcrypto\n\nproc initTransaction*(nonce: AccountNonce, gasPrice, gasLimit: GasInt, to: EthAddress,\n  value: UInt256, payload: Blob, V: byte, R, S: UInt256, isContractCreation = false): Transaction =\n  result.accountNonce = nonce\n  result.gasPrice = gasPrice\n  result.gasLimit = gasLimit\n  result.to = to\n  result.value = value\n  result.payload = payload\n  result.V = V\n  result.R = R\n  result.S = S\n  result.isContractCreation = isContractCreation\n\ntype\n  TransHashObj = object\n    accountNonce:  AccountNonce\n    gasPrice:      GasInt\n    gasLimit:      GasInt\n    to {.rlpCustomSerialization.}: EthAddress\n    value:         UInt256\n    payload:       Blob\n    mIsContractCreation {.rlpIgnore.}: bool\n\nproc read(rlp: var Rlp, t: var TransHashObj, _: type EthAddress): EthAddress {.inline.} =\n  if rlp.blobLen != 0:\n    result = rlp.read(EthAddress)\n  else:\n    t.mIsContractCreation = true\n\nproc append(rlpWriter: var RlpWriter, t: TransHashObj, a: EthAddress) {.inline.} =\n  if t.mIsContractCreation:\n    rlpWriter.append(\"\")\n  else:\n    rlpWriter.append(a)\n\nconst\n  EIP155_CHAIN_ID_OFFSET* = 35\n\nfunc rlpEncode*(transaction: Transaction): auto =\n  # Encode transaction without signature\n  return rlp.encode(TransHashObj(\n    accountNonce: transaction.accountNonce,\n    gasPrice: transaction.gasPrice,\n    gasLimit: transaction.gasLimit,\n    to: transaction.to,\n    value: transaction.value,\n    payload: transaction.payload,\n    mIsContractCreation: transaction.isContractCreation\n    ))\n\nfunc rlpEncodeEIP155*(tx: Transaction): auto =\n  let V = (tx.V.int - EIP155_CHAIN_ID_OFFSET) div 2\n  # Encode transaction without signature\n  return rlp.encode(Transaction(\n    accountNonce: tx.accountNonce,\n    gasPrice: tx.gasPrice,\n    gasLimit: tx.gasLimit,\n    to: tx.to,\n    value: tx.value,\n    payload: tx.payload,\n    isContractCreation: tx.isContractCreation,\n    V: V.byte,\n    R: 0.u256,\n    S: 0.u256\n    ))\n\nfunc txHashNoSignature*(tx: Transaction): Hash256 =\n  # Hash transaction without signature\n  return keccak256.digest(if tx.V.int >= EIP155_CHAIN_ID_OFFSET: tx.rlpEncodeEIP155 else: tx.rlpEncode)\n```\n\n*Note* - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.\n\n\n[Status' Eth Common Library](https://github.com/status-im/nim-eth/) contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:\n\n - [Recursive Length Prefix encoding (RLP)](https://github.com/status-im/nim-eth/blob/master/doc/rlp.md),\n - [P2P](https://github.com/status-im/nim-eth/blob/master/doc/p2p.md),\n - [Eth-keys](https://github.com/status-im/nim-eth/blob/master/doc/keys.md),\n - [Eth-keyfile](https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md),\n - [Ethereum Trie structure](https://github.com/status-im/nim-eth/blob/master/doc/trie.md), and\n - [Ethereum Bloom Filter](https://github.com/status-im/nim-eth/blob/master/doc/bloom.md).\n\nIf you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status & the [Nimbus](https://nimbus.team) team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!\n\n\n## Conclusion\n\nOur hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.\n\nRealistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be **Crystal**.  This is simply because of the *much* larger ecosystem and resources surrounding it.\n\nHowever, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you'd inevitably choose **Nim**.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.\n\nAlas, this brings me on to my final points...\n\n\n## Series Conclusion\n\nIt's funny – each article in this series, I've started by saying to myself \"Right, Nim is going to win.\" And then half way through; changing my story to \"Crystal is my choice, actually.\"\n\nBut then I went and spoiled it all, by saying something stupid like \"Cryptocurrency\".\n\nPrior to this article, I *was swaying* towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up *extremely* impressive interoperability, awesome inbuilt tooling, and great efficiency overall.\n\nI hate to do this, but I'm just going to have to say it:  for your usecase – **pick the best tool for the job**. Please ensure that you research properly into both languages, and weigh-up the pro's/con's that pertain to your specific usecase.\n\n***Cliches aside*** – if I had to pick a favourite overall language, it would have to be **Crystal**.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I **much** prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!\n\nSo, to answer the epic question – Crystal vs Nim?\n\nPersonally, I choose Crystal.  But I think **you** should choose ***Nim.*** 😅\n\n[ **- @rbin**](https://twitter.com/rbin)\n","source":"_posts/2019-11-28-nim-vs-crystal-part-3-cryto-dapps-p2p.md","raw":"title: Nim vs Crystal - Part 3 - Crypto, DApps & P2P\nsummary: \"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 3; Crypto, P2P & DApps are explored.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/nim-crystal-header_blank.jpg'\n---\n\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in [article #1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/) I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests ***did*** throw up some unexpected twists in the plot.  Crystal used *very-nearly* half of the memory amount executing the tests when compared to Nim, and also took *very nearly* half of the execution time in doing so.  **This seriously took me by surprise!**\n\nIn [article #2](/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/); I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they're just the high-level tools that I look for...\n\nFrom a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just *markedly* improve our application performance, but that are also relatively simple, and intuitive to use.  I see *this* as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love \\*cough* ***Ruby*** \\*cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress...\n\nI regret to say that this is the final article in this series!  It's been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it's going to be a good one!  We're going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:\n\n***Let's dive on in!***\n\n## Cryptocurrency\n\nFirstly, I'd like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have ***proven to be two of the strongest languages*** to consider for the undertaking..  (That being the *next* blog series I'm going to write – in the near future, so deciding which language to use will be heavily influenced by ***this*** blog series!)\n\nFor our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a ***very*** tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be **ONE HELL** of an impressive piece of technology.\n\nHappily, both Crystal *and* Nim allow us ***all*** of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining *and* hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.\n\nAs I'd like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we'd require for our Crypto app:\n\n\n### Calculating our Block Hashes\n\nWhen building our Blockchain; we need to consider how we're going to identify and chain our transaction blocks together (blockchain).  Without going into details in *this* article on how blockchains function, we'll stick with the existing, and proven, SHA256 algorithm.\n\n\n### In Crystal:\n\n``` crystal\nrequire \"json\"\nrequire \"openssl\"\n\nmodule OurCryptoApp::Model\n  struct Transaction\n    include JSON::Serializable\n\n    alias TxnHash = String\n\n    property from : String\n    property to : String\n    property amount : Float32\n    getter hash : TxnHash\n    getter timestamp : Int64\n\n    def initialize(@from, @to, @amount)\n      @timestamp = Time.utc_now.to_unix\n      @hash = calc_hash\n    end\n\n    private def calc_hash : TxnHash\n      sha = OpenSSL::Digest.new(\"SHA256\")\n      sha.update(\"#{@from}#{@to}#{@amount}#{@timestamp}\")\n      sha.hexdigest\n    end\n  end\nend\n```\n\n\n### In Nim:\n\nIf we want to generate a similar hash in Nim, we could run the following:\n\n``` nim\nimport strutils\n\nconst SHA256Len = 32\n\nproc SHA256(d: cstring, n: culong, md: cstring = nil): cstring {.cdecl, dynlib: \"libssl.so\", importc.}\n\nproc SHA256(s: string): string =\n  result = \"\"\n  let s = SHA256(s.cstring, s.len.culong)\n  for i in 0 .. < SHA256Len:\n    result.add s[i].BiggestInt.toHex(2).toLower\n\necho SHA256(\"Hash this block, yo\")\n```\n\n\n## Releasing our Crypto App\n\nAnother serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are *compiled* languages, we're already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)\n\nIt pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using [React Native](https://facebook.github.io/react-native/).\n\nHowever, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:\n\n - [Ionic Framework](http://ionicframework.com/)\n - [Flutter](https://flutter.io/)\n - [NativeScript](https://www.nativescript.org/)\n\nAnd if you come from a Windows background:\n\n - [Xamarin](https://dotnet.microsoft.com/apps/xamarin)\n\n\n### Building & Releasing In Nim:\n\nIf we wanted to build out and release our app for Android, we can run:\n\n```\nnim c -c --cpu:arm --os:android -d:androidNDK --noMain:on\n```\n\nTo generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.\n\nSimilarly, we could run:\n\n```\nnim c -c --os:ios --noMain:on\n```\n\nTo generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.\n\n\n### Building & Releasing In Crystal:\n\nCrystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:\n\n```\ncrystal build your_program.cr --cross-compile --target \"x86_64-unknown-linux-gnu\"\n```\n\n***Worth noting:*** *Crystal doesn't offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!*\n\n## Ethereum - Building, Signing & Sending a  Transaction\n\nFor the sake of this article, in Crystal, I didn't see the need to write out a more low-level example of the below action, as it *is* so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.\n\n### In Crystal:\n\n``` crystal\nrequire \"http/client\"\n\nmodule Ethereum\n  class Transaction\n\n    # /ethereum/create/ Create - Ethereum::Transaction.create(args)\n    def self.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : EthereumToSign | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/create//?to=#{to}&from=#{from}&amount=#{amount}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      ethereumtosign = EthereumToSign.from_json response.body\n\n\n      return ethereumtosign\n    end\n\n    # /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)\n    def self.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : SendStatus | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/sign_and_send//?to=#{to}&from=#{from}&amount=#{amount}&r=#{r}&s=#{s}&v=#{v}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      sendstatus = SendStatus.from_json response.body\n\n\n      return sendstatus\n    end\n\n  end\nend\n```\n\nThen, in our application we could simply call:\n\n``` crystal\nEthereum::Transaction.create(\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", \"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", 80000)\n```\n\nAnd we would get a response similar to the following, ready to be signed and sent to the Ethereum network:\n\n``` json\n{\n  \"tx\": \"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\",\n  \"hash_to_sign\": \"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"\n}\n```\n\n\n## In Nim:\n\nFrom a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status' very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported `nim-eth` into our Nimble project, our Ethereum transaction can be built atop of the following protocol:\n\n``` nim\nimport\n  nim-eth/[common, rlp, keys], nimcrypto\n\nproc initTransaction*(nonce: AccountNonce, gasPrice, gasLimit: GasInt, to: EthAddress,\n  value: UInt256, payload: Blob, V: byte, R, S: UInt256, isContractCreation = false): Transaction =\n  result.accountNonce = nonce\n  result.gasPrice = gasPrice\n  result.gasLimit = gasLimit\n  result.to = to\n  result.value = value\n  result.payload = payload\n  result.V = V\n  result.R = R\n  result.S = S\n  result.isContractCreation = isContractCreation\n\ntype\n  TransHashObj = object\n    accountNonce:  AccountNonce\n    gasPrice:      GasInt\n    gasLimit:      GasInt\n    to {.rlpCustomSerialization.}: EthAddress\n    value:         UInt256\n    payload:       Blob\n    mIsContractCreation {.rlpIgnore.}: bool\n\nproc read(rlp: var Rlp, t: var TransHashObj, _: type EthAddress): EthAddress {.inline.} =\n  if rlp.blobLen != 0:\n    result = rlp.read(EthAddress)\n  else:\n    t.mIsContractCreation = true\n\nproc append(rlpWriter: var RlpWriter, t: TransHashObj, a: EthAddress) {.inline.} =\n  if t.mIsContractCreation:\n    rlpWriter.append(\"\")\n  else:\n    rlpWriter.append(a)\n\nconst\n  EIP155_CHAIN_ID_OFFSET* = 35\n\nfunc rlpEncode*(transaction: Transaction): auto =\n  # Encode transaction without signature\n  return rlp.encode(TransHashObj(\n    accountNonce: transaction.accountNonce,\n    gasPrice: transaction.gasPrice,\n    gasLimit: transaction.gasLimit,\n    to: transaction.to,\n    value: transaction.value,\n    payload: transaction.payload,\n    mIsContractCreation: transaction.isContractCreation\n    ))\n\nfunc rlpEncodeEIP155*(tx: Transaction): auto =\n  let V = (tx.V.int - EIP155_CHAIN_ID_OFFSET) div 2\n  # Encode transaction without signature\n  return rlp.encode(Transaction(\n    accountNonce: tx.accountNonce,\n    gasPrice: tx.gasPrice,\n    gasLimit: tx.gasLimit,\n    to: tx.to,\n    value: tx.value,\n    payload: tx.payload,\n    isContractCreation: tx.isContractCreation,\n    V: V.byte,\n    R: 0.u256,\n    S: 0.u256\n    ))\n\nfunc txHashNoSignature*(tx: Transaction): Hash256 =\n  # Hash transaction without signature\n  return keccak256.digest(if tx.V.int >= EIP155_CHAIN_ID_OFFSET: tx.rlpEncodeEIP155 else: tx.rlpEncode)\n```\n\n*Note* - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.\n\n\n[Status' Eth Common Library](https://github.com/status-im/nim-eth/) contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:\n\n - [Recursive Length Prefix encoding (RLP)](https://github.com/status-im/nim-eth/blob/master/doc/rlp.md),\n - [P2P](https://github.com/status-im/nim-eth/blob/master/doc/p2p.md),\n - [Eth-keys](https://github.com/status-im/nim-eth/blob/master/doc/keys.md),\n - [Eth-keyfile](https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md),\n - [Ethereum Trie structure](https://github.com/status-im/nim-eth/blob/master/doc/trie.md), and\n - [Ethereum Bloom Filter](https://github.com/status-im/nim-eth/blob/master/doc/bloom.md).\n\nIf you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status & the [Nimbus](https://nimbus.team) team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!\n\n\n## Conclusion\n\nOur hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.\n\nRealistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be **Crystal**.  This is simply because of the *much* larger ecosystem and resources surrounding it.\n\nHowever, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you'd inevitably choose **Nim**.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.\n\nAlas, this brings me on to my final points...\n\n\n## Series Conclusion\n\nIt's funny – each article in this series, I've started by saying to myself \"Right, Nim is going to win.\" And then half way through; changing my story to \"Crystal is my choice, actually.\"\n\nBut then I went and spoiled it all, by saying something stupid like \"Cryptocurrency\".\n\nPrior to this article, I *was swaying* towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up *extremely* impressive interoperability, awesome inbuilt tooling, and great efficiency overall.\n\nI hate to do this, but I'm just going to have to say it:  for your usecase – **pick the best tool for the job**. Please ensure that you research properly into both languages, and weigh-up the pro's/con's that pertain to your specific usecase.\n\n***Cliches aside*** – if I had to pick a favourite overall language, it would have to be **Crystal**.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I **much** prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!\n\nSo, to answer the epic question – Crystal vs Nim?\n\nPersonally, I choose Crystal.  But I think **you** should choose ***Nim.*** 😅\n\n[ **- @rbin**](https://twitter.com/rbin)\n","slug":"nim-vs-crystal-part-3-cryto-dapps-p2p","published":1,"date":"2019-11-28T05:00:00.000Z","updated":"2020-01-17T19:05:36.402Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3ui002r7heg90h8743t","content":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">article #1</a> I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests <strong><em>did</em></strong> throw up some unexpected twists in the plot.  Crystal used <em>very-nearly</em> half of the memory amount executing the tests when compared to Nim, and also took <em>very nearly</em> half of the execution time in doing so.  <strong>This seriously took me by surprise!</strong></p>\n<p>In <a href=\"/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/\">article #2</a>; I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they’re just the high-level tools that I look for…</p>\n<p>From a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just <em>markedly</em> improve our application performance, but that are also relatively simple, and intuitive to use.  I see <em>this</em> as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love *cough* <strong><em>Ruby</em></strong> *cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress…</p>\n<p>I regret to say that this is the final article in this series!  It’s been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it’s going to be a good one!  We’re going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:</p>\n<p><strong><em>Let’s dive on in!</em></strong></p>\n<h2 id=\"Cryptocurrency\"><a href=\"#Cryptocurrency\" class=\"headerlink\" title=\"Cryptocurrency\"></a>Cryptocurrency</h2><p>Firstly, I’d like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have <strong><em>proven to be two of the strongest languages</em></strong> to consider for the undertaking..  (That being the <em>next</em> blog series I’m going to write – in the near future, so deciding which language to use will be heavily influenced by <strong><em>this</em></strong> blog series!)</p>\n<p>For our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a <strong><em>very</em></strong> tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be <strong>ONE HELL</strong> of an impressive piece of technology.</p>\n<p>Happily, both Crystal <em>and</em> Nim allow us <strong><em>all</em></strong> of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining <em>and</em> hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.</p>\n<p>As I’d like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we’d require for our Crypto app:</p>\n<h3 id=\"Calculating-our-Block-Hashes\"><a href=\"#Calculating-our-Block-Hashes\" class=\"headerlink\" title=\"Calculating our Block Hashes\"></a>Calculating our Block Hashes</h3><p>When building our Blockchain; we need to consider how we’re going to identify and chain our transaction blocks together (blockchain).  Without going into details in <em>this</em> article on how blockchains function, we’ll stick with the existing, and proven, SHA256 algorithm.</p>\n<h3 id=\"In-Crystal\"><a href=\"#In-Crystal\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"openssl\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">OurCryptoApp::Model</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">struct</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\">    <span class=\"keyword\">include</span> <span class=\"symbol\">JSON:</span>:Serializable</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">alias</span> TxnHash = String</span><br><span class=\"line\"></span><br><span class=\"line\">    property from : String</span><br><span class=\"line\">    property to : String</span><br><span class=\"line\">    property amount : Float32</span><br><span class=\"line\">    getter hash : TxnHash</span><br><span class=\"line\">    getter timestamp : Int64</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">initialize</span></span>(@from, @to, @amount)</span><br><span class=\"line\">      @timestamp = Time.utc_now.to_unix</span><br><span class=\"line\">      @hash = calc_hash</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">private</span> <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">calc_hash</span></span> : TxnHash</span><br><span class=\"line\">      sha = <span class=\"symbol\">OpenSSL:</span>:Digest.new(<span class=\"string\">\"SHA256\"</span>)</span><br><span class=\"line\">      sha.update(<span class=\"string\">\"<span class=\"subst\">#&#123;@from&#125;</span><span class=\"subst\">#&#123;@to&#125;</span><span class=\"subst\">#&#123;@amount&#125;</span><span class=\"subst\">#&#123;@timestamp&#125;</span>\"</span>)</span><br><span class=\"line\">      sha.hexdigest</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n\n<h3 id=\"In-Nim\"><a href=\"#In-Nim\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h3><p>If we want to generate a similar hash in Nim, we could run the following:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> strutils</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"type\">SHA256Len</span> = <span class=\"number\">32</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(d: <span class=\"built_in\">cstring</span>, n: <span class=\"built_in\">culong</span>, md: <span class=\"built_in\">cstring</span> = <span class=\"keyword\">nil</span>): <span class=\"built_in\">cstring</span> <span class=\"meta\">&#123;.cdecl, dynlib: \"libssl.so\", importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(s: <span class=\"built_in\">string</span>): <span class=\"built_in\">string</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span> = <span class=\"string\">\"\"</span></span><br><span class=\"line\">  <span class=\"keyword\">let</span> s = <span class=\"type\">SHA256</span>(s.<span class=\"built_in\">cstring</span>, s.len.<span class=\"built_in\">culong</span>)</span><br><span class=\"line\">  <span class=\"keyword\">for</span> i <span class=\"keyword\">in</span> <span class=\"number\">0</span> .. &lt; <span class=\"type\">SHA256Len</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span>.add s[i].<span class=\"type\">BiggestInt</span>.toHex(<span class=\"number\">2</span>).toLower</span><br><span class=\"line\"></span><br><span class=\"line\">echo <span class=\"type\">SHA256</span>(<span class=\"string\">\"Hash this block, yo\"</span>)</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Releasing-our-Crypto-App\"><a href=\"#Releasing-our-Crypto-App\" class=\"headerlink\" title=\"Releasing our Crypto App\"></a>Releasing our Crypto App</h2><p>Another serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are <em>compiled</em> languages, we’re already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)</p>\n<p>It pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using <a href=\"https://facebook.github.io/react-native/\" target=\"_blank\" rel=\"noopener\">React Native</a>.</p>\n<p>However, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:</p>\n<ul>\n<li><a href=\"http://ionicframework.com/\" target=\"_blank\" rel=\"noopener\">Ionic Framework</a></li>\n<li><a href=\"https://flutter.io/\" target=\"_blank\" rel=\"noopener\">Flutter</a></li>\n<li><a href=\"https://www.nativescript.org/\" target=\"_blank\" rel=\"noopener\">NativeScript</a></li>\n</ul>\n<p>And if you come from a Windows background:</p>\n<ul>\n<li><a href=\"https://dotnet.microsoft.com/apps/xamarin\" target=\"_blank\" rel=\"noopener\">Xamarin</a></li>\n</ul>\n<h3 id=\"Building-amp-Releasing-In-Nim\"><a href=\"#Building-amp-Releasing-In-Nim\" class=\"headerlink\" title=\"Building &amp; Releasing In Nim:\"></a>Building &amp; Releasing In Nim:</h3><p>If we wanted to build out and release our app for Android, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --cpu:arm --os:android -d:androidNDK --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.</p>\n<p>Similarly, we could run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --os:ios --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.</p>\n<h3 id=\"Building-amp-Releasing-In-Crystal\"><a href=\"#Building-amp-Releasing-In-Crystal\" class=\"headerlink\" title=\"Building &amp; Releasing In Crystal:\"></a>Building &amp; Releasing In Crystal:</h3><p>Crystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">crystal build your_program.cr --cross-compile --target &quot;x86_64-unknown-linux-gnu&quot;</span><br></pre></td></tr></table></figure>\n\n<p><strong><em>Worth noting:</em></strong> <em>Crystal doesn’t offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!</em></p>\n<h2 id=\"Ethereum-Building-Signing-amp-Sending-a-Transaction\"><a href=\"#Ethereum-Building-Signing-amp-Sending-a-Transaction\" class=\"headerlink\" title=\"Ethereum - Building, Signing &amp; Sending a  Transaction\"></a>Ethereum - Building, Signing &amp; Sending a  Transaction</h2><p>For the sake of this article, in Crystal, I didn’t see the need to write out a more low-level example of the below action, as it <em>is</em> so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.</p>\n<h3 id=\"In-Crystal-1\"><a href=\"#In-Crystal-1\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"http/client\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">Ethereum</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/create/ Create - Ethereum::Transaction.create(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : EthereumToSign | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/create//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      ethereumtosign = EthereumToSign.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ethereumtosign</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : SendStatus | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/sign_and_send//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;r=<span class=\"subst\">#&#123;r&#125;</span>&amp;s=<span class=\"subst\">#&#123;s&#125;</span>&amp;v=<span class=\"subst\">#&#123;v&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      sendstatus = SendStatus.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> sendstatus</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n<p>Then, in our application we could simply call:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"symbol\">Ethereum:</span>:Transaction.create(<span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"number\">80000</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And we would get a response similar to the following, ready to be signed and sent to the Ethereum network:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"tx\"</span>: <span class=\"string\">\"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\"</span>,</span><br><span class=\"line\">  <span class=\"attr\">\"hash_to_sign\"</span>: <span class=\"string\">\"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"In-Nim-1\"><a href=\"#In-Nim-1\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h2><p>From a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status’ very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported <code>nim-eth</code> into our Nimble project, our Ethereum transaction can be built atop of the following protocol:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span></span><br><span class=\"line\">  nim-eth/[common, rlp, keys], nimcrypto</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> initTransaction*(nonce: <span class=\"type\">AccountNonce</span>, gasPrice, gasLimit: <span class=\"type\">GasInt</span>, to: <span class=\"type\">EthAddress</span>,</span><br><span class=\"line\">  value: <span class=\"type\">UInt256</span>, payload: <span class=\"type\">Blob</span>, V: byte, R, S: <span class=\"type\">UInt256</span>, isContractCreation = <span class=\"literal\">false</span>): <span class=\"type\">Transaction</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span>.accountNonce = nonce</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasPrice = gasPrice</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasLimit = gasLimit</span><br><span class=\"line\">  <span class=\"literal\">result</span>.to = to</span><br><span class=\"line\">  <span class=\"literal\">result</span>.value = value</span><br><span class=\"line\">  <span class=\"literal\">result</span>.payload = payload</span><br><span class=\"line\">  <span class=\"literal\">result</span>.V = V</span><br><span class=\"line\">  <span class=\"literal\">result</span>.R = R</span><br><span class=\"line\">  <span class=\"literal\">result</span>.S = S</span><br><span class=\"line\">  <span class=\"literal\">result</span>.isContractCreation = isContractCreation</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">type</span></span><br><span class=\"line\">  <span class=\"type\">TransHashObj</span> = <span class=\"keyword\">object</span></span><br><span class=\"line\">    accountNonce:  <span class=\"type\">AccountNonce</span></span><br><span class=\"line\">    gasPrice:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    gasLimit:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    to <span class=\"meta\">&#123;.rlpCustomSerialization.&#125;</span>: <span class=\"type\">EthAddress</span></span><br><span class=\"line\">    value:         <span class=\"type\">UInt256</span></span><br><span class=\"line\">    payload:       <span class=\"type\">Blob</span></span><br><span class=\"line\">    mIsContractCreation <span class=\"meta\">&#123;.rlpIgnore.&#125;</span>: <span class=\"built_in\">bool</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> read(rlp: <span class=\"keyword\">var</span> <span class=\"type\">Rlp</span>, t: <span class=\"keyword\">var</span> <span class=\"type\">TransHashObj</span>, _: <span class=\"keyword\">type</span> <span class=\"type\">EthAddress</span>): <span class=\"type\">EthAddress</span> <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> rlp.blobLen != <span class=\"number\">0</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span> = rlp.read(<span class=\"type\">EthAddress</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    t.mIsContractCreation = <span class=\"literal\">true</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> append(rlpWriter: <span class=\"keyword\">var</span> <span class=\"type\">RlpWriter</span>, t: <span class=\"type\">TransHashObj</span>, a: <span class=\"type\">EthAddress</span>) <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> t.mIsContractCreation:</span><br><span class=\"line\">    rlpWriter.append(<span class=\"string\">\"\"</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    rlpWriter.append(a)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span></span><br><span class=\"line\">  <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>* = <span class=\"number\">35</span></span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncode*(transaction: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">TransHashObj</span>(</span><br><span class=\"line\">    accountNonce: transaction.accountNonce,</span><br><span class=\"line\">    gasPrice: transaction.gasPrice,</span><br><span class=\"line\">    gasLimit: transaction.gasLimit,</span><br><span class=\"line\">    to: transaction.to,</span><br><span class=\"line\">    value: transaction.value,</span><br><span class=\"line\">    payload: transaction.payload,</span><br><span class=\"line\">    mIsContractCreation: transaction.isContractCreation</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncodeEIP155*(tx: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"keyword\">let</span> V = (tx.V.<span class=\"built_in\">int</span> - <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>) <span class=\"keyword\">div</span> <span class=\"number\">2</span></span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">Transaction</span>(</span><br><span class=\"line\">    accountNonce: tx.accountNonce,</span><br><span class=\"line\">    gasPrice: tx.gasPrice,</span><br><span class=\"line\">    gasLimit: tx.gasLimit,</span><br><span class=\"line\">    to: tx.to,</span><br><span class=\"line\">    value: tx.value,</span><br><span class=\"line\">    payload: tx.payload,</span><br><span class=\"line\">    isContractCreation: tx.isContractCreation,</span><br><span class=\"line\">    V: V.byte,</span><br><span class=\"line\">    R: <span class=\"number\">0</span>.u256,</span><br><span class=\"line\">    S: <span class=\"number\">0</span>.u256</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func txHashNoSignature*(tx: <span class=\"type\">Transaction</span>): <span class=\"type\">Hash256</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Hash transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> keccak256.digest(<span class=\"keyword\">if</span> tx.V.<span class=\"built_in\">int</span> &gt;= <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>: tx.rlpEncodeEIP155 <span class=\"keyword\">else</span>: tx.rlpEncode)</span><br></pre></td></tr></table></figure>\n\n<p><em>Note</em> - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.</p>\n<p><a href=\"https://github.com/status-im/nim-eth/\" target=\"_blank\" rel=\"noopener\">Status’ Eth Common Library</a> contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:</p>\n<ul>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/rlp.md\" target=\"_blank\" rel=\"noopener\">Recursive Length Prefix encoding (RLP)</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/p2p.md\" target=\"_blank\" rel=\"noopener\">P2P</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keys.md\" target=\"_blank\" rel=\"noopener\">Eth-keys</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md\" target=\"_blank\" rel=\"noopener\">Eth-keyfile</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/trie.md\" target=\"_blank\" rel=\"noopener\">Ethereum Trie structure</a>, and</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/bloom.md\" target=\"_blank\" rel=\"noopener\">Ethereum Bloom Filter</a>.</li>\n</ul>\n<p>If you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status &amp; the <a href=\"https://nimbus.team\" target=\"_blank\" rel=\"noopener\">Nimbus</a> team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Our hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.</p>\n<p>Realistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be <strong>Crystal</strong>.  This is simply because of the <em>much</em> larger ecosystem and resources surrounding it.</p>\n<p>However, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you’d inevitably choose <strong>Nim</strong>.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.</p>\n<p>Alas, this brings me on to my final points…</p>\n<h2 id=\"Series-Conclusion\"><a href=\"#Series-Conclusion\" class=\"headerlink\" title=\"Series Conclusion\"></a>Series Conclusion</h2><p>It’s funny – each article in this series, I’ve started by saying to myself “Right, Nim is going to win.” And then half way through; changing my story to “Crystal is my choice, actually.”</p>\n<p>But then I went and spoiled it all, by saying something stupid like “Cryptocurrency”.</p>\n<p>Prior to this article, I <em>was swaying</em> towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up <em>extremely</em> impressive interoperability, awesome inbuilt tooling, and great efficiency overall.</p>\n<p>I hate to do this, but I’m just going to have to say it:  for your usecase – <strong>pick the best tool for the job</strong>. Please ensure that you research properly into both languages, and weigh-up the pro’s/con’s that pertain to your specific usecase.</p>\n<p><strong><em>Cliches aside</em></strong> – if I had to pick a favourite overall language, it would have to be <strong>Crystal</strong>.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I <strong>much</strong> prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!</p>\n<p>So, to answer the epic question – Crystal vs Nim?</p>\n<p>Personally, I choose Crystal.  But I think <strong>you</strong> should choose <strong><em>Nim.</em></strong> 😅</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">article #1</a> I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests <strong><em>did</em></strong> throw up some unexpected twists in the plot.  Crystal used <em>very-nearly</em> half of the memory amount executing the tests when compared to Nim, and also took <em>very nearly</em> half of the execution time in doing so.  <strong>This seriously took me by surprise!</strong></p>\n<p>In <a href=\"/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/\">article #2</a>; I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they’re just the high-level tools that I look for…</p>\n<p>From a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just <em>markedly</em> improve our application performance, but that are also relatively simple, and intuitive to use.  I see <em>this</em> as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love *cough* <strong><em>Ruby</em></strong> *cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress…</p>\n<p>I regret to say that this is the final article in this series!  It’s been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it’s going to be a good one!  We’re going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:</p>\n<p><strong><em>Let’s dive on in!</em></strong></p>\n<h2 id=\"Cryptocurrency\"><a href=\"#Cryptocurrency\" class=\"headerlink\" title=\"Cryptocurrency\"></a>Cryptocurrency</h2><p>Firstly, I’d like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have <strong><em>proven to be two of the strongest languages</em></strong> to consider for the undertaking..  (That being the <em>next</em> blog series I’m going to write – in the near future, so deciding which language to use will be heavily influenced by <strong><em>this</em></strong> blog series!)</p>\n<p>For our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a <strong><em>very</em></strong> tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be <strong>ONE HELL</strong> of an impressive piece of technology.</p>\n<p>Happily, both Crystal <em>and</em> Nim allow us <strong><em>all</em></strong> of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining <em>and</em> hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.</p>\n<p>As I’d like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we’d require for our Crypto app:</p>\n<h3 id=\"Calculating-our-Block-Hashes\"><a href=\"#Calculating-our-Block-Hashes\" class=\"headerlink\" title=\"Calculating our Block Hashes\"></a>Calculating our Block Hashes</h3><p>When building our Blockchain; we need to consider how we’re going to identify and chain our transaction blocks together (blockchain).  Without going into details in <em>this</em> article on how blockchains function, we’ll stick with the existing, and proven, SHA256 algorithm.</p>\n<h3 id=\"In-Crystal\"><a href=\"#In-Crystal\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"openssl\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">OurCryptoApp::Model</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">struct</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\">    <span class=\"keyword\">include</span> <span class=\"symbol\">JSON:</span>:Serializable</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">alias</span> TxnHash = String</span><br><span class=\"line\"></span><br><span class=\"line\">    property from : String</span><br><span class=\"line\">    property to : String</span><br><span class=\"line\">    property amount : Float32</span><br><span class=\"line\">    getter hash : TxnHash</span><br><span class=\"line\">    getter timestamp : Int64</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">initialize</span></span>(@from, @to, @amount)</span><br><span class=\"line\">      @timestamp = Time.utc_now.to_unix</span><br><span class=\"line\">      @hash = calc_hash</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">private</span> <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">calc_hash</span></span> : TxnHash</span><br><span class=\"line\">      sha = <span class=\"symbol\">OpenSSL:</span>:Digest.new(<span class=\"string\">\"SHA256\"</span>)</span><br><span class=\"line\">      sha.update(<span class=\"string\">\"<span class=\"subst\">#&#123;@from&#125;</span><span class=\"subst\">#&#123;@to&#125;</span><span class=\"subst\">#&#123;@amount&#125;</span><span class=\"subst\">#&#123;@timestamp&#125;</span>\"</span>)</span><br><span class=\"line\">      sha.hexdigest</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n\n<h3 id=\"In-Nim\"><a href=\"#In-Nim\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h3><p>If we want to generate a similar hash in Nim, we could run the following:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> strutils</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"type\">SHA256Len</span> = <span class=\"number\">32</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(d: <span class=\"built_in\">cstring</span>, n: <span class=\"built_in\">culong</span>, md: <span class=\"built_in\">cstring</span> = <span class=\"keyword\">nil</span>): <span class=\"built_in\">cstring</span> <span class=\"meta\">&#123;.cdecl, dynlib: \"libssl.so\", importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(s: <span class=\"built_in\">string</span>): <span class=\"built_in\">string</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span> = <span class=\"string\">\"\"</span></span><br><span class=\"line\">  <span class=\"keyword\">let</span> s = <span class=\"type\">SHA256</span>(s.<span class=\"built_in\">cstring</span>, s.len.<span class=\"built_in\">culong</span>)</span><br><span class=\"line\">  <span class=\"keyword\">for</span> i <span class=\"keyword\">in</span> <span class=\"number\">0</span> .. &lt; <span class=\"type\">SHA256Len</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span>.add s[i].<span class=\"type\">BiggestInt</span>.toHex(<span class=\"number\">2</span>).toLower</span><br><span class=\"line\"></span><br><span class=\"line\">echo <span class=\"type\">SHA256</span>(<span class=\"string\">\"Hash this block, yo\"</span>)</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Releasing-our-Crypto-App\"><a href=\"#Releasing-our-Crypto-App\" class=\"headerlink\" title=\"Releasing our Crypto App\"></a>Releasing our Crypto App</h2><p>Another serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are <em>compiled</em> languages, we’re already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)</p>\n<p>It pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using <a href=\"https://facebook.github.io/react-native/\" target=\"_blank\" rel=\"noopener\">React Native</a>.</p>\n<p>However, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:</p>\n<ul>\n<li><a href=\"http://ionicframework.com/\" target=\"_blank\" rel=\"noopener\">Ionic Framework</a></li>\n<li><a href=\"https://flutter.io/\" target=\"_blank\" rel=\"noopener\">Flutter</a></li>\n<li><a href=\"https://www.nativescript.org/\" target=\"_blank\" rel=\"noopener\">NativeScript</a></li>\n</ul>\n<p>And if you come from a Windows background:</p>\n<ul>\n<li><a href=\"https://dotnet.microsoft.com/apps/xamarin\" target=\"_blank\" rel=\"noopener\">Xamarin</a></li>\n</ul>\n<h3 id=\"Building-amp-Releasing-In-Nim\"><a href=\"#Building-amp-Releasing-In-Nim\" class=\"headerlink\" title=\"Building &amp; Releasing In Nim:\"></a>Building &amp; Releasing In Nim:</h3><p>If we wanted to build out and release our app for Android, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --cpu:arm --os:android -d:androidNDK --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.</p>\n<p>Similarly, we could run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --os:ios --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.</p>\n<h3 id=\"Building-amp-Releasing-In-Crystal\"><a href=\"#Building-amp-Releasing-In-Crystal\" class=\"headerlink\" title=\"Building &amp; Releasing In Crystal:\"></a>Building &amp; Releasing In Crystal:</h3><p>Crystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">crystal build your_program.cr --cross-compile --target &quot;x86_64-unknown-linux-gnu&quot;</span><br></pre></td></tr></table></figure>\n\n<p><strong><em>Worth noting:</em></strong> <em>Crystal doesn’t offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!</em></p>\n<h2 id=\"Ethereum-Building-Signing-amp-Sending-a-Transaction\"><a href=\"#Ethereum-Building-Signing-amp-Sending-a-Transaction\" class=\"headerlink\" title=\"Ethereum - Building, Signing &amp; Sending a  Transaction\"></a>Ethereum - Building, Signing &amp; Sending a  Transaction</h2><p>For the sake of this article, in Crystal, I didn’t see the need to write out a more low-level example of the below action, as it <em>is</em> so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.</p>\n<h3 id=\"In-Crystal-1\"><a href=\"#In-Crystal-1\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"http/client\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">Ethereum</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/create/ Create - Ethereum::Transaction.create(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : EthereumToSign | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/create//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      ethereumtosign = EthereumToSign.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ethereumtosign</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : SendStatus | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/sign_and_send//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;r=<span class=\"subst\">#&#123;r&#125;</span>&amp;s=<span class=\"subst\">#&#123;s&#125;</span>&amp;v=<span class=\"subst\">#&#123;v&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      sendstatus = SendStatus.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> sendstatus</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n<p>Then, in our application we could simply call:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"symbol\">Ethereum:</span>:Transaction.create(<span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"number\">80000</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And we would get a response similar to the following, ready to be signed and sent to the Ethereum network:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"tx\"</span>: <span class=\"string\">\"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\"</span>,</span><br><span class=\"line\">  <span class=\"attr\">\"hash_to_sign\"</span>: <span class=\"string\">\"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"In-Nim-1\"><a href=\"#In-Nim-1\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h2><p>From a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status’ very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported <code>nim-eth</code> into our Nimble project, our Ethereum transaction can be built atop of the following protocol:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span></span><br><span class=\"line\">  nim-eth/[common, rlp, keys], nimcrypto</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> initTransaction*(nonce: <span class=\"type\">AccountNonce</span>, gasPrice, gasLimit: <span class=\"type\">GasInt</span>, to: <span class=\"type\">EthAddress</span>,</span><br><span class=\"line\">  value: <span class=\"type\">UInt256</span>, payload: <span class=\"type\">Blob</span>, V: byte, R, S: <span class=\"type\">UInt256</span>, isContractCreation = <span class=\"literal\">false</span>): <span class=\"type\">Transaction</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span>.accountNonce = nonce</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasPrice = gasPrice</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasLimit = gasLimit</span><br><span class=\"line\">  <span class=\"literal\">result</span>.to = to</span><br><span class=\"line\">  <span class=\"literal\">result</span>.value = value</span><br><span class=\"line\">  <span class=\"literal\">result</span>.payload = payload</span><br><span class=\"line\">  <span class=\"literal\">result</span>.V = V</span><br><span class=\"line\">  <span class=\"literal\">result</span>.R = R</span><br><span class=\"line\">  <span class=\"literal\">result</span>.S = S</span><br><span class=\"line\">  <span class=\"literal\">result</span>.isContractCreation = isContractCreation</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">type</span></span><br><span class=\"line\">  <span class=\"type\">TransHashObj</span> = <span class=\"keyword\">object</span></span><br><span class=\"line\">    accountNonce:  <span class=\"type\">AccountNonce</span></span><br><span class=\"line\">    gasPrice:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    gasLimit:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    to <span class=\"meta\">&#123;.rlpCustomSerialization.&#125;</span>: <span class=\"type\">EthAddress</span></span><br><span class=\"line\">    value:         <span class=\"type\">UInt256</span></span><br><span class=\"line\">    payload:       <span class=\"type\">Blob</span></span><br><span class=\"line\">    mIsContractCreation <span class=\"meta\">&#123;.rlpIgnore.&#125;</span>: <span class=\"built_in\">bool</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> read(rlp: <span class=\"keyword\">var</span> <span class=\"type\">Rlp</span>, t: <span class=\"keyword\">var</span> <span class=\"type\">TransHashObj</span>, _: <span class=\"keyword\">type</span> <span class=\"type\">EthAddress</span>): <span class=\"type\">EthAddress</span> <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> rlp.blobLen != <span class=\"number\">0</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span> = rlp.read(<span class=\"type\">EthAddress</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    t.mIsContractCreation = <span class=\"literal\">true</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> append(rlpWriter: <span class=\"keyword\">var</span> <span class=\"type\">RlpWriter</span>, t: <span class=\"type\">TransHashObj</span>, a: <span class=\"type\">EthAddress</span>) <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> t.mIsContractCreation:</span><br><span class=\"line\">    rlpWriter.append(<span class=\"string\">\"\"</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    rlpWriter.append(a)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span></span><br><span class=\"line\">  <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>* = <span class=\"number\">35</span></span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncode*(transaction: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">TransHashObj</span>(</span><br><span class=\"line\">    accountNonce: transaction.accountNonce,</span><br><span class=\"line\">    gasPrice: transaction.gasPrice,</span><br><span class=\"line\">    gasLimit: transaction.gasLimit,</span><br><span class=\"line\">    to: transaction.to,</span><br><span class=\"line\">    value: transaction.value,</span><br><span class=\"line\">    payload: transaction.payload,</span><br><span class=\"line\">    mIsContractCreation: transaction.isContractCreation</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncodeEIP155*(tx: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"keyword\">let</span> V = (tx.V.<span class=\"built_in\">int</span> - <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>) <span class=\"keyword\">div</span> <span class=\"number\">2</span></span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">Transaction</span>(</span><br><span class=\"line\">    accountNonce: tx.accountNonce,</span><br><span class=\"line\">    gasPrice: tx.gasPrice,</span><br><span class=\"line\">    gasLimit: tx.gasLimit,</span><br><span class=\"line\">    to: tx.to,</span><br><span class=\"line\">    value: tx.value,</span><br><span class=\"line\">    payload: tx.payload,</span><br><span class=\"line\">    isContractCreation: tx.isContractCreation,</span><br><span class=\"line\">    V: V.byte,</span><br><span class=\"line\">    R: <span class=\"number\">0</span>.u256,</span><br><span class=\"line\">    S: <span class=\"number\">0</span>.u256</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func txHashNoSignature*(tx: <span class=\"type\">Transaction</span>): <span class=\"type\">Hash256</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Hash transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> keccak256.digest(<span class=\"keyword\">if</span> tx.V.<span class=\"built_in\">int</span> &gt;= <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>: tx.rlpEncodeEIP155 <span class=\"keyword\">else</span>: tx.rlpEncode)</span><br></pre></td></tr></table></figure>\n\n<p><em>Note</em> - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.</p>\n<p><a href=\"https://github.com/status-im/nim-eth/\" target=\"_blank\" rel=\"noopener\">Status’ Eth Common Library</a> contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:</p>\n<ul>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/rlp.md\" target=\"_blank\" rel=\"noopener\">Recursive Length Prefix encoding (RLP)</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/p2p.md\" target=\"_blank\" rel=\"noopener\">P2P</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keys.md\" target=\"_blank\" rel=\"noopener\">Eth-keys</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md\" target=\"_blank\" rel=\"noopener\">Eth-keyfile</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/trie.md\" target=\"_blank\" rel=\"noopener\">Ethereum Trie structure</a>, and</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/bloom.md\" target=\"_blank\" rel=\"noopener\">Ethereum Bloom Filter</a>.</li>\n</ul>\n<p>If you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status &amp; the <a href=\"https://nimbus.team\" target=\"_blank\" rel=\"noopener\">Nimbus</a> team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Our hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.</p>\n<p>Realistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be <strong>Crystal</strong>.  This is simply because of the <em>much</em> larger ecosystem and resources surrounding it.</p>\n<p>However, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you’d inevitably choose <strong>Nim</strong>.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.</p>\n<p>Alas, this brings me on to my final points…</p>\n<h2 id=\"Series-Conclusion\"><a href=\"#Series-Conclusion\" class=\"headerlink\" title=\"Series Conclusion\"></a>Series Conclusion</h2><p>It’s funny – each article in this series, I’ve started by saying to myself “Right, Nim is going to win.” And then half way through; changing my story to “Crystal is my choice, actually.”</p>\n<p>But then I went and spoiled it all, by saying something stupid like “Cryptocurrency”.</p>\n<p>Prior to this article, I <em>was swaying</em> towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up <em>extremely</em> impressive interoperability, awesome inbuilt tooling, and great efficiency overall.</p>\n<p>I hate to do this, but I’m just going to have to say it:  for your usecase – <strong>pick the best tool for the job</strong>. Please ensure that you research properly into both languages, and weigh-up the pro’s/con’s that pertain to your specific usecase.</p>\n<p><strong><em>Cliches aside</em></strong> – if I had to pick a favourite overall language, it would have to be <strong>Crystal</strong>.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I <strong>much</strong> prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!</p>\n<p>So, to answer the epic question – Crystal vs Nim?</p>\n<p>Personally, I choose Crystal.  But I think <strong>you</strong> should choose <strong><em>Nim.</em></strong> 😅</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n"},{"title":"Building a decentralized Reddit with Embark - Part 3","summary":"In this third and last part of the tutorial series about building a decentralized Reddit with Embark, we're building the front-end for our application using React and EmbarkJS.","layout":"blog-post","author":"pascal_precht","alias":"news/2019/02/17/building-a-decentralized-reddit-with-embark-part-3/","_content":"\nHopefully you've read [the first](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) and [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/) of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we'll be focussing on building the front-end for our application and continue where we've left off.\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n\nWe'll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\n## Rendering our first component\n\nAlright, before we jump straight into building components that will talk to our Smart Contract instance, let's first actually render a simple text on the screen just to make sure our setup is working correctly.\n\nFor that, what we'll do is adding React as a dependency to our project. In fact, we'll be relying on two packages - `react` and `react-dom`. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.\n\nLet's add the following `dependencies` section to our projects `package.json`:\n\n```\n\"dependencies\": {\n  \"react\": \"^16.4.2\",\n  \"react-dom\": \"^16.4.2\"\n}\n```\n\nOnce that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:\n\n```\n$ npm install\n```\n\nNow we can go ahead and actually make use of React. As Embark is framework agnostic, we won't be focussing too much on details specific to React, just the least amount that is needed to make our app work.\n\nCreating components in React is pretty straight forward. All we need to do is creating a class that extends React's `Component` type and add a `render()` method that will render the component's view.\n\nLet's create a folder for all of our components inside our projects:\n\n```\n$ mkdir app/js/components\n```\n\nNext, we create a file for our root component. We call it simply `App` and use the same file name:\n\n```\n$ touch app/js/components/App.js\n```\n\nAlright, as mentioned earlier, we really just want to render some text on the screen for starters. Here's what that could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class App extends Component {\n\n  render() {\n    return <h1>DReddit</h1>\n  }\n}\n```\n\nThis is probably self explanatory, but all we're doing here is importing `React` and its `Component` type and create an `App` class that extends `Component`. The `render()` method will be used by React to render the component's view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We'll make use of that later!\n\nOkay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to `app/js/index.js` and add the following code:\n\n```\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { App } from './components/App';\n\nrender(<App />, document.getElementById('root'));\n```\n\nWe need to import `React` again as it has to be available in this script's scope. We also import a `render` function from `react-dom`, which is used to render our root component (`App`) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id `root`.\n\nLet's set this up really quick. In `app/index.html` add a new element with a `root` id:\n\n```\n<body>\n\t<div id=\"root\"></div>\n\t<script src=\"js/app.js\"></script>\n</body>\n```\n\nNotice that we've also moved the `script` tag inside the body tag, after the element with the `root` id. This is just one way to work around the fact that the element we're referencing inside our `render()` method is actually available in the document at the time the script is executed.\n\nThat should do it! Let's spin up Embark, we should then see our component rendered on the screen:\n\n```\n$ embark run\n```\n\n## Building a `CreatePost` component\n\nAlright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to `App`, we'll introduce a new component `createPost` that comes with a `render()` method to display a simple form for entering data. We'll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.\n\nCreating a simple form is very straight forward:\n\n```\nimport React, { Component } from 'react';\n\nexport class CreatePost extends Component {\n\n  render() {\n    return (\n      <form>\n        <div>\n          <label>Topic</label>\n          <input type=\"text\" name=\"topic\" />\n        </div>\n        <div>\n          <textarea name=\"content\"></textarea>\n        </div>\n        <button>Post</button>\n      </form>\n    )\n  }\n}\n```\n\nTo actually render this component on screen, we need to make it part of our `App` component. Or, to be more specific, have the `App` component render our `CreatePost` component. For now we can simply add it to `App`'s render function like this;\n\n\n```\nimport { CreatePost } from './CreatePost';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n      </React.Fragment&>\n    )\n  }\n}\n```\n\nReact doesn't allow for multiple root elements in a single component's view, so we have to take advantage of `React.Fragment`. Obviously, there's not too much going on here apart from us rendering a static form. Also notice that we don't spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!\n\nLet's make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called `state` that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a `setState()` method if needed.\n\nLet's introduce `state` in our component by adding a constructor and initializing it accordingly:\n\n```\nexport class CreatePost extends Component {\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      topic: '',\n      content: '',\n      loading: false\n    };\n  }\n  ...\n}\n```\n\nNext we bind that state to our form fields:\n\n```\n<form>\n  <div>\n    <label>Topic</label>\n    <input type=\"text\" name=\"topic\" value={this.state.topic} />\n  </div>\n  <div>\n    <textarea name=\"content\" value={this.state.content}></textarea>\n  </div>\n  <button>Post</button>\n</form>\n```\n\nNo worries, we'll make use of `loading` in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component's state as the user is entering data. To make sure everything works fine, we'll also add an event handler for the form submission and output the data in `state`. Here's what our `handleChange()` and `createPost()` handlers looks like:\n\n```\nexport class CreatePost extends Component {\n  ...\n  handleChange(field, event) {\n    this.setState({\n      [field]: event.target.value\n    });\n  }\n\n  createPost(event) {\n    event.preventDefault();\n    console.log(this.state);\n  }\n  ...\n}\n```\n\nNotice how we're using `setState()` inside `handleChange()` to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:\n\n```\n<form onSubmit={e => createPost(e)}>\n  <div>\n    <label>Topic</label>\n    <input\n      type=\"text\"\n      name=\"topic\"\n      value={this.state.topic}\n      onChange={e => handleChange('topic', e)} />\n  </div>\n  <div>\n    <textarea\n      name=\"content\"\n      value={this.state.content}\n      onChange={e => handleChange('content', e})></textarea>\n  </div>\n  <button type=\"submit\">Post</button>\n</form>\n```\n\nSince we're using the `onSubmit()` handler of the form, it's also important that we either add a `type=\"submit\"` to our `button` or change the button to an `<input type=\"submit\">` element. Otherwise, the form won't emit a submit event.\n\nNice! With that in place, we should see the component's `state` in the console when submitting the form! The next challenge is to use `EmbarkJS` and its APIs to make our component talk to our Smart Contract instance.\n\n### Uploading data to IPFS\n\nRecall from our [first part](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts) of this tutorial that our `DReddit` Smart Contract comes with a `createPost()` method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we'll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.\n\nLuckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! `EmbarkJS.Storage.saveText()` takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in [part two](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost) of this tutorial, we'll use `async/await` to write asynchronous code in a synchronous fashion.\n\n```\nasync createPost(event) {\n  event.preventDefault();\n\n  this.setState({\n    loading: true\n  });\n\n  const ipfsHash = await EmbarkJS.Storage.saveText(JSON.stringify({\n    topic: this.state.topic,\n    content: this.state.content\n  }));\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWe use `JSON.stringify()` on an object that holds the `topic` and `content` of the post to be created. This is also the first time we put `loading` into action. Setting it to `true` before, and `false` after we've performed our operations lets us render a useful message as the user is waiting for updates.\n\n```\n<form onSubmit={e => createPost(e)}>\n  ...\n  {this.state.loading &&\n    <p>Posting...</p>\n  }\n</form>\n```\n\nObviously, we're not done yet though. All we do right now is uploading the post's data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its `createPost()` method. Let's do that!\n\n### Sending transactions to create posts\n\nTo send a transaction to our Smart Contract, we can again take advantage of EmbarkJS' APIs, similar to how we did it in the [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2). We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we'll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.\n\nOnce we have those things in place we can get a gas estimation for our transaction and send the data over. Here's how we retrieve our accounts, notice that `async/await` can be used here as well:\n\n```\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  ...\n}\n```\n\nNext up we'll import a `DReddit` Smart Contract instance from EmbarkJS and use it to get a gas estimation from `web3`. We can then use the estimation and one of our accounts to actually send the transaction:\n\n```\nimport DReddit from './artifacts/contracts/DReddit';\n...\n\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  const createPost = DReddit.methods.createPost(web3.utils.toHex(ipfsHash));\n  const estimate = await createPost.estimateGas();\n\n  await createPost.send({from: accounts[0], gas: estimate});\n  ...\n}\n```\n\nSweet, with that, our `createPost` method is done! We haven't built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running `embark run`. We should see a confirmation that looks something like this:\n\n```\nBlockchain> DReddit.createPost(\"0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e\") | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1\n```\n\n## Creating a Post component\n\nThe next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we'll look into rendering a list of posts dynamically, based on the data we're fetching.\n\nAgain, our application won't look particularly pretty, we'll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.\n\nHere's what such a component with a basic template could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class Post extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>Some Topic</h3>\n        <p>This is the content of a post</p>\n        <p><small><i>created at 2019-02-18 by 0x00000000000000</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThere are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the `Post` component that represents the entire post object and can then be displayed inside its `render()` method. However, for this tutorial we're going to choose a slightly different path. We'll make `Post` receive IPFS hash that's stored in the Smart Contract and have it resolve the data itself.\n\nLet's stay consistent with our naming and say the property we're expecting to be filled with data is called `description`, just like the one used inside the Smart Contract. We can then use `EmbarkJS.Storage.get()` with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside `Post`'s view, we'll parse it and use `setState()` accordingly.\n\nTo make sure all of that happens once the component is ready to do its work, we'll do all of that inside its `componentDidMount()` life cycle hook:\n\n```\nimport React, { Component } from 'react';\nimport EmbarkJS from '.artifacts/embarkjs';\n\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: ''\n    };\n  }\n\n  async componentDidMount() {\n    const ipfsHash = web3.utils.toAscii(this.props.description);\n    const data = await EmbarkJS.Storage.get(ipfsHash);\n    const { topic, content } = JSON.parse(data);\n\n    this.setState({ topic, content });\n  }\n  ...\n}\n```\n\nThere's one gotcha to keep in mind here: Calling `EmbarkJS.Storage.get()` or any `EmbarkJS` function on page load can fail, because the storage system might not be fully initialized yet. This wasn't a problem for the previous `EmbarkJS.Storage.uploadText()` because we called that function well after Embark had finished initializing\n\nTheoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its `onReady()` hook. `EmbarkJS.onReady()` takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let's wrap that `render()` call in our `App` component inside Embark's `onReady()` function.\n\n```\nEmbarkJS.onReady(() => {\n  render(<App />, document.getElementById('root'));\n});\n```\n\nThis also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.\n\nLet's also quickly add the `owner` and creation date. The `owner` is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it'll be formatted in a way the users can make sense of the data. We'll use the `dateformat` library for that and install it as a dependency like this:\n\n```\n$ npm install --save dateformat\n```\n\nOnce that is done, we can update our `Post` component's `render()` function to calculate a properly formatted date based on the `creationDate` that has been passed down through properties:\n\n```\n...\nimport dateformat from 'dateformat';\n\nexport class Post extends Component {\n  ...\n  render() {\n    const formattedDate = dateformat(\n      new Date(this.props.creationDate * 1000),\n      'yyyy-mm-dd HH:MM:ss'\n    );\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>{this.state.topic}</h3>\n        <p>{this.state.content}</p>\n        <p><small><i>created at {formattedDate} by {this.props.owner}</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nNotice that variables created inside `render()` can be interpolated as they are - there's no need to make them available on `props` or `state`. As a matter of fact, `props` are always considered read only in React.\n\nLet's try out our new `Post` component with some static data by adding it to our `App` component's view. Next up, we'll make this dynamic by fetching the posts from our Smart Contract.\n\n**Attention**: The hash used in this snippet might not be available in your local IPFS node, so you'll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.\n\n```\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <Post\n          description=\"0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250\"\n          creationDate=\"1550073772\"\n          owner=\"0x00000000000\"\n          />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n## Creating a List component\n\nBefore we can move on with building a component that renders a list of posts, we'll have to extend our Smart Contract with one more method. Since there's no canonical way to fetch array data from a Smart Contract, we'll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.\n\nLet's introduce a method `numPosts()` in our `DReddit` Smart Contract:\n\n```\nfunction numPosts() public view returns (uint) {\n  return posts.length;\n}\n```\n\n`posts.length` will increase as we're adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we'll leave that up to you!\n\nWith that in place, we can start building a new `List` component. The `List` component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:\n\n```\nimport React, { Component } from 'react';\n\nexport class List extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  render() {\n    return (<React.Fragment>\n      {this.state.posts.map(post => {\n        return (\n          <Post\n            key={post.id}\n            description={post.description}\n            creationDate={post.creationDate}\n            owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThe most interesting part here is probably the `render()` method, in which we iterate over all `state.posts` (which at the moment is empty) and then render a `Post` component for every iteration. Another thing to note is that every `Post` receives a `key`. This is required in React when creating views from loops. We've never introduced a `post.id` in this tutorial, but don't worry, we'll fix that in a moment.\n\nWe can already put that in our `App` component. It won't render anything as we haven't fetched any posts yet, but that's what we'll do next.\n\n\n```\nimport { List } from './List';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <List />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Fetching posts data\n\nLet's fill our new `List` component with life! As mentioned earlier, we'll use our Smart Contract's `numPosts()` method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the `List` component is ready, we'll use its `componentDidMount()` method for that:\n\n```\nexport class List extends Component {\n  ...\n  async componentDidMount() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    for (let i = 0; i < totalPosts; i++) {\n      const post = DReddit.methods.posts(i).call();\n      list.push(post);\n    }\n\n    list = await Promise.all(list);\n  }\n  ...\n}\n```\n\nNotice that in the above code we don't `await` the calls to every individual post. This is on purpose as we don't want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using `Promise.all().`\n\nLast but not least, we need to add an `id` property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post's index as `id`. Once that is done, we can use `setState()` to update our component's state and render the list:\n\n```\nasync componentDidMount() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    return post;\n  });\n\n  this.setState({ posts: list });\n}\n```\n\nThat's it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we'll have to reload the browser every time after adding a post. However, this we'll address now.\n\n### Reloading posts\n\nThere is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the `createPost` component tell the `List` component to reload its posts. However, there's no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of `CreatePost` and `List` (in our case `App`), and have it pass that logic down to places where its needed. This also means we'll be fetching the list inside `App` and pass down the pure data to `List`.\n\nIf this sounds overwhelming, no worries, it's more trivial than that! Let's start by introducing a `loadPosts()` function in our `App` component. Essentially we're moving everything from `List`'s `componentDidMount()` function into `App`:\n\n```\nexport class App extends Component {\n  ...\n  async loadPosts() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    if (totalPosts > 0) {\n      for (let i = 0; i < totalPosts; i++) {\n        const post = DReddit.methods.posts(i).call();\n        list.push(post);\n      }\n    }\n\n    list = await Promise.all(list);\n    list = list.map((post, index) => {\n      post.id = index;\n      return post;\n    });\n\n    list;\n\n    this.setState({ posts: list });\n  }\n}\n```\n\nTo make this work we also need to introduce a `state` with the dedicated `posts`. After that, we make sure `loadPosts()` is called when `App` is mounted:\n\n```\nexport class App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  async componentDidMount() {\n    await this.loadPosts();\n  }\n  ...\n}\n```\n\nLast but not least, all we have to do is to pass the `posts` down to `List` and `loadPosts()` to `CreatePost` as a callback handler if you will:\n\n```\nrender() {\n  return (\n    <React.Fragment>\n      <h1>DReddit</h1>\n      <CreatePost afterPostHandler={this.loadPosts.bind(this)}/>\n      <List posts={this.state.posts}/>\n    </React.Fragment>\n  )\n}\n```\n\nOnce that is done, we can consume `posts` and `afterPostHandler()` from `this.props` respectively. In `List`'s `render()` function we'll do (notice we don't rely on `this.state` anymore):\n\n```\nrender() {\n  return (<React.Fragment>\n    {this.props.posts.map(post => {\n      ...\n    })}\n    </React.Fragment>\n  )\n}\n```\n\nAnd in `CreatePost` we call `afterPostHandler()` after a post has been created:\n\n```\nasync createPost(event) {\n  ...\n  await createPost.send({from: accounts[0], gas: estimate});\n  await this.props.afterPostHandler();\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWonderful! The list now automatically reloads after creating posts, give it a try!\n\n## Add voting functionality\n\nThe final feature we'll be implementing is the up and down voting of posts. This is where we come back to our `Post` component that we've created earlier. In order to make this feature complete we'll have to:\n\n- Render the number of up and down votes per post\n- Add handlers for users to up and down vote\n- Determine if a user can vote on a post\n\n### Rendering number of votes\nLet's start with the first one, as it's the most trivial one. While the number of up and down votes is already attached to the data that we receive from our `DReddit` Smart Contract, it's not yet in the right format as it comes back as a string. Let's make sure we parse the up and down vote counts on posts by extending our `App`'s `loadPosts()` method like this:\n\n```\nasync loadPosts() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    post.upvotes = parseInt(post.upvotes, 10);\n    post.downvotes = parseInt(post.downvotes, 10);\n    return post;\n  });\n  ...\n}\n```\n\nOnce that is done we can pass each post's `upvotes` and `downvotes` to every `Post` component via its `props` inside our `List` component:\n\n```\nexport class List extends Component {\n  ...\n  render() {\n    return (<React.Fragment>\n      {this.props.posts.map(post => {\n        return (<Post\n          key={post.id}\n          description={post.description}\n          creationDate={post.creationDate}\n          upvotes={post.upvotes}\n          downvotes={post.downvotes}\n          owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nRendering the number of `upvotes` and `downvotes` is then really just a matter of interpolating them in `Post`'s `render()` function. We're just going to add them next to the buttons, but feel free to put them somewhere else:\n\n```\nexport class Post extends Component {\n  ...\n  render() {\n    ...\n    return (\n      <React.Fragment>\n        ...\n        {this.props.upvotes} <button>Upvote</button>\n        {this.props.downvotes} <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Implement up and down votes\n\nSimilar to when creating new posts, making the up and down vote buttons work requires sending transactions to our `DReddit` Smart Contract. So we'll do almost the same thing as in our `CreatePost` component, just that we're calling the Smart Contract's `vote()` method. If you recall, the `vote()` method takes a post id and the vote type, which is either `NONE`, `UPVOTE` or `DOWNVOTE` and are stored as `uint8`.\n\nIt makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we'll use a hash object instead:\n\n```\nconst BALLOT = {\n  NONE: 0,\n  UPVOTE: 1,\n  DOWNVOTE: 2\n}\n```\n\nWe don't actually have the post id available in our `Post` component yet. That's easily added in our `List` component, by now you should know how to do that!\n\nWe can then add click handlers to our up and down vote buttons and pass one of the `BALLOT` types to them (notice that we added `BALLOT.NONE` only for completeness-sake but don't actually use it in our code):\n\n```\n<button onClick={e => this.vote(BALLOT.UPVOTE)}>Upvote</button>\n<button onClick={e => this.vote(BALLOT.DOWNVOTE)}>Downvote</button>\n```\n\nThe next thing we need to do is sending that vote type along with the post id to our Smart Contract:\n\n```\nasync vote(ballot) {\n  const accounts = await web3.eth.getAccounts();\n  const vote = DReddit.methods.vote(this.props.id, ballot);\n  const estimate = await vote.estimateGas();\n\n  await vote.send({from: accounts[0], gas: estimate});\n}\n```\n\nObviously, we also want to update the view when a vote has been successfully sent. Right now we're reading a post's up and down votes from its `props` and render them accordingly. However, we want to update those values as votes are coming in. For that we'll change our code to only read the up and down votes from `props` once and store them in the component's state.\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes\n    };\n  }\n  ...\n}\n```\n\nWe also change the component's view to render the values from state instead of `props`:\n\n```\nrender() {\n  ...\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button ...>Upvote</button>\n      {this.state.downvotes} <button ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\n\nAfter that we can update the state with new votes using `setState()`, right after a vote has been sent:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({\n    upvotes: this.state.upvotes + (ballot == BALLOT.UPVOTE ? 1 : 0),\n    downvotes: this.state.downvotes + (ballot == BALLOT.DOWNVOTE ? 1 : 0)\n  });\n}\n```\n\n**That's it!** We can now up and down vote on posts...but only once! Yes, that's right. When we try to vote multiple times on the same post, we'll actually receive an error. That's because, if you remember, there's a restriction in our Smart Contract that makes sure users can not vote on posts that they've either already voted on, or created themselves.\n\nLet's make sure this is reflected in our application's UI and wrap up this tutorial!\n\n### Use `canVote()` to disable vote buttons\n\nWe'll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract's `canVote()` method. Another thing we need to consider is that we shouldn't allow a user to vote when a vote for the same post is already in flight but hasn't completed yet.\n\nLet's introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes,\n      canVote: true,\n      submitting: false\n    };\n  }\n  ...\n}\n```\n\nNext, we update our `Post` component's `render()` function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:\n\n```\nrender() {\n  ...\n  const disabled = this.state.submitting || !this.state.canVote;\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button disabled={disabled} ...>Upvote</button>\n      {this.state.downvotes} <button disabled={disabled} ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\nLast but not least, we have to make sure the state properties are updated accordingly. We'll call our Smart Contract's `canVote()` method when a post is initialized:\n\n```\nexport class Post extends Component {\n  ...\n  async componentDidMount() {\n    ...\n    const canVote = await DReddit.methods.canVote(this.props.id).call();\n    this.setState({ topic, content, canVote });\n  }\n  ...\n}\n```\n\nAnd when a vote is being made, we set `submitting` to `true` right before we send a transaction and set it back to `false` again when the transaction is done. At this point, we also know that a vote has been made on this post, so `canVote` can be set to `false` at the same time:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({ submitting: true });\n  await vote.send({from: accounts[0], gas: estimate + 1000});\n\n  this.setState({\n    ...\n    canVote: false,\n    submitting: false\n  });\n}\n```\n\n**And we're done!**\n\n## Wrapping it up\n\nCongratulations! You've completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:\n\n- Sort the posts in reversed chronological order so that the latest post is always on top\n- Rely on Smart Contracts Events to reload list\n- Introduce routing so there can be different views for creating and viewing posts\n- Use CSS to make the application look nice\n\nWe hope you've learned that it's not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.\n\n**We've recorded every single step of this tutorial [in this repository](https://github.com/embarklabs/dreddit-tutorial)**, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to [follow us on Twitter](https://twitter.com/EmbarkProject) as well for updates!\n\n","source":"_posts/2019-02-18-building-a-decentralized-reddit-with-embark-part-3.md","raw":"title: Building a decentralized Reddit with Embark - Part 3\nsummary: \"In this third and last part of the tutorial series about building a decentralized Reddit with Embark, we're building the front-end for our application using React and EmbarkJS.\"\ncategories:\n  - tutorials\nlayout: blog-post\nauthor: pascal_precht\nalias: news/2019/02/17/building-a-decentralized-reddit-with-embark-part-3/\n---\n\nHopefully you've read [the first](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) and [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/) of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we'll be focussing on building the front-end for our application and continue where we've left off.\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n\nWe'll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\n## Rendering our first component\n\nAlright, before we jump straight into building components that will talk to our Smart Contract instance, let's first actually render a simple text on the screen just to make sure our setup is working correctly.\n\nFor that, what we'll do is adding React as a dependency to our project. In fact, we'll be relying on two packages - `react` and `react-dom`. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.\n\nLet's add the following `dependencies` section to our projects `package.json`:\n\n```\n\"dependencies\": {\n  \"react\": \"^16.4.2\",\n  \"react-dom\": \"^16.4.2\"\n}\n```\n\nOnce that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:\n\n```\n$ npm install\n```\n\nNow we can go ahead and actually make use of React. As Embark is framework agnostic, we won't be focussing too much on details specific to React, just the least amount that is needed to make our app work.\n\nCreating components in React is pretty straight forward. All we need to do is creating a class that extends React's `Component` type and add a `render()` method that will render the component's view.\n\nLet's create a folder for all of our components inside our projects:\n\n```\n$ mkdir app/js/components\n```\n\nNext, we create a file for our root component. We call it simply `App` and use the same file name:\n\n```\n$ touch app/js/components/App.js\n```\n\nAlright, as mentioned earlier, we really just want to render some text on the screen for starters. Here's what that could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class App extends Component {\n\n  render() {\n    return <h1>DReddit</h1>\n  }\n}\n```\n\nThis is probably self explanatory, but all we're doing here is importing `React` and its `Component` type and create an `App` class that extends `Component`. The `render()` method will be used by React to render the component's view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We'll make use of that later!\n\nOkay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to `app/js/index.js` and add the following code:\n\n```\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { App } from './components/App';\n\nrender(<App />, document.getElementById('root'));\n```\n\nWe need to import `React` again as it has to be available in this script's scope. We also import a `render` function from `react-dom`, which is used to render our root component (`App`) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id `root`.\n\nLet's set this up really quick. In `app/index.html` add a new element with a `root` id:\n\n```\n<body>\n\t<div id=\"root\"></div>\n\t<script src=\"js/app.js\"></script>\n</body>\n```\n\nNotice that we've also moved the `script` tag inside the body tag, after the element with the `root` id. This is just one way to work around the fact that the element we're referencing inside our `render()` method is actually available in the document at the time the script is executed.\n\nThat should do it! Let's spin up Embark, we should then see our component rendered on the screen:\n\n```\n$ embark run\n```\n\n## Building a `CreatePost` component\n\nAlright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to `App`, we'll introduce a new component `createPost` that comes with a `render()` method to display a simple form for entering data. We'll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.\n\nCreating a simple form is very straight forward:\n\n```\nimport React, { Component } from 'react';\n\nexport class CreatePost extends Component {\n\n  render() {\n    return (\n      <form>\n        <div>\n          <label>Topic</label>\n          <input type=\"text\" name=\"topic\" />\n        </div>\n        <div>\n          <textarea name=\"content\"></textarea>\n        </div>\n        <button>Post</button>\n      </form>\n    )\n  }\n}\n```\n\nTo actually render this component on screen, we need to make it part of our `App` component. Or, to be more specific, have the `App` component render our `CreatePost` component. For now we can simply add it to `App`'s render function like this;\n\n\n```\nimport { CreatePost } from './CreatePost';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n      </React.Fragment&>\n    )\n  }\n}\n```\n\nReact doesn't allow for multiple root elements in a single component's view, so we have to take advantage of `React.Fragment`. Obviously, there's not too much going on here apart from us rendering a static form. Also notice that we don't spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!\n\nLet's make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called `state` that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a `setState()` method if needed.\n\nLet's introduce `state` in our component by adding a constructor and initializing it accordingly:\n\n```\nexport class CreatePost extends Component {\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      topic: '',\n      content: '',\n      loading: false\n    };\n  }\n  ...\n}\n```\n\nNext we bind that state to our form fields:\n\n```\n<form>\n  <div>\n    <label>Topic</label>\n    <input type=\"text\" name=\"topic\" value={this.state.topic} />\n  </div>\n  <div>\n    <textarea name=\"content\" value={this.state.content}></textarea>\n  </div>\n  <button>Post</button>\n</form>\n```\n\nNo worries, we'll make use of `loading` in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component's state as the user is entering data. To make sure everything works fine, we'll also add an event handler for the form submission and output the data in `state`. Here's what our `handleChange()` and `createPost()` handlers looks like:\n\n```\nexport class CreatePost extends Component {\n  ...\n  handleChange(field, event) {\n    this.setState({\n      [field]: event.target.value\n    });\n  }\n\n  createPost(event) {\n    event.preventDefault();\n    console.log(this.state);\n  }\n  ...\n}\n```\n\nNotice how we're using `setState()` inside `handleChange()` to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:\n\n```\n<form onSubmit={e => createPost(e)}>\n  <div>\n    <label>Topic</label>\n    <input\n      type=\"text\"\n      name=\"topic\"\n      value={this.state.topic}\n      onChange={e => handleChange('topic', e)} />\n  </div>\n  <div>\n    <textarea\n      name=\"content\"\n      value={this.state.content}\n      onChange={e => handleChange('content', e})></textarea>\n  </div>\n  <button type=\"submit\">Post</button>\n</form>\n```\n\nSince we're using the `onSubmit()` handler of the form, it's also important that we either add a `type=\"submit\"` to our `button` or change the button to an `<input type=\"submit\">` element. Otherwise, the form won't emit a submit event.\n\nNice! With that in place, we should see the component's `state` in the console when submitting the form! The next challenge is to use `EmbarkJS` and its APIs to make our component talk to our Smart Contract instance.\n\n### Uploading data to IPFS\n\nRecall from our [first part](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts) of this tutorial that our `DReddit` Smart Contract comes with a `createPost()` method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we'll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.\n\nLuckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! `EmbarkJS.Storage.saveText()` takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in [part two](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost) of this tutorial, we'll use `async/await` to write asynchronous code in a synchronous fashion.\n\n```\nasync createPost(event) {\n  event.preventDefault();\n\n  this.setState({\n    loading: true\n  });\n\n  const ipfsHash = await EmbarkJS.Storage.saveText(JSON.stringify({\n    topic: this.state.topic,\n    content: this.state.content\n  }));\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWe use `JSON.stringify()` on an object that holds the `topic` and `content` of the post to be created. This is also the first time we put `loading` into action. Setting it to `true` before, and `false` after we've performed our operations lets us render a useful message as the user is waiting for updates.\n\n```\n<form onSubmit={e => createPost(e)}>\n  ...\n  {this.state.loading &&\n    <p>Posting...</p>\n  }\n</form>\n```\n\nObviously, we're not done yet though. All we do right now is uploading the post's data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its `createPost()` method. Let's do that!\n\n### Sending transactions to create posts\n\nTo send a transaction to our Smart Contract, we can again take advantage of EmbarkJS' APIs, similar to how we did it in the [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2). We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we'll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.\n\nOnce we have those things in place we can get a gas estimation for our transaction and send the data over. Here's how we retrieve our accounts, notice that `async/await` can be used here as well:\n\n```\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  ...\n}\n```\n\nNext up we'll import a `DReddit` Smart Contract instance from EmbarkJS and use it to get a gas estimation from `web3`. We can then use the estimation and one of our accounts to actually send the transaction:\n\n```\nimport DReddit from './artifacts/contracts/DReddit';\n...\n\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  const createPost = DReddit.methods.createPost(web3.utils.toHex(ipfsHash));\n  const estimate = await createPost.estimateGas();\n\n  await createPost.send({from: accounts[0], gas: estimate});\n  ...\n}\n```\n\nSweet, with that, our `createPost` method is done! We haven't built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running `embark run`. We should see a confirmation that looks something like this:\n\n```\nBlockchain> DReddit.createPost(\"0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e\") | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1\n```\n\n## Creating a Post component\n\nThe next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we'll look into rendering a list of posts dynamically, based on the data we're fetching.\n\nAgain, our application won't look particularly pretty, we'll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.\n\nHere's what such a component with a basic template could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class Post extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>Some Topic</h3>\n        <p>This is the content of a post</p>\n        <p><small><i>created at 2019-02-18 by 0x00000000000000</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThere are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the `Post` component that represents the entire post object and can then be displayed inside its `render()` method. However, for this tutorial we're going to choose a slightly different path. We'll make `Post` receive IPFS hash that's stored in the Smart Contract and have it resolve the data itself.\n\nLet's stay consistent with our naming and say the property we're expecting to be filled with data is called `description`, just like the one used inside the Smart Contract. We can then use `EmbarkJS.Storage.get()` with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside `Post`'s view, we'll parse it and use `setState()` accordingly.\n\nTo make sure all of that happens once the component is ready to do its work, we'll do all of that inside its `componentDidMount()` life cycle hook:\n\n```\nimport React, { Component } from 'react';\nimport EmbarkJS from '.artifacts/embarkjs';\n\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: ''\n    };\n  }\n\n  async componentDidMount() {\n    const ipfsHash = web3.utils.toAscii(this.props.description);\n    const data = await EmbarkJS.Storage.get(ipfsHash);\n    const { topic, content } = JSON.parse(data);\n\n    this.setState({ topic, content });\n  }\n  ...\n}\n```\n\nThere's one gotcha to keep in mind here: Calling `EmbarkJS.Storage.get()` or any `EmbarkJS` function on page load can fail, because the storage system might not be fully initialized yet. This wasn't a problem for the previous `EmbarkJS.Storage.uploadText()` because we called that function well after Embark had finished initializing\n\nTheoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its `onReady()` hook. `EmbarkJS.onReady()` takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let's wrap that `render()` call in our `App` component inside Embark's `onReady()` function.\n\n```\nEmbarkJS.onReady(() => {\n  render(<App />, document.getElementById('root'));\n});\n```\n\nThis also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.\n\nLet's also quickly add the `owner` and creation date. The `owner` is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it'll be formatted in a way the users can make sense of the data. We'll use the `dateformat` library for that and install it as a dependency like this:\n\n```\n$ npm install --save dateformat\n```\n\nOnce that is done, we can update our `Post` component's `render()` function to calculate a properly formatted date based on the `creationDate` that has been passed down through properties:\n\n```\n...\nimport dateformat from 'dateformat';\n\nexport class Post extends Component {\n  ...\n  render() {\n    const formattedDate = dateformat(\n      new Date(this.props.creationDate * 1000),\n      'yyyy-mm-dd HH:MM:ss'\n    );\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>{this.state.topic}</h3>\n        <p>{this.state.content}</p>\n        <p><small><i>created at {formattedDate} by {this.props.owner}</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nNotice that variables created inside `render()` can be interpolated as they are - there's no need to make them available on `props` or `state`. As a matter of fact, `props` are always considered read only in React.\n\nLet's try out our new `Post` component with some static data by adding it to our `App` component's view. Next up, we'll make this dynamic by fetching the posts from our Smart Contract.\n\n**Attention**: The hash used in this snippet might not be available in your local IPFS node, so you'll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.\n\n```\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <Post\n          description=\"0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250\"\n          creationDate=\"1550073772\"\n          owner=\"0x00000000000\"\n          />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n## Creating a List component\n\nBefore we can move on with building a component that renders a list of posts, we'll have to extend our Smart Contract with one more method. Since there's no canonical way to fetch array data from a Smart Contract, we'll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.\n\nLet's introduce a method `numPosts()` in our `DReddit` Smart Contract:\n\n```\nfunction numPosts() public view returns (uint) {\n  return posts.length;\n}\n```\n\n`posts.length` will increase as we're adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we'll leave that up to you!\n\nWith that in place, we can start building a new `List` component. The `List` component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:\n\n```\nimport React, { Component } from 'react';\n\nexport class List extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  render() {\n    return (<React.Fragment>\n      {this.state.posts.map(post => {\n        return (\n          <Post\n            key={post.id}\n            description={post.description}\n            creationDate={post.creationDate}\n            owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThe most interesting part here is probably the `render()` method, in which we iterate over all `state.posts` (which at the moment is empty) and then render a `Post` component for every iteration. Another thing to note is that every `Post` receives a `key`. This is required in React when creating views from loops. We've never introduced a `post.id` in this tutorial, but don't worry, we'll fix that in a moment.\n\nWe can already put that in our `App` component. It won't render anything as we haven't fetched any posts yet, but that's what we'll do next.\n\n\n```\nimport { List } from './List';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <List />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Fetching posts data\n\nLet's fill our new `List` component with life! As mentioned earlier, we'll use our Smart Contract's `numPosts()` method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the `List` component is ready, we'll use its `componentDidMount()` method for that:\n\n```\nexport class List extends Component {\n  ...\n  async componentDidMount() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    for (let i = 0; i < totalPosts; i++) {\n      const post = DReddit.methods.posts(i).call();\n      list.push(post);\n    }\n\n    list = await Promise.all(list);\n  }\n  ...\n}\n```\n\nNotice that in the above code we don't `await` the calls to every individual post. This is on purpose as we don't want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using `Promise.all().`\n\nLast but not least, we need to add an `id` property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post's index as `id`. Once that is done, we can use `setState()` to update our component's state and render the list:\n\n```\nasync componentDidMount() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    return post;\n  });\n\n  this.setState({ posts: list });\n}\n```\n\nThat's it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we'll have to reload the browser every time after adding a post. However, this we'll address now.\n\n### Reloading posts\n\nThere is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the `createPost` component tell the `List` component to reload its posts. However, there's no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of `CreatePost` and `List` (in our case `App`), and have it pass that logic down to places where its needed. This also means we'll be fetching the list inside `App` and pass down the pure data to `List`.\n\nIf this sounds overwhelming, no worries, it's more trivial than that! Let's start by introducing a `loadPosts()` function in our `App` component. Essentially we're moving everything from `List`'s `componentDidMount()` function into `App`:\n\n```\nexport class App extends Component {\n  ...\n  async loadPosts() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    if (totalPosts > 0) {\n      for (let i = 0; i < totalPosts; i++) {\n        const post = DReddit.methods.posts(i).call();\n        list.push(post);\n      }\n    }\n\n    list = await Promise.all(list);\n    list = list.map((post, index) => {\n      post.id = index;\n      return post;\n    });\n\n    list;\n\n    this.setState({ posts: list });\n  }\n}\n```\n\nTo make this work we also need to introduce a `state` with the dedicated `posts`. After that, we make sure `loadPosts()` is called when `App` is mounted:\n\n```\nexport class App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  async componentDidMount() {\n    await this.loadPosts();\n  }\n  ...\n}\n```\n\nLast but not least, all we have to do is to pass the `posts` down to `List` and `loadPosts()` to `CreatePost` as a callback handler if you will:\n\n```\nrender() {\n  return (\n    <React.Fragment>\n      <h1>DReddit</h1>\n      <CreatePost afterPostHandler={this.loadPosts.bind(this)}/>\n      <List posts={this.state.posts}/>\n    </React.Fragment>\n  )\n}\n```\n\nOnce that is done, we can consume `posts` and `afterPostHandler()` from `this.props` respectively. In `List`'s `render()` function we'll do (notice we don't rely on `this.state` anymore):\n\n```\nrender() {\n  return (<React.Fragment>\n    {this.props.posts.map(post => {\n      ...\n    })}\n    </React.Fragment>\n  )\n}\n```\n\nAnd in `CreatePost` we call `afterPostHandler()` after a post has been created:\n\n```\nasync createPost(event) {\n  ...\n  await createPost.send({from: accounts[0], gas: estimate});\n  await this.props.afterPostHandler();\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWonderful! The list now automatically reloads after creating posts, give it a try!\n\n## Add voting functionality\n\nThe final feature we'll be implementing is the up and down voting of posts. This is where we come back to our `Post` component that we've created earlier. In order to make this feature complete we'll have to:\n\n- Render the number of up and down votes per post\n- Add handlers for users to up and down vote\n- Determine if a user can vote on a post\n\n### Rendering number of votes\nLet's start with the first one, as it's the most trivial one. While the number of up and down votes is already attached to the data that we receive from our `DReddit` Smart Contract, it's not yet in the right format as it comes back as a string. Let's make sure we parse the up and down vote counts on posts by extending our `App`'s `loadPosts()` method like this:\n\n```\nasync loadPosts() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    post.upvotes = parseInt(post.upvotes, 10);\n    post.downvotes = parseInt(post.downvotes, 10);\n    return post;\n  });\n  ...\n}\n```\n\nOnce that is done we can pass each post's `upvotes` and `downvotes` to every `Post` component via its `props` inside our `List` component:\n\n```\nexport class List extends Component {\n  ...\n  render() {\n    return (<React.Fragment>\n      {this.props.posts.map(post => {\n        return (<Post\n          key={post.id}\n          description={post.description}\n          creationDate={post.creationDate}\n          upvotes={post.upvotes}\n          downvotes={post.downvotes}\n          owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nRendering the number of `upvotes` and `downvotes` is then really just a matter of interpolating them in `Post`'s `render()` function. We're just going to add them next to the buttons, but feel free to put them somewhere else:\n\n```\nexport class Post extends Component {\n  ...\n  render() {\n    ...\n    return (\n      <React.Fragment>\n        ...\n        {this.props.upvotes} <button>Upvote</button>\n        {this.props.downvotes} <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Implement up and down votes\n\nSimilar to when creating new posts, making the up and down vote buttons work requires sending transactions to our `DReddit` Smart Contract. So we'll do almost the same thing as in our `CreatePost` component, just that we're calling the Smart Contract's `vote()` method. If you recall, the `vote()` method takes a post id and the vote type, which is either `NONE`, `UPVOTE` or `DOWNVOTE` and are stored as `uint8`.\n\nIt makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we'll use a hash object instead:\n\n```\nconst BALLOT = {\n  NONE: 0,\n  UPVOTE: 1,\n  DOWNVOTE: 2\n}\n```\n\nWe don't actually have the post id available in our `Post` component yet. That's easily added in our `List` component, by now you should know how to do that!\n\nWe can then add click handlers to our up and down vote buttons and pass one of the `BALLOT` types to them (notice that we added `BALLOT.NONE` only for completeness-sake but don't actually use it in our code):\n\n```\n<button onClick={e => this.vote(BALLOT.UPVOTE)}>Upvote</button>\n<button onClick={e => this.vote(BALLOT.DOWNVOTE)}>Downvote</button>\n```\n\nThe next thing we need to do is sending that vote type along with the post id to our Smart Contract:\n\n```\nasync vote(ballot) {\n  const accounts = await web3.eth.getAccounts();\n  const vote = DReddit.methods.vote(this.props.id, ballot);\n  const estimate = await vote.estimateGas();\n\n  await vote.send({from: accounts[0], gas: estimate});\n}\n```\n\nObviously, we also want to update the view when a vote has been successfully sent. Right now we're reading a post's up and down votes from its `props` and render them accordingly. However, we want to update those values as votes are coming in. For that we'll change our code to only read the up and down votes from `props` once and store them in the component's state.\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes\n    };\n  }\n  ...\n}\n```\n\nWe also change the component's view to render the values from state instead of `props`:\n\n```\nrender() {\n  ...\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button ...>Upvote</button>\n      {this.state.downvotes} <button ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\n\nAfter that we can update the state with new votes using `setState()`, right after a vote has been sent:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({\n    upvotes: this.state.upvotes + (ballot == BALLOT.UPVOTE ? 1 : 0),\n    downvotes: this.state.downvotes + (ballot == BALLOT.DOWNVOTE ? 1 : 0)\n  });\n}\n```\n\n**That's it!** We can now up and down vote on posts...but only once! Yes, that's right. When we try to vote multiple times on the same post, we'll actually receive an error. That's because, if you remember, there's a restriction in our Smart Contract that makes sure users can not vote on posts that they've either already voted on, or created themselves.\n\nLet's make sure this is reflected in our application's UI and wrap up this tutorial!\n\n### Use `canVote()` to disable vote buttons\n\nWe'll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract's `canVote()` method. Another thing we need to consider is that we shouldn't allow a user to vote when a vote for the same post is already in flight but hasn't completed yet.\n\nLet's introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes,\n      canVote: true,\n      submitting: false\n    };\n  }\n  ...\n}\n```\n\nNext, we update our `Post` component's `render()` function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:\n\n```\nrender() {\n  ...\n  const disabled = this.state.submitting || !this.state.canVote;\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button disabled={disabled} ...>Upvote</button>\n      {this.state.downvotes} <button disabled={disabled} ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\nLast but not least, we have to make sure the state properties are updated accordingly. We'll call our Smart Contract's `canVote()` method when a post is initialized:\n\n```\nexport class Post extends Component {\n  ...\n  async componentDidMount() {\n    ...\n    const canVote = await DReddit.methods.canVote(this.props.id).call();\n    this.setState({ topic, content, canVote });\n  }\n  ...\n}\n```\n\nAnd when a vote is being made, we set `submitting` to `true` right before we send a transaction and set it back to `false` again when the transaction is done. At this point, we also know that a vote has been made on this post, so `canVote` can be set to `false` at the same time:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({ submitting: true });\n  await vote.send({from: accounts[0], gas: estimate + 1000});\n\n  this.setState({\n    ...\n    canVote: false,\n    submitting: false\n  });\n}\n```\n\n**And we're done!**\n\n## Wrapping it up\n\nCongratulations! You've completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:\n\n- Sort the posts in reversed chronological order so that the latest post is always on top\n- Rely on Smart Contracts Events to reload list\n- Introduce routing so there can be different views for creating and viewing posts\n- Use CSS to make the application look nice\n\nWe hope you've learned that it's not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.\n\n**We've recorded every single step of this tutorial [in this repository](https://github.com/embarklabs/dreddit-tutorial)**, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to [follow us on Twitter](https://twitter.com/EmbarkProject) as well for updates!\n\n","slug":"building-a-decentralized-reddit-with-embark-part-3","published":1,"date":"2019-02-18T05:00:00.000Z","updated":"2020-01-17T19:05:36.394Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3uv002v7heg23u54ek5","content":"<p>Hopefully you’ve read <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first</a> and <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\">second part</a> of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we’ll be focussing on building the front-end for our application and continue where we’ve left off.</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n</ul>\n<p>We’ll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!</p>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<h2 id=\"Rendering-our-first-component\"><a href=\"#Rendering-our-first-component\" class=\"headerlink\" title=\"Rendering our first component\"></a>Rendering our first component</h2><p>Alright, before we jump straight into building components that will talk to our Smart Contract instance, let’s first actually render a simple text on the screen just to make sure our setup is working correctly.</p>\n<p>For that, what we’ll do is adding React as a dependency to our project. In fact, we’ll be relying on two packages - <code>react</code> and <code>react-dom</code>. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.</p>\n<p>Let’s add the following <code>dependencies</code> section to our projects <code>package.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;dependencies&quot;: &#123;</span><br><span class=\"line\">  &quot;react&quot;: &quot;^16.4.2&quot;,</span><br><span class=\"line\">  &quot;react-dom&quot;: &quot;^16.4.2&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n\n<p>Now we can go ahead and actually make use of React. As Embark is framework agnostic, we won’t be focussing too much on details specific to React, just the least amount that is needed to make our app work.</p>\n<p>Creating components in React is pretty straight forward. All we need to do is creating a class that extends React’s <code>Component</code> type and add a <code>render()</code> method that will render the component’s view.</p>\n<p>Let’s create a folder for all of our components inside our projects:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir app&#x2F;js&#x2F;components</span><br></pre></td></tr></table></figure>\n\n<p>Next, we create a file for our root component. We call it simply <code>App</code> and use the same file name:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ touch app&#x2F;js&#x2F;components&#x2F;App.js</span><br></pre></td></tr></table></figure>\n\n<p>Alright, as mentioned earlier, we really just want to render some text on the screen for starters. Here’s what that could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This is probably self explanatory, but all we’re doing here is importing <code>React</code> and its <code>Component</code> type and create an <code>App</code> class that extends <code>Component</code>. The <code>render()</code> method will be used by React to render the component’s view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We’ll make use of that later!</p>\n<p>Okay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to <code>app/js/index.js</code> and add the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React from &#39;react&#39;;</span><br><span class=\"line\">import &#123; render &#125; from &#39;react-dom&#39;;</span><br><span class=\"line\">import &#123; App &#125; from &#39;.&#x2F;components&#x2F;App&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br></pre></td></tr></table></figure>\n\n<p>We need to import <code>React</code> again as it has to be available in this script’s scope. We also import a <code>render</code> function from <code>react-dom</code>, which is used to render our root component (<code>App</code>) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id <code>root</code>.</p>\n<p>Let’s set this up really quick. In <code>app/index.html</code> add a new element with a <code>root</code> id:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">\t&lt;div id&#x3D;&quot;root&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class=\"line\">\t&lt;script src&#x3D;&quot;js&#x2F;app.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class=\"line\">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’ve also moved the <code>script</code> tag inside the body tag, after the element with the <code>root</code> id. This is just one way to work around the fact that the element we’re referencing inside our <code>render()</code> method is actually available in the document at the time the script is executed.</p>\n<p>That should do it! Let’s spin up Embark, we should then see our component rendered on the screen:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Building-a-CreatePost-component\"><a href=\"#Building-a-CreatePost-component\" class=\"headerlink\" title=\"Building a CreatePost component\"></a>Building a <code>CreatePost</code> component</h2><p>Alright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to <code>App</code>, we’ll introduce a new component <code>createPost</code> that comes with a <code>render()</code> method to display a simple form for entering data. We’ll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.</p>\n<p>Creating a simple form is very straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;form&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">          &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; &#x2F;&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;textarea name&#x3D;&quot;content&quot;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;form&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To actually render this component on screen, we need to make it part of our <code>App</code> component. Or, to be more specific, have the <code>App</code> component render our <code>CreatePost</code> component. For now we can simply add it to <code>App</code>‘s render function like this;</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; CreatePost &#125; from &#39;.&#x2F;CreatePost&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&amp;&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>React doesn’t allow for multiple root elements in a single component’s view, so we have to take advantage of <code>React.Fragment</code>. Obviously, there’s not too much going on here apart from us rendering a static form. Also notice that we don’t spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!</p>\n<p>Let’s make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called <code>state</code> that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a <code>setState()</code> method if needed.</p>\n<p>Let’s introduce <code>state</code> in our component by adding a constructor and initializing it accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      loading: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next we bind that state to our form fields:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; value&#x3D;&#123;this.state.topic&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea name&#x3D;&quot;content&quot; value&#x3D;&#123;this.state.content&#125;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>No worries, we’ll make use of <code>loading</code> in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component’s state as the user is entering data. To make sure everything works fine, we’ll also add an event handler for the form submission and output the data in <code>state</code>. Here’s what our <code>handleChange()</code> and <code>createPost()</code> handlers looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  handleChange(field, event) &#123;</span><br><span class=\"line\">    this.setState(&#123;</span><br><span class=\"line\">      [field]: event.target.value</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  createPost(event) &#123;</span><br><span class=\"line\">    event.preventDefault();</span><br><span class=\"line\">    console.log(this.state);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice how we’re using <code>setState()</code> inside <code>handleChange()</code> to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input</span><br><span class=\"line\">      type&#x3D;&quot;text&quot;</span><br><span class=\"line\">      name&#x3D;&quot;topic&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.topic&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;topic&#39;, e)&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea</span><br><span class=\"line\">      name&#x3D;&quot;content&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.content&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;content&#39;, e&#125;)&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button type&#x3D;&quot;submit&quot;&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Since we’re using the <code>onSubmit()</code> handler of the form, it’s also important that we either add a <code>type=&quot;submit&quot;</code> to our <code>button</code> or change the button to an <code>&lt;input type=&quot;submit&quot;&gt;</code> element. Otherwise, the form won’t emit a submit event.</p>\n<p>Nice! With that in place, we should see the component’s <code>state</code> in the console when submitting the form! The next challenge is to use <code>EmbarkJS</code> and its APIs to make our component talk to our Smart Contract instance.</p>\n<h3 id=\"Uploading-data-to-IPFS\"><a href=\"#Uploading-data-to-IPFS\" class=\"headerlink\" title=\"Uploading data to IPFS\"></a>Uploading data to IPFS</h3><p>Recall from our <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts\">first part</a> of this tutorial that our <code>DReddit</code> Smart Contract comes with a <code>createPost()</code> method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we’ll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.</p>\n<p>Luckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! <code>EmbarkJS.Storage.saveText()</code> takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost\">part two</a> of this tutorial, we’ll use <code>async/await</code> to write asynchronous code in a synchronous fashion.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  event.preventDefault();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    loading: true</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  const ipfsHash &#x3D; await EmbarkJS.Storage.saveText(JSON.stringify(&#123;</span><br><span class=\"line\">    topic: this.state.topic,</span><br><span class=\"line\">    content: this.state.content</span><br><span class=\"line\">  &#125;));</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We use <code>JSON.stringify()</code> on an object that holds the <code>topic</code> and <code>content</code> of the post to be created. This is also the first time we put <code>loading</code> into action. Setting it to <code>true</code> before, and <code>false</code> after we’ve performed our operations lets us render a useful message as the user is waiting for updates.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#123;this.state.loading &amp;&amp;</span><br><span class=\"line\">    &lt;p&gt;Posting...&lt;&#x2F;p&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we’re not done yet though. All we do right now is uploading the post’s data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its <code>createPost()</code> method. Let’s do that!</p>\n<h3 id=\"Sending-transactions-to-create-posts\"><a href=\"#Sending-transactions-to-create-posts\" class=\"headerlink\" title=\"Sending transactions to create posts\"></a>Sending transactions to create posts</h3><p>To send a transaction to our Smart Contract, we can again take advantage of EmbarkJS’ APIs, similar to how we did it in the <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2\">second part</a>. We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we’ll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.</p>\n<p>Once we have those things in place we can get a gas estimation for our transaction and send the data over. Here’s how we retrieve our accounts, notice that <code>async/await</code> can be used here as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next up we’ll import a <code>DReddit</code> Smart Contract instance from EmbarkJS and use it to get a gas estimation from <code>web3</code>. We can then use the estimation and one of our accounts to actually send the transaction:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import DReddit from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;DReddit&#39;;</span><br><span class=\"line\">...</span><br><span class=\"line\"></span><br><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const createPost &#x3D; DReddit.methods.createPost(web3.utils.toHex(ipfsHash));</span><br><span class=\"line\">  const estimate &#x3D; await createPost.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Sweet, with that, our <code>createPost</code> method is done! We haven’t built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running <code>embark run</code>. We should see a confirmation that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Blockchain&gt; DReddit.createPost(&quot;0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e&quot;) | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-Post-component\"><a href=\"#Creating-a-Post-component\" class=\"headerlink\" title=\"Creating a Post component\"></a>Creating a Post component</h2><p>The next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we’ll look into rendering a list of posts dynamically, based on the data we’re fetching.</p>\n<p>Again, our application won’t look particularly pretty, we’ll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.</p>\n<p>Here’s what such a component with a basic template could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;Some Topic&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;This is the content of a post&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at 2019-02-18 by 0x00000000000000&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the <code>Post</code> component that represents the entire post object and can then be displayed inside its <code>render()</code> method. However, for this tutorial we’re going to choose a slightly different path. We’ll make <code>Post</code> receive IPFS hash that’s stored in the Smart Contract and have it resolve the data itself.</p>\n<p>Let’s stay consistent with our naming and say the property we’re expecting to be filled with data is called <code>description</code>, just like the one used inside the Smart Contract. We can then use <code>EmbarkJS.Storage.get()</code> with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside <code>Post</code>‘s view, we’ll parse it and use <code>setState()</code> accordingly.</p>\n<p>To make sure all of that happens once the component is ready to do its work, we’ll do all of that inside its <code>componentDidMount()</code> life cycle hook:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\">import EmbarkJS from &#39;.artifacts&#x2F;embarkjs&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const ipfsHash &#x3D; web3.utils.toAscii(this.props.description);</span><br><span class=\"line\">    const data &#x3D; await EmbarkJS.Storage.get(ipfsHash);</span><br><span class=\"line\">    const &#123; topic, content &#125; &#x3D; JSON.parse(data);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; topic, content &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind here: Calling <code>EmbarkJS.Storage.get()</code> or any <code>EmbarkJS</code> function on page load can fail, because the storage system might not be fully initialized yet. This wasn’t a problem for the previous <code>EmbarkJS.Storage.uploadText()</code> because we called that function well after Embark had finished initializing</p>\n<p>Theoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its <code>onReady()</code> hook. <code>EmbarkJS.onReady()</code> takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let’s wrap that <code>render()</code> call in our <code>App</code> component inside Embark’s <code>onReady()</code> function.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.onReady(() &#x3D;&gt; &#123;</span><br><span class=\"line\">  render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.</p>\n<p>Let’s also quickly add the <code>owner</code> and creation date. The <code>owner</code> is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it’ll be formatted in a way the users can make sense of the data. We’ll use the <code>dateformat</code> library for that and install it as a dependency like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install --save dateformat</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can update our <code>Post</code> component’s <code>render()</code> function to calculate a properly formatted date based on the <code>creationDate</code> that has been passed down through properties:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">import dateformat from &#39;dateformat&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    const formattedDate &#x3D; dateformat(</span><br><span class=\"line\">      new Date(this.props.creationDate * 1000),</span><br><span class=\"line\">      &#39;yyyy-mm-dd HH:MM:ss&#39;</span><br><span class=\"line\">    );</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;&#123;this.state.topic&#125;&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;&#123;this.state.content&#125;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at &#123;formattedDate&#125; by &#123;this.props.owner&#125;&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that variables created inside <code>render()</code> can be interpolated as they are - there’s no need to make them available on <code>props</code> or <code>state</code>. As a matter of fact, <code>props</code> are always considered read only in React.</p>\n<p>Let’s try out our new <code>Post</code> component with some static data by adding it to our <code>App</code> component’s view. Next up, we’ll make this dynamic by fetching the posts from our Smart Contract.</p>\n<p><strong>Attention</strong>: The hash used in this snippet might not be available in your local IPFS node, so you’ll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;Post</span><br><span class=\"line\">          description&#x3D;&quot;0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250&quot;</span><br><span class=\"line\">          creationDate&#x3D;&quot;1550073772&quot;</span><br><span class=\"line\">          owner&#x3D;&quot;0x00000000000&quot;</span><br><span class=\"line\">          &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-List-component\"><a href=\"#Creating-a-List-component\" class=\"headerlink\" title=\"Creating a List component\"></a>Creating a List component</h2><p>Before we can move on with building a component that renders a list of posts, we’ll have to extend our Smart Contract with one more method. Since there’s no canonical way to fetch array data from a Smart Contract, we’ll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.</p>\n<p>Let’s introduce a method <code>numPosts()</code> in our <code>DReddit</code> Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function numPosts() public view returns (uint) &#123;</span><br><span class=\"line\">  return posts.length;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>posts.length</code> will increase as we’re adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we’ll leave that up to you!</p>\n<p>With that in place, we can start building a new <code>List</code> component. The <code>List</code> component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.state.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (</span><br><span class=\"line\">          &lt;Post</span><br><span class=\"line\">            key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">            description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">            creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">            owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The most interesting part here is probably the <code>render()</code> method, in which we iterate over all <code>state.posts</code> (which at the moment is empty) and then render a <code>Post</code> component for every iteration. Another thing to note is that every <code>Post</code> receives a <code>key</code>. This is required in React when creating views from loops. We’ve never introduced a <code>post.id</code> in this tutorial, but don’t worry, we’ll fix that in a moment.</p>\n<p>We can already put that in our <code>App</code> component. It won’t render anything as we haven’t fetched any posts yet, but that’s what we’ll do next.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; List &#125; from &#39;.&#x2F;List&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;List &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Fetching-posts-data\"><a href=\"#Fetching-posts-data\" class=\"headerlink\" title=\"Fetching posts data\"></a>Fetching posts data</h3><p>Let’s fill our new <code>List</code> component with life! As mentioned earlier, we’ll use our Smart Contract’s <code>numPosts()</code> method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the <code>List</code> component is ready, we’ll use its <code>componentDidMount()</code> method for that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">      const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">      list.push(post);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that in the above code we don’t <code>await</code> the calls to every individual post. This is on purpose as we don’t want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using <code>Promise.all().</code></p>\n<p>Last but not least, we need to add an <code>id</code> property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post’s index as <code>id</code>. Once that is done, we can use <code>setState()</code> to update our component’s state and render the list:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async componentDidMount() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>That’s it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we’ll have to reload the browser every time after adding a post. However, this we’ll address now.</p>\n<h3 id=\"Reloading-posts\"><a href=\"#Reloading-posts\" class=\"headerlink\" title=\"Reloading posts\"></a>Reloading posts</h3><p>There is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the <code>createPost</code> component tell the <code>List</code> component to reload its posts. However, there’s no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of <code>CreatePost</code> and <code>List</code> (in our case <code>App</code>), and have it pass that logic down to places where its needed. This also means we’ll be fetching the list inside <code>App</code> and pass down the pure data to <code>List</code>.</p>\n<p>If this sounds overwhelming, no worries, it’s more trivial than that! Let’s start by introducing a <code>loadPosts()</code> function in our <code>App</code> component. Essentially we’re moving everything from <code>List</code>‘s <code>componentDidMount()</code> function into <code>App</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async loadPosts() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    if (totalPosts &gt; 0) &#123;</span><br><span class=\"line\">      for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">        const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">        list.push(post);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">    list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">      post.id &#x3D; index;</span><br><span class=\"line\">      return post;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    list;</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To make this work we also need to introduce a <code>state</code> with the dedicated <code>posts</code>. After that, we make sure <code>loadPosts()</code> is called when <code>App</code> is mounted:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    await this.loadPosts();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, all we have to do is to pass the <code>posts</code> down to <code>List</code> and <code>loadPosts()</code> to <code>CreatePost</code> as a callback handler if you will:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">      &lt;CreatePost afterPostHandler&#x3D;&#123;this.loadPosts.bind(this)&#125;&#x2F;&gt;</span><br><span class=\"line\">      &lt;List posts&#x3D;&#123;this.state.posts&#125;&#x2F;&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can consume <code>posts</code> and <code>afterPostHandler()</code> from <code>this.props</code> respectively. In <code>List</code>‘s <code>render()</code> function we’ll do (notice we don’t rely on <code>this.state</code> anymore):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (&lt;React.Fragment&gt;</span><br><span class=\"line\">    &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;)&#125;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And in <code>CreatePost</code> we call <code>afterPostHandler()</code> after a post has been created:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  await this.props.afterPostHandler();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful! The list now automatically reloads after creating posts, give it a try!</p>\n<h2 id=\"Add-voting-functionality\"><a href=\"#Add-voting-functionality\" class=\"headerlink\" title=\"Add voting functionality\"></a>Add voting functionality</h2><p>The final feature we’ll be implementing is the up and down voting of posts. This is where we come back to our <code>Post</code> component that we’ve created earlier. In order to make this feature complete we’ll have to:</p>\n<ul>\n<li>Render the number of up and down votes per post</li>\n<li>Add handlers for users to up and down vote</li>\n<li>Determine if a user can vote on a post</li>\n</ul>\n<h3 id=\"Rendering-number-of-votes\"><a href=\"#Rendering-number-of-votes\" class=\"headerlink\" title=\"Rendering number of votes\"></a>Rendering number of votes</h3><p>Let’s start with the first one, as it’s the most trivial one. While the number of up and down votes is already attached to the data that we receive from our <code>DReddit</code> Smart Contract, it’s not yet in the right format as it comes back as a string. Let’s make sure we parse the up and down vote counts on posts by extending our <code>App</code>‘s <code>loadPosts()</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async loadPosts() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    post.upvotes &#x3D; parseInt(post.upvotes, 10);</span><br><span class=\"line\">    post.downvotes &#x3D; parseInt(post.downvotes, 10);</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can pass each post’s <code>upvotes</code> and <code>downvotes</code> to every <code>Post</code> component via its <code>props</code> inside our <code>List</code> component:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (&lt;Post</span><br><span class=\"line\">          key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">          description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">          creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">          upvotes&#x3D;&#123;post.upvotes&#125;</span><br><span class=\"line\">          downvotes&#x3D;&#123;post.downvotes&#125;</span><br><span class=\"line\">          owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Rendering the number of <code>upvotes</code> and <code>downvotes</code> is then really just a matter of interpolating them in <code>Post</code>‘s <code>render()</code> function. We’re just going to add them next to the buttons, but feel free to put them somewhere else:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">        &#123;this.props.upvotes&#125; &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &#123;this.props.downvotes&#125; &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Implement-up-and-down-votes\"><a href=\"#Implement-up-and-down-votes\" class=\"headerlink\" title=\"Implement up and down votes\"></a>Implement up and down votes</h3><p>Similar to when creating new posts, making the up and down vote buttons work requires sending transactions to our <code>DReddit</code> Smart Contract. So we’ll do almost the same thing as in our <code>CreatePost</code> component, just that we’re calling the Smart Contract’s <code>vote()</code> method. If you recall, the <code>vote()</code> method takes a post id and the vote type, which is either <code>NONE</code>, <code>UPVOTE</code> or <code>DOWNVOTE</code> and are stored as <code>uint8</code>.</p>\n<p>It makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we’ll use a hash object instead:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const BALLOT &#x3D; &#123;</span><br><span class=\"line\">  NONE: 0,</span><br><span class=\"line\">  UPVOTE: 1,</span><br><span class=\"line\">  DOWNVOTE: 2</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We don’t actually have the post id available in our <code>Post</code> component yet. That’s easily added in our <code>List</code> component, by now you should know how to do that!</p>\n<p>We can then add click handlers to our up and down vote buttons and pass one of the <code>BALLOT</code> types to them (notice that we added <code>BALLOT.NONE</code> only for completeness-sake but don’t actually use it in our code):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.UPVOTE)&#125;&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.DOWNVOTE)&#125;&gt;Downvote&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The next thing we need to do is sending that vote type along with the post id to our Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const vote &#x3D; DReddit.methods.vote(this.props.id, ballot);</span><br><span class=\"line\">  const estimate &#x3D; await vote.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we also want to update the view when a vote has been successfully sent. Right now we’re reading a post’s up and down votes from its <code>props</code> and render them accordingly. However, we want to update those values as votes are coming in. For that we’ll change our code to only read the up and down votes from <code>props</code> once and store them in the component’s state.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We also change the component’s view to render the values from state instead of <code>props</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<p>After that we can update the state with new votes using <code>setState()</code>, right after a vote has been sent:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    upvotes: this.state.upvotes + (ballot &#x3D;&#x3D; BALLOT.UPVOTE ? 1 : 0),</span><br><span class=\"line\">    downvotes: this.state.downvotes + (ballot &#x3D;&#x3D; BALLOT.DOWNVOTE ? 1 : 0)</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>That’s it!</strong> We can now up and down vote on posts…but only once! Yes, that’s right. When we try to vote multiple times on the same post, we’ll actually receive an error. That’s because, if you remember, there’s a restriction in our Smart Contract that makes sure users can not vote on posts that they’ve either already voted on, or created themselves.</p>\n<p>Let’s make sure this is reflected in our application’s UI and wrap up this tutorial!</p>\n<h3 id=\"Use-canVote-to-disable-vote-buttons\"><a href=\"#Use-canVote-to-disable-vote-buttons\" class=\"headerlink\" title=\"Use canVote() to disable vote buttons\"></a>Use <code>canVote()</code> to disable vote buttons</h3><p>We’ll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract’s <code>canVote()</code> method. Another thing we need to consider is that we shouldn’t allow a user to vote when a vote for the same post is already in flight but hasn’t completed yet.</p>\n<p>Let’s introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes,</span><br><span class=\"line\">      canVote: true,</span><br><span class=\"line\">      submitting: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, we update our <code>Post</code> component’s <code>render()</code> function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const disabled &#x3D; this.state.submitting || !this.state.canVote;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, we have to make sure the state properties are updated accordingly. We’ll call our Smart Contract’s <code>canVote()</code> method when a post is initialized:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    const canVote &#x3D; await DReddit.methods.canVote(this.props.id).call();</span><br><span class=\"line\">    this.setState(&#123; topic, content, canVote &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And when a vote is being made, we set <code>submitting</code> to <code>true</code> right before we send a transaction and set it back to <code>false</code> again when the transaction is done. At this point, we also know that a vote has been made on this post, so <code>canVote</code> can be set to <code>false</code> at the same time:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123; submitting: true &#125;);</span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate + 1000&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    canVote: false,</span><br><span class=\"line\">    submitting: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>And we’re done!</strong></p>\n<h2 id=\"Wrapping-it-up\"><a href=\"#Wrapping-it-up\" class=\"headerlink\" title=\"Wrapping it up\"></a>Wrapping it up</h2><p>Congratulations! You’ve completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:</p>\n<ul>\n<li>Sort the posts in reversed chronological order so that the latest post is always on top</li>\n<li>Rely on Smart Contracts Events to reload list</li>\n<li>Introduce routing so there can be different views for creating and viewing posts</li>\n<li>Use CSS to make the application look nice</li>\n</ul>\n<p>We hope you’ve learned that it’s not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.</p>\n<p><strong>We’ve recorded every single step of this tutorial <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">in this repository</a></strong>, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">follow us on Twitter</a> as well for updates!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Hopefully you’ve read <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first</a> and <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\">second part</a> of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we’ll be focussing on building the front-end for our application and continue where we’ve left off.</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n</ul>\n<p>We’ll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!</p>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<h2 id=\"Rendering-our-first-component\"><a href=\"#Rendering-our-first-component\" class=\"headerlink\" title=\"Rendering our first component\"></a>Rendering our first component</h2><p>Alright, before we jump straight into building components that will talk to our Smart Contract instance, let’s first actually render a simple text on the screen just to make sure our setup is working correctly.</p>\n<p>For that, what we’ll do is adding React as a dependency to our project. In fact, we’ll be relying on two packages - <code>react</code> and <code>react-dom</code>. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.</p>\n<p>Let’s add the following <code>dependencies</code> section to our projects <code>package.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;dependencies&quot;: &#123;</span><br><span class=\"line\">  &quot;react&quot;: &quot;^16.4.2&quot;,</span><br><span class=\"line\">  &quot;react-dom&quot;: &quot;^16.4.2&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n\n<p>Now we can go ahead and actually make use of React. As Embark is framework agnostic, we won’t be focussing too much on details specific to React, just the least amount that is needed to make our app work.</p>\n<p>Creating components in React is pretty straight forward. All we need to do is creating a class that extends React’s <code>Component</code> type and add a <code>render()</code> method that will render the component’s view.</p>\n<p>Let’s create a folder for all of our components inside our projects:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir app&#x2F;js&#x2F;components</span><br></pre></td></tr></table></figure>\n\n<p>Next, we create a file for our root component. We call it simply <code>App</code> and use the same file name:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ touch app&#x2F;js&#x2F;components&#x2F;App.js</span><br></pre></td></tr></table></figure>\n\n<p>Alright, as mentioned earlier, we really just want to render some text on the screen for starters. Here’s what that could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This is probably self explanatory, but all we’re doing here is importing <code>React</code> and its <code>Component</code> type and create an <code>App</code> class that extends <code>Component</code>. The <code>render()</code> method will be used by React to render the component’s view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We’ll make use of that later!</p>\n<p>Okay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to <code>app/js/index.js</code> and add the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React from &#39;react&#39;;</span><br><span class=\"line\">import &#123; render &#125; from &#39;react-dom&#39;;</span><br><span class=\"line\">import &#123; App &#125; from &#39;.&#x2F;components&#x2F;App&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br></pre></td></tr></table></figure>\n\n<p>We need to import <code>React</code> again as it has to be available in this script’s scope. We also import a <code>render</code> function from <code>react-dom</code>, which is used to render our root component (<code>App</code>) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id <code>root</code>.</p>\n<p>Let’s set this up really quick. In <code>app/index.html</code> add a new element with a <code>root</code> id:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">\t&lt;div id&#x3D;&quot;root&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class=\"line\">\t&lt;script src&#x3D;&quot;js&#x2F;app.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class=\"line\">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’ve also moved the <code>script</code> tag inside the body tag, after the element with the <code>root</code> id. This is just one way to work around the fact that the element we’re referencing inside our <code>render()</code> method is actually available in the document at the time the script is executed.</p>\n<p>That should do it! Let’s spin up Embark, we should then see our component rendered on the screen:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Building-a-CreatePost-component\"><a href=\"#Building-a-CreatePost-component\" class=\"headerlink\" title=\"Building a CreatePost component\"></a>Building a <code>CreatePost</code> component</h2><p>Alright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to <code>App</code>, we’ll introduce a new component <code>createPost</code> that comes with a <code>render()</code> method to display a simple form for entering data. We’ll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.</p>\n<p>Creating a simple form is very straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;form&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">          &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; &#x2F;&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;textarea name&#x3D;&quot;content&quot;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;form&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To actually render this component on screen, we need to make it part of our <code>App</code> component. Or, to be more specific, have the <code>App</code> component render our <code>CreatePost</code> component. For now we can simply add it to <code>App</code>‘s render function like this;</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; CreatePost &#125; from &#39;.&#x2F;CreatePost&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&amp;&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>React doesn’t allow for multiple root elements in a single component’s view, so we have to take advantage of <code>React.Fragment</code>. Obviously, there’s not too much going on here apart from us rendering a static form. Also notice that we don’t spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!</p>\n<p>Let’s make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called <code>state</code> that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a <code>setState()</code> method if needed.</p>\n<p>Let’s introduce <code>state</code> in our component by adding a constructor and initializing it accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      loading: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next we bind that state to our form fields:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; value&#x3D;&#123;this.state.topic&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea name&#x3D;&quot;content&quot; value&#x3D;&#123;this.state.content&#125;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>No worries, we’ll make use of <code>loading</code> in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component’s state as the user is entering data. To make sure everything works fine, we’ll also add an event handler for the form submission and output the data in <code>state</code>. Here’s what our <code>handleChange()</code> and <code>createPost()</code> handlers looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  handleChange(field, event) &#123;</span><br><span class=\"line\">    this.setState(&#123;</span><br><span class=\"line\">      [field]: event.target.value</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  createPost(event) &#123;</span><br><span class=\"line\">    event.preventDefault();</span><br><span class=\"line\">    console.log(this.state);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice how we’re using <code>setState()</code> inside <code>handleChange()</code> to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input</span><br><span class=\"line\">      type&#x3D;&quot;text&quot;</span><br><span class=\"line\">      name&#x3D;&quot;topic&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.topic&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;topic&#39;, e)&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea</span><br><span class=\"line\">      name&#x3D;&quot;content&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.content&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;content&#39;, e&#125;)&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button type&#x3D;&quot;submit&quot;&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Since we’re using the <code>onSubmit()</code> handler of the form, it’s also important that we either add a <code>type=&quot;submit&quot;</code> to our <code>button</code> or change the button to an <code>&lt;input type=&quot;submit&quot;&gt;</code> element. Otherwise, the form won’t emit a submit event.</p>\n<p>Nice! With that in place, we should see the component’s <code>state</code> in the console when submitting the form! The next challenge is to use <code>EmbarkJS</code> and its APIs to make our component talk to our Smart Contract instance.</p>\n<h3 id=\"Uploading-data-to-IPFS\"><a href=\"#Uploading-data-to-IPFS\" class=\"headerlink\" title=\"Uploading data to IPFS\"></a>Uploading data to IPFS</h3><p>Recall from our <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts\">first part</a> of this tutorial that our <code>DReddit</code> Smart Contract comes with a <code>createPost()</code> method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we’ll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.</p>\n<p>Luckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! <code>EmbarkJS.Storage.saveText()</code> takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost\">part two</a> of this tutorial, we’ll use <code>async/await</code> to write asynchronous code in a synchronous fashion.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  event.preventDefault();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    loading: true</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  const ipfsHash &#x3D; await EmbarkJS.Storage.saveText(JSON.stringify(&#123;</span><br><span class=\"line\">    topic: this.state.topic,</span><br><span class=\"line\">    content: this.state.content</span><br><span class=\"line\">  &#125;));</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We use <code>JSON.stringify()</code> on an object that holds the <code>topic</code> and <code>content</code> of the post to be created. This is also the first time we put <code>loading</code> into action. Setting it to <code>true</code> before, and <code>false</code> after we’ve performed our operations lets us render a useful message as the user is waiting for updates.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#123;this.state.loading &amp;&amp;</span><br><span class=\"line\">    &lt;p&gt;Posting...&lt;&#x2F;p&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we’re not done yet though. All we do right now is uploading the post’s data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its <code>createPost()</code> method. Let’s do that!</p>\n<h3 id=\"Sending-transactions-to-create-posts\"><a href=\"#Sending-transactions-to-create-posts\" class=\"headerlink\" title=\"Sending transactions to create posts\"></a>Sending transactions to create posts</h3><p>To send a transaction to our Smart Contract, we can again take advantage of EmbarkJS’ APIs, similar to how we did it in the <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2\">second part</a>. We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we’ll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.</p>\n<p>Once we have those things in place we can get a gas estimation for our transaction and send the data over. Here’s how we retrieve our accounts, notice that <code>async/await</code> can be used here as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next up we’ll import a <code>DReddit</code> Smart Contract instance from EmbarkJS and use it to get a gas estimation from <code>web3</code>. We can then use the estimation and one of our accounts to actually send the transaction:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import DReddit from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;DReddit&#39;;</span><br><span class=\"line\">...</span><br><span class=\"line\"></span><br><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const createPost &#x3D; DReddit.methods.createPost(web3.utils.toHex(ipfsHash));</span><br><span class=\"line\">  const estimate &#x3D; await createPost.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Sweet, with that, our <code>createPost</code> method is done! We haven’t built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running <code>embark run</code>. We should see a confirmation that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Blockchain&gt; DReddit.createPost(&quot;0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e&quot;) | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-Post-component\"><a href=\"#Creating-a-Post-component\" class=\"headerlink\" title=\"Creating a Post component\"></a>Creating a Post component</h2><p>The next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we’ll look into rendering a list of posts dynamically, based on the data we’re fetching.</p>\n<p>Again, our application won’t look particularly pretty, we’ll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.</p>\n<p>Here’s what such a component with a basic template could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;Some Topic&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;This is the content of a post&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at 2019-02-18 by 0x00000000000000&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the <code>Post</code> component that represents the entire post object and can then be displayed inside its <code>render()</code> method. However, for this tutorial we’re going to choose a slightly different path. We’ll make <code>Post</code> receive IPFS hash that’s stored in the Smart Contract and have it resolve the data itself.</p>\n<p>Let’s stay consistent with our naming and say the property we’re expecting to be filled with data is called <code>description</code>, just like the one used inside the Smart Contract. We can then use <code>EmbarkJS.Storage.get()</code> with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside <code>Post</code>‘s view, we’ll parse it and use <code>setState()</code> accordingly.</p>\n<p>To make sure all of that happens once the component is ready to do its work, we’ll do all of that inside its <code>componentDidMount()</code> life cycle hook:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\">import EmbarkJS from &#39;.artifacts&#x2F;embarkjs&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const ipfsHash &#x3D; web3.utils.toAscii(this.props.description);</span><br><span class=\"line\">    const data &#x3D; await EmbarkJS.Storage.get(ipfsHash);</span><br><span class=\"line\">    const &#123; topic, content &#125; &#x3D; JSON.parse(data);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; topic, content &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind here: Calling <code>EmbarkJS.Storage.get()</code> or any <code>EmbarkJS</code> function on page load can fail, because the storage system might not be fully initialized yet. This wasn’t a problem for the previous <code>EmbarkJS.Storage.uploadText()</code> because we called that function well after Embark had finished initializing</p>\n<p>Theoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its <code>onReady()</code> hook. <code>EmbarkJS.onReady()</code> takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let’s wrap that <code>render()</code> call in our <code>App</code> component inside Embark’s <code>onReady()</code> function.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.onReady(() &#x3D;&gt; &#123;</span><br><span class=\"line\">  render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.</p>\n<p>Let’s also quickly add the <code>owner</code> and creation date. The <code>owner</code> is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it’ll be formatted in a way the users can make sense of the data. We’ll use the <code>dateformat</code> library for that and install it as a dependency like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install --save dateformat</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can update our <code>Post</code> component’s <code>render()</code> function to calculate a properly formatted date based on the <code>creationDate</code> that has been passed down through properties:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">import dateformat from &#39;dateformat&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    const formattedDate &#x3D; dateformat(</span><br><span class=\"line\">      new Date(this.props.creationDate * 1000),</span><br><span class=\"line\">      &#39;yyyy-mm-dd HH:MM:ss&#39;</span><br><span class=\"line\">    );</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;&#123;this.state.topic&#125;&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;&#123;this.state.content&#125;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at &#123;formattedDate&#125; by &#123;this.props.owner&#125;&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that variables created inside <code>render()</code> can be interpolated as they are - there’s no need to make them available on <code>props</code> or <code>state</code>. As a matter of fact, <code>props</code> are always considered read only in React.</p>\n<p>Let’s try out our new <code>Post</code> component with some static data by adding it to our <code>App</code> component’s view. Next up, we’ll make this dynamic by fetching the posts from our Smart Contract.</p>\n<p><strong>Attention</strong>: The hash used in this snippet might not be available in your local IPFS node, so you’ll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;Post</span><br><span class=\"line\">          description&#x3D;&quot;0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250&quot;</span><br><span class=\"line\">          creationDate&#x3D;&quot;1550073772&quot;</span><br><span class=\"line\">          owner&#x3D;&quot;0x00000000000&quot;</span><br><span class=\"line\">          &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-List-component\"><a href=\"#Creating-a-List-component\" class=\"headerlink\" title=\"Creating a List component\"></a>Creating a List component</h2><p>Before we can move on with building a component that renders a list of posts, we’ll have to extend our Smart Contract with one more method. Since there’s no canonical way to fetch array data from a Smart Contract, we’ll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.</p>\n<p>Let’s introduce a method <code>numPosts()</code> in our <code>DReddit</code> Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function numPosts() public view returns (uint) &#123;</span><br><span class=\"line\">  return posts.length;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>posts.length</code> will increase as we’re adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we’ll leave that up to you!</p>\n<p>With that in place, we can start building a new <code>List</code> component. The <code>List</code> component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.state.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (</span><br><span class=\"line\">          &lt;Post</span><br><span class=\"line\">            key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">            description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">            creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">            owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The most interesting part here is probably the <code>render()</code> method, in which we iterate over all <code>state.posts</code> (which at the moment is empty) and then render a <code>Post</code> component for every iteration. Another thing to note is that every <code>Post</code> receives a <code>key</code>. This is required in React when creating views from loops. We’ve never introduced a <code>post.id</code> in this tutorial, but don’t worry, we’ll fix that in a moment.</p>\n<p>We can already put that in our <code>App</code> component. It won’t render anything as we haven’t fetched any posts yet, but that’s what we’ll do next.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; List &#125; from &#39;.&#x2F;List&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;List &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Fetching-posts-data\"><a href=\"#Fetching-posts-data\" class=\"headerlink\" title=\"Fetching posts data\"></a>Fetching posts data</h3><p>Let’s fill our new <code>List</code> component with life! As mentioned earlier, we’ll use our Smart Contract’s <code>numPosts()</code> method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the <code>List</code> component is ready, we’ll use its <code>componentDidMount()</code> method for that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">      const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">      list.push(post);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that in the above code we don’t <code>await</code> the calls to every individual post. This is on purpose as we don’t want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using <code>Promise.all().</code></p>\n<p>Last but not least, we need to add an <code>id</code> property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post’s index as <code>id</code>. Once that is done, we can use <code>setState()</code> to update our component’s state and render the list:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async componentDidMount() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>That’s it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we’ll have to reload the browser every time after adding a post. However, this we’ll address now.</p>\n<h3 id=\"Reloading-posts\"><a href=\"#Reloading-posts\" class=\"headerlink\" title=\"Reloading posts\"></a>Reloading posts</h3><p>There is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the <code>createPost</code> component tell the <code>List</code> component to reload its posts. However, there’s no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of <code>CreatePost</code> and <code>List</code> (in our case <code>App</code>), and have it pass that logic down to places where its needed. This also means we’ll be fetching the list inside <code>App</code> and pass down the pure data to <code>List</code>.</p>\n<p>If this sounds overwhelming, no worries, it’s more trivial than that! Let’s start by introducing a <code>loadPosts()</code> function in our <code>App</code> component. Essentially we’re moving everything from <code>List</code>‘s <code>componentDidMount()</code> function into <code>App</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async loadPosts() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    if (totalPosts &gt; 0) &#123;</span><br><span class=\"line\">      for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">        const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">        list.push(post);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">    list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">      post.id &#x3D; index;</span><br><span class=\"line\">      return post;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    list;</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To make this work we also need to introduce a <code>state</code> with the dedicated <code>posts</code>. After that, we make sure <code>loadPosts()</code> is called when <code>App</code> is mounted:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    await this.loadPosts();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, all we have to do is to pass the <code>posts</code> down to <code>List</code> and <code>loadPosts()</code> to <code>CreatePost</code> as a callback handler if you will:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">      &lt;CreatePost afterPostHandler&#x3D;&#123;this.loadPosts.bind(this)&#125;&#x2F;&gt;</span><br><span class=\"line\">      &lt;List posts&#x3D;&#123;this.state.posts&#125;&#x2F;&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can consume <code>posts</code> and <code>afterPostHandler()</code> from <code>this.props</code> respectively. In <code>List</code>‘s <code>render()</code> function we’ll do (notice we don’t rely on <code>this.state</code> anymore):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (&lt;React.Fragment&gt;</span><br><span class=\"line\">    &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;)&#125;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And in <code>CreatePost</code> we call <code>afterPostHandler()</code> after a post has been created:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  await this.props.afterPostHandler();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful! The list now automatically reloads after creating posts, give it a try!</p>\n<h2 id=\"Add-voting-functionality\"><a href=\"#Add-voting-functionality\" class=\"headerlink\" title=\"Add voting functionality\"></a>Add voting functionality</h2><p>The final feature we’ll be implementing is the up and down voting of posts. This is where we come back to our <code>Post</code> component that we’ve created earlier. In order to make this feature complete we’ll have to:</p>\n<ul>\n<li>Render the number of up and down votes per post</li>\n<li>Add handlers for users to up and down vote</li>\n<li>Determine if a user can vote on a post</li>\n</ul>\n<h3 id=\"Rendering-number-of-votes\"><a href=\"#Rendering-number-of-votes\" class=\"headerlink\" title=\"Rendering number of votes\"></a>Rendering number of votes</h3><p>Let’s start with the first one, as it’s the most trivial one. While the number of up and down votes is already attached to the data that we receive from our <code>DReddit</code> Smart Contract, it’s not yet in the right format as it comes back as a string. Let’s make sure we parse the up and down vote counts on posts by extending our <code>App</code>‘s <code>loadPosts()</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async loadPosts() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    post.upvotes &#x3D; parseInt(post.upvotes, 10);</span><br><span class=\"line\">    post.downvotes &#x3D; parseInt(post.downvotes, 10);</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can pass each post’s <code>upvotes</code> and <code>downvotes</code> to every <code>Post</code> component via its <code>props</code> inside our <code>List</code> component:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (&lt;Post</span><br><span class=\"line\">          key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">          description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">          creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">          upvotes&#x3D;&#123;post.upvotes&#125;</span><br><span class=\"line\">          downvotes&#x3D;&#123;post.downvotes&#125;</span><br><span class=\"line\">          owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Rendering the number of <code>upvotes</code> and <code>downvotes</code> is then really just a matter of interpolating them in <code>Post</code>‘s <code>render()</code> function. We’re just going to add them next to the buttons, but feel free to put them somewhere else:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">        &#123;this.props.upvotes&#125; &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &#123;this.props.downvotes&#125; &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Implement-up-and-down-votes\"><a href=\"#Implement-up-and-down-votes\" class=\"headerlink\" title=\"Implement up and down votes\"></a>Implement up and down votes</h3><p>Similar to when creating new posts, making the up and down vote buttons work requires sending transactions to our <code>DReddit</code> Smart Contract. So we’ll do almost the same thing as in our <code>CreatePost</code> component, just that we’re calling the Smart Contract’s <code>vote()</code> method. If you recall, the <code>vote()</code> method takes a post id and the vote type, which is either <code>NONE</code>, <code>UPVOTE</code> or <code>DOWNVOTE</code> and are stored as <code>uint8</code>.</p>\n<p>It makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we’ll use a hash object instead:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const BALLOT &#x3D; &#123;</span><br><span class=\"line\">  NONE: 0,</span><br><span class=\"line\">  UPVOTE: 1,</span><br><span class=\"line\">  DOWNVOTE: 2</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We don’t actually have the post id available in our <code>Post</code> component yet. That’s easily added in our <code>List</code> component, by now you should know how to do that!</p>\n<p>We can then add click handlers to our up and down vote buttons and pass one of the <code>BALLOT</code> types to them (notice that we added <code>BALLOT.NONE</code> only for completeness-sake but don’t actually use it in our code):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.UPVOTE)&#125;&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.DOWNVOTE)&#125;&gt;Downvote&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The next thing we need to do is sending that vote type along with the post id to our Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const vote &#x3D; DReddit.methods.vote(this.props.id, ballot);</span><br><span class=\"line\">  const estimate &#x3D; await vote.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we also want to update the view when a vote has been successfully sent. Right now we’re reading a post’s up and down votes from its <code>props</code> and render them accordingly. However, we want to update those values as votes are coming in. For that we’ll change our code to only read the up and down votes from <code>props</code> once and store them in the component’s state.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We also change the component’s view to render the values from state instead of <code>props</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<p>After that we can update the state with new votes using <code>setState()</code>, right after a vote has been sent:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    upvotes: this.state.upvotes + (ballot &#x3D;&#x3D; BALLOT.UPVOTE ? 1 : 0),</span><br><span class=\"line\">    downvotes: this.state.downvotes + (ballot &#x3D;&#x3D; BALLOT.DOWNVOTE ? 1 : 0)</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>That’s it!</strong> We can now up and down vote on posts…but only once! Yes, that’s right. When we try to vote multiple times on the same post, we’ll actually receive an error. That’s because, if you remember, there’s a restriction in our Smart Contract that makes sure users can not vote on posts that they’ve either already voted on, or created themselves.</p>\n<p>Let’s make sure this is reflected in our application’s UI and wrap up this tutorial!</p>\n<h3 id=\"Use-canVote-to-disable-vote-buttons\"><a href=\"#Use-canVote-to-disable-vote-buttons\" class=\"headerlink\" title=\"Use canVote() to disable vote buttons\"></a>Use <code>canVote()</code> to disable vote buttons</h3><p>We’ll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract’s <code>canVote()</code> method. Another thing we need to consider is that we shouldn’t allow a user to vote when a vote for the same post is already in flight but hasn’t completed yet.</p>\n<p>Let’s introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes,</span><br><span class=\"line\">      canVote: true,</span><br><span class=\"line\">      submitting: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, we update our <code>Post</code> component’s <code>render()</code> function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const disabled &#x3D; this.state.submitting || !this.state.canVote;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, we have to make sure the state properties are updated accordingly. We’ll call our Smart Contract’s <code>canVote()</code> method when a post is initialized:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    const canVote &#x3D; await DReddit.methods.canVote(this.props.id).call();</span><br><span class=\"line\">    this.setState(&#123; topic, content, canVote &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And when a vote is being made, we set <code>submitting</code> to <code>true</code> right before we send a transaction and set it back to <code>false</code> again when the transaction is done. At this point, we also know that a vote has been made on this post, so <code>canVote</code> can be set to <code>false</code> at the same time:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123; submitting: true &#125;);</span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate + 1000&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    canVote: false,</span><br><span class=\"line\">    submitting: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>And we’re done!</strong></p>\n<h2 id=\"Wrapping-it-up\"><a href=\"#Wrapping-it-up\" class=\"headerlink\" title=\"Wrapping it up\"></a>Wrapping it up</h2><p>Congratulations! You’ve completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:</p>\n<ul>\n<li>Sort the posts in reversed chronological order so that the latest post is always on top</li>\n<li>Rely on Smart Contracts Events to reload list</li>\n<li>Introduce routing so there can be different views for creating and viewing posts</li>\n<li>Use CSS to make the application look nice</li>\n</ul>\n<p>We hope you’ve learned that it’s not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.</p>\n<p><strong>We’ve recorded every single step of this tutorial <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">in this repository</a></strong>, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">follow us on Twitter</a> as well for updates!</p>\n"},{"title":"Embark 5.1","author":"iuri_matias","summary":"Embark 5.1 release","layout":"blog-post","_content":"\nEmbark 5.1\n===\n\n## Interfaces & Libraries Configuration\n\nEmbark 5.1 adds two new configuration settings for Smart Contract configuration:\n\n`interfaces` - Any Smart Contract that represent an interface or is used for inheritance\n`libraries` - Any Smart Contract that is used as a library\n\nThis makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:\n\n```\ndeploy: {\n  Ownable: {\n    deploy: false\n  },\n  ...\n}\n```\n\nThe above can now be done via:\n\n```\ninterfaces: ['Ownable'],\ndeploy: {\n  ...\n}\n```\n\nFind the complete documentation [here](https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces).\n\n## getEvmVersion for conditional tests\n\nEmbark tests now include a helper `getEvmVersion` that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.\n\nFor example:\n\n```\n  it(\"cannot bid after 5 minutes\", async () => {\n    const evmVersion = await global.getEvmVersion();\n    if (evmVersion.indexOf(\"TestRPC\") === -1) return;\n\n    increaseTime(5000)\n\n    await assert.reverts(Auction.methods.bid(), {from: web3.eth.defaultAccount}, 'Returned error: VM Exception while processing transaction: cannot bid after auction expired');\n  })\n```\n\n## Nethermind plugin\n\nEmbark now comes with a [Nethermind](https://nethermind.io/) plugin.\nMore info about the plugin can be found [here](https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind)\n\n## Changelog\n\nFeatures\n@embark/deployment: introduce interfaces and libraries configuration (73d0443)\n@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)\n@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)\n@embark/testing: introduce proper request2 api for async/await (c947517)\n@embark/testing: add missing APIs to register console commands and API calls (bef582d)\nsupport Node.js v12.x and newer (c093cf8)\n\nBug Fixes\n@embark/cmd_controller: fix build command to escape on finish (e2767c2)\n@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)\n@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)\n@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)\n@embark/tests: Fix failing test with —node=embark (81af3af)\n@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)\n@embark/utils: fix deconstruct url to return port as an integer (4190d5e)\ntransaction-logger: fix circular dep issue with util.inspect (6f239f4)\n@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)\n@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)\n@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)\n@embark/proxy: Parse rpcPort from config as integer (9f7c682)\n","source":"_posts/2020-01-28-embark-5-1.md","raw":"title: Embark 5.1\nauthor: iuri_matias\nsummary: \"Embark 5.1 release\"\ncategories:\n  - announcements\n  - releases\nlayout: blog-post\n---\n\nEmbark 5.1\n===\n\n## Interfaces & Libraries Configuration\n\nEmbark 5.1 adds two new configuration settings for Smart Contract configuration:\n\n`interfaces` - Any Smart Contract that represent an interface or is used for inheritance\n`libraries` - Any Smart Contract that is used as a library\n\nThis makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:\n\n```\ndeploy: {\n  Ownable: {\n    deploy: false\n  },\n  ...\n}\n```\n\nThe above can now be done via:\n\n```\ninterfaces: ['Ownable'],\ndeploy: {\n  ...\n}\n```\n\nFind the complete documentation [here](https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces).\n\n## getEvmVersion for conditional tests\n\nEmbark tests now include a helper `getEvmVersion` that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.\n\nFor example:\n\n```\n  it(\"cannot bid after 5 minutes\", async () => {\n    const evmVersion = await global.getEvmVersion();\n    if (evmVersion.indexOf(\"TestRPC\") === -1) return;\n\n    increaseTime(5000)\n\n    await assert.reverts(Auction.methods.bid(), {from: web3.eth.defaultAccount}, 'Returned error: VM Exception while processing transaction: cannot bid after auction expired');\n  })\n```\n\n## Nethermind plugin\n\nEmbark now comes with a [Nethermind](https://nethermind.io/) plugin.\nMore info about the plugin can be found [here](https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind)\n\n## Changelog\n\nFeatures\n@embark/deployment: introduce interfaces and libraries configuration (73d0443)\n@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)\n@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)\n@embark/testing: introduce proper request2 api for async/await (c947517)\n@embark/testing: add missing APIs to register console commands and API calls (bef582d)\nsupport Node.js v12.x and newer (c093cf8)\n\nBug Fixes\n@embark/cmd_controller: fix build command to escape on finish (e2767c2)\n@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)\n@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)\n@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)\n@embark/tests: Fix failing test with —node=embark (81af3af)\n@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)\n@embark/utils: fix deconstruct url to return port as an integer (4190d5e)\ntransaction-logger: fix circular dep issue with util.inspect (6f239f4)\n@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)\n@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)\n@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)\n@embark/proxy: Parse rpcPort from config as integer (9f7c682)\n","slug":"embark-5-1","published":1,"date":"2020-01-28T00:00:00.000Z","updated":"2020-01-28T17:55:09.597Z","comments":1,"photos":[],"link":"","_id":"ck5y92ljl0000zf0e4dk642y7","content":"<h1 id=\"Embark-5-1\"><a href=\"#Embark-5-1\" class=\"headerlink\" title=\"Embark 5.1\"></a>Embark 5.1</h1><h2 id=\"Interfaces-amp-Libraries-Configuration\"><a href=\"#Interfaces-amp-Libraries-Configuration\" class=\"headerlink\" title=\"Interfaces &amp; Libraries Configuration\"></a>Interfaces &amp; Libraries Configuration</h2><p>Embark 5.1 adds two new configuration settings for Smart Contract configuration:</p>\n<p><code>interfaces</code> - Any Smart Contract that represent an interface or is used for inheritance<br><code>libraries</code> - Any Smart Contract that is used as a library</p>\n<p>This makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    deploy: false</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The above can now be done via:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">interfaces: [&#39;Ownable&#39;],</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Find the complete documentation <a href=\"https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h2 id=\"getEvmVersion-for-conditional-tests\"><a href=\"#getEvmVersion-for-conditional-tests\" class=\"headerlink\" title=\"getEvmVersion for conditional tests\"></a>getEvmVersion for conditional tests</h2><p>Embark tests now include a helper <code>getEvmVersion</code> that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.</p>\n<p>For example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;cannot bid after 5 minutes&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const evmVersion &#x3D; await global.getEvmVersion();</span><br><span class=\"line\">  if (evmVersion.indexOf(&quot;TestRPC&quot;) &#x3D;&#x3D;&#x3D; -1) return;</span><br><span class=\"line\"></span><br><span class=\"line\">  increaseTime(5000)</span><br><span class=\"line\"></span><br><span class=\"line\">  await assert.reverts(Auction.methods.bid(), &#123;from: web3.eth.defaultAccount&#125;, &#39;Returned error: VM Exception while processing transaction: cannot bid after auction expired&#39;);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Nethermind-plugin\"><a href=\"#Nethermind-plugin\" class=\"headerlink\" title=\"Nethermind plugin\"></a>Nethermind plugin</h2><p>Embark now comes with a <a href=\"https://nethermind.io/\" target=\"_blank\" rel=\"noopener\">Nethermind</a> plugin.<br>More info about the plugin can be found <a href=\"https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<h2 id=\"Changelog\"><a href=\"#Changelog\" class=\"headerlink\" title=\"Changelog\"></a>Changelog</h2><p>Features<br>@embark/deployment: introduce interfaces and libraries configuration (73d0443)<br>@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)<br>@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)<br>@embark/testing: introduce proper request2 api for async/await (c947517)<br>@embark/testing: add missing APIs to register console commands and API calls (bef582d)<br>support Node.js v12.x and newer (c093cf8)</p>\n<p>Bug Fixes<br>@embark/cmd_controller: fix build command to escape on finish (e2767c2)<br>@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)<br>@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)<br>@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)<br>@embark/tests: Fix failing test with —node=embark (81af3af)<br>@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)<br>@embark/utils: fix deconstruct url to return port as an integer (4190d5e)<br>transaction-logger: fix circular dep issue with util.inspect (6f239f4)<br>@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)<br>@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)<br>@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)<br>@embark/proxy: Parse rpcPort from config as integer (9f7c682)</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h1 id=\"Embark-5-1\"><a href=\"#Embark-5-1\" class=\"headerlink\" title=\"Embark 5.1\"></a>Embark 5.1</h1><h2 id=\"Interfaces-amp-Libraries-Configuration\"><a href=\"#Interfaces-amp-Libraries-Configuration\" class=\"headerlink\" title=\"Interfaces &amp; Libraries Configuration\"></a>Interfaces &amp; Libraries Configuration</h2><p>Embark 5.1 adds two new configuration settings for Smart Contract configuration:</p>\n<p><code>interfaces</code> - Any Smart Contract that represent an interface or is used for inheritance<br><code>libraries</code> - Any Smart Contract that is used as a library</p>\n<p>This makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    deploy: false</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The above can now be done via:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">interfaces: [&#39;Ownable&#39;],</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Find the complete documentation <a href=\"https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h2 id=\"getEvmVersion-for-conditional-tests\"><a href=\"#getEvmVersion-for-conditional-tests\" class=\"headerlink\" title=\"getEvmVersion for conditional tests\"></a>getEvmVersion for conditional tests</h2><p>Embark tests now include a helper <code>getEvmVersion</code> that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.</p>\n<p>For example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;cannot bid after 5 minutes&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const evmVersion &#x3D; await global.getEvmVersion();</span><br><span class=\"line\">  if (evmVersion.indexOf(&quot;TestRPC&quot;) &#x3D;&#x3D;&#x3D; -1) return;</span><br><span class=\"line\"></span><br><span class=\"line\">  increaseTime(5000)</span><br><span class=\"line\"></span><br><span class=\"line\">  await assert.reverts(Auction.methods.bid(), &#123;from: web3.eth.defaultAccount&#125;, &#39;Returned error: VM Exception while processing transaction: cannot bid after auction expired&#39;);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Nethermind-plugin\"><a href=\"#Nethermind-plugin\" class=\"headerlink\" title=\"Nethermind plugin\"></a>Nethermind plugin</h2><p>Embark now comes with a <a href=\"https://nethermind.io/\" target=\"_blank\" rel=\"noopener\">Nethermind</a> plugin.<br>More info about the plugin can be found <a href=\"https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<h2 id=\"Changelog\"><a href=\"#Changelog\" class=\"headerlink\" title=\"Changelog\"></a>Changelog</h2><p>Features<br>@embark/deployment: introduce interfaces and libraries configuration (73d0443)<br>@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)<br>@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)<br>@embark/testing: introduce proper request2 api for async/await (c947517)<br>@embark/testing: add missing APIs to register console commands and API calls (bef582d)<br>support Node.js v12.x and newer (c093cf8)</p>\n<p>Bug Fixes<br>@embark/cmd_controller: fix build command to escape on finish (e2767c2)<br>@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)<br>@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)<br>@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)<br>@embark/tests: Fix failing test with —node=embark (81af3af)<br>@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)<br>@embark/utils: fix deconstruct url to return port as an integer (4190d5e)<br>transaction-logger: fix circular dep issue with util.inspect (6f239f4)<br>@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)<br>@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)<br>@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)<br>@embark/proxy: Parse rpcPort from config as integer (9f7c682)</p>\n"},{"title":"DApp Frontend Security","summary":"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.","author":"robin_percy","layout":"blog-post","image":"/assets/images/web3-article-header.png","_content":"\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApps\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nIt's not only regular web apps that need securing, but decentralised web apps too!\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","source":"_posts/2020-01-29-dapp-frontend-security.md","raw":"title: \"DApp Frontend Security\"\nsummary: \"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/web3-article-header.png'\n\n---\n\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApps\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nIt's not only regular web apps that need securing, but decentralised web apps too!\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","slug":"dapp-frontend-security","published":1,"date":"2020-01-29T00:00:00.000Z","updated":"2020-01-28T19:10:46.696Z","comments":1,"photos":[],"link":"","_id":"ck5y9bbct0008zf0e0dtpheeq","content":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApps\"><a href=\"#Security-for-DApps\" class=\"headerlink\" title=\"Security for DApps\"></a>Security for DApps</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>It’s not only regular web apps that need securing, but decentralised web apps too!</p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApps\"><a href=\"#Security-for-DApps\" class=\"headerlink\" title=\"Security for DApps\"></a>Security for DApps</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>It’s not only regular web apps that need securing, but decentralised web apps too!</p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n"},{"title":"Subspace 1.2","author":"iuri_matias","summary":"Subspace 1.2 release - now with HttpProvider support & GraphQL Example","layout":"blog-post","_content":"\nSubspace 1.2\n===\n\n### New Org\nSubspace is now under the *@embarklabs* Org. Versions under @status-im Org have been deprecated.\n\n```bash\n# Using npm\nnpm install --save @embarklabs/subspace\n\n# Using yarn\nyarn add @embarklabs/subspace \n```\n\n### HttpProvider support\n\nPreviously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the `callInterval` option was specified, displaying a warning indicating that the use of providers other than `WebSocketProvider` was discouraged. \n\nWith this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.\n\nSubscriptions can be disabled with the `disableSubscriptions` option.\n\n```Javascript\nlet subspace = new Subspace({disableSubscriptions: true})\n```\n\n### GraphQL Example\n\nAn example DApp using GraphQL with Subspace can now be found at https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1 . \n\n### Bug fixes\n\n- Fixed obtaining the `from` address when instantiating a Web3 Contract with Subspace tracking functionality\n- `.track()` is added only to event names as they're specified in the ABI. Tracking events by signature is not allowed\n\n### Contributions\n\nSubspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. \n\n","source":"_posts/2020-01-29-subspace-1-2.md","raw":"title: Subspace 1.2\nauthor: iuri_matias\nsummary: \"Subspace 1.2 release - now with HttpProvider support & GraphQL Example\"\ncategories:\n  - announcements\n  - releases\nlayout: blog-post\n---\n\nSubspace 1.2\n===\n\n### New Org\nSubspace is now under the *@embarklabs* Org. Versions under @status-im Org have been deprecated.\n\n```bash\n# Using npm\nnpm install --save @embarklabs/subspace\n\n# Using yarn\nyarn add @embarklabs/subspace \n```\n\n### HttpProvider support\n\nPreviously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the `callInterval` option was specified, displaying a warning indicating that the use of providers other than `WebSocketProvider` was discouraged. \n\nWith this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.\n\nSubscriptions can be disabled with the `disableSubscriptions` option.\n\n```Javascript\nlet subspace = new Subspace({disableSubscriptions: true})\n```\n\n### GraphQL Example\n\nAn example DApp using GraphQL with Subspace can now be found at https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1 . \n\n### Bug fixes\n\n- Fixed obtaining the `from` address when instantiating a Web3 Contract with Subspace tracking functionality\n- `.track()` is added only to event names as they're specified in the ABI. Tracking events by signature is not allowed\n\n### Contributions\n\nSubspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. \n\n","slug":"subspace-1-2","published":1,"date":"2020-01-29T05:00:00.000Z","updated":"2020-01-30T14:52:47.140Z","comments":1,"photos":[],"link":"","_id":"ck60uz6ai0000bzt4ar0hbppr","content":"<h1 id=\"Subspace-1-2\"><a href=\"#Subspace-1-2\" class=\"headerlink\" title=\"Subspace 1.2\"></a>Subspace 1.2</h1><h3 id=\"New-Org\"><a href=\"#New-Org\" class=\"headerlink\" title=\"New Org\"></a>New Org</h3><p>Subspace is now under the <em>@embarklabs</em> Org. Versions under @status-im Org have been deprecated.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Using npm</span></span><br><span class=\"line\">npm install --save @embarklabs/subspace</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\"># Using yarn</span></span><br><span class=\"line\">yarn add @embarklabs/subspace</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HttpProvider-support\"><a href=\"#HttpProvider-support\" class=\"headerlink\" title=\"HttpProvider support\"></a>HttpProvider support</h3><p>Previously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the <code>callInterval</code> option was specified, displaying a warning indicating that the use of providers other than <code>WebSocketProvider</code> was discouraged. </p>\n<p>With this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.</p>\n<p>Subscriptions can be disabled with the <code>disableSubscriptions</code> option.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> subspace = <span class=\"keyword\">new</span> Subspace(&#123;<span class=\"attr\">disableSubscriptions</span>: <span class=\"literal\">true</span>&#125;)</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"GraphQL-Example\"><a href=\"#GraphQL-Example\" class=\"headerlink\" title=\"GraphQL Example\"></a>GraphQL Example</h3><p>An example DApp using GraphQL with Subspace can now be found at <a href=\"https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1\" target=\"_blank\" rel=\"noopener\">https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1</a> . </p>\n<h3 id=\"Bug-fixes\"><a href=\"#Bug-fixes\" class=\"headerlink\" title=\"Bug fixes\"></a>Bug fixes</h3><ul>\n<li>Fixed obtaining the <code>from</code> address when instantiating a Web3 Contract with Subspace tracking functionality</li>\n<li><code>.track()</code> is added only to event names as they’re specified in the ABI. Tracking events by signature is not allowed</li>\n</ul>\n<h3 id=\"Contributions\"><a href=\"#Contributions\" class=\"headerlink\" title=\"Contributions\"></a>Contributions</h3><p>Subspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. </p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h1 id=\"Subspace-1-2\"><a href=\"#Subspace-1-2\" class=\"headerlink\" title=\"Subspace 1.2\"></a>Subspace 1.2</h1><h3 id=\"New-Org\"><a href=\"#New-Org\" class=\"headerlink\" title=\"New Org\"></a>New Org</h3><p>Subspace is now under the <em>@embarklabs</em> Org. Versions under @status-im Org have been deprecated.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Using npm</span></span><br><span class=\"line\">npm install --save @embarklabs/subspace</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\"># Using yarn</span></span><br><span class=\"line\">yarn add @embarklabs/subspace</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HttpProvider-support\"><a href=\"#HttpProvider-support\" class=\"headerlink\" title=\"HttpProvider support\"></a>HttpProvider support</h3><p>Previously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the <code>callInterval</code> option was specified, displaying a warning indicating that the use of providers other than <code>WebSocketProvider</code> was discouraged. </p>\n<p>With this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.</p>\n<p>Subscriptions can be disabled with the <code>disableSubscriptions</code> option.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> subspace = <span class=\"keyword\">new</span> Subspace(&#123;<span class=\"attr\">disableSubscriptions</span>: <span class=\"literal\">true</span>&#125;)</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"GraphQL-Example\"><a href=\"#GraphQL-Example\" class=\"headerlink\" title=\"GraphQL Example\"></a>GraphQL Example</h3><p>An example DApp using GraphQL with Subspace can now be found at <a href=\"https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1\" target=\"_blank\" rel=\"noopener\">https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1</a> . </p>\n<h3 id=\"Bug-fixes\"><a href=\"#Bug-fixes\" class=\"headerlink\" title=\"Bug fixes\"></a>Bug fixes</h3><ul>\n<li>Fixed obtaining the <code>from</code> address when instantiating a Web3 Contract with Subspace tracking functionality</li>\n<li><code>.track()</code> is added only to event names as they’re specified in the ABI. Tracking events by signature is not allowed</li>\n</ul>\n<h3 id=\"Contributions\"><a href=\"#Contributions\" class=\"headerlink\" title=\"Contributions\"></a>Contributions</h3><p>Subspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. </p>\n"},{"title":"DApp Frontend Security","summary":"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.","author":"robin_percy","layout":"blog-post","image":"/assets/images/web3-article-header.png","_content":"\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApp Users\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","source":"_posts/2020-01-30-dapp-frontend-security.md","raw":"title: \"DApp Frontend Security\"\nsummary: \"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/web3-article-header.png'\n\n---\n\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApp Users\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","slug":"dapp-frontend-security","published":1,"date":"2020-01-30T05:00:00.000Z","updated":"2020-01-30T14:52:47.141Z","comments":1,"photos":[],"link":"","_id":"ck60uz6cn0003bzt49el1gmkb","content":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApp-Users\"><a href=\"#Security-for-DApp-Users\" class=\"headerlink\" title=\"Security for DApp Users\"></a>Security for DApp Users</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApp-Users\"><a href=\"#Security-for-DApp-Users\" class=\"headerlink\" title=\"Security for DApp Users\"></a>Security for DApp Users</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"ck5ijm3qt00087hegcibl5ffn","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r2000g7hega2otaz32"},{"post_id":"ck5ijm3qj00017heg0hco2qzg","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r5000k7hegc0d6bkl2"},{"post_id":"ck5ijm3qy000d7hegcv9ofwex","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r7000m7hegb2dmf85s"},{"post_id":"ck5ijm3qn00037hegbsrh3c67","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r8000p7heg5s6r5wli"},{"post_id":"ck5ijm3r0000f7heg2sf4hd1t","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r9000r7hegcv8l1joz"},{"post_id":"ck5ijm3r4000j7hegdff7117g","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3ra000t7heg15x9gyp4"},{"post_id":"ck5ijm3qr00067heg3c3mbo7d","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3rb000v7heg2wkd7sgo"},{"post_id":"ck5ijm3qv000a7hega0m19iy0","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3rc000x7heg5mkjcn8h"},{"post_id":"ck5ijm3tr00247heg5aegaono","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u3002b7heges6sbu9o"},{"post_id":"ck5ijm3tt00267hegay9k9guq","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u4002d7hega93zas0w"},{"post_id":"ck5ijm3tw00287heg7013c23g","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u5002f7hegesvg2std"},{"post_id":"ck5ijm3tz002a7hegau443t3p","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u6002h7heg8llycou5"},{"post_id":"ck5ijm3u4002c7heg00jbexia","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u7002j7heg43x2adwk"},{"post_id":"ck5ijm3u5002e7heg4c75be4a","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ua002l7heg92kq41du"},{"post_id":"ck5ijm3u6002g7heg2yc1byah","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ub002n7heg1x1sbaaj"},{"post_id":"ck5ijm3u7002i7hegd17nahv0","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ub002o7hegauz374rv"},{"post_id":"ck5ijm3u8002k7hegdpuf24tc","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ub002p7heg3yzpcroc"},{"post_id":"ck5ijm3ub002m7heg363x7mwy","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3uc002q7heg6voth90j"},{"post_id":"ck5ijm3ui002r7heg90h8743t","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3uj002u7heghtv0a025"},{"post_id":"ck5ijm3uv002v7heg23u54ek5","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3uw002w7heg6cue2twv"},{"post_id":"ck5y92ljl0000zf0e4dk642y7","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5y92lke0002zf0e9475czyn"},{"post_id":"ck5y92ljl0000zf0e4dk642y7","category_id":"ck5y92ljz0001zf0ebip59hx1","_id":"ck5y92lke0003zf0e86890h7s"},{"post_id":"ck5y9bbct0008zf0e0dtpheeq","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5y9bbcv0009zf0eb0eidc73"},{"post_id":"ck60uz6ai0000bzt4ar0hbppr","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck60uz6aq0001bzt4d8g8cfki"},{"post_id":"ck60uz6ai0000bzt4ar0hbppr","category_id":"ck5y92ljz0001zf0ebip59hx1","_id":"ck60uz6aq0002bzt490ck3lcz"},{"post_id":"ck60uz6cn0003bzt49el1gmkb","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck60uz6cq0004bzt4gae3fhlw"}],"PostTag":[],"Tag":[]}}
\ No newline at end of file
+{"meta":{"version":1,"warehouse":"3.0.2"},"models":{"Asset":[{"_id":"source/CNAME","path":"CNAME","modified":0,"renderable":0},{"_id":"source/browserconfig.xml","path":"browserconfig.xml","modified":0,"renderable":0},{"_id":"source/embark-logo.svg","path":"embark-logo.svg","modified":0,"renderable":0},{"_id":"source/favicon.ico","path":"favicon.ico","modified":0,"renderable":0},{"_id":"source/robots.txt","path":"robots.txt","modified":0,"renderable":0},{"_id":"source/coverage-files.png","path":"coverage-files.png","modified":0,"renderable":0},{"_id":"source/coverage-report.png","path":"coverage-report.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/bamboo.png","path":"plugins/thumbnails/bamboo.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/fortune.jpg","path":"plugins/thumbnails/fortune.jpg","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/haml.png","path":"plugins/thumbnails/haml.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/pug.png","path":"plugins/thumbnails/pug.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/remix copy.png","path":"plugins/thumbnails/remix copy.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/remix.png","path":"plugins/thumbnails/remix.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/solidity.png","path":"plugins/thumbnails/solidity.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/solium.png","path":"plugins/thumbnails/solium.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/status.png","path":"plugins/thumbnails/status.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/angular.png","path":"templates/thumbnails/angular.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/bamboo.png","path":"templates/thumbnails/bamboo.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/react.png","path":"templates/thumbnails/react.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/sggc.png","path":"templates/thumbnails/sggc.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/typescript.png","path":"templates/thumbnails/typescript.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/vortex.png","path":"templates/thumbnails/vortex.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/vuejs.png","path":"templates/thumbnails/vuejs.png","modified":0,"renderable":0},{"_id":"source/templates/thumbnails/vyper.png","path":"templates/thumbnails/vyper.png","modified":0,"renderable":0},{"_id":"source/tutorials/infura_guide/api-keys.png","path":"tutorials/infura_guide/api-keys.png","modified":0,"renderable":0},{"_id":"source/tutorials/infura_guide/lift-off.jpg","path":"tutorials/infura_guide/lift-off.jpg","modified":0,"renderable":0},{"_id":"themes/embark/source/css/embark.scss","path":"css/embark.scss","modified":0,"renderable":1},{"_id":"themes/embark/source/js/index.js","path":"js/index.js","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_debugger_controls.png","path":"assets/images/cockpit_debugger_controls.png","modified":0,"renderable":0},{"_id":"source/assets/images/crystal-thread-test.png","path":"assets/images/crystal-thread-test.png","modified":0,"renderable":0},{"_id":"source/plugins/thumbnails/mythx.png","path":"plugins/thumbnails/mythx.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_1.png","path":"assets/images/token_factory_1/page_1.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_2.png","path":"assets/images/token_factory_1/page_2.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_3.png","path":"assets/images/token_factory_1/page_3.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_4.png","path":"assets/images/token_factory_1/page_4.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/page_5.png","path":"assets/images/token_factory_1/page_5.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_1.png","path":"assets/images/token_factory_2/page_1.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_2.png","path":"assets/images/token_factory_2/page_2.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_3.png","path":"assets/images/token_factory_2/page_3.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_4.png","path":"assets/images/token_factory_2/page_4.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_5.png","path":"assets/images/token_factory_2/page_5.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_6.png","path":"assets/images/token_factory_2/page_6.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/page_7.png","path":"assets/images/token_factory_2/page_7.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/icons/app-window-search-text.svg","path":"assets/icons/app-window-search-text.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-down-1.svg","path":"assets/icons/arrow-down-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-left-1.svg","path":"assets/icons/arrow-left-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-right-1.svg","path":"assets/icons/arrow-right-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/arrow-up-1.svg","path":"assets/icons/arrow-up-1.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/browser-gauge.svg","path":"assets/icons/browser-gauge.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/check.svg","path":"assets/icons/check.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/close.svg","path":"assets/icons/close.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/computer-bug-search.svg","path":"assets/icons/computer-bug-search.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/copy-paste.svg","path":"assets/icons/copy-paste.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/crypto-currency-bitcoin-circle.svg","path":"assets/icons/crypto-currency-bitcoin-circle.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/github.svg","path":"assets/icons/github.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/list-to-do.svg","path":"assets/icons/list-to-do.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/module.svg","path":"assets/icons/module.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/navigation-menu.svg","path":"assets/icons/navigation-menu.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/notes-paper-text.svg","path":"assets/icons/notes-paper-text.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/paginate-filter-video-alternate.svg","path":"assets/icons/paginate-filter-video-alternate.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/pen-write-paper.svg","path":"assets/icons/pen-write-paper.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/pie-line-graph.svg","path":"assets/icons/pie-line-graph.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/rating-star.svg","path":"assets/icons/rating-star.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/search-bar.svg","path":"assets/icons/search-bar.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/symbols.html","path":"assets/icons/symbols.html","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/symbols.svg","path":"assets/icons/symbols.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/tag-new-circle.svg","path":"assets/icons/tag-new-circle.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/icons/twitter.svg","path":"assets/icons/twitter.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/Nimbus.svg","path":"assets/images/Nimbus.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-120x120-precomposed.png","path":"assets/images/apple-touch-icon-120x120-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-152x152-precomposed.png","path":"assets/images/apple-touch-icon-152x152-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-180x180-precomposed.png","path":"assets/images/apple-touch-icon-180x180-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-60x60-precomposed.png","path":"assets/images/apple-touch-icon-60x60-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-76x76-precomposed.png","path":"assets/images/apple-touch-icon-76x76-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/apple-touch-icon-precomposed.png","path":"assets/images/apple-touch-icon-precomposed.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/company-flexdapps.svg","path":"assets/images/company-flexdapps.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/company-giveth.svg","path":"assets/images/company-giveth.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/company-status.svg","path":"assets/images/company-status.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/dots.png","path":"assets/images/dots.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/favicon-16.png","path":"assets/images/favicon-16.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/favicon-32.png","path":"assets/images/favicon-32.png","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/keycard-logo-negative.svg","path":"assets/images/keycard-logo-negative.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/logo-negative.svg","path":"assets/images/logo-negative.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/logo.svg","path":"assets/images/logo.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/rocket-start.svg","path":"assets/images/rocket-start.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/status-logo.svg","path":"assets/images/status-logo.svg","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/README.md","path":"js/linkjuice/README.md","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/gulpfile.js","path":"js/linkjuice/gulpfile.js","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/package.json","path":"js/linkjuice/package.json","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_dashboard_release.png","path":"assets/images/cockpit_dashboard_release.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_editor_release.png","path":"assets/images/cockpit_editor_release.png","modified":0,"renderable":0},{"_id":"source/assets/images/nimble-creating-app.png","path":"assets/images/nimble-creating-app.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/bg-hexagons.png","path":"assets/images/bg-hexagons.png","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_contracts_view.gif","path":"assets/images/cockpit_contracts_view.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_selective_deployment.gif","path":"assets/images/cockpit_selective_deployment.gif","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/console_2.png","path":"assets/images/token_factory_1/console_2.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/tool-screenshot.png","path":"assets/images/tool-screenshot.png","modified":0,"renderable":1},{"_id":"themes/embark/source/js/linkjuice/src/linkjuice.js","path":"js/linkjuice/src/linkjuice.js","modified":0,"renderable":1},{"_id":"source/assets/images/nim-crystal-header-img_NEW.jpg","path":"assets/images/nim-crystal-header-img_NEW.jpg","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/console_2.png","path":"assets/images/token_factory_2/console_2.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_dashboard.png","path":"assets/images/cockpit_dashboard.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_dashboard_dark.png","path":"assets/images/cockpit_dashboard_dark.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/console_1.png","path":"assets/images/token_factory_1/console_1.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_explorer_block.png","path":"assets/images/cockpit_explorer_block.png","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_2/console_1.png","path":"assets/images/token_factory_2/console_1.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","path":"assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","modified":0,"renderable":1},{"_id":"themes/embark/source/assets/images/cli-tool.png","path":"assets/images/cli-tool.png","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_explorer_overview.png","path":"assets/images/cockpit_explorer_overview.png","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/EMBARK_MODULAR.png","path":"assets/images/EMBARK_MODULAR.png","modified":0,"renderable":1},{"_id":"source/assets/images/cockpit_explorer_contracts_detail.gif","path":"assets/images/cockpit_explorer_contracts_detail.gif","modified":0,"renderable":0},{"_id":"themes/embark/source/assets/images/EMBARK_FRAMEWORK.png","path":"assets/images/EMBARK_FRAMEWORK.png","modified":0,"renderable":1},{"_id":"source/assets/images/embark-dashboard.png","path":"assets/images/embark-dashboard.png","modified":0,"renderable":0},{"_id":"source/assets/images/website_release.png","path":"assets/images/website_release.png","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_explorer_transactions.gif","path":"assets/images/cockpit_explorer_transactions.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_suggestions.gif","path":"assets/images/cockpit_suggestions.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_using_debugger.gif","path":"assets/images/cockpit_using_debugger.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_search.gif","path":"assets/images/cockpit_search.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_explorer_account.gif","path":"assets/images/cockpit_explorer_account.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_editor.gif","path":"assets/images/cockpit_editor.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_enter_debugger.gif","path":"assets/images/cockpit_enter_debugger.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_navigation.gif","path":"assets/images/cockpit_navigation.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_change_theme.gif","path":"assets/images/cockpit_change_theme.gif","modified":0,"renderable":0},{"_id":"source/assets/images/cockpit_dashboard_contracts.gif","path":"assets/images/cockpit_dashboard_contracts.gif","modified":0,"renderable":0},{"_id":"source/assets/images/token_factory_1/dashboard.png","path":"assets/images/token_factory_1/dashboard.png","modified":0,"renderable":0},{"_id":"source/assets/images/web3-js-diagram.png","path":"assets/images/web3-js-diagram.png","modified":0,"renderable":0},{"_id":"source/assets/images/embark-header_blank.jpg","path":"assets/images/embark-header_blank.jpg","modified":0,"renderable":0},{"_id":"source/assets/images/web3-article-header.png","path":"assets/images/web3-article-header.png","modified":0,"renderable":0}],"Cache":[{"_id":"source/CNAME","hash":"fbac6d19ee04b9b7f4b3085544d024ec900c633c","modified":1579288027510},{"_id":"source/browserconfig.xml","hash":"f54412705ab9eb69b544f438c9a1e15ae57f27c0","modified":1579287603896},{"_id":"source/embark-logo.svg","hash":"af5b81d96dd4f7e4e65851e53866da7883daf52e","modified":1579287603900},{"_id":"source/favicon.ico","hash":"96b9a549337c2bec483c2879eeafa4d1f8748fed","modified":1579287603900},{"_id":"source/index.md","hash":"0a8e37f1549e24d127e9b65773ae00826d0b53c6","modified":1579287603900},{"_id":"source/robots.txt","hash":"7e49dfd97319f5dd7cdaea8518cf43e0e8d01e5a","modified":1579287603900},{"_id":"themes/embark/package.json","hash":"162acd2d930b76e2aca9114110e08110892db77e","modified":1579467413031},{"_id":"source/coverage-files.png","hash":"e9b0f9b1f09dc16409266dfbc1223f274dd63cbc","modified":1579287603896},{"_id":"source/_data/authors.yml","hash":"3250f13e4e2b6659b36e0932fe5b247fb8f4a4de","modified":1579287603592},{"_id":"source/_data/categories.yml","hash":"3c7131ed69c491243da443abca694a5c33d281b6","modified":1579287603592},{"_id":"source/_data/languages.yml","hash":"74e55635eb66bb12833e42f0d1057b03beb65bcf","modified":1579287603592},{"_id":"source/_data/menu.yml","hash":"bf3d8f131b64deb519c503acad1d98c260c7bef8","modified":1579288101159},{"_id":"source/_data/plugins.yml","hash":"250b7281973f7c96b773150c5215edffcabc8297","modified":1579287603592},{"_id":"source/_data/sidebar.yml","hash":"0ea60cee0c8cfd15952164e2c4f0f7ac5baff74b","modified":1579287603592},{"_id":"source/_data/templates.yml","hash":"bb1ad150c7145d71cb0c8cc79bf11313e5336044","modified":1579467412647},{"_id":"source/_data/tutorials.yml","hash":"6546e52f28f25f5eed82a13390ff7dc1e40d8f9b","modified":1579287603592},{"_id":"source/_data/versions.yml","hash":"e67950c3480c00a3da7728648542cfef802a656f","modified":1579467412647},{"_id":"source/_posts/2017-06-28-embark-2-5-released.md","hash":"5d149e9a2abea4c7ab621dfc846e8e15e67d0e54","modified":1579287936382},{"_id":"source/_posts/2017-10-25-embark-2-6-released.md","hash":"960e06e89708a2c7efb4e2833f3330e50df4ca5c","modified":1579287936382},{"_id":"source/_posts/2018-05-04-embark-3-0-released.md","hash":"96d9c51b2958bb133fabb45fb8adf82643352efb","modified":1579467412648},{"_id":"source/_posts/2018-06-20-embark-3-1-released.md","hash":"cbfe0ade135b7adcfe7d8ccb44b9651f5ac9571d","modified":1579287936386},{"_id":"source/_posts/2018-09-27-how-to-create-a-token-factory-with-embark-part-1.md","hash":"b92b23dcd959f9ad706a08d6a669000d0e8c73f9","modified":1579467412649},{"_id":"source/_posts/2018-10-27-how-to-create-a-token-factory-with-embark-part-2.md","hash":"2801c0fd796b136fff5d275de5581d3950eb8bb1","modified":1579467412649},{"_id":"source/_posts/2019-01-23-building-smart-contract-only-dapps.md","hash":"07ee6e18303761d241359b84d5ca49a895ae3f54","modified":1579287936386},{"_id":"source/_posts/2019-01-28-running-embark-tests-on-a-continuous-integration-server.md","hash":"b9b5affc2764a4b92fee15c6bd12201ee4d6c7c4","modified":1579287936386},{"_id":"source/_posts/2019-02-04-building-a-decentralized-reddit-with-embark-part-1.md","hash":"57de8cfef3e845f2bd86d01c01efc1fcc8bf23fe","modified":1579287936386},{"_id":"source/_posts/2019-02-11-building-a-decentralized-reddit-with-embark-part-2.md","hash":"3aa3e6ef8fbb7c57f07ee3b0738ccf3791e792c5","modified":1579287936386},{"_id":"source/_posts/2019-02-18-building-a-decentralized-reddit-with-embark-part-3.md","hash":"f985d4e255f1b4794ae75dbf6cecc6375b2b8a52","modified":1579287936394},{"_id":"source/_posts/2019-03-18-upgrading-to-embark-4.md","hash":"273625d93b803e0b9d447dfb669c94d7c54744e7","modified":1579467412651},{"_id":"source/_posts/2019-03-19-introducing-embark-4.md","hash":"50072eac21af7cd032c33cd410fbb743010caa34","modified":1579287936394},{"_id":"source/_posts/2019-07-23-whats-new-in-embark-4.1.md","hash":"314ccfcf29600a751720d27f397e3ea1cbfa5d3c","modified":1579467412652},{"_id":"source/_posts/2019-11-18-nim-vs-crystal-part-1-performance-interoperability.md","hash":"22c1e00430cf3e46211ee0b77dd9217ffcea6dff","modified":1579287936394},{"_id":"source/_posts/2019-11-21-nim-vs-crystal-part-2-threading-tooling.md","hash":"307509171f13c6fa9e47627d1f79bd8dde494e4d","modified":1579287936402},{"_id":"source/_posts/2019-11-28-nim-vs-crystal-part-3-cryto-dapps-p2p.md","hash":"3aded116db278f1fd187152731ef786b5ca3b216","modified":1579287936402},{"_id":"source/_posts/2019-12-09-web3-what-are-your-options.md","hash":"52309d265c0c7f970bf33e6c54ca683be9bda152","modified":1580395967138},{"_id":"source/_posts/2020-01-09-take-back-the-web-hackathon.md","hash":"b40dfd06e176be35860fe7679b059773f94c8e63","modified":1579287936418},{"_id":"source/_posts/2020-01-13-announcing-embark-5.md","hash":"86e13a2296e1363a47f19e0dfc356194f7f1bd1b","modified":1579467412653},{"_id":"source/chat/index.md","hash":"f4e76f80e3bcf796e5c06080b745129f389de4b6","modified":1579287603896},{"_id":"source/community/index.md","hash":"abc586bb9afa334aefcc6da5f995be6fced6fced","modified":1579287603896},{"_id":"source/coverage-report.png","hash":"4f2e52ad838258e4e7ee03f2cfd4bdd9be2c4046","modified":1579287603896},{"_id":"source/docs/bamboo.md","hash":"d6dda7ef34b47d759f4cbce3f993ae16d8e9cbd0","modified":1579467413006},{"_id":"source/docs/blockchain_accounts_configuration.md","hash":"2418ac7cdbb8e02d7f3dcbba489de45ad54b4824","modified":1579287603896},{"_id":"source/docs/blockchain_configuration.md","hash":"f6623133b83ee1ab652773b8f2a58e437f5b953a","modified":1579467413007},{"_id":"source/docs/cockpit_dashboard.md","hash":"53e5bc1ffdf3e247d4cc7e97e9f56af96f6e8d56","modified":1579287603896},{"_id":"source/docs/cockpit_deployment.md","hash":"b9c0a1e9bdb4ae6e3ee192d3b8ab90d42a302264","modified":1579287603896},{"_id":"source/docs/cockpit_editor.md","hash":"099d331e041671790bbc212d752d37b832868504","modified":1579287603896},{"_id":"source/docs/cockpit_explorer.md","hash":"b887c079e3442c4e48ea518de30c282186983c45","modified":1579287603896},{"_id":"source/docs/cockpit_introduction.md","hash":"e6c36e3bb3fae88eed1d17860a85ba0366b50009","modified":1579287603896},{"_id":"source/docs/cockpit_utils.md","hash":"9ed2f52f1a0b15fed6fc61e685558e1ed242cd1e","modified":1579287603896},{"_id":"source/docs/configuration.md","hash":"906896808f07737b17f5d8afd3aa713c22952349","modified":1579287603896},{"_id":"source/docs/console_commands.md","hash":"2855fb1b8ee0429e402450ed4d9f38dd2e145cb5","modified":1579287603896},{"_id":"source/docs/contracts_configuration.md","hash":"574ac3d6d2ac48282a8c60ea86d5f2a445426fb1","modified":1579287603896},{"_id":"source/docs/contracts_deployment.md","hash":"87cba365f821abd91399fd773048a02a0c897607","modified":1579287603896},{"_id":"source/docs/contracts_imports.md","hash":"a4d6267182dff8c7dc2a096bbda08bc9c45cbd96","modified":1579287603896},{"_id":"source/docs/contracts_javascript.md","hash":"336454607755a5580e0c36f3d9c60ddcf20318d4","modified":1579287603896},{"_id":"source/docs/contracts_testing.md","hash":"ccaa64628ab2ce6b42013a461a65c07668f4bb5f","modified":1579287603896},{"_id":"source/docs/contributing.md","hash":"5559d38ec006e0e67ee4a56dc657b0d44a08edb0","modified":1579467413009},{"_id":"source/docs/create_project.md","hash":"9650c8422979e82d7c91cb5f308dcd1895c27099","modified":1579467413009},{"_id":"source/docs/creating_plugins.md","hash":"2be705b9646c4041eb7d50a6b1641131f79bd497","modified":1579287603900},{"_id":"source/docs/dashboard.md","hash":"d24645009374a2a4dff4ddbb72bb85ff885d80a2","modified":1579287603900},{"_id":"source/docs/embark_commands.md","hash":"39cd9d4622035b3f2b82dc8fee5eab25cabe82a2","modified":1579287603900},{"_id":"source/docs/environments.md","hash":"c71903c0fd3349b905c8d6c659211fde5c6732e8","modified":1579287603900},{"_id":"source/docs/faq.md","hash":"8154c0047d7de4d63f6337769e7ead2542ffd9aa","modified":1579287603900},{"_id":"source/docs/index.md","hash":"f1870f73da1edb4a5b7a8aacb508e183ea88f7e5","modified":1579287603900},{"_id":"source/docs/installation.md","hash":"df32deb65494ea88439b710c0398d5074a5d2456","modified":1579467413010},{"_id":"source/docs/installing_embarkjs.md","hash":"cf7a19d5f0262f9da14ca33a45a32303c8874694","modified":1579287603900},{"_id":"source/docs/installing_plugins.md","hash":"4575e3c53d3a55d184d10ffb4900b59cf718390e","modified":1579287603900},{"_id":"source/docs/javascript_usage.md","hash":"70a188d16a66e2a1e2b524f04b140bbc3b397367","modified":1579287603900},{"_id":"source/docs/messages_configuration.md","hash":"bb298e851d786cbcb8431bb12bc24f81f9cb3de5","modified":1579287603900},{"_id":"source/docs/messages_javascript.md","hash":"57884a9cc96813469d1c097f08e95e56e62af2aa","modified":1579287603900},{"_id":"source/docs/migrating_from_3.x.md","hash":"707aa9b83492393615b16eb9bde367a0f99f1bf2","modified":1579287603900},{"_id":"source/docs/naming_configuration.md","hash":"a80f6e0dd9f3bb25ead13dc2cb2ab79799f38766","modified":1579287603900},{"_id":"source/docs/naming_javascript.md","hash":"5118e7571f0721579981f68c9ea9c8d127126a08","modified":1579287603900},{"_id":"source/docs/overview.md","hash":"3d4555bb0449f36d7283a9a1b8fdb10c5e1d8d5a","modified":1579467413012},{"_id":"source/docs/pipeline_and_webpack.md","hash":"2d4168eb25766e4558546043538283e87ec916ce","modified":1579287603900},{"_id":"source/docs/plugin_reference.md","hash":"ffc8755b9fee5db7123b120ca0430edb0129bb22","modified":1579287603900},{"_id":"source/docs/quick_start.md","hash":"c7944c6c0344696dc9a47f11a83f98b892ae2f87","modified":1579287603900},{"_id":"source/docs/running_apps.md","hash":"0519272706734c5f9e2184a9680e192e56a2ca47","modified":1579287603900},{"_id":"source/docs/sending_and_receiving_messages.md","hash":"3fe8e66233492f4fb312dcb90cc7ba74ba689ce4","modified":1579287603900},{"_id":"source/docs/smart_contract_objects.md","hash":"7e72a5d62e915d680ad7ed0adbd7c758eafa5a6b","modified":1579287603900},{"_id":"source/docs/solidity.md","hash":"2a8c16ac8c2d049b9d7d91f530b0dddd0f9d73b2","modified":1579287603900},{"_id":"source/docs/storage_configuration.md","hash":"bd275b61fe3b7cc3577f9d30e25d3e7ad7a76795","modified":1579287603900},{"_id":"source/docs/storage_deployment.md","hash":"2f31438f49648a497ffbae160e509bde0c9609ec","modified":1579287603900},{"_id":"source/docs/storage_javascript.md","hash":"f3996b2415cf4a277681f1708b06fe186a54ab2f","modified":1579287603900},{"_id":"source/docs/structure.md","hash":"507a4a506daa32ec5a49fd19f15b6100cf673c13","modified":1579287603900},{"_id":"source/docs/cockpit_debugger.md","hash":"f38a1789e23c0bfad66c116c38aaf6448365adb1","modified":1579287603896},{"_id":"source/docs/troubleshooting.md","hash":"ee789578225703a04e94e6eca209a694e39b02f3","modified":1579467413015},{"_id":"source/docs/using_storages.md","hash":"fcaa4c3846c063bc7f46afdf9f8c780f96125ede","modified":1579287603900},{"_id":"source/docs/using_the_console.md","hash":"1281c1d98732e0f173a865428b06a30da4dc9d76","modified":1579287603900},{"_id":"source/docs/vyper.md","hash":"987e6ad8e86fe7470c4db19a633179aa5b0a2acb","modified":1579287603900},{"_id":"source/docs/web3js.md","hash":"9ad98e255c60ba532b992fae75e903cdff981d60","modified":1579287603900},{"_id":"source/docs/webpack.md","hash":"012cdad1030fb7c45f47d0433ae56c963f635717","modified":1579287603900},{"_id":"source/docs/what_dapp.md","hash":"79502dafd6e70b81e69c6b0aee073f0dac5b1623","modified":1579287603900},{"_id":"source/docs/working_with_name_systems.md","hash":"c972b4ce78f98bb46bf7a245fb811be06d31e4c4","modified":1579287603900},{"_id":"source/news/index.md","hash":"0a8e37f1549e24d127e9b65773ae00826d0b53c6","modified":1579287603900},{"_id":"source/plugins/index.md","hash":"c500bda064f243bfb33b4dffbdf1cb4349bf0bd4","modified":1579287603900},{"_id":"source/templates/index.md","hash":"180f034b05fe0a621c3ccb05f87bf9ab6fde2978","modified":1579287603900},{"_id":"source/tutorials/infura_guide.md","hash":"4e9497c9737522860adc286e126e0f3d1d92cdf0","modified":1579287603904},{"_id":"themes/embark/languages/en.yml","hash":"aa8783506c3f4a09fd4d33bca0bc923fe09f4538","modified":1579287603904},{"_id":"themes/embark/layout/archive.swig","hash":"bbfbbbd37bd047ba20c9b68b036bdbeacbd47482","modified":1579287603904},{"_id":"themes/embark/layout/blog-post.swig","hash":"90595b22104a46c2fc32c25ff484855131df321e","modified":1579287603904},{"_id":"themes/embark/layout/blog.swig","hash":"96bfe880cf8e35c83f66281322ee1d0075161121","modified":1579287603904},{"_id":"themes/embark/layout/community.swig","hash":"feabc52f006a70402a4949c1782a7901a78c4cf3","modified":1579467413027},{"_id":"themes/embark/layout/docs-landing.swig","hash":"9b3cc62579713f7b4211010d66ad17f8f0c99d79","modified":1579287603904},{"_id":"themes/embark/layout/docs.swig","hash":"ca3eeb67eed027298adb8b979be6fda92a18a90c","modified":1579467413027},{"_id":"themes/embark/layout/index.swig","hash":"41aef7f9bffbc8ffe1b3419e596d69169c45692d","modified":1579287603904},{"_id":"themes/embark/layout/layout.swig","hash":"df1f72a8acb309f689760ba9a1ab293c4b1e86b0","modified":1580395967408},{"_id":"themes/embark/layout/page.swig","hash":"21801a7f37e340e45a30bfa5ccf122182d2adc5d","modified":1579287603904},{"_id":"themes/embark/layout/plugins.swig","hash":"b848b10690be2a83276026797e1c333a00596f0b","modified":1579287603904},{"_id":"themes/embark/scripts/checklist.js","hash":"9bb1f40b63fc1673655dac1b3205d5e597833536","modified":1579287603904},{"_id":"themes/embark/scripts/code.js","hash":"1ab08ac667d6ba3442305d6f117a5faa3032055d","modified":1579287603904},{"_id":"themes/embark/scripts/docs_paginator.js","hash":"38632311c2623fee67afc0cee307a17125871743","modified":1579287603904},{"_id":"themes/embark/scripts/is_quickstart.js","hash":"24bdbf644884697d7182c558d45b3fa18113176c","modified":1579287603904},{"_id":"themes/embark/scripts/notification.js","hash":"6dbbccb55c1940dac32140001b1afb19e59af819","modified":1579287603904},{"_id":"themes/embark/scripts/toc.js","hash":"0150d62da68310989db7c9cb74711f1031a7e62c","modified":1579287603904},{"_id":"source/plugins/thumbnails/bamboo.png","hash":"b7c9f4d84aa7d6642e4a822a7b66042ab2d33710","modified":1579287603900},{"_id":"source/plugins/thumbnails/fortune.jpg","hash":"f041a2bc22e374dd833e4b56066e7d3bf20d49f6","modified":1579287603900},{"_id":"source/plugins/thumbnails/haml.png","hash":"19c468e7d07eed1ddadc38818b8f9c350ebf8511","modified":1579287603900},{"_id":"source/plugins/thumbnails/pug.png","hash":"774bb436243175c41b9e4c51558a02e2262a7e47","modified":1579287603900},{"_id":"source/plugins/thumbnails/remix copy.png","hash":"0654c1ca096d7336391d50ffc27c64aa30a37b85","modified":1579287603900},{"_id":"source/plugins/thumbnails/remix.png","hash":"c288a89299382837bde8ce248b2d1265dff49083","modified":1579287603900},{"_id":"source/plugins/thumbnails/solidity.png","hash":"860e6c14fe1fc7799de218b11dbdda5cb73123d3","modified":1579287603900},{"_id":"source/plugins/thumbnails/solium.png","hash":"a8e525113fb9dff400e71b9762f537f82cfdb7ac","modified":1579287603900},{"_id":"source/plugins/thumbnails/status.png","hash":"452ce074cb13ffa9be473c7001c675b6b35f3780","modified":1579287603900},{"_id":"source/templates/thumbnails/angular.png","hash":"e50350df2526f0abf0a8d2e808085c24f2273662","modified":1579287603900},{"_id":"source/templates/thumbnails/bamboo.png","hash":"b7c9f4d84aa7d6642e4a822a7b66042ab2d33710","modified":1579287603900},{"_id":"source/templates/thumbnails/react.png","hash":"a6d33dab3a85a4d7004246e39a704869a6319306","modified":1579287603904},{"_id":"source/templates/thumbnails/sggc.png","hash":"f2742e7865280a840ccb8de8a466e7571947ec9a","modified":1579287603904},{"_id":"source/templates/thumbnails/typescript.png","hash":"bc3c71f25fc966f00c23df3222cde74c6e70c06d","modified":1579287603904},{"_id":"source/templates/thumbnails/vortex.png","hash":"ca5675313297535b416158e7a6b775bbe59f3a56","modified":1579287603904},{"_id":"source/templates/thumbnails/vuejs.png","hash":"85cb9bd3cf15f02dc2b44fbc9dffc2737c6a985b","modified":1579287603904},{"_id":"source/templates/thumbnails/vyper.png","hash":"ecbc1f9ce334685b0a1d9ec6da3ad98a69758f6e","modified":1579287603904},{"_id":"source/tutorials/infura_guide/api-keys.png","hash":"9ef67096142c2cd4dff7e391f2664e335d347517","modified":1579287603904},{"_id":"source/tutorials/infura_guide/lift-off.jpg","hash":"90d8d7604930e30d01aff8c1513412a75e8f4a58","modified":1579287603904},{"_id":"themes/embark/layout/partial/checklist.swig","hash":"a038b0b62e56710637ab3c67d180a27c08e5d18b","modified":1579287603904},{"_id":"themes/embark/layout/partial/checklist_item.swig","hash":"215f6e6f1d7e280990e86abdd56a98cc3c68a95a","modified":1579287603904},{"_id":"themes/embark/layout/partial/code.swig","hash":"7e2fba9a0ef75f26e19c5542ab61d5a951eeb2f5","modified":1579287603904},{"_id":"themes/embark/layout/partial/contributor-box.swig","hash":"5efb1e4b5584b26d37281c11282580ca46e9d879","modified":1579287603904},{"_id":"themes/embark/layout/partial/coverbox.swig","hash":"4346c1cec4aa2ac3455553266b9fc79a1f892c8f","modified":1579287603904},{"_id":"themes/embark/layout/partial/event-box.swig","hash":"b9cf7362d527eba61484ab709c01e4a612237e73","modified":1579287603904},{"_id":"themes/embark/layout/partial/footer.swig","hash":"0b0078e1db5f15f98ccc929121f32eb383f3f821","modified":1579467413030},{"_id":"themes/embark/layout/partial/head.swig","hash":"18fa0064c87fa85d6f12289204a76dbb2e12fa50","modified":1579287603904},{"_id":"themes/embark/layout/partial/header-blog.swig","hash":"2bb97428887b5a9f4d72c0393063ab9550d47a96","modified":1580234110678},{"_id":"themes/embark/layout/partial/header.swig","hash":"c007d93180cde8587c0d1412ea8c31545cabaa9d","modified":1580234110679},{"_id":"themes/embark/layout/partial/heading.swig","hash":"3a3a0760c31be524ba0208ed24cb0894481a2597","modified":1579287603904},{"_id":"themes/embark/layout/partial/notification.swig","hash":"bb1fdae3eb87feb344571a3d8636ea7daf166cd6","modified":1579287603904},{"_id":"themes/embark/layout/partial/paginator.swig","hash":"6f862b18625d7c824fbc32a6228e34686acf4fc7","modified":1579287603904},{"_id":"themes/embark/layout/partial/spotbox.swig","hash":"6f321dab798da2ca02623fa6dcc54cce7a30d13d","modified":1579287603904},{"_id":"themes/embark/layout/partial/universebox.swig","hash":"66bb32ae4f6821b449ddff58a790fc918cb21b29","modified":1579287603904},{"_id":"themes/embark/layout/partial/whisperbox-alternative.swig","hash":"7cb78c69cb4b058de3de13ef5485258f0e1f63fd","modified":1579287603904},{"_id":"themes/embark/layout/partial/whisperbox.swig","hash":"3c6e94cc8774d72cfb30218003f4a266772d238d","modified":1579287603904},{"_id":"themes/embark/source/css/_shame.scss","hash":"3558db6b81dd7b76e71c49d3260edddd57fa8dc7","modified":1579287603916},{"_id":"themes/embark/source/css/embark.scss","hash":"7ffcd12e49bffde3b86a34e8c4f6dff463741717","modified":1579287603916},{"_id":"themes/embark/source/js/index.js","hash":"cb46b90689c0ac59988a81d4d231ae2d4b9d3806","modified":1579287603916},{"_id":"source/assets/images/cockpit_debugger_controls.png","hash":"ba68f8b39e0d745e39a26d0bd8c9c3bfea5ad8c5","modified":1579287603664},{"_id":"source/assets/images/crystal-thread-test.png","hash":"4e8aa7ac613a332960de0117141ed1e33b14d9f1","modified":1579287603792},{"_id":"source/plugins/thumbnails/mythx.png","hash":"7d1972d98ddd2bc13afbb0049d45f157d8cdf675","modified":1579287603900},{"_id":"source/assets/images/token_factory_1/page_1.png","hash":"6babcba0bca8fc8a48a0eed7045396f9c3fb55af","modified":1579287603876},{"_id":"source/assets/images/token_factory_1/page_2.png","hash":"4fa5a22eb63587f424a2742e7f14f39e6e6e4c9d","modified":1579287603880},{"_id":"source/assets/images/token_factory_1/page_3.png","hash":"08a8a87009da0594ac5c763e269082ed489c9b31","modified":1579287603880},{"_id":"source/assets/images/token_factory_1/page_4.png","hash":"78a3cbea0a3a686847fa7024a634bc28b38e7c08","modified":1579287603880},{"_id":"source/assets/images/token_factory_1/page_5.png","hash":"1938ae333249ead32842d39f36dc7d7742e97a95","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_1.png","hash":"d0c1bdc7478dcc4878239b2924107df50608d97a","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_2.png","hash":"238f769f8834d36a088f6352d5e8b056d339fa7d","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_3.png","hash":"8eca458e6e78457f268142f45542c2a919ab07af","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_4.png","hash":"92dd82374e8ccd6f258481fc69ebdc2aa16c0532","modified":1579287603880},{"_id":"source/assets/images/token_factory_2/page_5.png","hash":"ea35b940330be24051ac278a8ad6d239a93c3fd5","modified":1579287603884},{"_id":"source/assets/images/token_factory_2/page_6.png","hash":"b672160f850fcd590050dfbc268ec03c1027072f","modified":1579287603884},{"_id":"source/assets/images/token_factory_2/page_7.png","hash":"da58b3365e3b6841ffdcfbf6c5b8a6152daa9a49","modified":1579287603884},{"_id":"themes/embark/source/assets/icons/app-window-search-text.svg","hash":"a7658278c51714beb9a4aa378074b0f1a2a3811a","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-down-1.svg","hash":"cf919e204adc66907e541c5a32a6cdb8bd86e9d7","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-left-1.svg","hash":"6a5b3fe7927e03320be668170011aba2d461d1af","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-right-1.svg","hash":"5948e9eda884b948d0c668ae51f99509d2cfa631","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/arrow-up-1.svg","hash":"e4e31a2af62c2838e1871dfd72203b9a94ae8ae9","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/browser-gauge.svg","hash":"4ab8c84f8c5cc2ece1a2847ef8d9f2c9b842609f","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/check.svg","hash":"94cb2741b66a54d22bbacdf65c5bbf1f4de59c4a","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/close.svg","hash":"07c332a892c2b2a107bf53a055425064006b7161","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/computer-bug-search.svg","hash":"720717cc34ce43565de8ab4a360603c2c55092a7","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/copy-paste.svg","hash":"6a11ff19bd04cf7774d7155a535eb68be3dbb592","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/crypto-currency-bitcoin-circle.svg","hash":"6feceaadc9ee12a3e457d94a3d548a3d82213b92","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/github.svg","hash":"6b9fba84ce16f0f8278ca4eb00ced1c5b13109f4","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/list-to-do.svg","hash":"6954c1ea40469c5548ff8c3daba91ea3e883dab4","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/module.svg","hash":"cf1284f20a532fc451ba6cd443ff1534e63b6779","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/navigation-menu.svg","hash":"d6b4d9e2da8849ac362bcb8d634725b921ebf46c","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/notes-paper-text.svg","hash":"fc8a3304cfc24437597a565290c6b1095fa365f7","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/paginate-filter-video-alternate.svg","hash":"a2953dbbdcd49ce07a7aa90be9803d5e44a77688","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/pen-write-paper.svg","hash":"a2828e87d8ea6f6d965a1aae8ab450c3bba19564","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/pie-line-graph.svg","hash":"d8a9dad5f7377b12b3130d964f7fe3d03de80d1a","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/rating-star.svg","hash":"961c6f9cf48e662267cdfb609e89f3234e1c84c0","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/search-bar.svg","hash":"6e3dfc910fda432935eaf7a6170bf1f6be8c7a21","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/symbols.html","hash":"d13ca80e28788a3fffb404dd5dff6225139b38a9","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/symbols.svg","hash":"d34c6846fa16190a9e264d9f1cbf40e12ae8f410","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/tag-new-circle.svg","hash":"3a155bcde805c6101d431c08a093a5ffed37dfeb","modified":1579287603904},{"_id":"themes/embark/source/assets/icons/twitter.svg","hash":"90e4959062ea5bc14eb10f182c1c9859dcc0b168","modified":1579287603904},{"_id":"themes/embark/source/assets/images/Nimbus.svg","hash":"f0ea3f6a1804fc951901bdf3c3ec84ebcbcfb1b3","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-120x120-precomposed.png","hash":"2b599bbb36131a537d0a2db417eefd8cb2a348f7","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-152x152-precomposed.png","hash":"8f2800d891c5e1374cef4f3fcd26575f46748e5c","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-180x180-precomposed.png","hash":"451e3cfad6ebe9dad9eb35af1d7c113b2f76f143","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-60x60-precomposed.png","hash":"aa89e00d7671bfa8add7afc2ee25e84cf93319b3","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-76x76-precomposed.png","hash":"99cd68afb86ecab681c217b0eeffed8163f228e6","modified":1579287603912},{"_id":"themes/embark/source/assets/images/apple-touch-icon-precomposed.png","hash":"451e3cfad6ebe9dad9eb35af1d7c113b2f76f143","modified":1579287603912},{"_id":"themes/embark/source/assets/images/company-flexdapps.svg","hash":"ae7686cb0c918a69b497774fba8829cb3df89858","modified":1579287603916},{"_id":"themes/embark/source/assets/images/company-giveth.svg","hash":"8d611a8a4c94e2bb13da7661195cb44d3ee163f4","modified":1579287603916},{"_id":"themes/embark/source/assets/images/company-status.svg","hash":"5729e8db16b262cb6c3ca91113500b1895f24768","modified":1579287603916},{"_id":"themes/embark/source/assets/images/dots.png","hash":"2f22dcbbe2b643819e263bc292732d0875e9f24e","modified":1579287603916},{"_id":"themes/embark/source/assets/images/favicon-16.png","hash":"db9d7be08c2096635e4acd9f00fb56c04aafa7a5","modified":1579287603916},{"_id":"themes/embark/source/assets/images/favicon-32.png","hash":"b841b7f468325cab45486b1a25343e0f0654ef0d","modified":1579287603916},{"_id":"themes/embark/source/assets/images/keycard-logo-negative.svg","hash":"b93278634ae78c759a0439a7d8c275889ae90e8f","modified":1579287603916},{"_id":"themes/embark/source/assets/images/logo-negative.svg","hash":"2eb5bdd4eb9aac594e7fcbb7ff0fb7456d6c1fd1","modified":1579287603916},{"_id":"themes/embark/source/assets/images/logo.svg","hash":"0bc239291c9f4732df92ed67b5f80d7392d9920a","modified":1579287603916},{"_id":"themes/embark/source/assets/images/rocket-start.svg","hash":"1c2121ac58f2ea3916de10a4667518b653ce83a7","modified":1579287603916},{"_id":"themes/embark/source/assets/images/status-logo.svg","hash":"80e9ac5ea6f37880927c680f66d41f2acd751873","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color-brand.scss","hash":"1fb90cf4cd3da1241355f85a5185e0aa31dc5263","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color-layout.scss","hash":"4ec42cab6f2b425240cb7254bdb7c81d13dc7198","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color-semantic.scss","hash":"434b52490937e1471d95a143b70381a2f4bb619c","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-color.scss","hash":"c9ff601899d050f74893a8eb7d5d2df42cb5a217","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-inset.scss","hash":"6fe46f2345b2420307f4d67eff32036055795272","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-squish.scss","hash":"940d65a07b14673ffd3da63a75937c3125981e91","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-stack.scss","hash":"a8a2c86786d30bfd8bd2c8d3ac180ea7003cc725","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-stretch-inset.scss","hash":"eecce95964b8897de6054fb5fc5eab3a676094b6","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.border.scss","hash":"b15fd59a3abba1a570659792270550c6f3cbeb88","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-brand.scss","hash":"bf20393b0cce0cf2847cc897fa559fce66d42d2b","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-layout.scss","hash":"a8b5170ae33e09a75f6f845a4873ca63f408adb0","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-palette.scss","hash":"903b152e109e80753a4051b1d19ba0726d19da8b","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.forms.scss","hash":"b1dde72a9cdba6355472369155b38dea4f1bef77","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.indecies.scss","hash":"3c394d06e65163811e8d884286235d202d0f3403","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.color-semantic.scss","hash":"262bcab015c3f323b375e6dee538a212a60426ad","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.layout.scss","hash":"3e67200fb9444187aab60a1282549b0075437877","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.links.scss","hash":"65637c528bfd48c7b023fc94e28358fc58c0a8f6","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.misc.scss","hash":"e7bf80f32564301cc1e41ccfdba1ee1749ae525c","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.spacing.scss","hash":"8cf54f8146fad87f59d45ec053df7f1ff8345cbe","modified":1579287603916},{"_id":"themes/embark/source/css/00-settings/_settings.typography.scss","hash":"3e3b83e8fe1d28c9ad156fa33555ae8674c746cc","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.border.scss","hash":"a9b21ea9d1cf2bf5877c1c9c50c4fe4996b69ff0","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.box-shadow.scss","hash":"ec0081d8b10eeb945eebf744742ea6417c384b8c","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.breakpoint.scss","hash":"7b261864e28b0ec16781bc24065450caf2b70abe","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.clearfix.scss","hash":"266582ce0ffe5eb0622868370dc9ac8e6acea737","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.column.scss","hash":"c588b90cb648c979a391658ed337e00daecdb271","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.list-reset.scss","hash":"406d4d60d370decc9d7f3d5a8eb3308bb8fae6c8","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.overlay.scss","hash":"b1cf5a920ba83db93aa649f2ddf98ef858bb1bce","modified":1579287603916},{"_id":"themes/embark/source/css/01-tools/_tools.placeholder.scss","hash":"baf73d8af13039931a6f0b8b22279c3f1bfdf267","modified":1579287603916},{"_id":"themes/embark/source/css/02-generic/_generic.box-sizing.scss","hash":"26b7b6efad6435f49a808080ca987f123bf2ab8e","modified":1579287603916},{"_id":"themes/embark/source/css/02-generic/_generic.reset.scss","hash":"8a50750b05184887d7290f2360ce72a94e84ca64","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.buttons.scss","hash":"4842d392957b128f686eea568d896efb45f9f834","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.forms.scss","hash":"f45be318ebb22533e8e266b2eebe43ddb0937bf4","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.headings.scss","hash":"de758429ddb890d33564356af3ca61debc2ef155","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.images.scss","hash":"0a52090c19650caf47b7f848b28786e8eddb89d5","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.links.scss","hash":"f2e98137d2d3ca5092c73f70cc4e28ad393b039f","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.lists.scss","hash":"a388a10af8a7ca3f0b6ec74fe0efdb9e2296aacb","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.tables.scss","hash":"81d33b10eecfb74e8ddbeb150c8f497dbfcff11f","modified":1579287603916},{"_id":"themes/embark/source/css/03-elements/_elements.typography.scss","hash":"44d0622de4f290e6d2c8ed34cfd750e056bf6711","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.buttonbar.scss","hash":"8f6bc88ec9125075b147f1477b439e6e9413b42b","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.distances.scss","hash":"c21f0844a596e8410fb594c0d97eb2e12b22f8f4","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.footer.scss","hash":"366eafaf766cd95a5b195b914cee0c4d227b104d","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.grid.scss","hash":"da7c0ebf630f220f858044f4edceadea9abbfd12","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.guided-content.scss","hash":"3a6d8159ce5c47e2a72d00184aa28719285303e3","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.head-up.scss","hash":"b50eaa3fab38d2e9f1230a12f8542917cdc172e5","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.header.scss","hash":"471289d74d223952cb5eab924854aa79df0622e6","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.heading.scss","hash":"7579f117e65d258c46aaa437f07f9f092b2db596","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.list-bare.scss","hash":"767f64a9bd40b16cf72efefe731fecebc2565fa8","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.list-inline.scss","hash":"1b36ae3bb253a87edb4db15f9b875e10ba146906","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.media.scss","hash":"332888a05a775f5b7f550f2d58c9ff329cfaaef1","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.overlap.scss","hash":"4a0ae3a2032bc450d3d4693d92b49965ecbc6620","modified":1579287603916},{"_id":"themes/embark/source/css/04-objects/_objects.standard-page.scss","hash":"ab662003b9c21f5da3fdde6f66d70e8aa82dd8d8","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.avatars.scss","hash":"c2dbff38e210486f01e9fcd8703329f773129545","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.boxes.scss","hash":"5d3fcd7009b24671f56fbb3c6c1884157b056a3e","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.button.scss","hash":"c43f5627dd9a80e64f024b9f484d9a7a833febc8","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.checklist.scss","hash":"29f16754036ca4fcec731597a416c98787a744d2","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.guide.scss","hash":"cdafd26c3ee6c739f9bbfce0125645a0b7b3bd0a","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.headings.scss","hash":"5f583822f762f99d00187935d933770972294413","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.highlight.scss","hash":"69476a68de00e2e290fa84fffdec9b99f7459acf","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.icons.scss","hash":"4ddbc047a971df8f6878e173bdbc79db8d67f8d4","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.links.scss","hash":"59ad321a05677c8716fbace182288551ea04530b","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.logos.scss","hash":"afa93ec0d91281c5bb3e4b0f3685b65217a07514","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.meta.scss","hash":"e0edb9b8a27121f70302608a4ae3ef51d7a809c1","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.navigations.scss","hash":"2a03188aac7dc518f519139ec44566bcebf6c51e","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.notifications.scss","hash":"c43dcef42e77778a863ebf39835814b363703ba7","modified":1579287603916},{"_id":"themes/embark/source/css/05-components/_components.tags.scss","hash":"0296364650db159da3659e9c8659d1ba46d3f455","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.links.scss","hash":"0876483cf965935ddf3264de0cc947a9b5240093","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.list-reset.scss","hash":"621869acabfcf504dad7983ef7770919d9aa39e4","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.text.scss","hash":"451861b375641c6efbfa22e1e0b398feed1aa7b8","modified":1579287603916},{"_id":"themes/embark/source/css/06-utilities/_utilities.visibility.scss","hash":"83eff52a70c64c2c2c6da20765ad9f2c94bca71f","modified":1579287603916},{"_id":"themes/embark/source/js/linkjuice/.babelrc","hash":"7224f35c4916aa40abdd0f9597b7997015d83533","modified":1579287603916},{"_id":"themes/embark/source/js/linkjuice/.editorconfig","hash":"62e8da92cc4bedb619b57f573fe8b931cce190a6","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/.gitignore","hash":"3f33fc2aefbc0b8c9650ad620d14aa5e3c8e4604","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/.jshintrc","hash":"1725359358cfcb1a42b09c8441cea8322803a2a2","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/README.md","hash":"f15e54a42ccce6a7830526e4c70504c0d604daaa","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/gulpfile.js","hash":"c160dfead280a588086115a45a895549b99ed458","modified":1579287603920},{"_id":"themes/embark/source/js/linkjuice/package.json","hash":"28edd71a4c5ef266af83c60d68a85883755c1a3e","modified":1579287603920},{"_id":"source/assets/images/cockpit_dashboard_release.png","hash":"096b0b893f3d467919edd968ce827985e1f233f0","modified":1579287603664},{"_id":"source/assets/images/cockpit_editor_release.png","hash":"c912dcedf5db89e08e491d1b49f7b07795bdcf21","modified":1579287603680},{"_id":"source/assets/images/nimble-creating-app.png","hash":"30bdcea82d2a7e7b063dfeca277438ae9a9a44f4","modified":1579287603808},{"_id":"themes/embark/source/assets/images/bg-hexagons.png","hash":"d2a3d73d939c8d6a34f04741231739d25d81c1a8","modified":1579287603912},{"_id":"themes/embark/source/css/00-functions/_functions.get-spacing-inline.scss","hash":"fc62e3c3e377d2db64a809986900e99e79fd10ba","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-index.scss","hash":"2f2f39faafa8d4b216be83c6fd4b25a030e39fc8","modified":1579287603916},{"_id":"themes/embark/source/css/00-functions/_functions.get-font-size.scss","hash":"006929f9ec36f9253467851dce1b3de5479c6b9e","modified":1579287603916},{"_id":"source/assets/images/cockpit_contracts_view.gif","hash":"999f406795198c3d8651e61d7e0b251f7320d98c","modified":1579287603632},{"_id":"source/assets/images/cockpit_selective_deployment.gif","hash":"1d9e6e6a5d1c98da71e316c7cfb4ac7aff6c5708","modified":1579287603768},{"_id":"source/assets/images/nim-crystal-header_blank.jpg","hash":"9da5d1642a4ad2ba3af71504589a5ced42a4ab8f","modified":1579287603808},{"_id":"source/assets/images/token_factory_1/console_2.png","hash":"82a4f8163e92edc66a14726a97e6f3d586fc5ec9","modified":1579287603808},{"_id":"themes/embark/source/assets/images/tool-screenshot.png","hash":"9cfaabed43e1453cdf1edb60238f2aeaa3b7ad07","modified":1579287603916},{"_id":"themes/embark/source/js/linkjuice/src/linkjuice.js","hash":"c9145e827c4a9c35575911407b9a7e65c48ae858","modified":1579287603920},{"_id":"source/assets/images/nim-crystal-header-img_NEW.jpg","hash":"f0716491dd88db1d137c915879e66694844ea334","modified":1579287603804},{"_id":"source/assets/images/token_factory_2/console_2.png","hash":"4efdab7b54dacafc83854b6dc7d73addf9fe8ade","modified":1579287603880},{"_id":"source/assets/images/cockpit_dashboard.png","hash":"aa995f3517e692402819dc004010c9f45960a7a5","modified":1579287603636},{"_id":"source/assets/images/cockpit_dashboard_dark.png","hash":"69148b6547065adcd5583118286f74aff9a29889","modified":1579287603660},{"_id":"source/assets/images/token_factory_1/console_1.png","hash":"fd0c379505c036ad151b01a5a28b610df190d3d6","modified":1579287603808},{"_id":"source/assets/images/cockpit_explorer_block.png","hash":"e9f398fc9eacf99b3e64997c3724ec541875e144","modified":1579287603724},{"_id":"source/assets/images/token_factory_2/console_1.png","hash":"9d35e99618f0ff90911672eaf7765a48ab84f94e","modified":1579287603880},{"_id":"themes/embark/source/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","hash":"9d767c14d82980b184cb6d9a1746f986c21cec8e","modified":1579287603908},{"_id":"themes/embark/source/assets/images/cli-tool.png","hash":"21fa930acb0a5259f9f35b37d14bc4b11fd9120d","modified":1579287603916},{"_id":"source/assets/images/cockpit_explorer_overview.png","hash":"86a94110f1ae3fe956a5efb1b165902c63fa35d8","modified":1579287603736},{"_id":"themes/embark/source/assets/images/EMBARK_MODULAR.png","hash":"38677401713a7583c44d97e59eb5bcc3c8fb8386","modified":1579287603912},{"_id":"source/assets/images/cockpit_explorer_contracts_detail.gif","hash":"2464c474ba42193ca58df7288c2afc81608657c0","modified":1579287603732},{"_id":"themes/embark/source/assets/images/EMBARK_FRAMEWORK.png","hash":"6113f59cb45baf50f78c13684f366b3b2ba11239","modified":1579287603908},{"_id":"source/assets/images/embark-dashboard.png","hash":"fbfa1764086f3c436172bc8c812452a99c8d8f79","modified":1579287603800},{"_id":"source/assets/images/website_release.png","hash":"4625f3ee3f58fae5d2c2dc7b10fc8d2547c6a448","modified":1579287603896},{"_id":"source/assets/images/cockpit_explorer_transactions.gif","hash":"fd74abafca81d5a2986f57d72147b228b06f075d","modified":1579287603744},{"_id":"source/assets/images/cockpit_suggestions.gif","hash":"2e004a561dda70e22effa1af96315bb9d2314758","modified":1579287603784},{"_id":"source/assets/images/cockpit_using_debugger.gif","hash":"72acc4d2ab4f9b342749519b69455e30fd4e24c0","modified":1579287603792},{"_id":"source/assets/images/cockpit_search.gif","hash":"c797eb599b822ca56f57cfa882967f23b27d62f9","modified":1579287603768},{"_id":"source/assets/images/cockpit_explorer_account.gif","hash":"a9c557a12ff36090c6a41c265bbd8eb9285de657","modified":1579287603716},{"_id":"source/assets/images/cockpit_editor.gif","hash":"3ce64fcf60098d6954d4a021ef4d2f2c20e1dc46","modified":1579287603676},{"_id":"source/assets/images/cockpit_enter_debugger.gif","hash":"f3374c1898aba97acb7d53779d4e8fc9643d2dff","modified":1579287603696},{"_id":"source/assets/images/cockpit_navigation.gif","hash":"7ed00581b8752de847a7e7e2d2c6e47bc961614a","modified":1579287603756},{"_id":"source/assets/images/cockpit_change_theme.gif","hash":"fe6c1c931e3db5c069a158bf7da7fd732d0f39bc","modified":1579287603632},{"_id":"source/assets/images/cockpit_dashboard_contracts.gif","hash":"1792d363902a2ec8f26f7596bffc4431461f2fee","modified":1579287603660},{"_id":"source/assets/images/token_factory_1/dashboard.png","hash":"bfb37f6fe22c28ac3cfa10b100e2db47acf5f6ca","modified":1579287603876},{"_id":"source/.DS_Store","hash":"388ff7bec88d20496fcfb7869ca9aefb6d504b1b","modified":1580238088484},{"_id":"source/_posts/2020-01-27-web-app-security-frontend-to-backend.md","hash":"d69fe3a5216e37c06390e3f1b0ee141cb288047b","modified":1580237771508},{"_id":"source/_posts/2020-01-28-embark-5-1.md","hash":"d4aad91d8ffac95ef4637f7965107469888f6e04","modified":1580234109597},{"_id":"source/assets/.DS_Store","hash":"663ccef78538c09fc70cf73b359272828aef3132","modified":1580237849355},{"_id":"source/assets/images/web3-js-diagram.png","hash":"5cc26458f47462ce25a80abca52a4cc2e90de9e4","modified":1578640785567},{"_id":"source/assets/images/embark-header_blank.jpg","hash":"9da5d1642a4ad2ba3af71504589a5ced42a4ab8f","modified":1580234110379},{"_id":"source/assets/images/web3-article-header.png","hash":"48e3fc72598773913bbfbde2f13c3feca8008578","modified":1578640785563},{"_id":"source/_posts/2020-01-30-dapp-frontend-security.md","hash":"79159d525961c5fc9601e47e11fcccfcc7fb7314","modified":1580395967141},{"_id":"source/_posts/2020-01-29-subspace-1-2.md","hash":"755e9286ca8c69e06ffca1f21b18aaf874fe4cea","modified":1580395967140},{"_id":"public/news/2018/05/03/embark-3-0-released/index.html","hash":"04863ad015f67a869ee97fcdd92448279dc9f31d","modified":1580396052287},{"_id":"public/news/2018/06/19/embark-3-1-released/index.html","hash":"b4e3e91afb33cc3bab7ebc9800fdb17e5c0a7d8e","modified":1580396052287},{"_id":"public/news/2019/01/27/running-embark-tests-on-a-continuous-integration-server/index.html","hash":"8581d68dc4c21abaf79a0332e89ed0a40ba57695","modified":1580396052287},{"_id":"public/news/2019/03/18/introducing-embark-4/index.html","hash":"35db163b83fb31fee9147a973752cc75ceabf2d5","modified":1580396052287},{"_id":"public/news/2019/07/22/whats-new-in-embark-4.1/index.html","hash":"1b601a363112f4bb4e39b517161542fa682ba8ec","modified":1580396052287},{"_id":"public/tutorials/token_factory_1.html","hash":"9eb0272fdcac1d979f2dbe033aa642be64a0a55c","modified":1580396052287},{"_id":"public/news/2018/09/26/how-to-create-a-token-factory-with-embark-part-1/index.html","hash":"9eb0272fdcac1d979f2dbe033aa642be64a0a55c","modified":1580396052287},{"_id":"public/tutorials/token_factory_2.html","hash":"493a5cc1f610cc43357635e152b8c4f4d0128eb6","modified":1580396052287},{"_id":"public/news/2018/10/26/how-to-create-a-token-factory-with-embark-part-2/index.html","hash":"493a5cc1f610cc43357635e152b8c4f4d0128eb6","modified":1580396052287},{"_id":"public/news/2019/01/22/building-smart-contract-only-dapps/index.html","hash":"45c7ee816caacae0a679953449c0ffd792817e32","modified":1580396052287},{"_id":"public/news/2019/02/03/building-a-decentralized-reddit-with-embark-part-1/index.html","hash":"1ac6ee5ce40cb9194233d0074cdc9bb78eadecb5","modified":1580396052287},{"_id":"public/news/2019/02/10/building-a-decentralized-reddit-with-embark-part-2/index.html","hash":"1fd1dad46c04a56c2bcc72df3efe74f1c8828bff","modified":1580396052287},{"_id":"public/news/2019/03/17/upgrading-to-embark-4/index.html","hash":"1fa6f4fa31b395de39c1dfbb653dd7d7124a80a5","modified":1580396052287},{"_id":"public/news/2019/02/17/building-a-decentralized-reddit-with-embark-part-3/index.html","hash":"768cd554da3744fbca4da5980bb8a5f94de17251","modified":1580396052287},{"_id":"public/sitemap.xml","hash":"f8722f93d77140b7d9487a102367b2ed1a3f1944","modified":1580396052287},{"_id":"public/atom.xml","hash":"7fa57803f78f8addff3ba3f2950ad43eb7b9e67a","modified":1580396052287},{"_id":"public/chat/index.html","hash":"03de9f2dfaab3207ceff2e9c87d583673943249e","modified":1580396052287},{"_id":"public/docs/bamboo.html","hash":"c36799985541f09731148c719cd4a98d41584bfb","modified":1580396052287},{"_id":"public/docs/solidity.html","hash":"626764768fedb26979a87b9cc4c10ba2cc827e84","modified":1580396052287},{"_id":"public/docs/vyper.html","hash":"7dd4a695d245641d21ce7a535c176716f0d349df","modified":1580396052287},{"_id":"public/docs/web3js.html","hash":"1bfae409da689255647e43eba26514a56eb8fe4b","modified":1580396052287},{"_id":"public/docs/webpack.html","hash":"714e602f2cabc641457a9ea0bf6ed4ac591416dd","modified":1580396052287},{"_id":"public/docs/what_dapp.html","hash":"ab039226754b2e755d0acf5441aa3db47e69ffd8","modified":1580396052287},{"_id":"public/news/2018/06/20/embark-3-1-released/index.html","hash":"5b579c2282a9c7cd36f36723d5e9ba637929f83d","modified":1580396052287},{"_id":"public/categories/announcements/releases/index.html","hash":"2d20bcdef998e8f5408d9611b5eb01cc1cb3c3a2","modified":1580396052287},{"_id":"public/archives/2017/index.html","hash":"68cc131f90ddd24b9f1a4e2632cf0638b55f3678","modified":1580396052287},{"_id":"public/archives/2017/06/index.html","hash":"4b43225e097653931eeec75a02aa5ab048450107","modified":1580396052287},{"_id":"public/archives/2017/10/index.html","hash":"76fe919fe378adc5102a6988f37f8d6b7182d76e","modified":1580396052287},{"_id":"public/archives/2018/05/index.html","hash":"b42269020d094b9bc3c4e682be769db423200099","modified":1580396052287},{"_id":"public/archives/2018/06/index.html","hash":"b116e32765c1c3a704be85168916a065aef8fe05","modified":1580396052287},{"_id":"public/archives/2018/09/index.html","hash":"b2cc687dcb11794b4ec96160108b8e0e6397fff9","modified":1580396052287},{"_id":"public/archives/2018/10/index.html","hash":"28ed062c3220ef7d852c236523888b8851c4148b","modified":1580396052287},{"_id":"public/archives/2019/01/index.html","hash":"aebab72b47491884cf141d19b7ce0567ff0b9aa7","modified":1580396052287},{"_id":"public/archives/2019/03/index.html","hash":"b5bf5ee966ad43ea6deb2a84d776858ebe265880","modified":1580396052287},{"_id":"public/archives/2019/07/index.html","hash":"1d08ec3944268193700ce1dde21fb42ea836c7a3","modified":1580396052287},{"_id":"public/archives/2019/12/index.html","hash":"3f7862d3e1648c3d85cceeef05d7087aba2aa93d","modified":1580396052287},{"_id":"public/index.html","hash":"a1f088f03e5b4ac74c4cbceda7427f6b48bd93c0","modified":1580396052287},{"_id":"public/community/index.html","hash":"d5f88d8d211a861e1ffe6ab50d679b954b560adb","modified":1580396052287},{"_id":"public/docs/blockchain_accounts_configuration.html","hash":"5903d0c68e4458dcd747b5763990adb5723709bc","modified":1580396052287},{"_id":"public/docs/cockpit_dashboard.html","hash":"2f50d2cdef0ba731383d704d4dd67a81f6d7b05d","modified":1580396052287},{"_id":"public/docs/cockpit_deployment.html","hash":"30c248f06cd1245aa0ca450a328980d413be058a","modified":1580396052287},{"_id":"public/docs/cockpit_editor.html","hash":"008f46783c036d12133637789ad184be58513613","modified":1580396052287},{"_id":"public/docs/cockpit_explorer.html","hash":"abbe08a406091168152f0e5d36bf7882d4514c9e","modified":1580396052287},{"_id":"public/docs/cockpit_introduction.html","hash":"953391a1d6a3b767daf1486008d6f17b9fc0fc79","modified":1580396052287},{"_id":"public/docs/cockpit_utils.html","hash":"2e39ccaa054c1166586b87f54f13c6ce357a748e","modified":1580396052287},{"_id":"public/docs/configuration.html","hash":"603ea9265eb4984089cc159b4ad9b705d5487662","modified":1580396052287},{"_id":"public/docs/console_commands.html","hash":"3495a32422546e0aa0f29a53ff2b55dda27ec74f","modified":1580396052287},{"_id":"public/docs/contracts_deployment.html","hash":"3ff759f6bb83555fc02226fdf520922f1fcf6ef4","modified":1580396052287},{"_id":"public/docs/contracts_imports.html","hash":"30ec8ba384a7fa8ab0fbcd8338b0497da694843e","modified":1580396052287},{"_id":"public/docs/contracts_javascript.html","hash":"8d7af91b246c630f4e871e1b3e1c66b2ae4222b5","modified":1580396052287},{"_id":"public/docs/create_project.html","hash":"365035ddf9b9a508812eaa892fe95339c6114c0e","modified":1580396052287},{"_id":"public/docs/creating_plugins.html","hash":"12b29603f657682cd2490ef4dc386114af91d306","modified":1580396052287},{"_id":"public/docs/dashboard.html","hash":"9d2838f89de7761ff6074f6fa4ff62d638a8adff","modified":1580396052287},{"_id":"public/docs/embark_commands.html","hash":"da409f9778290c855584def321871415edee413d","modified":1580396052287},{"_id":"public/docs/environments.html","hash":"5760984a645f1d1e7daadfb5a46d26cbf2aed89a","modified":1580396052287},{"_id":"public/docs/faq.html","hash":"c5beaab96820b0b3fa50bc8abc854fe32c44d276","modified":1580396052287},{"_id":"public/docs/index.html","hash":"6fd1869a460b636a33881f61da27e6e09269a264","modified":1580396052287},{"_id":"public/docs/installation.html","hash":"251b88f60926f71dff2285b4cc3b4f2a8abc138d","modified":1580396052287},{"_id":"public/docs/installing_embarkjs.html","hash":"cc25728c1154acdcc333e67d6def1c5224465e89","modified":1580396052287},{"_id":"public/docs/installing_plugins.html","hash":"4cd9ded7b06a1af2ba6cd93eaed905f982a02e3e","modified":1580396052287},{"_id":"public/docs/javascript_usage.html","hash":"43d3d2a32d02a604e92a969dbea5a6ab857ebb16","modified":1580396052287},{"_id":"public/docs/messages_configuration.html","hash":"8346910b2a06fdc90de44a0551709a297cf5b8a0","modified":1580396052287},{"_id":"public/docs/messages_javascript.html","hash":"bf29d3593f6eb1f9c5e760eb6707fdb6c3a99b92","modified":1580396052287},{"_id":"public/docs/migrating_from_3.x.html","hash":"a0deceb9da587b78a0f3cea5eb44a4a3ff9f7b5d","modified":1580396052287},{"_id":"public/docs/naming_configuration.html","hash":"d1f3b6e9c04b6ebfc161625df8342c933e9aa314","modified":1580396052287},{"_id":"public/docs/naming_javascript.html","hash":"e0b5fac389585c373391d631b17515f6acbb119e","modified":1580396052287},{"_id":"public/docs/overview.html","hash":"d4b2fd03853236f67b42a2cf475a3a0ee15ba246","modified":1580396052287},{"_id":"public/docs/pipeline_and_webpack.html","hash":"773408a7c20497a798b7668c9f058485bac301ae","modified":1580396052287},{"_id":"public/docs/quick_start.html","hash":"df7ad296927e99f8a9402fae8c9f7597c915d034","modified":1580396052287},{"_id":"public/docs/running_apps.html","hash":"14f8b75e55098e56ac4f3f447d65ad37fcae2efb","modified":1580396052287},{"_id":"public/docs/sending_and_receiving_messages.html","hash":"29b62673bc3be71462f26a77aa18c91b60883fc7","modified":1580396052287},{"_id":"public/docs/smart_contract_objects.html","hash":"cd6e92e959e0fd63d68f9ebccd854165fabfea22","modified":1580396052287},{"_id":"public/docs/storage_configuration.html","hash":"6095ecc442da5854a3fcabebf09cf6050604848f","modified":1580396052287},{"_id":"public/docs/storage_deployment.html","hash":"66302801c15b5b96155978fbe90283c15bff8c4a","modified":1580396052287},{"_id":"public/docs/storage_javascript.html","hash":"10e6e300f670c60da00492b3b8c43762dc8972d6","modified":1580396052287},{"_id":"public/docs/structure.html","hash":"37591f7dfa44e5d04d7976450055e4ab6886f96d","modified":1580396052287},{"_id":"public/docs/cockpit_debugger.html","hash":"0d8d788ab0fd9123146697fab0be18170d4da20b","modified":1580396052287},{"_id":"public/docs/troubleshooting.html","hash":"c566cffb4da88e26d429a756fc0ac32d3925c8e9","modified":1580396052287},{"_id":"public/docs/using_storages.html","hash":"ca5b1bd349f79d241724ca7af55bb6983f815a90","modified":1580396052287},{"_id":"public/docs/using_the_console.html","hash":"55a5344c5d6dcfdd8a0ce84df6ec7b06c2fb1eec","modified":1580396052287},{"_id":"public/docs/working_with_name_systems.html","hash":"570cdff90a94d5ca4ec483bd382769b388a6b7bf","modified":1580396052287},{"_id":"public/news/index.html","hash":"288972439155e1e95d4e8fe062c2ac168170d8c3","modified":1580396052287},{"_id":"public/plugins/index.html","hash":"9f28e2cdaef76605a914c2303c30c438a62ee971","modified":1580396052287},{"_id":"public/tutorials/infura_guide.html","hash":"963eb135bd6e873b3d653dc89732d1c3c173c5ed","modified":1580396052287},{"_id":"public/templates/index.html","hash":"898295867bfadb24e7718e90a938c0c9e1813e50","modified":1580396052287},{"_id":"public/docs/blockchain_configuration.html","hash":"0d42a1144a68320881f7362d916e963e6e76bf62","modified":1580396052287},{"_id":"public/docs/contracts_testing.html","hash":"a8c79293a629a6952e366616857deeb6106e79ea","modified":1580396052287},{"_id":"public/docs/contributing.html","hash":"92d03693beff216626939770bd5967570ce231b2","modified":1580396052287},{"_id":"public/docs/contracts_configuration.html","hash":"448ef70403a6b93a8ab08273be2d72e4744f648c","modified":1580396052287},{"_id":"public/docs/plugin_reference.html","hash":"768b7df51b135cca50f742cd29a97618826592d5","modified":1580396052287},{"_id":"public/news/2020/01/30/dapp-frontend-security/index.html","hash":"277281dcbb11c47becd0588baa0f29988ccb95ec","modified":1580396052287},{"_id":"public/news/2020/01/29/subspace-1-2/index.html","hash":"31929d001a9894c3859b69e07651af769af3dc56","modified":1580396052287},{"_id":"public/news/2020/01/28/dapp-frontend-security/index.html","hash":"899d57607120bbe22e963d25a9e511cba786d8f2","modified":1580396052287},{"_id":"public/news/2020/01/27/embark-5-1/index.html","hash":"5f6516f6eca4cacc61f6b2ed23551b63b68ed0d5","modified":1580396052287},{"_id":"public/news/2020/01/13/announcing-embark-5/index.html","hash":"b2e7f70c56b631956da1b5c542e1f6a855978b1b","modified":1580396052287},{"_id":"public/news/2020/01/09/take-back-the-web-hackathon/index.html","hash":"69cdf7661e6b345ac4b7da5ec7c1665ab593c835","modified":1580396052287},{"_id":"public/news/2019/12/09/web3-what-are-your-options/index.html","hash":"016835a39db7748056f1b844f8becd73c1c4a335","modified":1580396052287},{"_id":"public/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/index.html","hash":"4aa4c522c53196f221af7d3e71061e3ea0493f0b","modified":1580396052287},{"_id":"public/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/index.html","hash":"04e408a4e4b20c4995c341cb2701c812d1a0d6ec","modified":1580396052287},{"_id":"public/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/index.html","hash":"a33ecef91364daf880e0fa536fa2bef06fb675e2","modified":1580396052287},{"_id":"public/news/2019/07/23/whats-new-in-embark-4.1/index.html","hash":"aa391f84c2b7ac7536b1c15d2e87ee4551e8c896","modified":1580396052287},{"_id":"public/news/2019/03/19/introducing-embark-4/index.html","hash":"ae20d4425968ff9107071d882edb4225d47ebf1e","modified":1580396052287},{"_id":"public/news/2019/03/18/upgrading-to-embark-4/index.html","hash":"f84ee5381f2709b1b77cb1c0b2c881a00596cf4d","modified":1580396052287},{"_id":"public/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/index.html","hash":"44c311045c05ca607b146fb7817751fd9b90d956","modified":1580396052287},{"_id":"public/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/index.html","hash":"615ae7ed72ce633aef87cc9ca2fde57cb2b0d4dd","modified":1580396052287},{"_id":"public/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/index.html","hash":"97c9f67ff65e6e148b7725bdaa5eb7e51e623f41","modified":1580396052287},{"_id":"public/news/2019/01/28/running-embark-tests-on-a-continuous-integration-server/index.html","hash":"45903b0d585dee82b105972afd999d7f52aefc9f","modified":1580396052287},{"_id":"public/news/2019/01/23/building-smart-contract-only-dapps/index.html","hash":"31a6d52159825fcc46f85d9e6f49f04fcbafe1f2","modified":1580396052287},{"_id":"public/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/index.html","hash":"d3b910886784b0a80096d79f3a56541a691d9d41","modified":1580396052287},{"_id":"public/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/index.html","hash":"39b3562bbab9d28bcc720d149d5cae5a1a1a1d33","modified":1580396052287},{"_id":"public/news/2018/05/04/embark-3-0-released/index.html","hash":"cb4e7fd2d3c638b4a0ab0a3a7e4ba6fc3e61ed76","modified":1580396052287},{"_id":"public/news/2017/10/25/embark-2-6-released/index.html","hash":"e0419161d82ff6f938e9dc052f7c9f0df4a5bf6d","modified":1580396052287},{"_id":"public/news/2017/06/28/embark-2-5-released/index.html","hash":"6968bfd4775180c389f1d85e9e3ac51c2f4a0608","modified":1580396052287},{"_id":"public/categories/announcements/index.html","hash":"cca7989a884778e6f7ad0369cbeaf13b548df50f","modified":1580396052287},{"_id":"public/categories/tutorials/index.html","hash":"564c80f97690224c4081bbcf584dc7979cea2d44","modified":1580396052287},{"_id":"public/archives/index.html","hash":"f026a949d532eee15644f170a800ecf7b9685495","modified":1580396052287},{"_id":"public/archives/2018/index.html","hash":"b377bb5fe8eeace5773b041f1653c195e87c7101","modified":1580396052287},{"_id":"public/archives/2019/index.html","hash":"c12f9be4a53a538c45d7157fa633572191adbf55","modified":1580396052287},{"_id":"public/archives/2019/02/index.html","hash":"a7095a97b3c989848bce7e44e0d96c7ad392a0a4","modified":1580396052287},{"_id":"public/archives/2019/11/index.html","hash":"8fdd9949f38780431994be1e1ada0b5f1bfbb21a","modified":1580396052287},{"_id":"public/archives/2020/index.html","hash":"5de70269be587b6b2f452ec24ca21191bc4328ae","modified":1580396052287},{"_id":"public/archives/2020/01/index.html","hash":"7166b947a77e76e17bcc6fd8ab3a1281793cc09a","modified":1580396052287},{"_id":"public/CNAME","hash":"fbac6d19ee04b9b7f4b3085544d024ec900c633c","modified":1580396052287},{"_id":"public/browserconfig.xml","hash":"f54412705ab9eb69b544f438c9a1e15ae57f27c0","modified":1580396052287},{"_id":"public/embark-logo.svg","hash":"af5b81d96dd4f7e4e65851e53866da7883daf52e","modified":1580396052287},{"_id":"public/robots.txt","hash":"7e49dfd97319f5dd7cdaea8518cf43e0e8d01e5a","modified":1580396052287},{"_id":"public/favicon.ico","hash":"96b9a549337c2bec483c2879eeafa4d1f8748fed","modified":1580396052287},{"_id":"public/plugins/thumbnails/fortune.jpg","hash":"f041a2bc22e374dd833e4b56066e7d3bf20d49f6","modified":1580396052287},{"_id":"public/plugins/thumbnails/bamboo.png","hash":"b7c9f4d84aa7d6642e4a822a7b66042ab2d33710","modified":1580396052287},{"_id":"public/plugins/thumbnails/haml.png","hash":"19c468e7d07eed1ddadc38818b8f9c350ebf8511","modified":1580396052287},{"_id":"public/plugins/thumbnails/remix.png","hash":"c288a89299382837bde8ce248b2d1265dff49083","modified":1580396052287},{"_id":"public/plugins/thumbnails/remix copy.png","hash":"0654c1ca096d7336391d50ffc27c64aa30a37b85","modified":1580396052287},{"_id":"public/plugins/thumbnails/pug.png","hash":"774bb436243175c41b9e4c51558a02e2262a7e47","modified":1580396052287},{"_id":"public/plugins/thumbnails/solidity.png","hash":"860e6c14fe1fc7799de218b11dbdda5cb73123d3","modified":1580396052287},{"_id":"public/plugins/thumbnails/solium.png","hash":"a8e525113fb9dff400e71b9762f537f82cfdb7ac","modified":1580396052287},{"_id":"public/plugins/thumbnails/status.png","hash":"452ce074cb13ffa9be473c7001c675b6b35f3780","modified":1580396052287},{"_id":"public/templates/thumbnails/angular.png","hash":"e50350df2526f0abf0a8d2e808085c24f2273662","modified":1580396052287},{"_id":"public/templates/thumbnails/bamboo.png","hash":"b7c9f4d84aa7d6642e4a822a7b66042ab2d33710","modified":1580396052287},{"_id":"public/templates/thumbnails/sggc.png","hash":"f2742e7865280a840ccb8de8a466e7571947ec9a","modified":1580396052287},{"_id":"public/templates/thumbnails/typescript.png","hash":"bc3c71f25fc966f00c23df3222cde74c6e70c06d","modified":1580396052287},{"_id":"public/templates/thumbnails/react.png","hash":"a6d33dab3a85a4d7004246e39a704869a6319306","modified":1580396052287},{"_id":"public/templates/thumbnails/vortex.png","hash":"ca5675313297535b416158e7a6b775bbe59f3a56","modified":1580396052287},{"_id":"public/templates/thumbnails/vyper.png","hash":"ecbc1f9ce334685b0a1d9ec6da3ad98a69758f6e","modified":1580396052287},{"_id":"public/templates/thumbnails/vuejs.png","hash":"85cb9bd3cf15f02dc2b44fbc9dffc2737c6a985b","modified":1580396052287},{"_id":"public/tutorials/infura_guide/api-keys.png","hash":"9ef67096142c2cd4dff7e391f2664e335d347517","modified":1580396052287},{"_id":"public/tutorials/infura_guide/lift-off.jpg","hash":"90d8d7604930e30d01aff8c1513412a75e8f4a58","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/page_2.png","hash":"4fa5a22eb63587f424a2742e7f14f39e6e6e4c9d","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/page_3.png","hash":"08a8a87009da0594ac5c763e269082ed489c9b31","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/page_1.png","hash":"6babcba0bca8fc8a48a0eed7045396f9c3fb55af","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/page_4.png","hash":"78a3cbea0a3a686847fa7024a634bc28b38e7c08","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/page_5.png","hash":"1938ae333249ead32842d39f36dc7d7742e97a95","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_1.png","hash":"d0c1bdc7478dcc4878239b2924107df50608d97a","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_2.png","hash":"238f769f8834d36a088f6352d5e8b056d339fa7d","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_3.png","hash":"8eca458e6e78457f268142f45542c2a919ab07af","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_4.png","hash":"92dd82374e8ccd6f258481fc69ebdc2aa16c0532","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_6.png","hash":"b672160f850fcd590050dfbc268ec03c1027072f","modified":1580396052287},{"_id":"public/assets/icons/arrow-down-1.svg","hash":"cf919e204adc66907e541c5a32a6cdb8bd86e9d7","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_7.png","hash":"da58b3365e3b6841ffdcfbf6c5b8a6152daa9a49","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/page_5.png","hash":"ea35b940330be24051ac278a8ad6d239a93c3fd5","modified":1580396052287},{"_id":"public/assets/icons/app-window-search-text.svg","hash":"a7658278c51714beb9a4aa378074b0f1a2a3811a","modified":1580396052287},{"_id":"public/assets/icons/arrow-left-1.svg","hash":"6a5b3fe7927e03320be668170011aba2d461d1af","modified":1580396052287},{"_id":"public/assets/icons/arrow-right-1.svg","hash":"5948e9eda884b948d0c668ae51f99509d2cfa631","modified":1580396052287},{"_id":"public/assets/icons/arrow-up-1.svg","hash":"e4e31a2af62c2838e1871dfd72203b9a94ae8ae9","modified":1580396052287},{"_id":"public/assets/icons/close.svg","hash":"07c332a892c2b2a107bf53a055425064006b7161","modified":1580396052287},{"_id":"public/assets/icons/browser-gauge.svg","hash":"4ab8c84f8c5cc2ece1a2847ef8d9f2c9b842609f","modified":1580396052287},{"_id":"public/assets/icons/check.svg","hash":"94cb2741b66a54d22bbacdf65c5bbf1f4de59c4a","modified":1580396052287},{"_id":"public/assets/icons/computer-bug-search.svg","hash":"720717cc34ce43565de8ab4a360603c2c55092a7","modified":1580396052287},{"_id":"public/assets/icons/copy-paste.svg","hash":"6a11ff19bd04cf7774d7155a535eb68be3dbb592","modified":1580396052287},{"_id":"public/assets/icons/crypto-currency-bitcoin-circle.svg","hash":"6feceaadc9ee12a3e457d94a3d548a3d82213b92","modified":1580396052287},{"_id":"public/assets/icons/github.svg","hash":"6b9fba84ce16f0f8278ca4eb00ced1c5b13109f4","modified":1580396052287},{"_id":"public/assets/icons/module.svg","hash":"cf1284f20a532fc451ba6cd443ff1534e63b6779","modified":1580396052287},{"_id":"public/assets/icons/list-to-do.svg","hash":"6954c1ea40469c5548ff8c3daba91ea3e883dab4","modified":1580396052287},{"_id":"public/assets/icons/navigation-menu.svg","hash":"d6b4d9e2da8849ac362bcb8d634725b921ebf46c","modified":1580396052287},{"_id":"public/assets/icons/notes-paper-text.svg","hash":"fc8a3304cfc24437597a565290c6b1095fa365f7","modified":1580396052287},{"_id":"public/assets/icons/paginate-filter-video-alternate.svg","hash":"a2953dbbdcd49ce07a7aa90be9803d5e44a77688","modified":1580396052287},{"_id":"public/assets/icons/pen-write-paper.svg","hash":"a2828e87d8ea6f6d965a1aae8ab450c3bba19564","modified":1580396052287},{"_id":"public/assets/icons/pie-line-graph.svg","hash":"d8a9dad5f7377b12b3130d964f7fe3d03de80d1a","modified":1580396052287},{"_id":"public/assets/icons/rating-star.svg","hash":"961c6f9cf48e662267cdfb609e89f3234e1c84c0","modified":1580396052287},{"_id":"public/assets/icons/search-bar.svg","hash":"6e3dfc910fda432935eaf7a6170bf1f6be8c7a21","modified":1580396052287},{"_id":"public/assets/icons/symbols.svg","hash":"d34c6846fa16190a9e264d9f1cbf40e12ae8f410","modified":1580396052287},{"_id":"public/assets/icons/tag-new-circle.svg","hash":"3a155bcde805c6101d431c08a093a5ffed37dfeb","modified":1580396052287},{"_id":"public/assets/images/Nimbus.svg","hash":"f0ea3f6a1804fc951901bdf3c3ec84ebcbcfb1b3","modified":1580396052287},{"_id":"public/assets/icons/twitter.svg","hash":"90e4959062ea5bc14eb10f182c1c9859dcc0b168","modified":1580396052287},{"_id":"public/assets/images/apple-touch-icon-120x120-precomposed.png","hash":"2b599bbb36131a537d0a2db417eefd8cb2a348f7","modified":1580396052287},{"_id":"public/assets/images/apple-touch-icon-152x152-precomposed.png","hash":"8f2800d891c5e1374cef4f3fcd26575f46748e5c","modified":1580396052287},{"_id":"public/assets/images/apple-touch-icon-180x180-precomposed.png","hash":"451e3cfad6ebe9dad9eb35af1d7c113b2f76f143","modified":1580396052287},{"_id":"public/assets/images/apple-touch-icon-60x60-precomposed.png","hash":"aa89e00d7671bfa8add7afc2ee25e84cf93319b3","modified":1580396052287},{"_id":"public/assets/images/apple-touch-icon-76x76-precomposed.png","hash":"99cd68afb86ecab681c217b0eeffed8163f228e6","modified":1580396052287},{"_id":"public/assets/images/apple-touch-icon-precomposed.png","hash":"451e3cfad6ebe9dad9eb35af1d7c113b2f76f143","modified":1580396052287},{"_id":"public/assets/images/company-flexdapps.svg","hash":"ae7686cb0c918a69b497774fba8829cb3df89858","modified":1580396052287},{"_id":"public/assets/images/company-giveth.svg","hash":"8d611a8a4c94e2bb13da7661195cb44d3ee163f4","modified":1580396052287},{"_id":"public/assets/images/company-status.svg","hash":"5729e8db16b262cb6c3ca91113500b1895f24768","modified":1580396052287},{"_id":"public/assets/images/dots.png","hash":"2f22dcbbe2b643819e263bc292732d0875e9f24e","modified":1580396052287},{"_id":"public/assets/images/favicon-16.png","hash":"db9d7be08c2096635e4acd9f00fb56c04aafa7a5","modified":1580396052287},{"_id":"public/assets/images/favicon-32.png","hash":"b841b7f468325cab45486b1a25343e0f0654ef0d","modified":1580396052287},{"_id":"public/assets/images/logo.svg","hash":"0bc239291c9f4732df92ed67b5f80d7392d9920a","modified":1580396052287},{"_id":"public/assets/images/keycard-logo-negative.svg","hash":"b93278634ae78c759a0439a7d8c275889ae90e8f","modified":1580396052287},{"_id":"public/assets/images/logo-negative.svg","hash":"2eb5bdd4eb9aac594e7fcbb7ff0fb7456d6c1fd1","modified":1580396052287},{"_id":"public/assets/images/rocket-start.svg","hash":"1c2121ac58f2ea3916de10a4667518b653ce83a7","modified":1580396052287},{"_id":"public/assets/images/status-logo.svg","hash":"80e9ac5ea6f37880927c680f66d41f2acd751873","modified":1580396052287},{"_id":"public/coverage-files.png","hash":"e9b0f9b1f09dc16409266dfbc1223f274dd63cbc","modified":1580396052287},{"_id":"public/assets/images/cockpit_debugger_controls.png","hash":"ba68f8b39e0d745e39a26d0bd8c9c3bfea5ad8c5","modified":1580396052287},{"_id":"public/assets/images/crystal-thread-test.png","hash":"4e8aa7ac613a332960de0117141ed1e33b14d9f1","modified":1580396052287},{"_id":"public/plugins/thumbnails/mythx.png","hash":"7d1972d98ddd2bc13afbb0049d45f157d8cdf675","modified":1580396052287},{"_id":"public/assets/images/bg-hexagons.png","hash":"d2a3d73d939c8d6a34f04741231739d25d81c1a8","modified":1580396052287},{"_id":"public/js/index.js","hash":"cb46b90689c0ac59988a81d4d231ae2d4b9d3806","modified":1580396052287},{"_id":"public/js/linkjuice/gulpfile.js","hash":"c160dfead280a588086115a45a895549b99ed458","modified":1580396052287},{"_id":"public/js/linkjuice/package.json","hash":"73982ec66ef8b7eec927bcc464c52592d33ea3fc","modified":1580396052287},{"_id":"public/js/linkjuice/src/linkjuice.js","hash":"c9145e827c4a9c35575911407b9a7e65c48ae858","modified":1580396052287},{"_id":"public/js/linkjuice/README.html","hash":"afb050bbf2d92c0f57339ad70510038e0353e372","modified":1580396052287},{"_id":"public/css/embark.css","hash":"71952beb1fe808844450f0cdf8ad26b1e9c7b436","modified":1580396052287},{"_id":"public/coverage-report.png","hash":"4f2e52ad838258e4e7ee03f2cfd4bdd9be2c4046","modified":1580396052287},{"_id":"public/assets/images/cockpit_dashboard_release.png","hash":"096b0b893f3d467919edd968ce827985e1f233f0","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/console_2.png","hash":"82a4f8163e92edc66a14726a97e6f3d586fc5ec9","modified":1580396052287},{"_id":"public/assets/images/tool-screenshot.png","hash":"9cfaabed43e1453cdf1edb60238f2aeaa3b7ad07","modified":1580396052287},{"_id":"public/assets/images/web3-js-diagram.png","hash":"5cc26458f47462ce25a80abca52a4cc2e90de9e4","modified":1580396052287},{"_id":"public/assets/images/cockpit_editor_release.png","hash":"c912dcedf5db89e08e491d1b49f7b07795bdcf21","modified":1580396052287},{"_id":"public/assets/images/nimble-creating-app.png","hash":"30bdcea82d2a7e7b063dfeca277438ae9a9a44f4","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/console_2.png","hash":"4efdab7b54dacafc83854b6dc7d73addf9fe8ade","modified":1580396052287},{"_id":"public/assets/images/cockpit_contracts_view.gif","hash":"999f406795198c3d8651e61d7e0b251f7320d98c","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/console_1.png","hash":"fd0c379505c036ad151b01a5a28b610df190d3d6","modified":1580396052287},{"_id":"public/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","hash":"9d767c14d82980b184cb6d9a1746f986c21cec8e","modified":1580396052287},{"_id":"public/assets/images/embark-header_blank.jpg","hash":"9da5d1642a4ad2ba3af71504589a5ced42a4ab8f","modified":1580396052287},{"_id":"public/assets/images/nim-crystal-header-img_NEW.jpg","hash":"f0716491dd88db1d137c915879e66694844ea334","modified":1580396052287},{"_id":"public/assets/images/token_factory_2/console_1.png","hash":"9d35e99618f0ff90911672eaf7765a48ab84f94e","modified":1580396052287},{"_id":"public/assets/images/cli-tool.png","hash":"21fa930acb0a5259f9f35b37d14bc4b11fd9120d","modified":1580396052287},{"_id":"public/assets/icons/symbols.html","hash":"243130b7947cd9c05b907db6bf64780cf876fae6","modified":1580396052287},{"_id":"public/assets/images/cockpit_selective_deployment.gif","hash":"1d9e6e6a5d1c98da71e316c7cfb4ac7aff6c5708","modified":1580396052287},{"_id":"public/assets/images/cockpit_dashboard_dark.png","hash":"69148b6547065adcd5583118286f74aff9a29889","modified":1580396052287},{"_id":"public/assets/images/EMBARK_MODULAR.png","hash":"38677401713a7583c44d97e59eb5bcc3c8fb8386","modified":1580396052287},{"_id":"public/assets/images/cockpit_dashboard.png","hash":"aa995f3517e692402819dc004010c9f45960a7a5","modified":1580396052287},{"_id":"public/assets/images/EMBARK_FRAMEWORK.png","hash":"6113f59cb45baf50f78c13684f366b3b2ba11239","modified":1580396052287},{"_id":"public/assets/images/cockpit_explorer_overview.png","hash":"86a94110f1ae3fe956a5efb1b165902c63fa35d8","modified":1580396052287},{"_id":"public/assets/images/cockpit_explorer_block.png","hash":"e9f398fc9eacf99b3e64997c3724ec541875e144","modified":1580396052287},{"_id":"public/assets/images/web3-article-header.png","hash":"48e3fc72598773913bbfbde2f13c3feca8008578","modified":1580396052287},{"_id":"public/assets/images/cockpit_explorer_contracts_detail.gif","hash":"2464c474ba42193ca58df7288c2afc81608657c0","modified":1580396052287},{"_id":"public/assets/images/embark-dashboard.png","hash":"fbfa1764086f3c436172bc8c812452a99c8d8f79","modified":1580396052287},{"_id":"public/assets/images/website_release.png","hash":"4625f3ee3f58fae5d2c2dc7b10fc8d2547c6a448","modified":1580396052287},{"_id":"public/assets/images/cockpit_suggestions.gif","hash":"2e004a561dda70e22effa1af96315bb9d2314758","modified":1580396052287},{"_id":"public/assets/images/cockpit_explorer_transactions.gif","hash":"fd74abafca81d5a2986f57d72147b228b06f075d","modified":1580396052287},{"_id":"public/assets/images/cockpit_using_debugger.gif","hash":"72acc4d2ab4f9b342749519b69455e30fd4e24c0","modified":1580396052287},{"_id":"public/assets/images/cockpit_explorer_account.gif","hash":"a9c557a12ff36090c6a41c265bbd8eb9285de657","modified":1580396052287},{"_id":"public/assets/images/cockpit_editor.gif","hash":"3ce64fcf60098d6954d4a021ef4d2f2c20e1dc46","modified":1580396052287},{"_id":"public/assets/images/cockpit_search.gif","hash":"c797eb599b822ca56f57cfa882967f23b27d62f9","modified":1580396052287},{"_id":"public/assets/images/cockpit_enter_debugger.gif","hash":"f3374c1898aba97acb7d53779d4e8fc9643d2dff","modified":1580396052287},{"_id":"public/assets/images/cockpit_navigation.gif","hash":"7ed00581b8752de847a7e7e2d2c6e47bc961614a","modified":1580396052287},{"_id":"public/assets/images/cockpit_change_theme.gif","hash":"fe6c1c931e3db5c069a158bf7da7fd732d0f39bc","modified":1580396052287},{"_id":"public/assets/images/cockpit_dashboard_contracts.gif","hash":"1792d363902a2ec8f26f7596bffc4431461f2fee","modified":1580396052287},{"_id":"public/assets/images/token_factory_1/dashboard.png","hash":"bfb37f6fe22c28ac3cfa10b100e2db47acf5f6ca","modified":1580396052287}],"Category":[{"name":"announcements","_id":"ck5ijm3qp00057heg5kpz32j7"},{"name":"tutorials","_id":"ck5ijm3r7000n7heg18or2163"},{"name":"releases","parent":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5y92ljz0001zf0ebip59hx1"}],"Data":[{"_id":"authors","data":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}}},{"_id":"categories","data":{"tutorials":"Tutorials","announcements":"Announcements"}},{"_id":"languages","data":{"en":"English"}},{"_id":"plugins","data":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}]},{"_id":"menu","data":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"}},{"_id":"sidebar","data":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}}},{"_id":"templates","data":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}]},{"_id":"tutorials","data":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}]},{"_id":"versions","data":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}],"Page":[{"title":"blog.header.title","tagline":"blog.header.tagline","layout":"blog","_content":"","source":"index.md","raw":"title: blog.header.title\ntagline: blog.header.tagline\nlayout: blog\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"index.html","comments":1,"_id":"ck5ijm3ml00007heg4oeo64fj","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Chat","layout":"chat","_content":"\n<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n","source":"chat/index.md","raw":"title: Chat\nlayout: chat\n---\n\n<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"chat/index.html","comments":1,"_id":"ck5ijm3qm00027hegfm15h31m","content":"<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>\n  Join us at <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">gitter.im/embark-framework/Lobby</a>\n</p>\n<iframe src=\"https://gitter.im/embark-framework/Lobby/~embed\" style=\"width: 100%; height: 800px; border: 1px solid black\"></iframe>\n\n"},{"title":"community_page.header.title","tagline":"community_page.header.tagline","link":{"text":"community_page.header.link","href":"https://gitter.im/embark-framework/Lobby"},"layout":"community","_content":"","source":"community/index.md","raw":"title: community_page.header.title\ntagline: community_page.header.tagline\nlink:\n  text: community_page.header.link\n  href: https://gitter.im/embark-framework/Lobby\nlayout: community\n---\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"community/index.html","comments":1,"_id":"ck5ijm3qo00047heg1ev79kfc","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Bamboo Documentation","_content":"\nThe documentation for Bamboo can be found [here](https://github.com/pirapira/bamboo)\n\nTo use Bamboo with Embark you will need to first install the [embark-bamboo](https://github.com/embarklabs/embark-bamboo) plugin\n\n","source":"docs/bamboo.md","raw":"title: Bamboo Documentation\n---\n\nThe documentation for Bamboo can be found [here](https://github.com/pirapira/bamboo)\n\nTo use Bamboo with Embark you will need to first install the [embark-bamboo](https://github.com/embarklabs/embark-bamboo) plugin\n\n","date":"2020-01-19T20:56:53.006Z","updated":"2020-01-19T20:56:53.006Z","path":"docs/bamboo.html","_id":"ck5ijm3qs00077heg6vu1ep31","comments":1,"layout":"page","content":"<p>The documentation for Bamboo can be found <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<p>To use Bamboo with Embark you will need to first install the <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">embark-bamboo</a> plugin</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The documentation for Bamboo can be found <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<p>To use Bamboo with Embark you will need to first install the <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">embark-bamboo</a> plugin</p>\n"},{"title":"Accounts Blockchain configuration","layout":"docs","_content":"\nIn our [guide on configuring a blockchain client](/docs/blockchain_configuration.html), we've configured accounts in several places.\n\nThis parameter let's us customize what the `accounts` will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.\n\n## Accounts parameters\n\n```\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n```\n\nThe `accounts` configuration is an array of objects, where each object represents one or more account.\n\nEmbark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.\n\n{% notification danger 'Using production keys' %}\nBe careful when using production keys and mnemonics (ie the account where you have real money).\n\nWe recommend using [environment variables](https://www.schrodinger.com/kb/1842) for plain text values like `privateKey` and `mnemonic` and to put the files for `privateKeyFile` and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)\n{% endnotification %}\n\n### Parameter descriptions\n\n- **nodeAccounts**: The actual node accounts, that get created and unlocked by the client\n  - Can be enabled by setting it to `true`\n  - **numAddresses**: Number of addresses you want from the node. Defaults to `1`\n  - **password**: Password file where the password to create and unlock the accounts is. This is required\n- **privateKey**: Private key string\n- **privateKeyFile**: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to `random` to generate a random account (useful when testing)\n  - **password**: Password string for the keystore\n- **mnemonic**: 12 word mnemonic\n  - **addressIndex**: Index where to start getting the addresses. Defaults to `0`\n  - **numAddresses**: Number of addresses to get. Defaults to `1`\n  - **hdpath**: HD derivation path. Defaults to `\"m/44'/60'/0'/0/\"`\n\n{% notification info 'Accounts order' %}\nThe order in the accounts array is important. This means that using `nodeAccounts` first, as above, will set the node's account as the `defaultAccount` for deployment.\n{% endnotification %}\n\n### Configuring account balance for development\n\nWhen in development, we can specify the balance of each account using the `balance` option:\n\n```\nmodule.exports = {\n  development: {\n      deployment: {\n        accounts: [\n          {\n            mnemonic: \"12 word mnemonic\",\n            balance: \"5 ether\"\n          }\n        ]\n      }\n  }\n}\n```\n\nBalances can be specified using [human readable units](/docs/contracts_configuration.html#Human-readable-Ether-units) such as \"5 ether\" or \"200 finney\". If no unit is specified the value will be in Wei.\n","source":"docs/blockchain_accounts_configuration.md","raw":"title: Accounts Blockchain configuration\nlayout: docs\n---\n\nIn our [guide on configuring a blockchain client](/docs/blockchain_configuration.html), we've configured accounts in several places.\n\nThis parameter let's us customize what the `accounts` will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.\n\n## Accounts parameters\n\n```\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n```\n\nThe `accounts` configuration is an array of objects, where each object represents one or more account.\n\nEmbark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.\n\n{% notification danger 'Using production keys' %}\nBe careful when using production keys and mnemonics (ie the account where you have real money).\n\nWe recommend using [environment variables](https://www.schrodinger.com/kb/1842) for plain text values like `privateKey` and `mnemonic` and to put the files for `privateKeyFile` and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)\n{% endnotification %}\n\n### Parameter descriptions\n\n- **nodeAccounts**: The actual node accounts, that get created and unlocked by the client\n  - Can be enabled by setting it to `true`\n  - **numAddresses**: Number of addresses you want from the node. Defaults to `1`\n  - **password**: Password file where the password to create and unlock the accounts is. This is required\n- **privateKey**: Private key string\n- **privateKeyFile**: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to `random` to generate a random account (useful when testing)\n  - **password**: Password string for the keystore\n- **mnemonic**: 12 word mnemonic\n  - **addressIndex**: Index where to start getting the addresses. Defaults to `0`\n  - **numAddresses**: Number of addresses to get. Defaults to `1`\n  - **hdpath**: HD derivation path. Defaults to `\"m/44'/60'/0'/0/\"`\n\n{% notification info 'Accounts order' %}\nThe order in the accounts array is important. This means that using `nodeAccounts` first, as above, will set the node's account as the `defaultAccount` for deployment.\n{% endnotification %}\n\n### Configuring account balance for development\n\nWhen in development, we can specify the balance of each account using the `balance` option:\n\n```\nmodule.exports = {\n  development: {\n      deployment: {\n        accounts: [\n          {\n            mnemonic: \"12 word mnemonic\",\n            balance: \"5 ether\"\n          }\n        ]\n      }\n  }\n}\n```\n\nBalances can be specified using [human readable units](/docs/contracts_configuration.html#Human-readable-Ether-units) such as \"5 ether\" or \"200 finney\". If no unit is specified the value will be in Wei.\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/blockchain_accounts_configuration.html","comments":1,"_id":"ck5ijm3qu00097hegey92ab6f","content":"<p>In our <a href=\"/docs/blockchain_configuration.html\">guide on configuring a blockchain client</a>, we’ve configured accounts in several places.</p>\n<p>This parameter let’s us customize what the <code>accounts</code> will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.</p>\n<h2 id=\"Accounts-parameters\"><a href=\"#Accounts-parameters\" class=\"headerlink\" title=\"Accounts parameters\"></a>Accounts parameters</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: true,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    password: &quot;config&#x2F;development&#x2F;devpassword&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: &quot;path&#x2F;to&#x2F;file&quot;,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: &quot;0&quot;,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    hdpath: &quot;m&#x2F;44&#39;&#x2F;60&#39;&#x2F;0&#39;&#x2F;0&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>accounts</code> configuration is an array of objects, where each object represents one or more account.</p>\n<p>Embark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.</p>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Using production keys</strong></p>\n  <p><p>Be careful when using production keys and mnemonics (ie the account where you have real money).</p>\n<p>We recommend using <a href=\"https://www.schrodinger.com/kb/1842\" target=\"_blank\" rel=\"noopener\">environment variables</a> for plain text values like <code>privateKey</code> and <code>mnemonic</code> and to put the files for <code>privateKeyFile</code> and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><ul>\n<li><strong>nodeAccounts</strong>: The actual node accounts, that get created and unlocked by the client<ul>\n<li>Can be enabled by setting it to <code>true</code></li>\n<li><strong>numAddresses</strong>: Number of addresses you want from the node. Defaults to <code>1</code></li>\n<li><strong>password</strong>: Password file where the password to create and unlock the accounts is. This is required</li>\n</ul>\n</li>\n<li><strong>privateKey</strong>: Private key string</li>\n<li><strong>privateKeyFile</strong>: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to <code>random</code> to generate a random account (useful when testing)<ul>\n<li><strong>password</strong>: Password string for the keystore</li>\n</ul>\n</li>\n<li><strong>mnemonic</strong>: 12 word mnemonic<ul>\n<li><strong>addressIndex</strong>: Index where to start getting the addresses. Defaults to <code>0</code></li>\n<li><strong>numAddresses</strong>: Number of addresses to get. Defaults to <code>1</code></li>\n<li><strong>hdpath</strong>: HD derivation path. Defaults to <code>&quot;m/44&#39;/60&#39;/0&#39;/0/&quot;</code></li>\n</ul>\n</li>\n</ul>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Accounts order</strong></p>\n  <p><p>The order in the accounts array is important. This means that using <code>nodeAccounts</code> first, as above, will set the node’s account as the <code>defaultAccount</code> for deployment.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Configuring-account-balance-for-development\"><a href=\"#Configuring-account-balance-for-development\" class=\"headerlink\" title=\"Configuring account balance for development\"></a>Configuring account balance for development</h3><p>When in development, we can specify the balance of each account using the <code>balance</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">      deployment: &#123;</span><br><span class=\"line\">        accounts: [</span><br><span class=\"line\">          &#123;</span><br><span class=\"line\">            mnemonic: &quot;12 word mnemonic&quot;,</span><br><span class=\"line\">            balance: &quot;5 ether&quot;</span><br><span class=\"line\">          &#125;</span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Balances can be specified using <a href=\"/docs/contracts_configuration.html#Human-readable-Ether-units\">human readable units</a> such as “5 ether” or “200 finney”. If no unit is specified the value will be in Wei.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In our <a href=\"/docs/blockchain_configuration.html\">guide on configuring a blockchain client</a>, we’ve configured accounts in several places.</p>\n<p>This parameter let’s us customize what the <code>accounts</code> will be for our deployment, as well as the accounts that will be created and unlocked by our blockchain client.</p>\n<h2 id=\"Accounts-parameters\"><a href=\"#Accounts-parameters\" class=\"headerlink\" title=\"Accounts parameters\"></a>Accounts parameters</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: true,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    password: &quot;config&#x2F;development&#x2F;devpassword&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: &quot;path&#x2F;to&#x2F;file&quot;,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: &quot;0&quot;,</span><br><span class=\"line\">    numAddresses: &quot;1&quot;,</span><br><span class=\"line\">    hdpath: &quot;m&#x2F;44&#39;&#x2F;60&#39;&#x2F;0&#39;&#x2F;0&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>accounts</code> configuration is an array of objects, where each object represents one or more account.</p>\n<p>Embark offers you multiple ways to include your account. You can use the one you prefer and ignore the others or mix and match.</p>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Using production keys</strong></p>\n  <p><p>Be careful when using production keys and mnemonics (ie the account where you have real money).</p>\n<p>We recommend using <a href=\"https://www.schrodinger.com/kb/1842\" target=\"_blank\" rel=\"noopener\">environment variables</a> for plain text values like <code>privateKey</code> and <code>mnemonic</code> and to put the files for <code>privateKeyFile</code> and key stores either out of your working directory or ignored by versioning (eg: add the file in gitignore)</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><ul>\n<li><strong>nodeAccounts</strong>: The actual node accounts, that get created and unlocked by the client<ul>\n<li>Can be enabled by setting it to <code>true</code></li>\n<li><strong>numAddresses</strong>: Number of addresses you want from the node. Defaults to <code>1</code></li>\n<li><strong>password</strong>: Password file where the password to create and unlock the accounts is. This is required</li>\n</ul>\n</li>\n<li><strong>privateKey</strong>: Private key string</li>\n<li><strong>privateKeyFile</strong>: Either a file containing comma separated private keys or a keystore (password needed for the latter). This can also be set to <code>random</code> to generate a random account (useful when testing)<ul>\n<li><strong>password</strong>: Password string for the keystore</li>\n</ul>\n</li>\n<li><strong>mnemonic</strong>: 12 word mnemonic<ul>\n<li><strong>addressIndex</strong>: Index where to start getting the addresses. Defaults to <code>0</code></li>\n<li><strong>numAddresses</strong>: Number of addresses to get. Defaults to <code>1</code></li>\n<li><strong>hdpath</strong>: HD derivation path. Defaults to <code>&quot;m/44&#39;/60&#39;/0&#39;/0/&quot;</code></li>\n</ul>\n</li>\n</ul>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Accounts order</strong></p>\n  <p><p>The order in the accounts array is important. This means that using <code>nodeAccounts</code> first, as above, will set the node’s account as the <code>defaultAccount</code> for deployment.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Configuring-account-balance-for-development\"><a href=\"#Configuring-account-balance-for-development\" class=\"headerlink\" title=\"Configuring account balance for development\"></a>Configuring account balance for development</h3><p>When in development, we can specify the balance of each account using the <code>balance</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">      deployment: &#123;</span><br><span class=\"line\">        accounts: [</span><br><span class=\"line\">          &#123;</span><br><span class=\"line\">            mnemonic: &quot;12 word mnemonic&quot;,</span><br><span class=\"line\">            balance: &quot;5 ether&quot;</span><br><span class=\"line\">          &#125;</span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Balances can be specified using <a href=\"/docs/contracts_configuration.html#Human-readable-Ether-units\">human readable units</a> such as “5 ether” or “200 finney”. If no unit is specified the value will be in Wei.</p>\n"},{"title":"Cockpit Dashboard","layout":"docs","_content":"\nThe first view we're getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let's get right to it and take a look!\n\n## Overview\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard.png)\n\nThe dashboard is separated into different sections, which each of them having a certain responsibility. Here's a brief overview of what these are.\n\n- **Navigation & Search** - At the very top we have the navigation and search. Those are self explanatory, but we'll talk a bit more about search features in a few moments.\n- **Available Services** - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.\n- **Interactive Console** - This is the Cockpit equivalent of Embark's [Interactive Console](/docs/using_the_console.html).\n- **Deployed Smart Contracts** - The current status of deployed Smart Contracts. Again, very similar to Embark's [Dashboard](/docs/dashboard.html).\n\n## Navigation & Search\n\nWe can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.\n\n![Cockpit Navigation](/assets/images/cockpit_navigation.gif)\n\nCockpit's search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we're searching for a deployed Smart Contract, entering the name of the Smart Contract works too:\n\n![Cockpit Search](/assets/images/cockpit_search.gif)\n\n## Available Services\n\nAs mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. \n\nThe components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.\n\n## Interactive Console\n\nThis is an equivalent to Embark's [Interactive Console](/docs/using_the_console.html) just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called **Smart Suggestions**. \n\nWhen typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!\n\n![Cockpit Smart Suggestions](/assets/images/cockpit_suggestions.gif)\n\n## Deployed Smart Contracts\n\nAs the name suggests, this sections lists all of our application's deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit's [Explorer](/docs/cockpit_explorer.html).\n\n![Cockpit Dashboard Contracts](/assets/images/cockpit_dashboard_contracts.gif)\n\n## Changing Dark and Light theme\n\nAnother thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.\n\nToggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:\n\n![Cockpit change theme](/assets/images/cockpit_change_theme.gif)\n\n","source":"docs/cockpit_dashboard.md","raw":"title: Cockpit Dashboard\nlayout: docs\n---\n\nThe first view we're getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let's get right to it and take a look!\n\n## Overview\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard.png)\n\nThe dashboard is separated into different sections, which each of them having a certain responsibility. Here's a brief overview of what these are.\n\n- **Navigation & Search** - At the very top we have the navigation and search. Those are self explanatory, but we'll talk a bit more about search features in a few moments.\n- **Available Services** - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.\n- **Interactive Console** - This is the Cockpit equivalent of Embark's [Interactive Console](/docs/using_the_console.html).\n- **Deployed Smart Contracts** - The current status of deployed Smart Contracts. Again, very similar to Embark's [Dashboard](/docs/dashboard.html).\n\n## Navigation & Search\n\nWe can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.\n\n![Cockpit Navigation](/assets/images/cockpit_navigation.gif)\n\nCockpit's search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we're searching for a deployed Smart Contract, entering the name of the Smart Contract works too:\n\n![Cockpit Search](/assets/images/cockpit_search.gif)\n\n## Available Services\n\nAs mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. \n\nThe components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.\n\n## Interactive Console\n\nThis is an equivalent to Embark's [Interactive Console](/docs/using_the_console.html) just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called **Smart Suggestions**. \n\nWhen typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!\n\n![Cockpit Smart Suggestions](/assets/images/cockpit_suggestions.gif)\n\n## Deployed Smart Contracts\n\nAs the name suggests, this sections lists all of our application's deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit's [Explorer](/docs/cockpit_explorer.html).\n\n![Cockpit Dashboard Contracts](/assets/images/cockpit_dashboard_contracts.gif)\n\n## Changing Dark and Light theme\n\nAnother thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.\n\nToggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:\n\n![Cockpit change theme](/assets/images/cockpit_change_theme.gif)\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_dashboard.html","comments":1,"_id":"ck5ijm3qw000c7hegdljfdyw4","content":"<p>The first view we’re getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let’s get right to it and take a look!</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p><img src=\"/assets/images/cockpit_dashboard.png\" alt=\"Cockpit Dashboard\"></p>\n<p>The dashboard is separated into different sections, which each of them having a certain responsibility. Here’s a brief overview of what these are.</p>\n<ul>\n<li><strong>Navigation &amp; Search</strong> - At the very top we have the navigation and search. Those are self explanatory, but we’ll talk a bit more about search features in a few moments.</li>\n<li><strong>Available Services</strong> - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.</li>\n<li><strong>Interactive Console</strong> - This is the Cockpit equivalent of Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a>.</li>\n<li><strong>Deployed Smart Contracts</strong> - The current status of deployed Smart Contracts. Again, very similar to Embark’s <a href=\"/docs/dashboard.html\">Dashboard</a>.</li>\n</ul>\n<h2 id=\"Navigation-amp-Search\"><a href=\"#Navigation-amp-Search\" class=\"headerlink\" title=\"Navigation &amp; Search\"></a>Navigation &amp; Search</h2><p>We can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.</p>\n<p><img src=\"/assets/images/cockpit_navigation.gif\" alt=\"Cockpit Navigation\"></p>\n<p>Cockpit’s search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we’re searching for a deployed Smart Contract, entering the name of the Smart Contract works too:</p>\n<p><img src=\"/assets/images/cockpit_search.gif\" alt=\"Cockpit Search\"></p>\n<h2 id=\"Available-Services\"><a href=\"#Available-Services\" class=\"headerlink\" title=\"Available Services\"></a>Available Services</h2><p>As mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. </p>\n<p>The components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.</p>\n<h2 id=\"Interactive-Console\"><a href=\"#Interactive-Console\" class=\"headerlink\" title=\"Interactive Console\"></a>Interactive Console</h2><p>This is an equivalent to Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a> just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called <strong>Smart Suggestions</strong>. </p>\n<p>When typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!</p>\n<p><img src=\"/assets/images/cockpit_suggestions.gif\" alt=\"Cockpit Smart Suggestions\"></p>\n<h2 id=\"Deployed-Smart-Contracts\"><a href=\"#Deployed-Smart-Contracts\" class=\"headerlink\" title=\"Deployed Smart Contracts\"></a>Deployed Smart Contracts</h2><p>As the name suggests, this sections lists all of our application’s deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit’s <a href=\"/docs/cockpit_explorer.html\">Explorer</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_contracts.gif\" alt=\"Cockpit Dashboard Contracts\"></p>\n<h2 id=\"Changing-Dark-and-Light-theme\"><a href=\"#Changing-Dark-and-Light-theme\" class=\"headerlink\" title=\"Changing Dark and Light theme\"></a>Changing Dark and Light theme</h2><p>Another thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.</p>\n<p>Toggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:</p>\n<p><img src=\"/assets/images/cockpit_change_theme.gif\" alt=\"Cockpit change theme\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The first view we’re getting when entering Cockpit is its Dashboard view. Consider this your central station when developing, deploying and debugging your application. It has a lot of things to offer, so let’s get right to it and take a look!</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p><img src=\"/assets/images/cockpit_dashboard.png\" alt=\"Cockpit Dashboard\"></p>\n<p>The dashboard is separated into different sections, which each of them having a certain responsibility. Here’s a brief overview of what these are.</p>\n<ul>\n<li><strong>Navigation &amp; Search</strong> - At the very top we have the navigation and search. Those are self explanatory, but we’ll talk a bit more about search features in a few moments.</li>\n<li><strong>Available Services</strong> - Right below we see boxes for services monitoring. These boxes tell us what services are up and running and will respond accordingly when turned off.</li>\n<li><strong>Interactive Console</strong> - This is the Cockpit equivalent of Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a>.</li>\n<li><strong>Deployed Smart Contracts</strong> - The current status of deployed Smart Contracts. Again, very similar to Embark’s <a href=\"/docs/dashboard.html\">Dashboard</a>.</li>\n</ul>\n<h2 id=\"Navigation-amp-Search\"><a href=\"#Navigation-amp-Search\" class=\"headerlink\" title=\"Navigation &amp; Search\"></a>Navigation &amp; Search</h2><p>We can navigate through different sections and parts of Cockpit by using the links in the navigation bar as shown below. Notice that the active view is also visually reflected in the navigation as well.</p>\n<p><img src=\"/assets/images/cockpit_navigation.gif\" alt=\"Cockpit Navigation\"></p>\n<p>Cockpit’s search is very powerful and lets us easily search for transactions, Smart Contracts, blocks etc. from a single search bar. All we have to do is entering a valid hash, or, in case we’re searching for a deployed Smart Contract, entering the name of the Smart Contract works too:</p>\n<p><img src=\"/assets/images/cockpit_search.gif\" alt=\"Cockpit Search\"></p>\n<h2 id=\"Available-Services\"><a href=\"#Available-Services\" class=\"headerlink\" title=\"Available Services\"></a>Available Services</h2><p>As mentioned above, the available services tell us which processes and services are running and available within our current Embark session. This is simply for monitoring purposes but can be very useful in case any of the processes is crashing or will be turned off. </p>\n<p>The components will reflect their active state in the UI. We can test this easily disabling any of the services using their dedicated configuration files.</p>\n<h2 id=\"Interactive-Console\"><a href=\"#Interactive-Console\" class=\"headerlink\" title=\"Interactive Console\"></a>Interactive Console</h2><p>This is an equivalent to Embark’s <a href=\"/docs/using_the_console.html\">Interactive Console</a> just in a more rich and interactive fashion. We can use the same commands, however in addition we also get something called <strong>Smart Suggestions</strong>. </p>\n<p>When typing a command, Embark will provide decent suggestions, making it very easy to explore what command options are available!</p>\n<p><img src=\"/assets/images/cockpit_suggestions.gif\" alt=\"Cockpit Smart Suggestions\"></p>\n<h2 id=\"Deployed-Smart-Contracts\"><a href=\"#Deployed-Smart-Contracts\" class=\"headerlink\" title=\"Deployed Smart Contracts\"></a>Deployed Smart Contracts</h2><p>As the name suggests, this sections lists all of our application’s deployed Smart Contracts. Not only that, we can click on any of them and get a nice detail view of the Smart Contract within Cockpit’s <a href=\"/docs/cockpit_explorer.html\">Explorer</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_contracts.gif\" alt=\"Cockpit Dashboard Contracts\"></p>\n<h2 id=\"Changing-Dark-and-Light-theme\"><a href=\"#Changing-Dark-and-Light-theme\" class=\"headerlink\" title=\"Changing Dark and Light theme\"></a>Changing Dark and Light theme</h2><p>Another thing that web-based user interfaces enable easily as opposed to others, is changing the appearance of an application. Cockpit implements two different themes to choose from - light and dark. The light theme is the default.</p>\n<p>Toggling between light and dark theme is as easy as clicking on the cog wheel in the navigation bar and selecting the theme respectively:</p>\n<p><img src=\"/assets/images/cockpit_change_theme.gif\" alt=\"Cockpit change theme\"></p>\n"},{"title":"Deploying with Cockpit","layout":"docs","_content":"\nCockpit offers an additional deployment experience that enables developers to deploy their application's Smart Contracts in an **iterative** and **selective** fashion. In this guide we'll take a closer look at how this works.\n\n## Viewing Smart Contracts\n\nWhen entering the deployment view, the first thing we see is the status of all our application's deployed contracts, similar to [Embark's dashboard](/docs/dashboard.html).\n\nNext to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. \n\nClicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.\n\n![Cockpit Contract View](/assets/images/cockpit_contracts_view.gif)\n\n## Selective deployment\n\nWith the deployment view, it's possible to selectively deploy any of our application's Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on [managing accounts](/docs/blockchain_accounts_configuration.html).\n\nHowever, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.\n\nTo make this work, we need to have Metamask setup, and activate the \"Injected Web3\" switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: \n\n![Cockpit Selective Deployment](/assets/images/cockpit_selective_deployment.gif)\n","source":"docs/cockpit_deployment.md","raw":"title: Deploying with Cockpit\nlayout: docs\n---\n\nCockpit offers an additional deployment experience that enables developers to deploy their application's Smart Contracts in an **iterative** and **selective** fashion. In this guide we'll take a closer look at how this works.\n\n## Viewing Smart Contracts\n\nWhen entering the deployment view, the first thing we see is the status of all our application's deployed contracts, similar to [Embark's dashboard](/docs/dashboard.html).\n\nNext to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. \n\nClicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.\n\n![Cockpit Contract View](/assets/images/cockpit_contracts_view.gif)\n\n## Selective deployment\n\nWith the deployment view, it's possible to selectively deploy any of our application's Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on [managing accounts](/docs/blockchain_accounts_configuration.html).\n\nHowever, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.\n\nTo make this work, we need to have Metamask setup, and activate the \"Injected Web3\" switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: \n\n![Cockpit Selective Deployment](/assets/images/cockpit_selective_deployment.gif)\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_deployment.html","comments":1,"_id":"ck5ijm3qz000e7heg6asods5b","content":"<p>Cockpit offers an additional deployment experience that enables developers to deploy their application’s Smart Contracts in an <strong>iterative</strong> and <strong>selective</strong> fashion. In this guide we’ll take a closer look at how this works.</p>\n<h2 id=\"Viewing-Smart-Contracts\"><a href=\"#Viewing-Smart-Contracts\" class=\"headerlink\" title=\"Viewing Smart Contracts\"></a>Viewing Smart Contracts</h2><p>When entering the deployment view, the first thing we see is the status of all our application’s deployed contracts, similar to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>.</p>\n<p>Next to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. </p>\n<p>Clicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.</p>\n<p><img src=\"/assets/images/cockpit_contracts_view.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Selective-deployment\"><a href=\"#Selective-deployment\" class=\"headerlink\" title=\"Selective deployment\"></a>Selective deployment</h2><p>With the deployment view, it’s possible to selectively deploy any of our application’s Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on <a href=\"/docs/blockchain_accounts_configuration.html\">managing accounts</a>.</p>\n<p>However, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.</p>\n<p>To make this work, we need to have Metamask setup, and activate the “Injected Web3” switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: </p>\n<p><img src=\"/assets/images/cockpit_selective_deployment.gif\" alt=\"Cockpit Selective Deployment\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Cockpit offers an additional deployment experience that enables developers to deploy their application’s Smart Contracts in an <strong>iterative</strong> and <strong>selective</strong> fashion. In this guide we’ll take a closer look at how this works.</p>\n<h2 id=\"Viewing-Smart-Contracts\"><a href=\"#Viewing-Smart-Contracts\" class=\"headerlink\" title=\"Viewing Smart Contracts\"></a>Viewing Smart Contracts</h2><p>When entering the deployment view, the first thing we see is the status of all our application’s deployed contracts, similar to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>.</p>\n<p>Next to their addresses, we see the arguments that have been used to initialized each and every Smart Contract. </p>\n<p>Clicking on any of the Smart Contracts opens up a detail view through which we even can call methods associated to that Smart Contract.</p>\n<p><img src=\"/assets/images/cockpit_contracts_view.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Selective-deployment\"><a href=\"#Selective-deployment\" class=\"headerlink\" title=\"Selective deployment\"></a>Selective deployment</h2><p>With the deployment view, it’s possible to selectively deploy any of our application’s Smart Contracts. By default, Embark will take care of deploying our Smart Contracts based on configurations discussed in our guide on <a href=\"/docs/blockchain_accounts_configuration.html\">managing accounts</a>.</p>\n<p>However, we can use an injected Web3 instance, for example provided by extensions like Metamask, and select individual Smart Contracts for deployment.</p>\n<p>To make this work, we need to have Metamask setup, and activate the “Injected Web3” switch as shown below. Once activated, we can specify values used for initializing our Smart Contracts, as well as performing a gas estimation: </p>\n<p><img src=\"/assets/images/cockpit_selective_deployment.gif\" alt=\"Cockpit Selective Deployment\"></p>\n"},{"title":"Cockpit Editor","layout":"docs","_content":"\nCockpit comes with a web-based code editor that enables us to change our application's source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.\n\n## Additional features for Smart Contract files\n\nWhen opening a Smart Contract source file in Cockpit's editor, we'll get additional features and options to work with. These features are **Interact**, **Details** and **Transactions**, very similar to the ones we've discussed in [Exploring Smart Contracts](/docs/cockpit_explorer.html#Exploring-Smart-Contracts).\n\nCockpit will open up dedicated view for each of these in another in-pane window as shown below:\n\n\n![Cockpit Navigation](/assets/images/cockpit_editor.gif)\n\n","source":"docs/cockpit_editor.md","raw":"title: Cockpit Editor\nlayout: docs\n---\n\nCockpit comes with a web-based code editor that enables us to change our application's source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.\n\n## Additional features for Smart Contract files\n\nWhen opening a Smart Contract source file in Cockpit's editor, we'll get additional features and options to work with. These features are **Interact**, **Details** and **Transactions**, very similar to the ones we've discussed in [Exploring Smart Contracts](/docs/cockpit_explorer.html#Exploring-Smart-Contracts).\n\nCockpit will open up dedicated view for each of these in another in-pane window as shown below:\n\n\n![Cockpit Navigation](/assets/images/cockpit_editor.gif)\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_editor.html","comments":1,"_id":"ck5ijm3r2000i7heg6nkq7sik","content":"<p>Cockpit comes with a web-based code editor that enables us to change our application’s source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.</p>\n<h2 id=\"Additional-features-for-Smart-Contract-files\"><a href=\"#Additional-features-for-Smart-Contract-files\" class=\"headerlink\" title=\"Additional features for Smart Contract files\"></a>Additional features for Smart Contract files</h2><p>When opening a Smart Contract source file in Cockpit’s editor, we’ll get additional features and options to work with. These features are <strong>Interact</strong>, <strong>Details</strong> and <strong>Transactions</strong>, very similar to the ones we’ve discussed in <a href=\"/docs/cockpit_explorer.html#Exploring-Smart-Contracts\">Exploring Smart Contracts</a>.</p>\n<p>Cockpit will open up dedicated view for each of these in another in-pane window as shown below:</p>\n<p><img src=\"/assets/images/cockpit_editor.gif\" alt=\"Cockpit Navigation\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Cockpit comes with a web-based code editor that enables us to change our application’s source code on the fly. Just like any other typical editor, it has a file tree, can open multiple source files and lets us add and delete files.</p>\n<h2 id=\"Additional-features-for-Smart-Contract-files\"><a href=\"#Additional-features-for-Smart-Contract-files\" class=\"headerlink\" title=\"Additional features for Smart Contract files\"></a>Additional features for Smart Contract files</h2><p>When opening a Smart Contract source file in Cockpit’s editor, we’ll get additional features and options to work with. These features are <strong>Interact</strong>, <strong>Details</strong> and <strong>Transactions</strong>, very similar to the ones we’ve discussed in <a href=\"/docs/cockpit_explorer.html#Exploring-Smart-Contracts\">Exploring Smart Contracts</a>.</p>\n<p>Cockpit will open up dedicated view for each of these in another in-pane window as shown below:</p>\n<p><img src=\"/assets/images/cockpit_editor.gif\" alt=\"Cockpit Navigation\"></p>\n"},{"title":"Cockpit Explorer","layout":"docs","_content":"\nThe Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. \n\n## Overview\n\nIn the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:\n\n![Cockpit Explorer Overview](/assets/images/cockpit_explorer_overview.png)\n\n## Viewing Accounts\n\nAccount detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.\n\nThis makes it very convenient to find transactions, if we're aiming to find any that belong to a certain account.\n![Cockpit Contract View](/assets/images/cockpit_explorer_account.gif)\n\n## Viewing Blocks\n\nBlocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.\n\n![Cockpit Explorer Block](/assets/images/cockpit_explorer_block.png)\n\n## Viewing Transactions\n\nIt's no surprise that Cockpit's Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_transactions.gif)\n\n## Exploring Smart Contracts\n\nWe can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:\n\n- **Interact** - Call methods on your Smart Contract instance\n- **Details** - View the ABI and byte code of your Smart Contract\n- **Transactions** - List and explore all transactions and events associated with that Smart Contract instnace\n\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_contracts_detail.gif)\n\n","source":"docs/cockpit_explorer.md","raw":"title: Cockpit Explorer\nlayout: docs\n---\n\nThe Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. \n\n## Overview\n\nIn the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:\n\n![Cockpit Explorer Overview](/assets/images/cockpit_explorer_overview.png)\n\n## Viewing Accounts\n\nAccount detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.\n\nThis makes it very convenient to find transactions, if we're aiming to find any that belong to a certain account.\n![Cockpit Contract View](/assets/images/cockpit_explorer_account.gif)\n\n## Viewing Blocks\n\nBlocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.\n\n![Cockpit Explorer Block](/assets/images/cockpit_explorer_block.png)\n\n## Viewing Transactions\n\nIt's no surprise that Cockpit's Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_transactions.gif)\n\n## Exploring Smart Contracts\n\nWe can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:\n\n- **Interact** - Call methods on your Smart Contract instance\n- **Details** - View the ABI and byte code of your Smart Contract\n- **Transactions** - List and explore all transactions and events associated with that Smart Contract instnace\n\n\n![Cockpit Contract View](/assets/images/cockpit_explorer_contracts_detail.gif)\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_explorer.html","comments":1,"_id":"ck5ijm3r5000l7hegcvmc7q55","content":"<p>The Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. </p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>In the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:</p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer Overview\"></p>\n<h2 id=\"Viewing-Accounts\"><a href=\"#Viewing-Accounts\" class=\"headerlink\" title=\"Viewing Accounts\"></a>Viewing Accounts</h2><p>Account detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.</p>\n<p>This makes it very convenient to find transactions, if we’re aiming to find any that belong to a certain account.<br><img src=\"/assets/images/cockpit_explorer_account.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Viewing-Blocks\"><a href=\"#Viewing-Blocks\" class=\"headerlink\" title=\"Viewing Blocks\"></a>Viewing Blocks</h2><p>Blocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.</p>\n<p><img src=\"/assets/images/cockpit_explorer_block.png\" alt=\"Cockpit Explorer Block\"></p>\n<h2 id=\"Viewing-Transactions\"><a href=\"#Viewing-Transactions\" class=\"headerlink\" title=\"Viewing Transactions\"></a>Viewing Transactions</h2><p>It’s no surprise that Cockpit’s Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.</p>\n<p><img src=\"/assets/images/cockpit_explorer_transactions.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Exploring-Smart-Contracts\"><a href=\"#Exploring-Smart-Contracts\" class=\"headerlink\" title=\"Exploring Smart Contracts\"></a>Exploring Smart Contracts</h2><p>We can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:</p>\n<ul>\n<li><strong>Interact</strong> - Call methods on your Smart Contract instance</li>\n<li><strong>Details</strong> - View the ABI and byte code of your Smart Contract</li>\n<li><strong>Transactions</strong> - List and explore all transactions and events associated with that Smart Contract instnace</li>\n</ul>\n<p><img src=\"/assets/images/cockpit_explorer_contracts_detail.gif\" alt=\"Cockpit Contract View\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The Explorer view in Cockpit provides an easy and accessible way to browse your way through Smart Contracts, accounts, blocks and transactions. </p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>In the overview of the Explorer we see a aggregation of available accounts, mind blocks and performed transactions. Each of these are paginated, making it easy to navigate through them:</p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer Overview\"></p>\n<h2 id=\"Viewing-Accounts\"><a href=\"#Viewing-Accounts\" class=\"headerlink\" title=\"Viewing Accounts\"></a>Viewing Accounts</h2><p>Account detail view can be accessed by clicking on an account address or hash. The account detail view then not only displays data about the account, but also all transactions associated with the account.</p>\n<p>This makes it very convenient to find transactions, if we’re aiming to find any that belong to a certain account.<br><img src=\"/assets/images/cockpit_explorer_account.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Viewing-Blocks\"><a href=\"#Viewing-Blocks\" class=\"headerlink\" title=\"Viewing Blocks\"></a>Viewing Blocks</h2><p>Blocks can be inspected as well, just by clicking on their hash. This will open up a block detail view that contains all the data attached to the block in question, including transactions that ended up in there.</p>\n<p><img src=\"/assets/images/cockpit_explorer_block.png\" alt=\"Cockpit Explorer Block\"></p>\n<h2 id=\"Viewing-Transactions\"><a href=\"#Viewing-Transactions\" class=\"headerlink\" title=\"Viewing Transactions\"></a>Viewing Transactions</h2><p>It’s no surprise that Cockpit’s Explorer offers a view for inspecting transactions as well. Clicking on a transaction hash takes us to the detail view, rendering all relevant transaction data.</p>\n<p><img src=\"/assets/images/cockpit_explorer_transactions.gif\" alt=\"Cockpit Contract View\"></p>\n<h2 id=\"Exploring-Smart-Contracts\"><a href=\"#Exploring-Smart-Contracts\" class=\"headerlink\" title=\"Exploring Smart Contracts\"></a>Exploring Smart Contracts</h2><p>We can extract a lot of information about our deploy Smart Contract instances in the Explorer. When entering a Smart Contract view, we can choose to open any of the available tabs:</p>\n<ul>\n<li><strong>Interact</strong> - Call methods on your Smart Contract instance</li>\n<li><strong>Details</strong> - View the ABI and byte code of your Smart Contract</li>\n<li><strong>Transactions</strong> - List and explore all transactions and events associated with that Smart Contract instnace</li>\n</ul>\n<p><img src=\"/assets/images/cockpit_explorer_contracts_detail.gif\" alt=\"Cockpit Contract View\"></p>\n"},{"title":"Introduction to Cockpit","layout":"docs","_content":"\nProbably one of Embark's most exciting features is its companion web interface Cockpit. With Cockpit, we're aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.\n\nThroughout the following sections we'll take a closer look at Cockpit's features and how we can use it to improve our developer experience when working with Embark!\n\n{% notification info 'A note on Cockpit availability' %}\nPlease note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.\n{% endnotification %}\n\n## What is Cockpit?\n\nCockpit is a web application that ships with Embark since version 4.0. It's an alternative and sometimes more powerful interface in comparison to [Embark's dashboard](/docs/dashboard.html), that connects to any existing Embark process. Since it's web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can't be found in Embark otherwise.\n\nSome of Cockpit's features are:\n\n- **Dashboard** - A highly interactive real-time dashboard with service monitoring and deployment status\n- **Selective Deployment** - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed\n- **Explorer** - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts\n- **Code Editor** - A web-based code editor, enabling changing your application's source on the fly\n- **Utilities** - Powerful utility tools, including ENS, a transaction decoder and more\n\nCockpit is actively developed and implements new features on a regular basis.\n\n## Starting Cockpit\n\nCockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on [running apps](/docs/running_apps.html), Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:\n\n```\nAccess the web backend with the following url: http://localhost:55555?token=xxxxx-xxxxx-xxxxx-xxxxx\n```\n\nNotice that `token` is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we're trying to access the same session through different browser instances, one instance won't be able to connect.\n\nWe can always generate a new token inside [Embark's interactive console](/docs/using_the_console.html) using the [`token` command](/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit).\n\n## Entering the Cockpit\n\nOnce Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let's explore what Cockpit has to offer in the following guides.\n\nBon Voyage! \n","source":"docs/cockpit_introduction.md","raw":"title: Introduction to Cockpit\nlayout: docs\n---\n\nProbably one of Embark's most exciting features is its companion web interface Cockpit. With Cockpit, we're aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.\n\nThroughout the following sections we'll take a closer look at Cockpit's features and how we can use it to improve our developer experience when working with Embark!\n\n{% notification info 'A note on Cockpit availability' %}\nPlease note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.\n{% endnotification %}\n\n## What is Cockpit?\n\nCockpit is a web application that ships with Embark since version 4.0. It's an alternative and sometimes more powerful interface in comparison to [Embark's dashboard](/docs/dashboard.html), that connects to any existing Embark process. Since it's web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can't be found in Embark otherwise.\n\nSome of Cockpit's features are:\n\n- **Dashboard** - A highly interactive real-time dashboard with service monitoring and deployment status\n- **Selective Deployment** - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed\n- **Explorer** - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts\n- **Code Editor** - A web-based code editor, enabling changing your application's source on the fly\n- **Utilities** - Powerful utility tools, including ENS, a transaction decoder and more\n\nCockpit is actively developed and implements new features on a regular basis.\n\n## Starting Cockpit\n\nCockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on [running apps](/docs/running_apps.html), Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:\n\n```\nAccess the web backend with the following url: http://localhost:55555?token=xxxxx-xxxxx-xxxxx-xxxxx\n```\n\nNotice that `token` is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we're trying to access the same session through different browser instances, one instance won't be able to connect.\n\nWe can always generate a new token inside [Embark's interactive console](/docs/using_the_console.html) using the [`token` command](/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit).\n\n## Entering the Cockpit\n\nOnce Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let's explore what Cockpit has to offer in the following guides.\n\nBon Voyage! \n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_introduction.html","comments":1,"_id":"ck5ijm3r7000o7heg5npzevk2","content":"<p>Probably one of Embark’s most exciting features is its companion web interface Cockpit. With Cockpit, we’re aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.</p>\n<p>Throughout the following sections we’ll take a closer look at Cockpit’s features and how we can use it to improve our developer experience when working with Embark!</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on Cockpit availability</strong></p>\n  <p><p>Please note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"What-is-Cockpit\"><a href=\"#What-is-Cockpit\" class=\"headerlink\" title=\"What is Cockpit?\"></a>What is Cockpit?</h2><p>Cockpit is a web application that ships with Embark since version 4.0. It’s an alternative and sometimes more powerful interface in comparison to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>, that connects to any existing Embark process. Since it’s web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can’t be found in Embark otherwise.</p>\n<p>Some of Cockpit’s features are:</p>\n<ul>\n<li><strong>Dashboard</strong> - A highly interactive real-time dashboard with service monitoring and deployment status</li>\n<li><strong>Selective Deployment</strong> - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed</li>\n<li><strong>Explorer</strong> - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts</li>\n<li><strong>Code Editor</strong> - A web-based code editor, enabling changing your application’s source on the fly</li>\n<li><strong>Utilities</strong> - Powerful utility tools, including ENS, a transaction decoder and more</li>\n</ul>\n<p>Cockpit is actively developed and implements new features on a regular basis.</p>\n<h2 id=\"Starting-Cockpit\"><a href=\"#Starting-Cockpit\" class=\"headerlink\" title=\"Starting Cockpit\"></a>Starting Cockpit</h2><p>Cockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on <a href=\"/docs/running_apps.html\">running apps</a>, Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Access the web backend with the following url: http:&#x2F;&#x2F;localhost:55555?token&#x3D;xxxxx-xxxxx-xxxxx-xxxxx</span><br></pre></td></tr></table></figure>\n\n<p>Notice that <code>token</code> is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we’re trying to access the same session through different browser instances, one instance won’t be able to connect.</p>\n<p>We can always generate a new token inside <a href=\"/docs/using_the_console.html\">Embark’s interactive console</a> using the <a href=\"/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit\"><code>token</code> command</a>.</p>\n<h2 id=\"Entering-the-Cockpit\"><a href=\"#Entering-the-Cockpit\" class=\"headerlink\" title=\"Entering the Cockpit\"></a>Entering the Cockpit</h2><p>Once Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let’s explore what Cockpit has to offer in the following guides.</p>\n<p>Bon Voyage! </p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Probably one of Embark’s most exciting features is its companion web interface Cockpit. With Cockpit, we’re aiming for offering an alternative and more powerful interface to make developing and debugging decentralized applications even easier.</p>\n<p>Throughout the following sections we’ll take a closer look at Cockpit’s features and how we can use it to improve our developer experience when working with Embark!</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on Cockpit availability</strong></p>\n  <p><p>Please note that Cockpit is a feature that ships since Embark version 4.0 and is not available in or for previous versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"What-is-Cockpit\"><a href=\"#What-is-Cockpit\" class=\"headerlink\" title=\"What is Cockpit?\"></a>What is Cockpit?</h2><p>Cockpit is a web application that ships with Embark since version 4.0. It’s an alternative and sometimes more powerful interface in comparison to <a href=\"/docs/dashboard.html\">Embark’s dashboard</a>, that connects to any existing Embark process. Since it’s web-based, Cockpit offers a much richer and more interactive user interface, with additional tools and features that can’t be found in Embark otherwise.</p>\n<p>Some of Cockpit’s features are:</p>\n<ul>\n<li><strong>Dashboard</strong> - A highly interactive real-time dashboard with service monitoring and deployment status</li>\n<li><strong>Selective Deployment</strong> - A deployment interface that gives you fine-grain control over when and how your Smart Contracts are deployed</li>\n<li><strong>Explorer</strong> - A built-in blockchain explorer making it easy to explore blocks, transactions and accounts</li>\n<li><strong>Code Editor</strong> - A web-based code editor, enabling changing your application’s source on the fly</li>\n<li><strong>Utilities</strong> - Powerful utility tools, including ENS, a transaction decoder and more</li>\n</ul>\n<p>Cockpit is actively developed and implements new features on a regular basis.</p>\n<h2 id=\"Starting-Cockpit\"><a href=\"#Starting-Cockpit\" class=\"headerlink\" title=\"Starting Cockpit\"></a>Starting Cockpit</h2><p>Cockpit can be used as soon as Embark has been spinned up in any of our applications. As mentioned in our guide on <a href=\"/docs/running_apps.html\">running apps</a>, Embark will start Cockpit as part of the run process. In fact, Embark even outputs a message, telling us how to open Cockpit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Access the web backend with the following url: http:&#x2F;&#x2F;localhost:55555?token&#x3D;xxxxx-xxxxx-xxxxx-xxxxx</span><br></pre></td></tr></table></figure>\n\n<p>Notice that <code>token</code> is a security measurement so nobody else can access your Embark processes through Cockpit (unless they have the token). To make it a little more secure, tokens are one-time use only. If we’re trying to access the same session through different browser instances, one instance won’t be able to connect.</p>\n<p>We can always generate a new token inside <a href=\"/docs/using_the_console.html\">Embark’s interactive console</a> using the <a href=\"/docs/using_the_console.html#Retrieving-authentication-tokens-for-Cockpit\"><code>token</code> command</a>.</p>\n<h2 id=\"Entering-the-Cockpit\"><a href=\"#Entering-the-Cockpit\" class=\"headerlink\" title=\"Entering the Cockpit\"></a>Entering the Cockpit</h2><p>Once Embark is running, entering the Cockpit is really just a matter of opening the URL shown by Embark. Let’s explore what Cockpit has to offer in the following guides.</p>\n<p>Bon Voyage! </p>\n"},{"title":"Cockpit Utilities","layout":"docs","_content":"\n","source":"docs/cockpit_utils.md","raw":"title: Cockpit Utilities\nlayout: docs\n---\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_utils.html","comments":1,"_id":"ck5ijm3r9000q7heghpi5a61h","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Configuring Embark","layout":"docs","_content":"\nEmbark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we'll take a closer look at the basic configuration options provided by our application's `embark.json` file, which are mainly relevant for, but not restricted to, our application structure.\n\nFor configuration options related to connecting to a blockchain client, [deploying your Smart Contracts](contracts_configuration.html), [decentralized storage](storage_configuration.html), [Whisper](messages_configuration) or [ENS](naming_configuration.html), please head over to the dedicated configuration guides respectively.\n\n## Overview\n\nEvery application [created with Embark](create_project.html) comes with an `embark.json` file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here's what a freshly scaffolded `embark.json` file could look like:\n\n```\n{\n  \"contracts\": [\"contracts/**\"],\n  \"app\": {\n    \"js/dapp.js\": [\"app/dapp.js\"],\n    \"index.html\": \"app/index.html\",\n    \"images/\": [\"app/images/**\"]\n  },\n  \"buildDir\": \"dist/\",\n  \"generationDir\": \"embarkArtifacts\",\n  \"config\": \"config/\",\n  \"versions\": {\n    \"solc\": \"0.4.25\"\n  },\n  \"plugins\": {\n  },\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    }\n  }\n}\n```\n\nLet's look at the different options and learn what they do and mean.\n\n### contracts\n\nThis is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g `[\"contracts/**/*.sol\"]` will match all sol files inside any folders inside `contracts/`).\n\n### app\n\nEverything inside `app` configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.\n\nIn the key/value pairs of `app`, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.\n\n  - **js/dapp.js** - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (`app/dapp.js`).\n  - **index.html** - The entry point of our application (`app/index.html`)\n  - **images** - All image assets of our application that we can find in `app/images/`.\n\nChange these configurations as you need.\n\n### buildDir\n\nThe directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is `dist/`).\n\n{% notification info 'Important note:' %}\nWhen using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, `buildDir` should point at the same location as the complementary tool writes its distribution files to.\n\nThis is important so that Embark picks up the right files when doing things like [deploying your app](/docs/storage_deployment.html) on IPFS or Swarm.\n{% endnotification %}\n\n### generationDir\n\nA directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project's configuration. The default name of this directory is `embarkArtifacts`. To learn more about Embark Artifacts, head over to our guide on [Using EmbarkJS](/docs/javascript_usage.html).\n\n### config\n\nThis is the location of the configuration files. There are different options to configure those:\n\n* **A string** (e.g `\"config/\"`) - Will assume the directory in which the configuration files are located (`blockchain.js`, `contracts.js`, etc).\n* **An object**:\n  * Each property would configure the path of each configuration file\n  * Configuration properties can be set to false to disable the component/service in question\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\n\n### versions (3rd-party libraries)\n\nHere you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.\n\nCurrently, `solc` is the only library that can be specified in this way. It's possible to override the `solc` version in other configuration files such as `contracts.json` on a per environment basis.\n\n### plugins\n\nThis is a list of installed plugins. For more information on Plugins, head over to our [Plugins guide](/docs/installing_plugins.html).\n\n### options\n\nThe `options` property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the `solc` compiler, as well as options related to Embark's `reset` command:\n```\n...\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    },\n  }\n...\n```\n\n## Configuring Embark's reset command\n\nAs mentioned in the section above, it's possible to configure how Embark behaves when [resetting projects](/docs/running_apps.html#Resetting-apps). Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the `reset` option.\n\nIt comes with two properties:\n\n- **defaults** - Tells Embark whether it should reset the default files it usually resets or not\n- **files** - A list of files Embark should remove as well when resetting the project\n\nWith these two options we have full control over what files `reset` will remove.\n\n```\n...\n  \"options\": {\n    \"reset\": {\n      \"defaults\": true,\n      \"files\": [\"some/other/file\"]\n    }\n  }\n...\n```\n","source":"docs/configuration.md","raw":"title: Configuring Embark\nlayout: docs\n---\n\nEmbark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we'll take a closer look at the basic configuration options provided by our application's `embark.json` file, which are mainly relevant for, but not restricted to, our application structure.\n\nFor configuration options related to connecting to a blockchain client, [deploying your Smart Contracts](contracts_configuration.html), [decentralized storage](storage_configuration.html), [Whisper](messages_configuration) or [ENS](naming_configuration.html), please head over to the dedicated configuration guides respectively.\n\n## Overview\n\nEvery application [created with Embark](create_project.html) comes with an `embark.json` file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here's what a freshly scaffolded `embark.json` file could look like:\n\n```\n{\n  \"contracts\": [\"contracts/**\"],\n  \"app\": {\n    \"js/dapp.js\": [\"app/dapp.js\"],\n    \"index.html\": \"app/index.html\",\n    \"images/\": [\"app/images/**\"]\n  },\n  \"buildDir\": \"dist/\",\n  \"generationDir\": \"embarkArtifacts\",\n  \"config\": \"config/\",\n  \"versions\": {\n    \"solc\": \"0.4.25\"\n  },\n  \"plugins\": {\n  },\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    }\n  }\n}\n```\n\nLet's look at the different options and learn what they do and mean.\n\n### contracts\n\nThis is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g `[\"contracts/**/*.sol\"]` will match all sol files inside any folders inside `contracts/`).\n\n### app\n\nEverything inside `app` configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.\n\nIn the key/value pairs of `app`, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.\n\n  - **js/dapp.js** - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (`app/dapp.js`).\n  - **index.html** - The entry point of our application (`app/index.html`)\n  - **images** - All image assets of our application that we can find in `app/images/`.\n\nChange these configurations as you need.\n\n### buildDir\n\nThe directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is `dist/`).\n\n{% notification info 'Important note:' %}\nWhen using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, `buildDir` should point at the same location as the complementary tool writes its distribution files to.\n\nThis is important so that Embark picks up the right files when doing things like [deploying your app](/docs/storage_deployment.html) on IPFS or Swarm.\n{% endnotification %}\n\n### generationDir\n\nA directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project's configuration. The default name of this directory is `embarkArtifacts`. To learn more about Embark Artifacts, head over to our guide on [Using EmbarkJS](/docs/javascript_usage.html).\n\n### config\n\nThis is the location of the configuration files. There are different options to configure those:\n\n* **A string** (e.g `\"config/\"`) - Will assume the directory in which the configuration files are located (`blockchain.js`, `contracts.js`, etc).\n* **An object**:\n  * Each property would configure the path of each configuration file\n  * Configuration properties can be set to false to disable the component/service in question\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\n\n### versions (3rd-party libraries)\n\nHere you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.\n\nCurrently, `solc` is the only library that can be specified in this way. It's possible to override the `solc` version in other configuration files such as `contracts.json` on a per environment basis.\n\n### plugins\n\nThis is a list of installed plugins. For more information on Plugins, head over to our [Plugins guide](/docs/installing_plugins.html).\n\n### options\n\nThe `options` property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the `solc` compiler, as well as options related to Embark's `reset` command:\n```\n...\n  \"options\": {\n    \"solc\": {\n      \"optimize\": true,\n      \"optimize-runs\": 200\n    },\n  }\n...\n```\n\n## Configuring Embark's reset command\n\nAs mentioned in the section above, it's possible to configure how Embark behaves when [resetting projects](/docs/running_apps.html#Resetting-apps). Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the `reset` option.\n\nIt comes with two properties:\n\n- **defaults** - Tells Embark whether it should reset the default files it usually resets or not\n- **files** - A list of files Embark should remove as well when resetting the project\n\nWith these two options we have full control over what files `reset` will remove.\n\n```\n...\n  \"options\": {\n    \"reset\": {\n      \"defaults\": true,\n      \"files\": [\"some/other/file\"]\n    }\n  }\n...\n```\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/configuration.html","comments":1,"_id":"ck5ijm3ra000s7heg60xe14sp","content":"<p>Embark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we’ll take a closer look at the basic configuration options provided by our application’s <code>embark.json</code> file, which are mainly relevant for, but not restricted to, our application structure.</p>\n<p>For configuration options related to connecting to a blockchain client, <a href=\"contracts_configuration.html\">deploying your Smart Contracts</a>, <a href=\"storage_configuration.html\">decentralized storage</a>, <a href=\"messages_configuration\">Whisper</a> or <a href=\"naming_configuration.html\">ENS</a>, please head over to the dedicated configuration guides respectively.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Every application <a href=\"create_project.html\">created with Embark</a> comes with an <code>embark.json</code> file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here’s what a freshly scaffolded <code>embark.json</code> file could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;contracts&quot;: [&quot;contracts&#x2F;**&quot;],</span><br><span class=\"line\">  &quot;app&quot;: &#123;</span><br><span class=\"line\">    &quot;js&#x2F;dapp.js&quot;: [&quot;app&#x2F;dapp.js&quot;],</span><br><span class=\"line\">    &quot;index.html&quot;: &quot;app&#x2F;index.html&quot;,</span><br><span class=\"line\">    &quot;images&#x2F;&quot;: [&quot;app&#x2F;images&#x2F;**&quot;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;buildDir&quot;: &quot;dist&#x2F;&quot;,</span><br><span class=\"line\">  &quot;generationDir&quot;: &quot;embarkArtifacts&quot;,</span><br><span class=\"line\">  &quot;config&quot;: &quot;config&#x2F;&quot;,</span><br><span class=\"line\">  &quot;versions&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &quot;0.4.25&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s look at the different options and learn what they do and mean.</p>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts\"></a>contracts</h3><p>This is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g <code>[&quot;contracts/**/*.sol&quot;]</code> will match all sol files inside any folders inside <code>contracts/</code>).</p>\n<h3 id=\"app\"><a href=\"#app\" class=\"headerlink\" title=\"app\"></a>app</h3><p>Everything inside <code>app</code> configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.</p>\n<p>In the key/value pairs of <code>app</code>, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.</p>\n<ul>\n<li><strong>js/dapp.js</strong> - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (<code>app/dapp.js</code>).</li>\n<li><strong>index.html</strong> - The entry point of our application (<code>app/index.html</code>)</li>\n<li><strong>images</strong> - All image assets of our application that we can find in <code>app/images/</code>.</li>\n</ul>\n<p>Change these configurations as you need.</p>\n<h3 id=\"buildDir\"><a href=\"#buildDir\" class=\"headerlink\" title=\"buildDir\"></a>buildDir</h3><p>The directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is <code>dist/</code>).</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important note:</strong></p>\n  <p><p>When using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, <code>buildDir</code> should point at the same location as the complementary tool writes its distribution files to.</p>\n<p>This is important so that Embark picks up the right files when doing things like <a href=\"/docs/storage_deployment.html\">deploying your app</a> on IPFS or Swarm.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"generationDir\"><a href=\"#generationDir\" class=\"headerlink\" title=\"generationDir\"></a>generationDir</h3><p>A directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project’s configuration. The default name of this directory is <code>embarkArtifacts</code>. To learn more about Embark Artifacts, head over to our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>.</p>\n<h3 id=\"config\"><a href=\"#config\" class=\"headerlink\" title=\"config\"></a>config</h3><p>This is the location of the configuration files. There are different options to configure those:</p>\n<ul>\n<li><strong>A string</strong> (e.g <code>&quot;config/&quot;</code>) - Will assume the directory in which the configuration files are located (<code>blockchain.js</code>, <code>contracts.js</code>, etc).</li>\n<li><strong>An object</strong>:<ul>\n<li>Each property would configure the path of each configuration file</li>\n<li>Configuration properties can be set to false to disable the component/service in question</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"versions-3rd-party-libraries\"><a href=\"#versions-3rd-party-libraries\" class=\"headerlink\" title=\"versions (3rd-party libraries)\"></a>versions (3rd-party libraries)</h3><p>Here you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.</p>\n<p>Currently, <code>solc</code> is the only library that can be specified in this way. It’s possible to override the <code>solc</code> version in other configuration files such as <code>contracts.json</code> on a per environment basis.</p>\n<h3 id=\"plugins\"><a href=\"#plugins\" class=\"headerlink\" title=\"plugins\"></a>plugins</h3><p>This is a list of installed plugins. For more information on Plugins, head over to our <a href=\"/docs/installing_plugins.html\">Plugins guide</a>.</p>\n<h3 id=\"options\"><a href=\"#options\" class=\"headerlink\" title=\"options\"></a>options</h3><p>The <code>options</code> property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the <code>solc</code> compiler, as well as options related to Embark’s <code>reset</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-Embark’s-reset-command\"><a href=\"#Configuring-Embark’s-reset-command\" class=\"headerlink\" title=\"Configuring Embark’s reset command\"></a>Configuring Embark’s reset command</h2><p>As mentioned in the section above, it’s possible to configure how Embark behaves when <a href=\"/docs/running_apps.html#Resetting-apps\">resetting projects</a>. Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the <code>reset</code> option.</p>\n<p>It comes with two properties:</p>\n<ul>\n<li><strong>defaults</strong> - Tells Embark whether it should reset the default files it usually resets or not</li>\n<li><strong>files</strong> - A list of files Embark should remove as well when resetting the project</li>\n</ul>\n<p>With these two options we have full control over what files <code>reset</code> will remove.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;reset&quot;: &#123;</span><br><span class=\"line\">      &quot;defaults&quot;: true,</span><br><span class=\"line\">      &quot;files&quot;: [&quot;some&#x2F;other&#x2F;file&quot;]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark offers a lot of fine control when it comes to configuring the different parts of our decentralized application. In this guide we’ll take a closer look at the basic configuration options provided by our application’s <code>embark.json</code> file, which are mainly relevant for, but not restricted to, our application structure.</p>\n<p>For configuration options related to connecting to a blockchain client, <a href=\"contracts_configuration.html\">deploying your Smart Contracts</a>, <a href=\"storage_configuration.html\">decentralized storage</a>, <a href=\"messages_configuration\">Whisper</a> or <a href=\"naming_configuration.html\">ENS</a>, please head over to the dedicated configuration guides respectively.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Every application <a href=\"create_project.html\">created with Embark</a> comes with an <code>embark.json</code> file. This file configures where Embark has to look for Smart Contract files and assets, as well as plugins options. Here’s what a freshly scaffolded <code>embark.json</code> file could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;contracts&quot;: [&quot;contracts&#x2F;**&quot;],</span><br><span class=\"line\">  &quot;app&quot;: &#123;</span><br><span class=\"line\">    &quot;js&#x2F;dapp.js&quot;: [&quot;app&#x2F;dapp.js&quot;],</span><br><span class=\"line\">    &quot;index.html&quot;: &quot;app&#x2F;index.html&quot;,</span><br><span class=\"line\">    &quot;images&#x2F;&quot;: [&quot;app&#x2F;images&#x2F;**&quot;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;buildDir&quot;: &quot;dist&#x2F;&quot;,</span><br><span class=\"line\">  &quot;generationDir&quot;: &quot;embarkArtifacts&quot;,</span><br><span class=\"line\">  &quot;config&quot;: &quot;config&#x2F;&quot;,</span><br><span class=\"line\">  &quot;versions&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &quot;0.4.25&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s look at the different options and learn what they do and mean.</p>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts\"></a>contracts</h3><p>This is a list of directories in which Embark should look for Smart Contract files. These typically are globbing patterns (e.g <code>[&quot;contracts/**/*.sol&quot;]</code> will match all sol files inside any folders inside <code>contracts/</code>).</p>\n<h3 id=\"app\"><a href=\"#app\" class=\"headerlink\" title=\"app\"></a>app</h3><p>Everything inside <code>app</code> configures the assets of our application, which could be anything from HTML, JavaScript to CSS and other assets. JavaScript source files are compiled using webpack to create a bundle, all other file types are simply copied to the specified destination.</p>\n<p>In the key/value pairs of <code>app</code>, every key describes the destination, while the value describes a list of glob patterns for files to be transformed and copied.</p>\n<ul>\n<li><strong>js/dapp.js</strong> - This is the JavaScript bundle that contains our application. Specifically, all files that are defined in this option (<code>app/dapp.js</code>).</li>\n<li><strong>index.html</strong> - The entry point of our application (<code>app/index.html</code>)</li>\n<li><strong>images</strong> - All image assets of our application that we can find in <code>app/images/</code>.</li>\n</ul>\n<p>Change these configurations as you need.</p>\n<h3 id=\"buildDir\"><a href=\"#buildDir\" class=\"headerlink\" title=\"buildDir\"></a>buildDir</h3><p>The directory to which the build artifacts are being moved to. Everything inside this configured folder can be considered a production ready build (default is <code>dist/</code>).</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important note:</strong></p>\n  <p><p>When using Embark with any other complementary CLI tool for building a DApp, such as Create-React-App or Angular CLI, <code>buildDir</code> should point at the same location as the complementary tool writes its distribution files to.</p>\n<p>This is important so that Embark picks up the right files when doing things like <a href=\"/docs/storage_deployment.html\">deploying your app</a> on IPFS or Swarm.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"generationDir\"><a href=\"#generationDir\" class=\"headerlink\" title=\"generationDir\"></a>generationDir</h3><p>A directory in which Embark is going to generate artifacts that can be used for DApp development. This include Smart Contract ABIs as well Embark specific configuration data extracted from the project’s configuration. The default name of this directory is <code>embarkArtifacts</code>. To learn more about Embark Artifacts, head over to our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>.</p>\n<h3 id=\"config\"><a href=\"#config\" class=\"headerlink\" title=\"config\"></a>config</h3><p>This is the location of the configuration files. There are different options to configure those:</p>\n<ul>\n<li><strong>A string</strong> (e.g <code>&quot;config/&quot;</code>) - Will assume the directory in which the configuration files are located (<code>blockchain.js</code>, <code>contracts.js</code>, etc).</li>\n<li><strong>An object</strong>:<ul>\n<li>Each property would configure the path of each configuration file</li>\n<li>Configuration properties can be set to false to disable the component/service in question</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"versions-3rd-party-libraries\"><a href=\"#versions-3rd-party-libraries\" class=\"headerlink\" title=\"versions (3rd-party libraries)\"></a>versions (3rd-party libraries)</h3><p>Here you can optionally specify the versions of the library to be used by Embark. Embark will automatically download the specific library version if necessary.</p>\n<p>Currently, <code>solc</code> is the only library that can be specified in this way. It’s possible to override the <code>solc</code> version in other configuration files such as <code>contracts.json</code> on a per environment basis.</p>\n<h3 id=\"plugins\"><a href=\"#plugins\" class=\"headerlink\" title=\"plugins\"></a>plugins</h3><p>This is a list of installed plugins. For more information on Plugins, head over to our <a href=\"/docs/installing_plugins.html\">Plugins guide</a>.</p>\n<h3 id=\"options\"><a href=\"#options\" class=\"headerlink\" title=\"options\"></a>options</h3><p>The <code>options</code> property enable us to configure options for specific components and services of Embark and our application. Currently supported are options for the <code>solc</code> compiler, as well as options related to Embark’s <code>reset</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;solc&quot;: &#123;</span><br><span class=\"line\">      &quot;optimize&quot;: true,</span><br><span class=\"line\">      &quot;optimize-runs&quot;: 200</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-Embark’s-reset-command\"><a href=\"#Configuring-Embark’s-reset-command\" class=\"headerlink\" title=\"Configuring Embark’s reset command\"></a>Configuring Embark’s reset command</h2><p>As mentioned in the section above, it’s possible to configure how Embark behaves when <a href=\"/docs/running_apps.html#Resetting-apps\">resetting projects</a>. Most of the time, the default configuration should do the trick, however, if we need more control over what files should be removed as part of the reset, we can do that using the <code>reset</code> option.</p>\n<p>It comes with two properties:</p>\n<ul>\n<li><strong>defaults</strong> - Tells Embark whether it should reset the default files it usually resets or not</li>\n<li><strong>files</strong> - A list of files Embark should remove as well when resetting the project</li>\n</ul>\n<p>With these two options we have full control over what files <code>reset</code> will remove.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &quot;options&quot;: &#123;</span><br><span class=\"line\">    &quot;reset&quot;: &#123;</span><br><span class=\"line\">      &quot;defaults&quot;: true,</span><br><span class=\"line\">      &quot;files&quot;: [&quot;some&#x2F;other&#x2F;file&quot;]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n"},{"title":"Console Commands","layout":"docs","_content":"\nWith ``embark run`` there is a console at the bottom which can be used to interact with contracts or with embark itself. type ``help`` to see a list of available commands, more commands will be added with each version of Embark.\n\n### Interacting with contracts\nAfter contract deployment, you should be able to interact with the web3 object and the deployed contracts.\n\n### Other Available Commands\nSome commands available include:\n\n* ``version`` - see list of software & libraries and their respective versions\n* ``quit`` or ``exit`` - to immediatly exit (you can also use ctrl + c)\n* ``webserver start`` - start the dev webserver\n* ``webserver stop`` - stop the dev webserver\n* ``browser open`` - open a web browser and load your DApp from the dev webserver\n\n### Custom Commands\n\nIt's possible to extend Embark to include custom commands. See [how to create\na plugin](creating_plugins.html)\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n","source":"docs/console_commands.md","raw":"title: Console Commands\nlayout: docs\n---\n\nWith ``embark run`` there is a console at the bottom which can be used to interact with contracts or with embark itself. type ``help`` to see a list of available commands, more commands will be added with each version of Embark.\n\n### Interacting with contracts\nAfter contract deployment, you should be able to interact with the web3 object and the deployed contracts.\n\n### Other Available Commands\nSome commands available include:\n\n* ``version`` - see list of software & libraries and their respective versions\n* ``quit`` or ``exit`` - to immediatly exit (you can also use ctrl + c)\n* ``webserver start`` - start the dev webserver\n* ``webserver stop`` - stop the dev webserver\n* ``browser open`` - open a web browser and load your DApp from the dev webserver\n\n### Custom Commands\n\nIt's possible to extend Embark to include custom commands. See [how to create\na plugin](creating_plugins.html)\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/console_commands.html","comments":1,"_id":"ck5ijm3ra000u7heg555m76d6","content":"<p>With <code>embark run</code> there is a console at the bottom which can be used to interact with contracts or with embark itself. type <code>help</code> to see a list of available commands, more commands will be added with each version of Embark.</p>\n<h3 id=\"Interacting-with-contracts\"><a href=\"#Interacting-with-contracts\" class=\"headerlink\" title=\"Interacting with contracts\"></a>Interacting with contracts</h3><p>After contract deployment, you should be able to interact with the web3 object and the deployed contracts.</p>\n<h3 id=\"Other-Available-Commands\"><a href=\"#Other-Available-Commands\" class=\"headerlink\" title=\"Other Available Commands\"></a>Other Available Commands</h3><p>Some commands available include:</p>\n<ul>\n<li><code>version</code> - see list of software &amp; libraries and their respective versions</li>\n<li><code>quit</code> or <code>exit</code> - to immediatly exit (you can also use ctrl + c)</li>\n<li><code>webserver start</code> - start the dev webserver</li>\n<li><code>webserver stop</code> - stop the dev webserver</li>\n<li><code>browser open</code> - open a web browser and load your DApp from the dev webserver</li>\n</ul>\n<h3 id=\"Custom-Commands\"><a href=\"#Custom-Commands\" class=\"headerlink\" title=\"Custom Commands\"></a>Custom Commands</h3><p>It’s possible to extend Embark to include custom commands. See <a href=\"creating_plugins.html\">how to create<br>a plugin</a></p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With <code>embark run</code> there is a console at the bottom which can be used to interact with contracts or with embark itself. type <code>help</code> to see a list of available commands, more commands will be added with each version of Embark.</p>\n<h3 id=\"Interacting-with-contracts\"><a href=\"#Interacting-with-contracts\" class=\"headerlink\" title=\"Interacting with contracts\"></a>Interacting with contracts</h3><p>After contract deployment, you should be able to interact with the web3 object and the deployed contracts.</p>\n<h3 id=\"Other-Available-Commands\"><a href=\"#Other-Available-Commands\" class=\"headerlink\" title=\"Other Available Commands\"></a>Other Available Commands</h3><p>Some commands available include:</p>\n<ul>\n<li><code>version</code> - see list of software &amp; libraries and their respective versions</li>\n<li><code>quit</code> or <code>exit</code> - to immediatly exit (you can also use ctrl + c)</li>\n<li><code>webserver start</code> - start the dev webserver</li>\n<li><code>webserver stop</code> - stop the dev webserver</li>\n<li><code>browser open</code> - open a web browser and load your DApp from the dev webserver</li>\n</ul>\n<h3 id=\"Custom-Commands\"><a href=\"#Custom-Commands\" class=\"headerlink\" title=\"Custom Commands\"></a>Custom Commands</h3><p>It’s possible to extend Embark to include custom commands. See <a href=\"creating_plugins.html\">how to create<br>a plugin</a></p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n        embark.registerConsoleCommand(function(cmd, options) {\n          if (cmd === \"hello\") {\n            return \"hello there!\";\n          }\n          // continue to embark or next plugin;\n          return false;\n        });\n    }\n</code></pre>\n"},{"title":"Accounts & Deployment","layout":"docs","_content":"\nAccounts configuration has moved to the blockchain config. You can learn more [here](/docs/blockchain_accounts_configuration.html).\n\n## Deploying to Infura\n\nTo deploy to Infura or another endpoint, just use the blockchain `endpoint`. More details [here](/docs/blockchain_configuration.html)\n","source":"docs/contracts_deployment.md","raw":"title: Accounts & Deployment\nlayout: docs\n---\n\nAccounts configuration has moved to the blockchain config. You can learn more [here](/docs/blockchain_accounts_configuration.html).\n\n## Deploying to Infura\n\nTo deploy to Infura or another endpoint, just use the blockchain `endpoint`. More details [here](/docs/blockchain_configuration.html)\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_deployment.html","comments":1,"_id":"ck5ijm3rb000w7heg1uvb25hr","content":"<p>Accounts configuration has moved to the blockchain config. You can learn more <a href=\"/docs/blockchain_accounts_configuration.html\">here</a>.</p>\n<h2 id=\"Deploying-to-Infura\"><a href=\"#Deploying-to-Infura\" class=\"headerlink\" title=\"Deploying to Infura\"></a>Deploying to Infura</h2><p>To deploy to Infura or another endpoint, just use the blockchain <code>endpoint</code>. More details <a href=\"/docs/blockchain_configuration.html\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Accounts configuration has moved to the blockchain config. You can learn more <a href=\"/docs/blockchain_accounts_configuration.html\">here</a>.</p>\n<h2 id=\"Deploying-to-Infura\"><a href=\"#Deploying-to-Infura\" class=\"headerlink\" title=\"Deploying to Infura\"></a>Deploying to Infura</h2><p>To deploy to Infura or another endpoint, just use the blockchain <code>endpoint</code>. More details <a href=\"/docs/blockchain_configuration.html\">here</a></p>\n"},{"title":"Special Imports","layout":"docs","_content":"\nDepending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we'll discuss the various ways of importing Smart Contract source code in other Smart Contract files.\n\n{% notification info 'Scope of this guide' %}\nThe following features are currently only supported for Smart Contracts written in the Solidity programming language. If you're using another language, such as Vyper, these features may not be available.\n{% endnotification %}\n\n## Importing files\n\nIf using Solidity it's possible to import other Smart Contract files inside a source file from the application's folders that are not explicitly defined in the `deploy` property of `embark.json`.\n\n```\nimport \"another_folder/another_test.sol\";\n```\n\n## Importing from `node_modules`\n\nEmbark also supports convenient imports from installed `node_modules`. Just specify the package name including the path to the Solidity file you wish to import.\n\n```\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n```\n\n## Importing from remote paths\n\nSource files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):\n\n```\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\";\nimport \"bzz:/1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63\"\n```\n\n","source":"docs/contracts_imports.md","raw":"title: Special Imports\nlayout: docs\n---\n\nDepending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we'll discuss the various ways of importing Smart Contract source code in other Smart Contract files.\n\n{% notification info 'Scope of this guide' %}\nThe following features are currently only supported for Smart Contracts written in the Solidity programming language. If you're using another language, such as Vyper, these features may not be available.\n{% endnotification %}\n\n## Importing files\n\nIf using Solidity it's possible to import other Smart Contract files inside a source file from the application's folders that are not explicitly defined in the `deploy` property of `embark.json`.\n\n```\nimport \"another_folder/another_test.sol\";\n```\n\n## Importing from `node_modules`\n\nEmbark also supports convenient imports from installed `node_modules`. Just specify the package name including the path to the Solidity file you wish to import.\n\n```\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n```\n\n## Importing from remote paths\n\nSource files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):\n\n```\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\";\nimport \"bzz:/1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63\"\n```\n\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_imports.html","comments":1,"_id":"ck5ijm3rc000y7hega44j5ops","content":"<p>Depending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we’ll discuss the various ways of importing Smart Contract source code in other Smart Contract files.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Scope of this guide</strong></p>\n  <p><p>The following features are currently only supported for Smart Contracts written in the Solidity programming language. If you’re using another language, such as Vyper, these features may not be available.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Importing-files\"><a href=\"#Importing-files\" class=\"headerlink\" title=\"Importing files\"></a>Importing files</h2><p>If using Solidity it’s possible to import other Smart Contract files inside a source file from the application’s folders that are not explicitly defined in the <code>deploy</code> property of <code>embark.json</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;another_folder&#x2F;another_test.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-node-modules\"><a href=\"#Importing-from-node-modules\" class=\"headerlink\" title=\"Importing from node_modules\"></a>Importing from <code>node_modules</code></h2><p>Embark also supports convenient imports from installed <code>node_modules</code>. Just specify the package name including the path to the Solidity file you wish to import.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-remote-paths\"><a href=\"#Importing-from-remote-paths\" class=\"headerlink\" title=\"Importing from remote paths\"></a>Importing from remote paths</h2><p>Source files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&quot;;</span><br><span class=\"line\">import &quot;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&quot;;</span><br><span class=\"line\">import &quot;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\">import &quot;bzz:&#x2F;1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63&quot;</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Depending on which language for developing Smart Contracts is used, Embark supports special import paths. In this guide we’ll discuss the various ways of importing Smart Contract source code in other Smart Contract files.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Scope of this guide</strong></p>\n  <p><p>The following features are currently only supported for Smart Contracts written in the Solidity programming language. If you’re using another language, such as Vyper, these features may not be available.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Importing-files\"><a href=\"#Importing-files\" class=\"headerlink\" title=\"Importing files\"></a>Importing files</h2><p>If using Solidity it’s possible to import other Smart Contract files inside a source file from the application’s folders that are not explicitly defined in the <code>deploy</code> property of <code>embark.json</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;another_folder&#x2F;another_test.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-node-modules\"><a href=\"#Importing-from-node-modules\" class=\"headerlink\" title=\"Importing from node_modules\"></a>Importing from <code>node_modules</code></h2><p>Embark also supports convenient imports from installed <code>node_modules</code>. Just specify the package name including the path to the Solidity file you wish to import.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-from-remote-paths\"><a href=\"#Importing-from-remote-paths\" class=\"headerlink\" title=\"Importing from remote paths\"></a>Importing from remote paths</h2><p>Source files can even be imported straight from Git, Github, IPFS, Swarm  or via HTTP(S):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&quot;;</span><br><span class=\"line\">import &quot;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&quot;;</span><br><span class=\"line\">import &quot;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\">import &quot;bzz:&#x2F;1ffe993abc835f480f688d07ad75ad1dbdbd1ddb368a08b7ed4d3e400771dd63&quot;</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Smart Contracts in JavaScript","layout":"docs","_content":"\nIn order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.\n\nIn this guide we'll take a quick look how to make use of them!\n\n## Importing and using Smart Contracts\n\nEmbark will [automatically generate artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all configured Smart Contracts in our application, making them available to an application's front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:\n\n```\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill available as JavaScript object, after artifact generation and can be imported as:\n\n```\nimport { SimpleStorage } from './embarkArtifacts/contracts';\n```\n\nNotice that the exact path to the Smart Contract source is configured using the `generationDir` property in [Embark's configuration](/docs/configuration.html#generationDir).\n\nOnce imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you've installed.\n\n```\nSimpleStorage.methods.set(100).send();\n\nSimpleStorage.methods.get().call().then(value => {\n  console.log(value);\n});\n\nSimpleStorage.methods.storedData().call().then(value => {\n  console.log(value);\n});\n```\n","source":"docs/contracts_javascript.md","raw":"title: Smart Contracts in JavaScript\nlayout: docs\n---\n\nIn order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.\n\nIn this guide we'll take a quick look how to make use of them!\n\n## Importing and using Smart Contracts\n\nEmbark will [automatically generate artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all configured Smart Contracts in our application, making them available to an application's front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:\n\n```\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill available as JavaScript object, after artifact generation and can be imported as:\n\n```\nimport { SimpleStorage } from './embarkArtifacts/contracts';\n```\n\nNotice that the exact path to the Smart Contract source is configured using the `generationDir` property in [Embark's configuration](/docs/configuration.html#generationDir).\n\nOnce imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you've installed.\n\n```\nSimpleStorage.methods.set(100).send();\n\nSimpleStorage.methods.get().call().then(value => {\n  console.log(value);\n});\n\nSimpleStorage.methods.storedData().call().then(value => {\n  console.log(value);\n});\n```\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_javascript.html","comments":1,"_id":"ck5ijm3rd000z7heggz02alrd","content":"<p>In order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.</p>\n<p>In this guide we’ll take a quick look how to make use of them!</p>\n<h2 id=\"Importing-and-using-Smart-Contracts\"><a href=\"#Importing-and-using-Smart-Contracts\" class=\"headerlink\" title=\"Importing and using Smart Contracts\"></a>Importing and using Smart Contracts</h2><p>Embark will <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">automatically generate artifacts</a> for all configured Smart Contracts in our application, making them available to an application’s front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will available as JavaScript object, after artifact generation and can be imported as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; SimpleStorage &#125; from &#39;.&#x2F;embarkArtifacts&#x2F;contracts&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the exact path to the Smart Contract source is configured using the <code>generationDir</code> property in <a href=\"/docs/configuration.html#generationDir\">Embark’s configuration</a>.</p>\n<p>Once imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you’ve installed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.get().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to talk to our deployed Smart Contracts through a web application, we typically need a JavaScript equivalent that offers APIs to make this possible. Embark generates JavaScript artifacts for all Smart Contracts used by our application.</p>\n<p>In this guide we’ll take a quick look how to make use of them!</p>\n<h2 id=\"Importing-and-using-Smart-Contracts\"><a href=\"#Importing-and-using-Smart-Contracts\" class=\"headerlink\" title=\"Importing and using Smart Contracts\"></a>Importing and using Smart Contracts</h2><p>Embark will <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">automatically generate artifacts</a> for all configured Smart Contracts in our application, making them available to an application’s front-end. Allwe have to do is importing them accordingly. For example, the Smart Contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will available as JavaScript object, after artifact generation and can be imported as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; SimpleStorage &#125; from &#39;.&#x2F;embarkArtifacts&#x2F;contracts&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the exact path to the Smart Contract source is configured using the <code>generationDir</code> property in <a href=\"/docs/configuration.html#generationDir\">Embark’s configuration</a>.</p>\n<p>Once imported, Smart Contract APIs can be used as needed. The code below uses Web.js syntax and might differ from your APIs, depending on what web3 connector you’ve installed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.get().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(value &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n"},{"title":"Creating apps with Embark","layout":"docs","_content":"\nOnce Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let's take a look!\n\n## Using the `demo` command\n\nAs discussed in our [quickstart guide](/docs/quick_start.html), the fastest way to get up and running with Embark is using its `demo` command. This will scaffold a new demo application and its needed environment in a folder called `embark_demo`. The demo application lets you play with Embark's APIs through a pre-built web interface.\n\n```\n$ embark demo\n```\n\n## Creating a new app\n\nIf you prefer starting entirely from scratch, while still getting a ready to use environment, Embark's `new` command has got you covered. Similar to the `demo` command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.\n\n{% notification info 'Quick tip: Smart Contract only apps' %}\nSmart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of `new` command's `--contracts-only` option, as described [here](create_project.html#Creating-“contracts-only”-apps).\n{% endnotification %}\n\n```\n$ embark new <YourDappName>\n```\n\n## Creating apps from templates\n\nAnother possible scenario to start from is taking advantage of a template. Embark [comes with templates](/templates) for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the `--template` option and either specify a supported template name, or a Git host URL.\n\nThe following example creates a new application from [Embark's TypeScript template](https://github.com/embarklabs/embark-typescript-template):\n\n```\n$ embark new <YourDAppName> --template typescript\n```\n\nTo learn more about supported templates, head over to our [templates](/templates) or look out for `embark-[template_name]-template` [repositories](https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=).\n\nTemplates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:\n\n```\n$ embark new <YourDAppName> --template https://github.com/embarklabs/embark-vue-template\n```\n\nIn fact, in case of GitHub, the same can be done with the username/repository shortcut:\n\n```\n$ embark new <YourDAppName> --template embarklabs/embark-vue-template\n```\n\nIt is even possible to specify the branch by appending a `#` and the branch name you're interested in:\n\n```\n$ embark new <YourDAppName> --template status-im/dappcon-workshop-dapp#start-here\n```\n\n## Creating \"contracts-only\" apps\n\nSometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the `--contracts-only` option.\n\nThe following command will create a project with all Embark services disabled except the blockchain service.\n\n```\n$ embark new <YourDAppName> --contracts-only\n```\n\nThis will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps [here](structure.html#Simple-template-structure).\n\n{% notification info 'A note on --simple' %}\nIn earlier versions of Embark the same could be achieved using the `--simple` option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n","source":"docs/create_project.md","raw":"title: Creating apps with Embark\nlayout: docs\n---\n\nOnce Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let's take a look!\n\n## Using the `demo` command\n\nAs discussed in our [quickstart guide](/docs/quick_start.html), the fastest way to get up and running with Embark is using its `demo` command. This will scaffold a new demo application and its needed environment in a folder called `embark_demo`. The demo application lets you play with Embark's APIs through a pre-built web interface.\n\n```\n$ embark demo\n```\n\n## Creating a new app\n\nIf you prefer starting entirely from scratch, while still getting a ready to use environment, Embark's `new` command has got you covered. Similar to the `demo` command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.\n\n{% notification info 'Quick tip: Smart Contract only apps' %}\nSmart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of `new` command's `--contracts-only` option, as described [here](create_project.html#Creating-“contracts-only”-apps).\n{% endnotification %}\n\n```\n$ embark new <YourDappName>\n```\n\n## Creating apps from templates\n\nAnother possible scenario to start from is taking advantage of a template. Embark [comes with templates](/templates) for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the `--template` option and either specify a supported template name, or a Git host URL.\n\nThe following example creates a new application from [Embark's TypeScript template](https://github.com/embarklabs/embark-typescript-template):\n\n```\n$ embark new <YourDAppName> --template typescript\n```\n\nTo learn more about supported templates, head over to our [templates](/templates) or look out for `embark-[template_name]-template` [repositories](https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=).\n\nTemplates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:\n\n```\n$ embark new <YourDAppName> --template https://github.com/embarklabs/embark-vue-template\n```\n\nIn fact, in case of GitHub, the same can be done with the username/repository shortcut:\n\n```\n$ embark new <YourDAppName> --template embarklabs/embark-vue-template\n```\n\nIt is even possible to specify the branch by appending a `#` and the branch name you're interested in:\n\n```\n$ embark new <YourDAppName> --template status-im/dappcon-workshop-dapp#start-here\n```\n\n## Creating \"contracts-only\" apps\n\nSometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the `--contracts-only` option.\n\nThe following command will create a project with all Embark services disabled except the blockchain service.\n\n```\n$ embark new <YourDAppName> --contracts-only\n```\n\nThis will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps [here](structure.html#Simple-template-structure).\n\n{% notification info 'A note on --simple' %}\nIn earlier versions of Embark the same could be achieved using the `--simple` option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n","date":"2020-01-19T20:56:53.009Z","updated":"2020-01-19T20:56:53.009Z","path":"docs/create_project.html","_id":"ck5ijm3rd00107heggjejgqmv","comments":1,"content":"<p>Once Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let’s take a look!</p>\n<h2 id=\"Using-the-demo-command\"><a href=\"#Using-the-demo-command\" class=\"headerlink\" title=\"Using the demo command\"></a>Using the <code>demo</code> command</h2><p>As discussed in our <a href=\"/docs/quick_start.html\">quickstart guide</a>, the fastest way to get up and running with Embark is using its <code>demo</code> command. This will scaffold a new demo application and its needed environment in a folder called <code>embark_demo</code>. The demo application lets you play with Embark’s APIs through a pre-built web interface.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-new-app\"><a href=\"#Creating-a-new-app\" class=\"headerlink\" title=\"Creating a new app\"></a>Creating a new app</h2><p>If you prefer starting entirely from scratch, while still getting a ready to use environment, Embark’s <code>new</code> command has got you covered. Similar to the <code>demo</code> command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick tip: Smart Contract only apps</strong></p>\n  <p><p>Smart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of <code>new</code> command’s <code>--contracts-only</code> option, as described <a href=\"create_project.html#Creating-“contracts-only”-apps\">here</a>.</p>\n</p>\n</div> \n\n\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDappName&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-apps-from-templates\"><a href=\"#Creating-apps-from-templates\" class=\"headerlink\" title=\"Creating apps from templates\"></a>Creating apps from templates</h2><p>Another possible scenario to start from is taking advantage of a template. Embark <a href=\"/templates\">comes with templates</a> for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the <code>--template</code> option and either specify a supported template name, or a Git host URL.</p>\n<p>The following example creates a new application from <a href=\"https://github.com/embarklabs/embark-typescript-template\" target=\"_blank\" rel=\"noopener\">Embark’s TypeScript template</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>To learn more about supported templates, head over to our <a href=\"/templates\">templates</a> or look out for <code>embark-[template_name]-template</code> <a href=\"https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=\" target=\"_blank\" rel=\"noopener\">repositories</a>.</p>\n<p>Templates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template https:&#x2F;&#x2F;github.com&#x2F;embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>In fact, in case of GitHub, the same can be done with the username/repository shortcut:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>It is even possible to specify the branch by appending a <code>#</code> and the branch name you’re interested in:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template status-im&#x2F;dappcon-workshop-dapp#start-here</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-“contracts-only”-apps\"><a href=\"#Creating-“contracts-only”-apps\" class=\"headerlink\" title=\"Creating “contracts-only” apps\"></a>Creating “contracts-only” apps</h2><p>Sometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the <code>--contracts-only</code> option.</p>\n<p>The following command will create a project with all Embark services disabled except the blockchain service.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --contracts-only</span><br></pre></td></tr></table></figure>\n\n<p>This will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps <a href=\"structure.html#Simple-template-structure\">here</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on --simple</strong></p>\n  <p><p>In earlier versions of Embark the same could be achieved using the <code>--simple</code> option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Once Embark is installed, there are different ways to create a new decentralized application. Whether we intent to create an application that uses only Smart Contracts, or we want to take advantage of other decentralized features like storages and messaging, Embark provides options and templates for various scenarios. Let’s take a look!</p>\n<h2 id=\"Using-the-demo-command\"><a href=\"#Using-the-demo-command\" class=\"headerlink\" title=\"Using the demo command\"></a>Using the <code>demo</code> command</h2><p>As discussed in our <a href=\"/docs/quick_start.html\">quickstart guide</a>, the fastest way to get up and running with Embark is using its <code>demo</code> command. This will scaffold a new demo application and its needed environment in a folder called <code>embark_demo</code>. The demo application lets you play with Embark’s APIs through a pre-built web interface.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-new-app\"><a href=\"#Creating-a-new-app\" class=\"headerlink\" title=\"Creating a new app\"></a>Creating a new app</h2><p>If you prefer starting entirely from scratch, while still getting a ready to use environment, Embark’s <code>new</code> command has got you covered. Similar to the <code>demo</code> command, it will scaffold a new project folder. However, it will not include the demo application. The green field is all yours.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick tip: Smart Contract only apps</strong></p>\n  <p><p>Smart Contract developers that mainly want to focus on building and deploying Smart Contracts can take advantage of <code>new</code> command’s <code>--contracts-only</code> option, as described <a href=\"create_project.html#Creating-“contracts-only”-apps\">here</a>.</p>\n</p>\n</div> \n\n\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDappName&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-apps-from-templates\"><a href=\"#Creating-apps-from-templates\" class=\"headerlink\" title=\"Creating apps from templates\"></a>Creating apps from templates</h2><p>Another possible scenario to start from is taking advantage of a template. Embark <a href=\"/templates\">comes with templates</a> for various environments and frameworks, but you can also use any template created by the community. In order to create a new app from a template, use the <code>--template</code> option and either specify a supported template name, or a Git host URL.</p>\n<p>The following example creates a new application from <a href=\"https://github.com/embarklabs/embark-typescript-template\" target=\"_blank\" rel=\"noopener\">Embark’s TypeScript template</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>To learn more about supported templates, head over to our <a href=\"/templates\">templates</a> or look out for <code>embark-[template_name]-template</code> <a href=\"https://github.com/embarklabs?utf8=%E2%9C%93&q=template&type=&language=\" target=\"_blank\" rel=\"noopener\">repositories</a>.</p>\n<p>Templates can also be fetched from external resources as long as they can be referred to via Git host URLs. The following example fetches a template from a GitHub repository and uses that to create that app:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template https:&#x2F;&#x2F;github.com&#x2F;embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>In fact, in case of GitHub, the same can be done with the username/repository shortcut:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template embarklabs&#x2F;embark-vue-template</span><br></pre></td></tr></table></figure>\n\n<p>It is even possible to specify the branch by appending a <code>#</code> and the branch name you’re interested in:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --template status-im&#x2F;dappcon-workshop-dapp#start-here</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-“contracts-only”-apps\"><a href=\"#Creating-“contracts-only”-apps\" class=\"headerlink\" title=\"Creating “contracts-only” apps\"></a>Creating “contracts-only” apps</h2><p>Sometimes, all we really want to do is creating, developing, compiling and deploying Smart Contracts without introducing an actual front-end that talks to them. Embark lets us scaffold apps that come with the most minimal setup needed to build and deploy our Smart Contracts, using the <code>--contracts-only</code> option.</p>\n<p>The following command will create a project with all Embark services disabled except the blockchain service.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new &lt;YourDAppName&gt; --contracts-only</span><br></pre></td></tr></table></figure>\n\n<p>This will also affect the generated application structure, as Smart Contract only apps are less complex. Learn more about the application structure of Smart Contract only apps <a href=\"structure.html#Simple-template-structure\">here</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on --simple</strong></p>\n  <p><p>In earlier versions of Embark the same could be achieved using the <code>--simple</code> option. This option is still supported but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n"},{"title":"Creating Plugins","layout":"docs","_content":"\nIf you can't [find a plugin](/plugins) that fulfills your needs, it's probably a good time to think about creating your own. In this guide we'll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we'll dive into the available [Plugin APIs](/docs/plugin_reference.html).\n\n## Creating a plugin project\n\nA plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:\n\n```\n$ mkdir yourpluginname\n$ cd yourpluginname\n$ npm init\n```\n\nOnce that is done we can create an `index.js` file that contains the following code:\n\n```\nmodule.exports = function(embark) {\n  // plugin logic goes here\n}\n```\n\nThe `embark` object provides plenty of APIs to extend different functionalities of Embark, which can be found in the [Plugin Api Reference](plugin_reference.html). \n\n## Usecase examples\n\nSince the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:\n\n* Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with `addContractFile()`\n* Adding a Smart Contract configuration using `registerContractConfiguration()` (goes well with `addContractFile()`)\n* Adding a hook that's called before a Smart Contract's binary will be deployed using `beforeDeploy()`\n* Configure a custom provider for web3 initialization with `registerClientWeb3Provider()`\n* Create your own custom Smart Contract wrapper logic using `registerContractsGeneration()`\n* Adding a new command to Embark's interactive console using `registerConsoleCommand()`\n* Adding support for other compilers such as Viper, LLL, etc. using `embark.registerCompiler()`\n* Executing certain actions when Smart Contracts are deployed with `embark.events.on()`\n* Registering a service in Embark  - `registerServiceCheck()`\n\n","source":"docs/creating_plugins.md","raw":"title: Creating Plugins\nlayout: docs\n---\n\nIf you can't [find a plugin](/plugins) that fulfills your needs, it's probably a good time to think about creating your own. In this guide we'll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we'll dive into the available [Plugin APIs](/docs/plugin_reference.html).\n\n## Creating a plugin project\n\nA plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:\n\n```\n$ mkdir yourpluginname\n$ cd yourpluginname\n$ npm init\n```\n\nOnce that is done we can create an `index.js` file that contains the following code:\n\n```\nmodule.exports = function(embark) {\n  // plugin logic goes here\n}\n```\n\nThe `embark` object provides plenty of APIs to extend different functionalities of Embark, which can be found in the [Plugin Api Reference](plugin_reference.html). \n\n## Usecase examples\n\nSince the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:\n\n* Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with `addContractFile()`\n* Adding a Smart Contract configuration using `registerContractConfiguration()` (goes well with `addContractFile()`)\n* Adding a hook that's called before a Smart Contract's binary will be deployed using `beforeDeploy()`\n* Configure a custom provider for web3 initialization with `registerClientWeb3Provider()`\n* Create your own custom Smart Contract wrapper logic using `registerContractsGeneration()`\n* Adding a new command to Embark's interactive console using `registerConsoleCommand()`\n* Adding support for other compilers such as Viper, LLL, etc. using `embark.registerCompiler()`\n* Executing certain actions when Smart Contracts are deployed with `embark.events.on()`\n* Registering a service in Embark  - `registerServiceCheck()`\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/creating_plugins.html","comments":1,"_id":"ck5ijm3rh00117hegf0x15hmt","content":"<p>If you can’t <a href=\"/plugins\">find a plugin</a> that fulfills your needs, it’s probably a good time to think about creating your own. In this guide we’ll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we’ll dive into the available <a href=\"/docs/plugin_reference.html\">Plugin APIs</a>.</p>\n<h2 id=\"Creating-a-plugin-project\"><a href=\"#Creating-a-plugin-project\" class=\"headerlink\" title=\"Creating a plugin project\"></a>Creating a plugin project</h2><p>A plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir yourpluginname</span><br><span class=\"line\">$ cd yourpluginname</span><br><span class=\"line\">$ npm init</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can create an <code>index.js</code> file that contains the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; plugin logic goes here</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The <code>embark</code> object provides plenty of APIs to extend different functionalities of Embark, which can be found in the <a href=\"plugin_reference.html\">Plugin Api Reference</a>. </p>\n<h2 id=\"Usecase-examples\"><a href=\"#Usecase-examples\" class=\"headerlink\" title=\"Usecase examples\"></a>Usecase examples</h2><p>Since the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:</p>\n<ul>\n<li>Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with <code>addContractFile()</code></li>\n<li>Adding a Smart Contract configuration using <code>registerContractConfiguration()</code> (goes well with <code>addContractFile()</code>)</li>\n<li>Adding a hook that’s called before a Smart Contract’s binary will be deployed using <code>beforeDeploy()</code></li>\n<li>Configure a custom provider for web3 initialization with <code>registerClientWeb3Provider()</code></li>\n<li>Create your own custom Smart Contract wrapper logic using <code>registerContractsGeneration()</code></li>\n<li>Adding a new command to Embark’s interactive console using <code>registerConsoleCommand()</code></li>\n<li>Adding support for other compilers such as Viper, LLL, etc. using <code>embark.registerCompiler()</code></li>\n<li>Executing certain actions when Smart Contracts are deployed with <code>embark.events.on()</code></li>\n<li>Registering a service in Embark  - <code>registerServiceCheck()</code></li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>If you can’t <a href=\"/plugins\">find a plugin</a> that fulfills your needs, it’s probably a good time to think about creating your own. In this guide we’ll discuss how to set up a custom plugin and briefly talk about various use cases. Later on we’ll dive into the available <a href=\"/docs/plugin_reference.html\">Plugin APIs</a>.</p>\n<h2 id=\"Creating-a-plugin-project\"><a href=\"#Creating-a-plugin-project\" class=\"headerlink\" title=\"Creating a plugin project\"></a>Creating a plugin project</h2><p>A plugin is really just another NodeJS project that takes a plugin API object and make use of it. To get started, all we have to do is creating a new directory and initializing it as an npm module:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir yourpluginname</span><br><span class=\"line\">$ cd yourpluginname</span><br><span class=\"line\">$ npm init</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can create an <code>index.js</code> file that contains the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; plugin logic goes here</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The <code>embark</code> object provides plenty of APIs to extend different functionalities of Embark, which can be found in the <a href=\"plugin_reference.html\">Plugin Api Reference</a>. </p>\n<h2 id=\"Usecase-examples\"><a href=\"#Usecase-examples\" class=\"headerlink\" title=\"Usecase examples\"></a>Usecase examples</h2><p>Since the Plugin API surface is rather big, here are some usecase examples to sparkle some inspiration:</p>\n<ul>\n<li>Adding a Smart Contract file to the list of source files to be watched so they can be used by other Smart Contracts with <code>addContractFile()</code></li>\n<li>Adding a Smart Contract configuration using <code>registerContractConfiguration()</code> (goes well with <code>addContractFile()</code>)</li>\n<li>Adding a hook that’s called before a Smart Contract’s binary will be deployed using <code>beforeDeploy()</code></li>\n<li>Configure a custom provider for web3 initialization with <code>registerClientWeb3Provider()</code></li>\n<li>Create your own custom Smart Contract wrapper logic using <code>registerContractsGeneration()</code></li>\n<li>Adding a new command to Embark’s interactive console using <code>registerConsoleCommand()</code></li>\n<li>Adding support for other compilers such as Viper, LLL, etc. using <code>embark.registerCompiler()</code></li>\n<li>Executing certain actions when Smart Contracts are deployed with <code>embark.events.on()</code></li>\n<li>Registering a service in Embark  - <code>registerServiceCheck()</code></li>\n</ul>\n"},{"title":"Using the dashboard","layout":"docs","_content":"\nEmbark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we'll take a closer look at the dashboard and its features.\n\n## Overview\n\nEmbark spins up the dashboard view automatically for us, whenever we run `embark run` inside an Embark project. Here's what it looks like:\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nThe dashboard is separated into different sections, each with their own responsibility. The sections are:\n\n- **Contracts** - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.\n\n- **Environment** - This is the name of the [environment](environments.html) we're running Embark in at the moment. If we don't specify an environment when running `embark run`, Embark will default to `development`.\n\n- **Status** - As mentioned, Embark watches for changes in our application's source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:\n\n  - **Compiling** - Compiles application's Smart Contracts\n  - **Building** - Builds application's front-end\n  - **Ready** - Ready and IDLE\n\n- **Available Services** - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.\n\n- **Logs and Console** - While the logs section simply prints out all of Embark's output, the console can be used to either interact with our application's Smart Contracts or Embark itself. Use the `help` command to get a list of all available commands supported by Embark's console, or head over to our guide on [Using the the console](/docs/using_the_console.html) to learn more.\n\n## Running without a dashboard\n\nEmbark can be run without spinning up the dashboard view using the `--nodashboard` option. Head over to our guide on [running apps](running_apps.html#Running-an-app-without-the-dashboard) for more information.\n\n","source":"docs/dashboard.md","raw":"title: Using the dashboard\nlayout: docs\n---\n\nEmbark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we'll take a closer look at the dashboard and its features.\n\n## Overview\n\nEmbark spins up the dashboard view automatically for us, whenever we run `embark run` inside an Embark project. Here's what it looks like:\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nThe dashboard is separated into different sections, each with their own responsibility. The sections are:\n\n- **Contracts** - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.\n\n- **Environment** - This is the name of the [environment](environments.html) we're running Embark in at the moment. If we don't specify an environment when running `embark run`, Embark will default to `development`.\n\n- **Status** - As mentioned, Embark watches for changes in our application's source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:\n\n  - **Compiling** - Compiles application's Smart Contracts\n  - **Building** - Builds application's front-end\n  - **Ready** - Ready and IDLE\n\n- **Available Services** - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.\n\n- **Logs and Console** - While the logs section simply prints out all of Embark's output, the console can be used to either interact with our application's Smart Contracts or Embark itself. Use the `help` command to get a list of all available commands supported by Embark's console, or head over to our guide on [Using the the console](/docs/using_the_console.html) to learn more.\n\n## Running without a dashboard\n\nEmbark can be run without spinning up the dashboard view using the `--nodashboard` option. Head over to our guide on [running apps](running_apps.html#Running-an-app-without-the-dashboard) for more information.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/dashboard.html","comments":1,"_id":"ck5ijm3ri00127heg8epn5ngz","content":"<p>Embark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we’ll take a closer look at the dashboard and its features.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Embark spins up the dashboard view automatically for us, whenever we run <code>embark run</code> inside an Embark project. Here’s what it looks like:</p>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<p>The dashboard is separated into different sections, each with their own responsibility. The sections are:</p>\n<ul>\n<li><p><strong>Contracts</strong> - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.</p>\n</li>\n<li><p><strong>Environment</strong> - This is the name of the <a href=\"environments.html\">environment</a> we’re running Embark in at the moment. If we don’t specify an environment when running <code>embark run</code>, Embark will default to <code>development</code>.</p>\n</li>\n<li><p><strong>Status</strong> - As mentioned, Embark watches for changes in our application’s source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:</p>\n<ul>\n<li><strong>Compiling</strong> - Compiles application’s Smart Contracts</li>\n<li><strong>Building</strong> - Builds application’s front-end</li>\n<li><strong>Ready</strong> - Ready and IDLE</li>\n</ul>\n</li>\n<li><p><strong>Available Services</strong> - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.</p>\n</li>\n<li><p><strong>Logs and Console</strong> - While the logs section simply prints out all of Embark’s output, the console can be used to either interact with our application’s Smart Contracts or Embark itself. Use the <code>help</code> command to get a list of all available commands supported by Embark’s console, or head over to our guide on <a href=\"/docs/using_the_console.html\">Using the the console</a> to learn more.</p>\n</li>\n</ul>\n<h2 id=\"Running-without-a-dashboard\"><a href=\"#Running-without-a-dashboard\" class=\"headerlink\" title=\"Running without a dashboard\"></a>Running without a dashboard</h2><p>Embark can be run without spinning up the dashboard view using the <code>--nodashboard</code> option. Head over to our guide on <a href=\"running_apps.html#Running-an-app-without-the-dashboard\">running apps</a> for more information.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark provides a very useful dashboard view that aims to make it easier for developers to keep track of things, such as running services, compilation and deployments. In this guide, we’ll take a closer look at the dashboard and its features.</p>\n<h2 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h2><p>Embark spins up the dashboard view automatically for us, whenever we run <code>embark run</code> inside an Embark project. Here’s what it looks like:</p>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<p>The dashboard is separated into different sections, each with their own responsibility. The sections are:</p>\n<ul>\n<li><p><strong>Contracts</strong> - This section shows you not only all the Smart Contracts within your project, but also their status on whether they are being deployed at the moment or not. Notice that, as we make changes to our Smart Contracts, the dashboard will reflect the automatic redeployment in this section as well, making it very easy to stay on top of things.</p>\n</li>\n<li><p><strong>Environment</strong> - This is the name of the <a href=\"environments.html\">environment</a> we’re running Embark in at the moment. If we don’t specify an environment when running <code>embark run</code>, Embark will default to <code>development</code>.</p>\n</li>\n<li><p><strong>Status</strong> - As mentioned, Embark watches for changes in our application’s source code and will recompile, rebuild and redeploy components accordingly. The status section tells us what status Embark is currently in. Which could be one of the following:</p>\n<ul>\n<li><strong>Compiling</strong> - Compiles application’s Smart Contracts</li>\n<li><strong>Building</strong> - Builds application’s front-end</li>\n<li><strong>Ready</strong> - Ready and IDLE</li>\n</ul>\n</li>\n<li><p><strong>Available Services</strong> - This section displays all services available to our application. If a service is down or unreachable, it will show up in red.</p>\n</li>\n<li><p><strong>Logs and Console</strong> - While the logs section simply prints out all of Embark’s output, the console can be used to either interact with our application’s Smart Contracts or Embark itself. Use the <code>help</code> command to get a list of all available commands supported by Embark’s console, or head over to our guide on <a href=\"/docs/using_the_console.html\">Using the the console</a> to learn more.</p>\n</li>\n</ul>\n<h2 id=\"Running-without-a-dashboard\"><a href=\"#Running-without-a-dashboard\" class=\"headerlink\" title=\"Running without a dashboard\"></a>Running without a dashboard</h2><p>Embark can be run without spinning up the dashboard view using the <code>--nodashboard</code> option. Head over to our guide on <a href=\"running_apps.html#Running-an-app-without-the-dashboard\">running apps</a> for more information.</p>\n"},{"title":"Embark CLI Commands","layout":"docs","_content":"\nThis is the Embark CLI command reference.\n\n## new\n\n```\n$ embark new dappName\n```\n\nCreates a new empty DApp project. If no `dappName` is provided, Embark will ask for the dappName.\n\nOption | Description\n--- | ---\n`--contracts-only` | create a barebones project meant only for contract development\n`--simple` | an alias for `--contracts-only`\n`--template` | download a template using a known name or a git host URL\n\nThe `--template` option supports several URL styles and shortcuts for git hosts:\n\n```\ngit@github.com:ghuser/repo_name\nhttps://github.com/ghuser/repo_name\ngithub:ghuser/repo_name\nghuser/repo_name\n```\n\nIt's possible to append a branch name to any of the above, for example:\n\n```\nhttps://github.com/ghuser/repo_name#branch_name\nghuser/repo_name#branch_name\n```\n\nBitbucket and GitLab URLs and shortcuts are also supported, for example:\n\n```\nbitbucket:bbuser/repo_name#branch_name\ngitlab:gluser/repo_name#branch_name\n```\n\nA short name can be used for templates maintained in the Embark GitHub organization, for example:\n\n```\n$ embark new --template typescript\n```\n\nPlease see our list of [officially supported templates](/templates/).\n\n## demo\n\n```\n$ embark demo\n```\n\nGenerates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.\n\n## build\n\n```\n$ embark build [environment]\n```\n\nDeploys and Builds the DApp at dist/. If no `environment` is provider embark will use `development` by default.\n\n## run\n\n```\n$ embark run [environment]\n```\n\nDeploys and Builds the DApp at `dist/`. By default will launch a dashboard and start a dev server at `http://localhost:8000/`. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the dev webserver (default: 8000)\n`-b`, `--host` | `host` to run the dev webserver (default: localhost)\n`--noserver` | disable the development webserver\n`--nodashboard` | simple mode, disables the dashboard\n`--nobrowser` | prevent the development webserver from automatically opening a web browser\n`--no-color` | no colors in case it's needed for compatbility purposes\n`--logfile` | `filename` to output logs (default: none)\n\n## eject-build-config\n\n```\n$ embark eject-build-config\n```\n\nCopies Embark's default `webpack.config.js` file into your DApp so that you can customize it. If a file named `webpack.config.js` is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.\n\n## blockchain\n\n```\n$ embark blockchain [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain node. If no `environment` is provider embark will use `development` by default.\n\nIf you want, you can skip the step of running `embark blockchain`, as `embark run`, `build` and `upload` now all start a blockchain node in a separate process if there is not one already started using the same configurations.\n\n## simulator\n\n```\n$ embark simulator [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain simulator. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the rpc simulator (default: 8545)\n`-h`, `--host` | `host` to run the rpc simulator (default: localhost)\n`-a`, `--accounts` | `num` of accounts to start the simulator (default: 10)\n`-e`, `--defaultBalanceEther` | `balance` in ether to assign each test account (default: 100)\n`-l`, `--gasLimit` | custom `gasLimit` (default: 8000000)\n\n## test\n\n```\n$ embark test [file]\n```\n\nRuns Tests. If `file` is not specified then it will run all the tests inside the `test/` directory.\n\nOption | Description\n--- | ---\n`-n`, `--node` | node for running the tests (default: vm)\n`-d`, `--gasDetails` | print the gas cost for each contract deployment when running the tests\n`-c`, `--coverage` | generate a coverage report after running the tests (vm only)\n\nThe `--node` option supports several values:\n\nValue | Description\n--- | ---\n`vm` | start and use an Ethereum simulator (ganache)\n`embark` | use the node of a running embark process\n`<endpoint>` | connect to and use the specified node\n\nExample of endpoint usage: `embark test --node ws://localhost:8556`\n\n## reset\n\n```\n$ embark reset\n```\n\nResets embarks state on this dapp including clearing cache.\n\n## upload\n\n```\n$ embark upload [platform] [environment]\n```\n\nUploads the DApp to a decentralized storage such as IPFS. `platform` can be `ipfs` or `swarm` or another parameter if supported by a plugin. If no `environment` is provider embark will use `development` by default.\n\n## graph\n\n```\n$ embark graph\n```\n\nGenerates documentation based on the smart contracts configured\n\n## version\n\n```\n$ embark version\n```\n\nDisplays version information.\n","source":"docs/embark_commands.md","raw":"title: Embark CLI Commands\nlayout: docs\n---\n\nThis is the Embark CLI command reference.\n\n## new\n\n```\n$ embark new dappName\n```\n\nCreates a new empty DApp project. If no `dappName` is provided, Embark will ask for the dappName.\n\nOption | Description\n--- | ---\n`--contracts-only` | create a barebones project meant only for contract development\n`--simple` | an alias for `--contracts-only`\n`--template` | download a template using a known name or a git host URL\n\nThe `--template` option supports several URL styles and shortcuts for git hosts:\n\n```\ngit@github.com:ghuser/repo_name\nhttps://github.com/ghuser/repo_name\ngithub:ghuser/repo_name\nghuser/repo_name\n```\n\nIt's possible to append a branch name to any of the above, for example:\n\n```\nhttps://github.com/ghuser/repo_name#branch_name\nghuser/repo_name#branch_name\n```\n\nBitbucket and GitLab URLs and shortcuts are also supported, for example:\n\n```\nbitbucket:bbuser/repo_name#branch_name\ngitlab:gluser/repo_name#branch_name\n```\n\nA short name can be used for templates maintained in the Embark GitHub organization, for example:\n\n```\n$ embark new --template typescript\n```\n\nPlease see our list of [officially supported templates](/templates/).\n\n## demo\n\n```\n$ embark demo\n```\n\nGenerates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.\n\n## build\n\n```\n$ embark build [environment]\n```\n\nDeploys and Builds the DApp at dist/. If no `environment` is provider embark will use `development` by default.\n\n## run\n\n```\n$ embark run [environment]\n```\n\nDeploys and Builds the DApp at `dist/`. By default will launch a dashboard and start a dev server at `http://localhost:8000/`. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the dev webserver (default: 8000)\n`-b`, `--host` | `host` to run the dev webserver (default: localhost)\n`--noserver` | disable the development webserver\n`--nodashboard` | simple mode, disables the dashboard\n`--nobrowser` | prevent the development webserver from automatically opening a web browser\n`--no-color` | no colors in case it's needed for compatbility purposes\n`--logfile` | `filename` to output logs (default: none)\n\n## eject-build-config\n\n```\n$ embark eject-build-config\n```\n\nCopies Embark's default `webpack.config.js` file into your DApp so that you can customize it. If a file named `webpack.config.js` is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.\n\n## blockchain\n\n```\n$ embark blockchain [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain node. If no `environment` is provider embark will use `development` by default.\n\nIf you want, you can skip the step of running `embark blockchain`, as `embark run`, `build` and `upload` now all start a blockchain node in a separate process if there is not one already started using the same configurations.\n\n## simulator\n\n```\n$ embark simulator [environment]\n```\n\nTakes the config at `config/blockchain.json` for the `environment` specified and starts a blockchain simulator. If no `environment` is provider embark will use `development` by default.\n\nOption | Description\n--- | ---\n`-p`, `--port` | `port` to run the rpc simulator (default: 8545)\n`-h`, `--host` | `host` to run the rpc simulator (default: localhost)\n`-a`, `--accounts` | `num` of accounts to start the simulator (default: 10)\n`-e`, `--defaultBalanceEther` | `balance` in ether to assign each test account (default: 100)\n`-l`, `--gasLimit` | custom `gasLimit` (default: 8000000)\n\n## test\n\n```\n$ embark test [file]\n```\n\nRuns Tests. If `file` is not specified then it will run all the tests inside the `test/` directory.\n\nOption | Description\n--- | ---\n`-n`, `--node` | node for running the tests (default: vm)\n`-d`, `--gasDetails` | print the gas cost for each contract deployment when running the tests\n`-c`, `--coverage` | generate a coverage report after running the tests (vm only)\n\nThe `--node` option supports several values:\n\nValue | Description\n--- | ---\n`vm` | start and use an Ethereum simulator (ganache)\n`embark` | use the node of a running embark process\n`<endpoint>` | connect to and use the specified node\n\nExample of endpoint usage: `embark test --node ws://localhost:8556`\n\n## reset\n\n```\n$ embark reset\n```\n\nResets embarks state on this dapp including clearing cache.\n\n## upload\n\n```\n$ embark upload [platform] [environment]\n```\n\nUploads the DApp to a decentralized storage such as IPFS. `platform` can be `ipfs` or `swarm` or another parameter if supported by a plugin. If no `environment` is provider embark will use `development` by default.\n\n## graph\n\n```\n$ embark graph\n```\n\nGenerates documentation based on the smart contracts configured\n\n## version\n\n```\n$ embark version\n```\n\nDisplays version information.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/embark_commands.html","comments":1,"_id":"ck5ijm3ri00137heg9p19hso3","content":"<p>This is the Embark CLI command reference.</p>\n<h2 id=\"new\"><a href=\"#new\" class=\"headerlink\" title=\"new\"></a>new</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dappName</span><br></pre></td></tr></table></figure>\n\n<p>Creates a new empty DApp project. If no <code>dappName</code> is provided, Embark will ask for the dappName.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>--contracts-only</code></td>\n<td>create a barebones project meant only for contract development</td>\n</tr>\n<tr>\n<td><code>--simple</code></td>\n<td>an alias for <code>--contracts-only</code></td>\n</tr>\n<tr>\n<td><code>--template</code></td>\n<td>download a template using a known name or a git host URL</td>\n</tr>\n</tbody></table>\n<p>The <code>--template</code> option supports several URL styles and shortcuts for git hosts:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git@github.com:ghuser&#x2F;repo_name</span><br><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name</span><br><span class=\"line\">github:ghuser&#x2F;repo_name</span><br><span class=\"line\">ghuser&#x2F;repo_name</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to append a branch name to any of the above, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">ghuser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>Bitbucket and GitLab URLs and shortcuts are also supported, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">bitbucket:bbuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">gitlab:gluser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>A short name can be used for templates maintained in the Embark GitHub organization, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>Please see our list of <a href=\"/templates/\">officially supported templates</a>.</p>\n<h2 id=\"demo\"><a href=\"#demo\" class=\"headerlink\" title=\"demo\"></a>demo</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Generates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.</p>\n<h2 id=\"build\"><a href=\"#build\" class=\"headerlink\" title=\"build\"></a>build</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at dist/. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"run\"><a href=\"#run\" class=\"headerlink\" title=\"run\"></a>run</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at <code>dist/</code>. By default will launch a dashboard and start a dev server at <code>http://localhost:8000/</code>. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the dev webserver (default: 8000)</td>\n</tr>\n<tr>\n<td><code>-b</code>, <code>--host</code></td>\n<td><code>host</code> to run the dev webserver (default: localhost)</td>\n</tr>\n<tr>\n<td><code>--noserver</code></td>\n<td>disable the development webserver</td>\n</tr>\n<tr>\n<td><code>--nodashboard</code></td>\n<td>simple mode, disables the dashboard</td>\n</tr>\n<tr>\n<td><code>--nobrowser</code></td>\n<td>prevent the development webserver from automatically opening a web browser</td>\n</tr>\n<tr>\n<td><code>--no-color</code></td>\n<td>no colors in case it’s needed for compatbility purposes</td>\n</tr>\n<tr>\n<td><code>--logfile</code></td>\n<td><code>filename</code> to output logs (default: none)</td>\n</tr>\n</tbody></table>\n<h2 id=\"eject-build-config\"><a href=\"#eject-build-config\" class=\"headerlink\" title=\"eject-build-config\"></a>eject-build-config</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<p>Copies Embark’s default <code>webpack.config.js</code> file into your DApp so that you can customize it. If a file named <code>webpack.config.js</code> is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.</p>\n<h2 id=\"blockchain\"><a href=\"#blockchain\" class=\"headerlink\" title=\"blockchain\"></a>blockchain</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain node. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<p>If you want, you can skip the step of running <code>embark blockchain</code>, as <code>embark run</code>, <code>build</code> and <code>upload</code> now all start a blockchain node in a separate process if there is not one already started using the same configurations.</p>\n<h2 id=\"simulator\"><a href=\"#simulator\" class=\"headerlink\" title=\"simulator\"></a>simulator</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain simulator. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the rpc simulator (default: 8545)</td>\n</tr>\n<tr>\n<td><code>-h</code>, <code>--host</code></td>\n<td><code>host</code> to run the rpc simulator (default: localhost)</td>\n</tr>\n<tr>\n<td><code>-a</code>, <code>--accounts</code></td>\n<td><code>num</code> of accounts to start the simulator (default: 10)</td>\n</tr>\n<tr>\n<td><code>-e</code>, <code>--defaultBalanceEther</code></td>\n<td><code>balance</code> in ether to assign each test account (default: 100)</td>\n</tr>\n<tr>\n<td><code>-l</code>, <code>--gasLimit</code></td>\n<td>custom <code>gasLimit</code> (default: 8000000)</td>\n</tr>\n</tbody></table>\n<h2 id=\"test\"><a href=\"#test\" class=\"headerlink\" title=\"test\"></a>test</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test [file]</span><br></pre></td></tr></table></figure>\n\n<p>Runs Tests. If <code>file</code> is not specified then it will run all the tests inside the <code>test/</code> directory.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-n</code>, <code>--node</code></td>\n<td>node for running the tests (default: vm)</td>\n</tr>\n<tr>\n<td><code>-d</code>, <code>--gasDetails</code></td>\n<td>print the gas cost for each contract deployment when running the tests</td>\n</tr>\n<tr>\n<td><code>-c</code>, <code>--coverage</code></td>\n<td>generate a coverage report after running the tests (vm only)</td>\n</tr>\n</tbody></table>\n<p>The <code>--node</code> option supports several values:</p>\n<table>\n<thead>\n<tr>\n<th>Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>vm</code></td>\n<td>start and use an Ethereum simulator (ganache)</td>\n</tr>\n<tr>\n<td><code>embark</code></td>\n<td>use the node of a running embark process</td>\n</tr>\n<tr>\n<td><code>&lt;endpoint&gt;</code></td>\n<td>connect to and use the specified node</td>\n</tr>\n</tbody></table>\n<p>Example of endpoint usage: <code>embark test --node ws://localhost:8556</code></p>\n<h2 id=\"reset\"><a href=\"#reset\" class=\"headerlink\" title=\"reset\"></a>reset</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>Resets embarks state on this dapp including clearing cache.</p>\n<h2 id=\"upload\"><a href=\"#upload\" class=\"headerlink\" title=\"upload\"></a>upload</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload [platform] [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Uploads the DApp to a decentralized storage such as IPFS. <code>platform</code> can be <code>ipfs</code> or <code>swarm</code> or another parameter if supported by a plugin. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"graph\"><a href=\"#graph\" class=\"headerlink\" title=\"graph\"></a>graph</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark graph</span><br></pre></td></tr></table></figure>\n\n<p>Generates documentation based on the smart contracts configured</p>\n<h2 id=\"version\"><a href=\"#version\" class=\"headerlink\" title=\"version\"></a>version</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark version</span><br></pre></td></tr></table></figure>\n\n<p>Displays version information.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>This is the Embark CLI command reference.</p>\n<h2 id=\"new\"><a href=\"#new\" class=\"headerlink\" title=\"new\"></a>new</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dappName</span><br></pre></td></tr></table></figure>\n\n<p>Creates a new empty DApp project. If no <code>dappName</code> is provided, Embark will ask for the dappName.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>--contracts-only</code></td>\n<td>create a barebones project meant only for contract development</td>\n</tr>\n<tr>\n<td><code>--simple</code></td>\n<td>an alias for <code>--contracts-only</code></td>\n</tr>\n<tr>\n<td><code>--template</code></td>\n<td>download a template using a known name or a git host URL</td>\n</tr>\n</tbody></table>\n<p>The <code>--template</code> option supports several URL styles and shortcuts for git hosts:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git@github.com:ghuser&#x2F;repo_name</span><br><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name</span><br><span class=\"line\">github:ghuser&#x2F;repo_name</span><br><span class=\"line\">ghuser&#x2F;repo_name</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to append a branch name to any of the above, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">https:&#x2F;&#x2F;github.com&#x2F;ghuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">ghuser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>Bitbucket and GitLab URLs and shortcuts are also supported, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">bitbucket:bbuser&#x2F;repo_name#branch_name</span><br><span class=\"line\">gitlab:gluser&#x2F;repo_name#branch_name</span><br></pre></td></tr></table></figure>\n\n<p>A short name can be used for templates maintained in the Embark GitHub organization, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new --template typescript</span><br></pre></td></tr></table></figure>\n\n<p>Please see our list of <a href=\"/templates/\">officially supported templates</a>.</p>\n<h2 id=\"demo\"><a href=\"#demo\" class=\"headerlink\" title=\"demo\"></a>demo</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Generates a demo Embark Project with a working contract and examples of working with contracts, IPFS and Whisper.</p>\n<h2 id=\"build\"><a href=\"#build\" class=\"headerlink\" title=\"build\"></a>build</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at dist/. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"run\"><a href=\"#run\" class=\"headerlink\" title=\"run\"></a>run</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Deploys and Builds the DApp at <code>dist/</code>. By default will launch a dashboard and start a dev server at <code>http://localhost:8000/</code>. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the dev webserver (default: 8000)</td>\n</tr>\n<tr>\n<td><code>-b</code>, <code>--host</code></td>\n<td><code>host</code> to run the dev webserver (default: localhost)</td>\n</tr>\n<tr>\n<td><code>--noserver</code></td>\n<td>disable the development webserver</td>\n</tr>\n<tr>\n<td><code>--nodashboard</code></td>\n<td>simple mode, disables the dashboard</td>\n</tr>\n<tr>\n<td><code>--nobrowser</code></td>\n<td>prevent the development webserver from automatically opening a web browser</td>\n</tr>\n<tr>\n<td><code>--no-color</code></td>\n<td>no colors in case it’s needed for compatbility purposes</td>\n</tr>\n<tr>\n<td><code>--logfile</code></td>\n<td><code>filename</code> to output logs (default: none)</td>\n</tr>\n</tbody></table>\n<h2 id=\"eject-build-config\"><a href=\"#eject-build-config\" class=\"headerlink\" title=\"eject-build-config\"></a>eject-build-config</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<p>Copies Embark’s default <code>webpack.config.js</code> file into your DApp so that you can customize it. If a file named <code>webpack.config.js</code> is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.</p>\n<h2 id=\"blockchain\"><a href=\"#blockchain\" class=\"headerlink\" title=\"blockchain\"></a>blockchain</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain node. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<p>If you want, you can skip the step of running <code>embark blockchain</code>, as <code>embark run</code>, <code>build</code> and <code>upload</code> now all start a blockchain node in a separate process if there is not one already started using the same configurations.</p>\n<h2 id=\"simulator\"><a href=\"#simulator\" class=\"headerlink\" title=\"simulator\"></a>simulator</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Takes the config at <code>config/blockchain.json</code> for the <code>environment</code> specified and starts a blockchain simulator. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-p</code>, <code>--port</code></td>\n<td><code>port</code> to run the rpc simulator (default: 8545)</td>\n</tr>\n<tr>\n<td><code>-h</code>, <code>--host</code></td>\n<td><code>host</code> to run the rpc simulator (default: localhost)</td>\n</tr>\n<tr>\n<td><code>-a</code>, <code>--accounts</code></td>\n<td><code>num</code> of accounts to start the simulator (default: 10)</td>\n</tr>\n<tr>\n<td><code>-e</code>, <code>--defaultBalanceEther</code></td>\n<td><code>balance</code> in ether to assign each test account (default: 100)</td>\n</tr>\n<tr>\n<td><code>-l</code>, <code>--gasLimit</code></td>\n<td>custom <code>gasLimit</code> (default: 8000000)</td>\n</tr>\n</tbody></table>\n<h2 id=\"test\"><a href=\"#test\" class=\"headerlink\" title=\"test\"></a>test</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test [file]</span><br></pre></td></tr></table></figure>\n\n<p>Runs Tests. If <code>file</code> is not specified then it will run all the tests inside the <code>test/</code> directory.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>-n</code>, <code>--node</code></td>\n<td>node for running the tests (default: vm)</td>\n</tr>\n<tr>\n<td><code>-d</code>, <code>--gasDetails</code></td>\n<td>print the gas cost for each contract deployment when running the tests</td>\n</tr>\n<tr>\n<td><code>-c</code>, <code>--coverage</code></td>\n<td>generate a coverage report after running the tests (vm only)</td>\n</tr>\n</tbody></table>\n<p>The <code>--node</code> option supports several values:</p>\n<table>\n<thead>\n<tr>\n<th>Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>vm</code></td>\n<td>start and use an Ethereum simulator (ganache)</td>\n</tr>\n<tr>\n<td><code>embark</code></td>\n<td>use the node of a running embark process</td>\n</tr>\n<tr>\n<td><code>&lt;endpoint&gt;</code></td>\n<td>connect to and use the specified node</td>\n</tr>\n</tbody></table>\n<p>Example of endpoint usage: <code>embark test --node ws://localhost:8556</code></p>\n<h2 id=\"reset\"><a href=\"#reset\" class=\"headerlink\" title=\"reset\"></a>reset</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>Resets embarks state on this dapp including clearing cache.</p>\n<h2 id=\"upload\"><a href=\"#upload\" class=\"headerlink\" title=\"upload\"></a>upload</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload [platform] [environment]</span><br></pre></td></tr></table></figure>\n\n<p>Uploads the DApp to a decentralized storage such as IPFS. <code>platform</code> can be <code>ipfs</code> or <code>swarm</code> or another parameter if supported by a plugin. If no <code>environment</code> is provider embark will use <code>development</code> by default.</p>\n<h2 id=\"graph\"><a href=\"#graph\" class=\"headerlink\" title=\"graph\"></a>graph</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark graph</span><br></pre></td></tr></table></figure>\n\n<p>Generates documentation based on the smart contracts configured</p>\n<h2 id=\"version\"><a href=\"#version\" class=\"headerlink\" title=\"version\"></a>version</h2><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark version</span><br></pre></td></tr></table></figure>\n\n<p>Displays version information.</p>\n"},{"title":"Understanding Environments","layout":"docs","_content":"\nEmbark comes with the concept of \"Environments\", which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we're sure the code is ready for prime time and can be deployed in a production environment.\n\nIn this guide we'll discuss how to take advantage of environments within various configuration files of our Embark application.\n\n## Default environment\n\nIn our guide covering [application structures](structure.html) in Embark, we've talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We'll dive more into what each configuration looks like in our guides on [configuring Smart Contracts](contracts_configuration.html), [configuring decentralized storages](storage_configuration.html) and [configuring communication channels](messages_configuration.html). For now, we'll focus on the concept of **default environments**.\n\nEnvironments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that `default` is a special environment that can be **extended** by other environments.\n\nLet's take a look at the `config/contracts.js` file that we've created in the [Quickstart](quick_start.html):\n\n```\nmodule.exports = {\n  default: {\n    dappConnection: [\n      \"$WEB3\",\n      \"ws://localhost:8546\",\n      \"http://localhost:8545\"\n    ],\n    gas: \"auto\",\n    deploy: {\n      SimpleStorage: {\n        args: [100]\n      }\n    }\n  }\n}\n```\n\nDon't get too overwhelmed by all the different options and what they mean. We'll discuss those in-depth in [configuring Smart Contracts](contracts_configuration.html) and `dappConneciton` [here](/docs/javascript_usage.html#Using-dappConnection). The important part here is that `contracts.js` exports an object that provides a `default` configuration. This configuration is the default environment and can be overwritten or extended by other environments. \n\nIf we execute `$ embark run`, Embark will use the `default` configuration to deploy our application's Smart Contracts.\n\n## Adding and extending environments\n\nAs mentioned earlier, the `default` environment can be easily extended and overwritten by other configurations. Let's say we had a `custom` environment as well, which should come with the same configuration as `default`, but deploy `SimpleStorage` with a different constructor parameter value. We can do that by simply introducing a configuration for `custom` and specify the options as we need:\n\n```\nmodule.exports = {\n  ...\n  custom: {\n    deploy: {\n      SimpleStorage: {\n        args: [200]\n      }\n    }\n  }\n}\n```\n\nNow, when running Embark with the `custom` environment as discussed in our guide on [Running applications](/docs/running_apps.html#Switching-environments), Embark will merge the `custom` configuration with `default` and use the resulting configuration object accordingly:\n\n```\n$ embark run custom\n```\n\n{% notification info Quick tip: %}\nNotice that Embark usually already provides an additional `development` configuration. As a matter of fact, when no environment is specified in `embark run`, Embark will use the `development` configuration. \n\nThis means that\n\n<pre>$ embark run</pre>\n\nis the same as\n\n<pre>$ embark run development</pre>\n\n{% endnotification %}\n\nIn the next chapter, we'll take a closer look at how our application can be configured using the `embark.json` configuration file.\n","source":"docs/environments.md","raw":"title: Understanding Environments\nlayout: docs\n---\n\nEmbark comes with the concept of \"Environments\", which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we're sure the code is ready for prime time and can be deployed in a production environment.\n\nIn this guide we'll discuss how to take advantage of environments within various configuration files of our Embark application.\n\n## Default environment\n\nIn our guide covering [application structures](structure.html) in Embark, we've talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We'll dive more into what each configuration looks like in our guides on [configuring Smart Contracts](contracts_configuration.html), [configuring decentralized storages](storage_configuration.html) and [configuring communication channels](messages_configuration.html). For now, we'll focus on the concept of **default environments**.\n\nEnvironments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that `default` is a special environment that can be **extended** by other environments.\n\nLet's take a look at the `config/contracts.js` file that we've created in the [Quickstart](quick_start.html):\n\n```\nmodule.exports = {\n  default: {\n    dappConnection: [\n      \"$WEB3\",\n      \"ws://localhost:8546\",\n      \"http://localhost:8545\"\n    ],\n    gas: \"auto\",\n    deploy: {\n      SimpleStorage: {\n        args: [100]\n      }\n    }\n  }\n}\n```\n\nDon't get too overwhelmed by all the different options and what they mean. We'll discuss those in-depth in [configuring Smart Contracts](contracts_configuration.html) and `dappConneciton` [here](/docs/javascript_usage.html#Using-dappConnection). The important part here is that `contracts.js` exports an object that provides a `default` configuration. This configuration is the default environment and can be overwritten or extended by other environments. \n\nIf we execute `$ embark run`, Embark will use the `default` configuration to deploy our application's Smart Contracts.\n\n## Adding and extending environments\n\nAs mentioned earlier, the `default` environment can be easily extended and overwritten by other configurations. Let's say we had a `custom` environment as well, which should come with the same configuration as `default`, but deploy `SimpleStorage` with a different constructor parameter value. We can do that by simply introducing a configuration for `custom` and specify the options as we need:\n\n```\nmodule.exports = {\n  ...\n  custom: {\n    deploy: {\n      SimpleStorage: {\n        args: [200]\n      }\n    }\n  }\n}\n```\n\nNow, when running Embark with the `custom` environment as discussed in our guide on [Running applications](/docs/running_apps.html#Switching-environments), Embark will merge the `custom` configuration with `default` and use the resulting configuration object accordingly:\n\n```\n$ embark run custom\n```\n\n{% notification info Quick tip: %}\nNotice that Embark usually already provides an additional `development` configuration. As a matter of fact, when no environment is specified in `embark run`, Embark will use the `development` configuration. \n\nThis means that\n\n<pre>$ embark run</pre>\n\nis the same as\n\n<pre>$ embark run development</pre>\n\n{% endnotification %}\n\nIn the next chapter, we'll take a closer look at how our application can be configured using the `embark.json` configuration file.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/environments.html","comments":1,"_id":"ck5ijm3rj00147hegebu2ckjy","content":"<p>Embark comes with the concept of “Environments”, which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we’re sure the code is ready for prime time and can be deployed in a production environment.</p>\n<p>In this guide we’ll discuss how to take advantage of environments within various configuration files of our Embark application.</p>\n<h2 id=\"Default-environment\"><a href=\"#Default-environment\" class=\"headerlink\" title=\"Default environment\"></a>Default environment</h2><p>In our guide covering <a href=\"structure.html\">application structures</a> in Embark, we’ve talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We’ll dive more into what each configuration looks like in our guides on <a href=\"contracts_configuration.html\">configuring Smart Contracts</a>, <a href=\"storage_configuration.html\">configuring decentralized storages</a> and <a href=\"messages_configuration.html\">configuring communication channels</a>. For now, we’ll focus on the concept of <strong>default environments</strong>.</p>\n<p>Environments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that <code>default</code> is a special environment that can be <strong>extended</strong> by other environments.</p>\n<p>Let’s take a look at the <code>config/contracts.js</code> file that we’ve created in the <a href=\"quick_start.html\">Quickstart</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    dappConnection: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;ws:&#x2F;&#x2F;localhost:8546&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">    gas: &quot;auto&quot;,</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [100]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Don’t get too overwhelmed by all the different options and what they mean. We’ll discuss those in-depth in <a href=\"contracts_configuration.html\">configuring Smart Contracts</a> and <code>dappConneciton</code> <a href=\"/docs/javascript_usage.html#Using-dappConnection\">here</a>. The important part here is that <code>contracts.js</code> exports an object that provides a <code>default</code> configuration. This configuration is the default environment and can be overwritten or extended by other environments. </p>\n<p>If we execute <code>$ embark run</code>, Embark will use the <code>default</code> configuration to deploy our application’s Smart Contracts.</p>\n<h2 id=\"Adding-and-extending-environments\"><a href=\"#Adding-and-extending-environments\" class=\"headerlink\" title=\"Adding and extending environments\"></a>Adding and extending environments</h2><p>As mentioned earlier, the <code>default</code> environment can be easily extended and overwritten by other configurations. Let’s say we had a <code>custom</code> environment as well, which should come with the same configuration as <code>default</code>, but deploy <code>SimpleStorage</code> with a different constructor parameter value. We can do that by simply introducing a configuration for <code>custom</code> and specify the options as we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  custom: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [200]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now, when running Embark with the <code>custom</code> environment as discussed in our guide on <a href=\"/docs/running_apps.html#Switching-environments\">Running applications</a>, Embark will merge the <code>custom</code> configuration with <code>default</code> and use the resulting configuration object accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run custom</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick</strong></p>\n  <p><p>Notice that Embark usually already provides an additional <code>development</code> configuration. As a matter of fact, when no environment is specified in <code>embark run</code>, Embark will use the <code>development</code> configuration. </p>\n<p>This means that</p>\n<pre>$ embark run</pre>\n\n<p>is the same as</p>\n<pre>$ embark run development</pre>\n</p>\n</div> \n\n\n\n<p>In the next chapter, we’ll take a closer look at how our application can be configured using the <code>embark.json</code> configuration file.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark comes with the concept of “Environments”, which make it easy to switch between different configurations of various parts of our applications that alter how the application is being built and deployed. For example, during development we probably prefer deploying our Smart Contracts on a local blockchain or testnet, until we’re sure the code is ready for prime time and can be deployed in a production environment.</p>\n<p>In this guide we’ll discuss how to take advantage of environments within various configuration files of our Embark application.</p>\n<h2 id=\"Default-environment\"><a href=\"#Default-environment\" class=\"headerlink\" title=\"Default environment\"></a>Default environment</h2><p>In our guide covering <a href=\"structure.html\">application structures</a> in Embark, we’ve talked about that every component of our decentralized application, such as IPFS as a storage solution and Geth as a blockchain client, can be configured using a dedicated configuration file. We’ll dive more into what each configuration looks like in our guides on <a href=\"contracts_configuration.html\">configuring Smart Contracts</a>, <a href=\"storage_configuration.html\">configuring decentralized storages</a> and <a href=\"messages_configuration.html\">configuring communication channels</a>. For now, we’ll focus on the concept of <strong>default environments</strong>.</p>\n<p>Environments can be defined as part of a configuration file for a dedicated service or component of our application. We can introduce as many environments as we like. It is important to understand that <code>default</code> is a special environment that can be <strong>extended</strong> by other environments.</p>\n<p>Let’s take a look at the <code>config/contracts.js</code> file that we’ve created in the <a href=\"quick_start.html\">Quickstart</a>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    dappConnection: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;ws:&#x2F;&#x2F;localhost:8546&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">    gas: &quot;auto&quot;,</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [100]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Don’t get too overwhelmed by all the different options and what they mean. We’ll discuss those in-depth in <a href=\"contracts_configuration.html\">configuring Smart Contracts</a> and <code>dappConneciton</code> <a href=\"/docs/javascript_usage.html#Using-dappConnection\">here</a>. The important part here is that <code>contracts.js</code> exports an object that provides a <code>default</code> configuration. This configuration is the default environment and can be overwritten or extended by other environments. </p>\n<p>If we execute <code>$ embark run</code>, Embark will use the <code>default</code> configuration to deploy our application’s Smart Contracts.</p>\n<h2 id=\"Adding-and-extending-environments\"><a href=\"#Adding-and-extending-environments\" class=\"headerlink\" title=\"Adding and extending environments\"></a>Adding and extending environments</h2><p>As mentioned earlier, the <code>default</code> environment can be easily extended and overwritten by other configurations. Let’s say we had a <code>custom</code> environment as well, which should come with the same configuration as <code>default</code>, but deploy <code>SimpleStorage</code> with a different constructor parameter value. We can do that by simply introducing a configuration for <code>custom</code> and specify the options as we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  custom: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        args: [200]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now, when running Embark with the <code>custom</code> environment as discussed in our guide on <a href=\"/docs/running_apps.html#Switching-environments\">Running applications</a>, Embark will merge the <code>custom</code> configuration with <code>default</code> and use the resulting configuration object accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run custom</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick</strong></p>\n  <p><p>Notice that Embark usually already provides an additional <code>development</code> configuration. As a matter of fact, when no environment is specified in <code>embark run</code>, Embark will use the <code>development</code> configuration. </p>\n<p>This means that</p>\n<pre>$ embark run</pre>\n\n<p>is the same as</p>\n<pre>$ embark run development</pre>\n</p>\n</div> \n\n\n\n<p>In the next chapter, we’ll take a closer look at how our application can be configured using the <code>embark.json</code> configuration file.</p>\n"},{"title":"Frequently Asked Questions","layout":"docs","_content":"\nIf you're new to Embark you probably have a lot questions about what it can do and whether it supports the features you're looking for. Check out our frequently asked questions and don't hesitate to let us know if there's anything missing!\n\n#### Embark in one sentence?\n\nEmbark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).\n\n#### How does Embark differ from other tools?\n\nWhile Embark does have quite some things in common with tools like [Truffle](https://truffleframework.com/), it goes far beyond managing and deploying Smart Contracts, **if you want to**. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.\n\nWhether you want to purely focus on [building and deploying Smart Contracts](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.\n\n#### Can I use Embark purely for Smart Contract development?\n\nAbsolutely! Simply create your application using the `--contracts-only` option as discussed in our guide on [Creating Apps](create_project.html#Creating-“contracts-only”-apps) and you're good to go.\n\n[Embark's configurations](configuration.html) make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.\n\n#### Can Embark connect to a simulated blockchain like Ganache?\n\nYes it can! In fact, Embark comes with [ganache-cli](https://truffleframework.com/ganache) and batteries included. Simply run `embark simulator` to [spin up a simulated blockchain](running_apps.html#Using-the-blockchain-simulator). For more information, check out the dedicated [command reference](embark_commands.html#simulator).\n\n#### Is it Luri or Iuri?\n\n[Iuri](https://twitter.com/iurimatias), it is!\n","source":"docs/faq.md","raw":"title: Frequently Asked Questions\nlayout: docs\n---\n\nIf you're new to Embark you probably have a lot questions about what it can do and whether it supports the features you're looking for. Check out our frequently asked questions and don't hesitate to let us know if there's anything missing!\n\n#### Embark in one sentence?\n\nEmbark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).\n\n#### How does Embark differ from other tools?\n\nWhile Embark does have quite some things in common with tools like [Truffle](https://truffleframework.com/), it goes far beyond managing and deploying Smart Contracts, **if you want to**. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.\n\nWhether you want to purely focus on [building and deploying Smart Contracts](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.\n\n#### Can I use Embark purely for Smart Contract development?\n\nAbsolutely! Simply create your application using the `--contracts-only` option as discussed in our guide on [Creating Apps](create_project.html#Creating-“contracts-only”-apps) and you're good to go.\n\n[Embark's configurations](configuration.html) make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.\n\n#### Can Embark connect to a simulated blockchain like Ganache?\n\nYes it can! In fact, Embark comes with [ganache-cli](https://truffleframework.com/ganache) and batteries included. Simply run `embark simulator` to [spin up a simulated blockchain](running_apps.html#Using-the-blockchain-simulator). For more information, check out the dedicated [command reference](embark_commands.html#simulator).\n\n#### Is it Luri or Iuri?\n\n[Iuri](https://twitter.com/iurimatias), it is!\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/faq.html","comments":1,"_id":"ck5ijm3rk00157hegaau59e16","content":"<p>If you’re new to Embark you probably have a lot questions about what it can do and whether it supports the features you’re looking for. Check out our frequently asked questions and don’t hesitate to let us know if there’s anything missing!</p>\n<h4 id=\"Embark-in-one-sentence\"><a href=\"#Embark-in-one-sentence\" class=\"headerlink\" title=\"Embark in one sentence?\"></a>Embark in one sentence?</h4><p>Embark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).</p>\n<h4 id=\"How-does-Embark-differ-from-other-tools\"><a href=\"#How-does-Embark-differ-from-other-tools\" class=\"headerlink\" title=\"How does Embark differ from other tools?\"></a>How does Embark differ from other tools?</h4><p>While Embark does have quite some things in common with tools like <a href=\"https://truffleframework.com/\" target=\"_blank\" rel=\"noopener\">Truffle</a>, it goes far beyond managing and deploying Smart Contracts, <strong>if you want to</strong>. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.</p>\n<p>Whether you want to purely focus on <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">building and deploying Smart Contracts</a>, or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.</p>\n<h4 id=\"Can-I-use-Embark-purely-for-Smart-Contract-development\"><a href=\"#Can-I-use-Embark-purely-for-Smart-Contract-development\" class=\"headerlink\" title=\"Can I use Embark purely for Smart Contract development?\"></a>Can I use Embark purely for Smart Contract development?</h4><p>Absolutely! Simply create your application using the <code>--contracts-only</code> option as discussed in our guide on <a href=\"create_project.html#Creating-“contracts-only”-apps\">Creating Apps</a> and you’re good to go.</p>\n<p><a href=\"configuration.html\">Embark’s configurations</a> make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.</p>\n<h4 id=\"Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\"><a href=\"#Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\" class=\"headerlink\" title=\"Can Embark connect to a simulated blockchain like Ganache?\"></a>Can Embark connect to a simulated blockchain like Ganache?</h4><p>Yes it can! In fact, Embark comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">ganache-cli</a> and batteries included. Simply run <code>embark simulator</code> to <a href=\"running_apps.html#Using-the-blockchain-simulator\">spin up a simulated blockchain</a>. For more information, check out the dedicated <a href=\"embark_commands.html#simulator\">command reference</a>.</p>\n<h4 id=\"Is-it-Luri-or-Iuri\"><a href=\"#Is-it-Luri-or-Iuri\" class=\"headerlink\" title=\"Is it Luri or Iuri?\"></a>Is it Luri or Iuri?</h4><p><a href=\"https://twitter.com/iurimatias\" target=\"_blank\" rel=\"noopener\">Iuri</a>, it is!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>If you’re new to Embark you probably have a lot questions about what it can do and whether it supports the features you’re looking for. Check out our frequently asked questions and don’t hesitate to let us know if there’s anything missing!</p>\n<h4 id=\"Embark-in-one-sentence\"><a href=\"#Embark-in-one-sentence\" class=\"headerlink\" title=\"Embark in one sentence?\"></a>Embark in one sentence?</h4><p>Embark is a developer environment for building, testing, and deploying Smart Contracts, as well as fully decentralized applications — computation (EVM), storage (IPFS, Swarm), and communication (Whisper).</p>\n<h4 id=\"How-does-Embark-differ-from-other-tools\"><a href=\"#How-does-Embark-differ-from-other-tools\" class=\"headerlink\" title=\"How does Embark differ from other tools?\"></a>How does Embark differ from other tools?</h4><p>While Embark does have quite some things in common with tools like <a href=\"https://truffleframework.com/\" target=\"_blank\" rel=\"noopener\">Truffle</a>, it goes far beyond managing and deploying Smart Contracts, <strong>if you want to</strong>. Embark aims to be extensible so you can choose what features make most sense to you when building decentralized apps.</p>\n<p>Whether you want to purely focus on <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">building and deploying Smart Contracts</a>, or you want to build a static website that should be deployed on IPFS. Or even all of that! The sky is the limit.</p>\n<h4 id=\"Can-I-use-Embark-purely-for-Smart-Contract-development\"><a href=\"#Can-I-use-Embark-purely-for-Smart-Contract-development\" class=\"headerlink\" title=\"Can I use Embark purely for Smart Contract development?\"></a>Can I use Embark purely for Smart Contract development?</h4><p>Absolutely! Simply create your application using the <code>--contracts-only</code> option as discussed in our guide on <a href=\"create_project.html#Creating-“contracts-only”-apps\">Creating Apps</a> and you’re good to go.</p>\n<p><a href=\"configuration.html\">Embark’s configurations</a> make it very easy to switch to a fully featured decentralized application later on, in case you change your mind.</p>\n<h4 id=\"Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\"><a href=\"#Can-Embark-connect-to-a-simulated-blockchain-like-Ganache\" class=\"headerlink\" title=\"Can Embark connect to a simulated blockchain like Ganache?\"></a>Can Embark connect to a simulated blockchain like Ganache?</h4><p>Yes it can! In fact, Embark comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">ganache-cli</a> and batteries included. Simply run <code>embark simulator</code> to <a href=\"running_apps.html#Using-the-blockchain-simulator\">spin up a simulated blockchain</a>. For more information, check out the dedicated <a href=\"embark_commands.html#simulator\">command reference</a>.</p>\n<h4 id=\"Is-it-Luri-or-Iuri\"><a href=\"#Is-it-Luri-or-Iuri\" class=\"headerlink\" title=\"Is it Luri or Iuri?\"></a>Is it Luri or Iuri?</h4><p><a href=\"https://twitter.com/iurimatias\" target=\"_blank\" rel=\"noopener\">Iuri</a>, it is!</p>\n"},{"title":"docs_landing_page.header.title","layout":"docs-landing","_content":"\n","source":"docs/index.md","raw":"title: docs_landing_page.header.title\nlayout: docs-landing\n---\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/index.html","comments":1,"_id":"ck5ijm3rk00167heg9sji3hx1","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Installation","layout":"docs","_content":"In this guide we'll cover all the different ways of installing Embark on your local machine, starting with prerequisites.\n\n## Prerequisites\n\nIn order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:\n\n- [Node](#Node)\n- [Ethereum Client](#Ethereum-Client-Optional)\n- [IPFS](#IPFS-Optional)\n\nOnce done, go ahead and [install Embark](#Installing-Embark).\n\n### Node\n\nPlease install [Node.js](http://nodejs.org/) in version 10.17.0 LTS or higher.\n\n{% notification info 'Quick Tip' %}\nWe recommend installing Node using the [Node Version Manager](https://github.com/creationix/nvm/blob/master/README.md).  This is because it makes it very easy to install different versions of Node in isolated environments that don't require users to [change their permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) when installing packages. Find instructions on how to install NVM [here](https://github.com/creationix/nvm/blob/master/README.md#install-script).\n\nOnce that is done, we can install and select a specific Node version or use the `--lts` option to get the latest version with long term support like this:\n\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre>\n{% endnotification %}\n\n### IPFS (Optional)\n\nIPFS can be used to distribute our application's content on the decentralized IPFS nodes. This can be skipped in case this isn't planned, however we do recommend it. Checkout IPFS' [installation guide](https://docs.ipfs.io/guides/guides/install/) to learn how to install IPFS on our local machine.\n\nTo verify that the installation was successful, simply run the following command:\n\n```\n$ ipfs --version\n```\n\nThis outputs something like\n\n```\n$ ipfs version 0.4.17\n```\n\n### Ethereum Client (Optional)\n\nEmbark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with [Ganache CLI](https://truffleframework.com/ganache), a blockchain node emulator, which is accessible via [Embark's simulator](embark_commands.html#simulator) command.\n\nIn case we want to run a real node, [geth](https://geth.ethereum.org/) is a pretty good one. Check out the [installation guide](https://ethereum.github.io/go-ethereum/install/) for our platform and verify our installation with:\n\n```\n$ geth version\n```\n\nWhich should result in an output that looks like this (note that the exact version numbers may be different):\n\n```\nGeth\nVersion: 1.8.15-stable\nGit Commit: 89451f7c382ad2185987ee369f16416f89c28a7d\nArchitecture: amd64\nProtocol Versions: [63 62]\nNetwork Id: 1\nGo Version: go1.10.4\nOperating System: darwin\nGOPATH=\nGOROOT=/Users/travis/.gimme/versions/go1.10.4.darwin.amd64\n```\n\n## Installing Embark\n\nAlright, let's install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, [submit an issue on  GitHub](https://github.com/embarklabs/embark/issues), or take a look at our [troubleshooting guide](troubleshooting.html).\n\nWe can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:\n\n```\n$ npm -g install embark\n```\n\nAfter that, `embark` should be available as a global command in our terminal of choice. Let's verify this by running the following command:\n\n```\n$ embark --version\n```\n\nAt the time of writing this guide, the output looked like this:\n\n```\n4.0.0\n```\n\nAwesome! We're all set up. If you're brand new to Embark, now would be a good time to take our [Quickstart](/docs/quick_start.html) in which you'll build your first application!\n","source":"docs/installation.md","raw":"title: Installation\nlayout: docs\n---\nIn this guide we'll cover all the different ways of installing Embark on your local machine, starting with prerequisites.\n\n## Prerequisites\n\nIn order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:\n\n- [Node](#Node)\n- [Ethereum Client](#Ethereum-Client-Optional)\n- [IPFS](#IPFS-Optional)\n\nOnce done, go ahead and [install Embark](#Installing-Embark).\n\n### Node\n\nPlease install [Node.js](http://nodejs.org/) in version 10.17.0 LTS or higher.\n\n{% notification info 'Quick Tip' %}\nWe recommend installing Node using the [Node Version Manager](https://github.com/creationix/nvm/blob/master/README.md).  This is because it makes it very easy to install different versions of Node in isolated environments that don't require users to [change their permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) when installing packages. Find instructions on how to install NVM [here](https://github.com/creationix/nvm/blob/master/README.md#install-script).\n\nOnce that is done, we can install and select a specific Node version or use the `--lts` option to get the latest version with long term support like this:\n\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre>\n{% endnotification %}\n\n### IPFS (Optional)\n\nIPFS can be used to distribute our application's content on the decentralized IPFS nodes. This can be skipped in case this isn't planned, however we do recommend it. Checkout IPFS' [installation guide](https://docs.ipfs.io/guides/guides/install/) to learn how to install IPFS on our local machine.\n\nTo verify that the installation was successful, simply run the following command:\n\n```\n$ ipfs --version\n```\n\nThis outputs something like\n\n```\n$ ipfs version 0.4.17\n```\n\n### Ethereum Client (Optional)\n\nEmbark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with [Ganache CLI](https://truffleframework.com/ganache), a blockchain node emulator, which is accessible via [Embark's simulator](embark_commands.html#simulator) command.\n\nIn case we want to run a real node, [geth](https://geth.ethereum.org/) is a pretty good one. Check out the [installation guide](https://ethereum.github.io/go-ethereum/install/) for our platform and verify our installation with:\n\n```\n$ geth version\n```\n\nWhich should result in an output that looks like this (note that the exact version numbers may be different):\n\n```\nGeth\nVersion: 1.8.15-stable\nGit Commit: 89451f7c382ad2185987ee369f16416f89c28a7d\nArchitecture: amd64\nProtocol Versions: [63 62]\nNetwork Id: 1\nGo Version: go1.10.4\nOperating System: darwin\nGOPATH=\nGOROOT=/Users/travis/.gimme/versions/go1.10.4.darwin.amd64\n```\n\n## Installing Embark\n\nAlright, let's install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, [submit an issue on  GitHub](https://github.com/embarklabs/embark/issues), or take a look at our [troubleshooting guide](troubleshooting.html).\n\nWe can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:\n\n```\n$ npm -g install embark\n```\n\nAfter that, `embark` should be available as a global command in our terminal of choice. Let's verify this by running the following command:\n\n```\n$ embark --version\n```\n\nAt the time of writing this guide, the output looked like this:\n\n```\n4.0.0\n```\n\nAwesome! We're all set up. If you're brand new to Embark, now would be a good time to take our [Quickstart](/docs/quick_start.html) in which you'll build your first application!\n","date":"2020-01-19T20:56:53.010Z","updated":"2020-01-19T20:56:53.010Z","path":"docs/installation.html","_id":"ck5ijm3rl00177hegaq8kaid6","comments":1,"content":"<p>In this guide we’ll cover all the different ways of installing Embark on your local machine, starting with prerequisites.</p>\n<h2 id=\"Prerequisites\"><a href=\"#Prerequisites\" class=\"headerlink\" title=\"Prerequisites\"></a>Prerequisites</h2><p>In order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:</p>\n<ul>\n<li><a href=\"#Node\">Node</a></li>\n<li><a href=\"#Ethereum-Client-Optional\">Ethereum Client</a></li>\n<li><a href=\"#IPFS-Optional\">IPFS</a></li>\n</ul>\n<p>Once done, go ahead and <a href=\"#Installing-Embark\">install Embark</a>.</p>\n<h3 id=\"Node\"><a href=\"#Node\" class=\"headerlink\" title=\"Node\"></a>Node</h3><p>Please install <a href=\"http://nodejs.org/\" target=\"_blank\" rel=\"noopener\">Node.js</a> in version 10.17.0 LTS or higher.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick Tip</strong></p>\n  <p><p>We recommend installing Node using the <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">Node Version Manager</a>.  This is because it makes it very easy to install different versions of Node in isolated environments that don’t require users to <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">change their permissions</a> when installing packages. Find instructions on how to install NVM <a href=\"https://github.com/creationix/nvm/blob/master/README.md#install-script\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Once that is done, we can install and select a specific Node version or use the <code>--lts</code> option to get the latest version with long term support like this:</p>\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre></p>\n</div> \n\n\n\n<h3 id=\"IPFS-Optional\"><a href=\"#IPFS-Optional\" class=\"headerlink\" title=\"IPFS (Optional)\"></a>IPFS (Optional)</h3><p>IPFS can be used to distribute our application’s content on the decentralized IPFS nodes. This can be skipped in case this isn’t planned, however we do recommend it. Checkout IPFS’ <a href=\"https://docs.ipfs.io/guides/guides/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> to learn how to install IPFS on our local machine.</p>\n<p>To verify that the installation was successful, simply run the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs --version</span><br></pre></td></tr></table></figure>\n\n<p>This outputs something like</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs version 0.4.17</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Ethereum-Client-Optional\"><a href=\"#Ethereum-Client-Optional\" class=\"headerlink\" title=\"Ethereum Client (Optional)\"></a>Ethereum Client (Optional)</h3><p>Embark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, a blockchain node emulator, which is accessible via <a href=\"embark_commands.html#simulator\">Embark’s simulator</a> command.</p>\n<p>In case we want to run a real node, <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">geth</a> is a pretty good one. Check out the <a href=\"https://ethereum.github.io/go-ethereum/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> for our platform and verify our installation with:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ geth version</span><br></pre></td></tr></table></figure>\n\n<p>Which should result in an output that looks like this (note that the exact version numbers may be different):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Geth</span><br><span class=\"line\">Version: 1.8.15-stable</span><br><span class=\"line\">Git Commit: 89451f7c382ad2185987ee369f16416f89c28a7d</span><br><span class=\"line\">Architecture: amd64</span><br><span class=\"line\">Protocol Versions: [63 62]</span><br><span class=\"line\">Network Id: 1</span><br><span class=\"line\">Go Version: go1.10.4</span><br><span class=\"line\">Operating System: darwin</span><br><span class=\"line\">GOPATH&#x3D;</span><br><span class=\"line\">GOROOT&#x3D;&#x2F;Users&#x2F;travis&#x2F;.gimme&#x2F;versions&#x2F;go1.10.4.darwin.amd64</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-Embark\"><a href=\"#Installing-Embark\" class=\"headerlink\" title=\"Installing Embark\"></a>Installing Embark</h2><p>Alright, let’s install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">submit an issue on  GitHub</a>, or take a look at our <a href=\"troubleshooting.html\">troubleshooting guide</a>.</p>\n<p>We can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm -g install embark</span><br></pre></td></tr></table></figure>\n\n<p>After that, <code>embark</code> should be available as a global command in our terminal of choice. Let’s verify this by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark --version</span><br></pre></td></tr></table></figure>\n\n<p>At the time of writing this guide, the output looked like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">4.0.0</span><br></pre></td></tr></table></figure>\n\n<p>Awesome! We’re all set up. If you’re brand new to Embark, now would be a good time to take our <a href=\"/docs/quick_start.html\">Quickstart</a> in which you’ll build your first application!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In this guide we’ll cover all the different ways of installing Embark on your local machine, starting with prerequisites.</p>\n<h2 id=\"Prerequisites\"><a href=\"#Prerequisites\" class=\"headerlink\" title=\"Prerequisites\"></a>Prerequisites</h2><p>In order to make Embark work on our computer, we need to have some tools installed first. Make sure you have the following ready and in the correct version:</p>\n<ul>\n<li><a href=\"#Node\">Node</a></li>\n<li><a href=\"#Ethereum-Client-Optional\">Ethereum Client</a></li>\n<li><a href=\"#IPFS-Optional\">IPFS</a></li>\n</ul>\n<p>Once done, go ahead and <a href=\"#Installing-Embark\">install Embark</a>.</p>\n<h3 id=\"Node\"><a href=\"#Node\" class=\"headerlink\" title=\"Node\"></a>Node</h3><p>Please install <a href=\"http://nodejs.org/\" target=\"_blank\" rel=\"noopener\">Node.js</a> in version 10.17.0 LTS or higher.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Quick Tip</strong></p>\n  <p><p>We recommend installing Node using the <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">Node Version Manager</a>.  This is because it makes it very easy to install different versions of Node in isolated environments that don’t require users to <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">change their permissions</a> when installing packages. Find instructions on how to install NVM <a href=\"https://github.com/creationix/nvm/blob/master/README.md#install-script\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Once that is done, we can install and select a specific Node version or use the <code>--lts</code> option to get the latest version with long term support like this:</p>\n<pre class=\"highlight\"><code>$ nvm install --lts\n$ nvm use --lts\n</code></pre></p>\n</div> \n\n\n\n<h3 id=\"IPFS-Optional\"><a href=\"#IPFS-Optional\" class=\"headerlink\" title=\"IPFS (Optional)\"></a>IPFS (Optional)</h3><p>IPFS can be used to distribute our application’s content on the decentralized IPFS nodes. This can be skipped in case this isn’t planned, however we do recommend it. Checkout IPFS’ <a href=\"https://docs.ipfs.io/guides/guides/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> to learn how to install IPFS on our local machine.</p>\n<p>To verify that the installation was successful, simply run the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs --version</span><br></pre></td></tr></table></figure>\n\n<p>This outputs something like</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ipfs version 0.4.17</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Ethereum-Client-Optional\"><a href=\"#Ethereum-Client-Optional\" class=\"headerlink\" title=\"Ethereum Client (Optional)\"></a>Ethereum Client (Optional)</h3><p>Embark can spin up an Ethereum node for us. To make this happen, an Ethereum client has to be installed on our machine as well. Embark already comes with <a href=\"https://truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, a blockchain node emulator, which is accessible via <a href=\"embark_commands.html#simulator\">Embark’s simulator</a> command.</p>\n<p>In case we want to run a real node, <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">geth</a> is a pretty good one. Check out the <a href=\"https://ethereum.github.io/go-ethereum/install/\" target=\"_blank\" rel=\"noopener\">installation guide</a> for our platform and verify our installation with:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ geth version</span><br></pre></td></tr></table></figure>\n\n<p>Which should result in an output that looks like this (note that the exact version numbers may be different):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Geth</span><br><span class=\"line\">Version: 1.8.15-stable</span><br><span class=\"line\">Git Commit: 89451f7c382ad2185987ee369f16416f89c28a7d</span><br><span class=\"line\">Architecture: amd64</span><br><span class=\"line\">Protocol Versions: [63 62]</span><br><span class=\"line\">Network Id: 1</span><br><span class=\"line\">Go Version: go1.10.4</span><br><span class=\"line\">Operating System: darwin</span><br><span class=\"line\">GOPATH&#x3D;</span><br><span class=\"line\">GOROOT&#x3D;&#x2F;Users&#x2F;travis&#x2F;.gimme&#x2F;versions&#x2F;go1.10.4.darwin.amd64</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-Embark\"><a href=\"#Installing-Embark\" class=\"headerlink\" title=\"Installing Embark\"></a>Installing Embark</h2><p>Alright, let’s install Embark so we can build our first application. As mentioned earlier, if anything is unclear or you run into problems, make sure to reach out to us on our dedicated channels, <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">submit an issue on  GitHub</a>, or take a look at our <a href=\"troubleshooting.html\">troubleshooting guide</a>.</p>\n<p>We can install Embark using the Node Package Manager (no worries, that one comes with Node), like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm -g install embark</span><br></pre></td></tr></table></figure>\n\n<p>After that, <code>embark</code> should be available as a global command in our terminal of choice. Let’s verify this by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark --version</span><br></pre></td></tr></table></figure>\n\n<p>At the time of writing this guide, the output looked like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">4.0.0</span><br></pre></td></tr></table></figure>\n\n<p>Awesome! We’re all set up. If you’re brand new to Embark, now would be a good time to take our <a href=\"/docs/quick_start.html\">Quickstart</a> in which you’ll build your first application!</p>\n"},{"title":"Configuring EmbarkJS","layout":"docs","_content":"\nEmbark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily & quickly build powerful Dapps that leverage different decentralized technologies.\nEmbark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained [below](#Connecting).\n\n### Connecting\n\nBefore using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.\n\nFor that, EmbarkJS provides the `Blockchain.connect()` function that receives a configuration object.\nLuckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is `embarkArtifacts/`, but you can change that in `embark.json` by changing `generationDir`.\n\nLet's see what that generated config file looks like at `embarkArtifacts/config/blockchain.json`:\n\n```\n{\n  \"dappConnection\": [\n    \"$WEB3\",\n    \"$EMBARK\",\n    \"ws://localhost:8546\"\n  ],\n  \"dappAutoEnable\": true,\n  \"warnIfMetamask\": true,\n  \"blockchainClient\": \"geth\"\n}\n```\n\n\n#### Connection parameters:\n\n- **dappConnection**: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at [the guide on EmbakJS](/docs/javascript_usage.html#Using-dappConnection).\n- **dappAutoEnable**: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.\n - Read more on it [below](#Provider)\n- **warnIfMetamask**: Is true when `isDev` is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.\n- **blockchainClient**: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.\n\n\n### Utilities\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n### Provider\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request account access. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\n...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  // Default value is true.\n  // dappAutoEnable: true,\n...\n```\n\n\nBy default, the value of `dappAutoEnable` is true which means that Embark will call `ethereum.enable` for you to request account access when the first page of the dapp is loaded.\n\nIf you want more control, you can set `dappAutoEnable` to false.\nThen, if you want to request account access, you can use the following code:\n\n```\n...\n  try {\n    const accounts = await EmbarkJS.enableEthereum();\n    // access granted\n  } catch() {\n    // access not granted\n  }\n...\n```\n\nThis will request account access and if the user grants access to his accounts, you will be able to make transaction calls.\n\n\n### Components\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","source":"docs/installing_embarkjs.md","raw":"title: Configuring EmbarkJS\nlayout: docs\n---\n\nEmbark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily & quickly build powerful Dapps that leverage different decentralized technologies.\nEmbark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained [below](#Connecting).\n\n### Connecting\n\nBefore using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.\n\nFor that, EmbarkJS provides the `Blockchain.connect()` function that receives a configuration object.\nLuckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is `embarkArtifacts/`, but you can change that in `embark.json` by changing `generationDir`.\n\nLet's see what that generated config file looks like at `embarkArtifacts/config/blockchain.json`:\n\n```\n{\n  \"dappConnection\": [\n    \"$WEB3\",\n    \"$EMBARK\",\n    \"ws://localhost:8546\"\n  ],\n  \"dappAutoEnable\": true,\n  \"warnIfMetamask\": true,\n  \"blockchainClient\": \"geth\"\n}\n```\n\n\n#### Connection parameters:\n\n- **dappConnection**: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at [the guide on EmbakJS](/docs/javascript_usage.html#Using-dappConnection).\n- **dappAutoEnable**: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.\n - Read more on it [below](#Provider)\n- **warnIfMetamask**: Is true when `isDev` is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.\n- **blockchainClient**: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.\n\n\n### Utilities\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n### Provider\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request account access. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\n...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  // Default value is true.\n  // dappAutoEnable: true,\n...\n```\n\n\nBy default, the value of `dappAutoEnable` is true which means that Embark will call `ethereum.enable` for you to request account access when the first page of the dapp is loaded.\n\nIf you want more control, you can set `dappAutoEnable` to false.\nThen, if you want to request account access, you can use the following code:\n\n```\n...\n  try {\n    const accounts = await EmbarkJS.enableEthereum();\n    // access granted\n  } catch() {\n    // access not granted\n  }\n...\n```\n\nThis will request account access and if the user grants access to his accounts, you will be able to make transaction calls.\n\n\n### Components\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/installing_embarkjs.html","comments":1,"_id":"ck5ijm3rm00187hege76085yd","content":"<p>Embark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily &amp; quickly build powerful Dapps that leverage different decentralized technologies.<br>Embark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained <a href=\"#Connecting\">below</a>.</p>\n<h3 id=\"Connecting\"><a href=\"#Connecting\" class=\"headerlink\" title=\"Connecting\"></a>Connecting</h3><p>Before using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.</p>\n<p>For that, EmbarkJS provides the <code>Blockchain.connect()</code> function that receives a configuration object.<br>Luckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is <code>embarkArtifacts/</code>, but you can change that in <code>embark.json</code> by changing <code>generationDir</code>.</p>\n<p>Let’s see what that generated config file looks like at <code>embarkArtifacts/config/blockchain.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;dappConnection&quot;: [</span><br><span class=\"line\">    &quot;$WEB3&quot;,</span><br><span class=\"line\">    &quot;$EMBARK&quot;,</span><br><span class=\"line\">    &quot;ws:&#x2F;&#x2F;localhost:8546&quot;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  &quot;dappAutoEnable&quot;: true,</span><br><span class=\"line\">  &quot;warnIfMetamask&quot;: true,</span><br><span class=\"line\">  &quot;blockchainClient&quot;: &quot;geth&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h4 id=\"Connection-parameters\"><a href=\"#Connection-parameters\" class=\"headerlink\" title=\"Connection parameters:\"></a>Connection parameters:</h4><ul>\n<li><strong>dappConnection</strong>: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at <a href=\"/docs/javascript_usage.html#Using-dappConnection\">the guide on EmbakJS</a>.</li>\n<li><strong>dappAutoEnable</strong>: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.<ul>\n<li>Read more on it <a href=\"#Provider\">below</a></li>\n</ul>\n</li>\n<li><strong>warnIfMetamask</strong>: Is true when <code>isDev</code> is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.</li>\n<li><strong>blockchainClient</strong>: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.</li>\n</ul>\n<h3 id=\"Utilities\"><a href=\"#Utilities\" class=\"headerlink\" title=\"Utilities\"></a>Utilities</h3><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Provider\"><a href=\"#Provider\" class=\"headerlink\" title=\"Provider\"></a>Provider</h3><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request account access. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  &#x2F;&#x2F; Default value is true.</span><br><span class=\"line\">  &#x2F;&#x2F; dappAutoEnable: true,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<p>By default, the value of <code>dappAutoEnable</code> is true which means that Embark will call <code>ethereum.enable</code> for you to request account access when the first page of the dapp is loaded.</p>\n<p>If you want more control, you can set <code>dappAutoEnable</code> to false.<br>Then, if you want to request account access, you can use the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">    &#x2F;&#x2F; access granted</span><br><span class=\"line\">  &#125; catch() &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; access not granted</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This will request account access and if the user grants access to his accounts, you will be able to make transaction calls.</p>\n<h3 id=\"Components\"><a href=\"#Components\" class=\"headerlink\" title=\"Components\"></a>Components</h3><ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark includes in your Dapp the EmbarkJS library. This library abstracts different functionalities, so you can easily &amp; quickly build powerful Dapps that leverage different decentralized technologies.<br>Embark will automatically initialize EmbarkJS with the configurations set for your particular environment. You just need to connect it to a blockchain node, like explained <a href=\"#Connecting\">below</a>.</p>\n<h3 id=\"Connecting\"><a href=\"#Connecting\" class=\"headerlink\" title=\"Connecting\"></a>Connecting</h3><p>Before using EmbarkJS and Contract functions, we need to make sure that Embark is connected to a blockchain node.</p>\n<p>For that, EmbarkJS provides the <code>Blockchain.connect()</code> function that receives a configuration object.<br>Luckily, Embark generates the necessary config by looking at your configuration files and outputs it in its generation folder. The default directory is <code>embarkArtifacts/</code>, but you can change that in <code>embark.json</code> by changing <code>generationDir</code>.</p>\n<p>Let’s see what that generated config file looks like at <code>embarkArtifacts/config/blockchain.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;dappConnection&quot;: [</span><br><span class=\"line\">    &quot;$WEB3&quot;,</span><br><span class=\"line\">    &quot;$EMBARK&quot;,</span><br><span class=\"line\">    &quot;ws:&#x2F;&#x2F;localhost:8546&quot;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  &quot;dappAutoEnable&quot;: true,</span><br><span class=\"line\">  &quot;warnIfMetamask&quot;: true,</span><br><span class=\"line\">  &quot;blockchainClient&quot;: &quot;geth&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h4 id=\"Connection-parameters\"><a href=\"#Connection-parameters\" class=\"headerlink\" title=\"Connection parameters:\"></a>Connection parameters:</h4><ul>\n<li><strong>dappConnection</strong>: Copied from the contracts config. This is the list of connections Embark will try to connect to in order. For more information, look at <a href=\"/docs/javascript_usage.html#Using-dappConnection\">the guide on EmbakJS</a>.</li>\n<li><strong>dappAutoEnable</strong>: Copied from the contracts config. This tells EmbarkJS to either automatically connect to Metamask (or Mist) or wait for the developper (you) to do it.<ul>\n<li>Read more on it <a href=\"#Provider\">below</a></li>\n</ul>\n</li>\n<li><strong>warnIfMetamask</strong>: Is true when <code>isDev</code> is true in the blockchain config. Will warn you in the console if Metamask is detected, to make sure you connect Metamask correctly to the local node.</li>\n<li><strong>blockchainClient</strong>: Copied from the blockchain config. This tells EmbarkJS which blockchain client it is connecting to and it will warn about the different problematic behaviours you could experience.</li>\n</ul>\n<h3 id=\"Utilities\"><a href=\"#Utilities\" class=\"headerlink\" title=\"Utilities\"></a>Utilities</h3><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Provider\"><a href=\"#Provider\" class=\"headerlink\" title=\"Provider\"></a>Provider</h3><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request account access. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  &#x2F;&#x2F; Default value is true.</span><br><span class=\"line\">  &#x2F;&#x2F; dappAutoEnable: true,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<p>By default, the value of <code>dappAutoEnable</code> is true which means that Embark will call <code>ethereum.enable</code> for you to request account access when the first page of the dapp is loaded.</p>\n<p>If you want more control, you can set <code>dappAutoEnable</code> to false.<br>Then, if you want to request account access, you can use the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">    &#x2F;&#x2F; access granted</span><br><span class=\"line\">  &#125; catch() &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; access not granted</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This will request account access and if the user grants access to his accounts, you will be able to make transaction calls.</p>\n<h3 id=\"Components\"><a href=\"#Components\" class=\"headerlink\" title=\"Components\"></a>Components</h3><ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n"},{"title":"Installing Plugins","layout":"docs","_content":"Embark offers a variety of [plugins](/plugins) you can choose from  and you can even [build your own](/docs/creating_plugins.html) to make Embark work with your tool of choice. Let's take a look at how to install and configure plugins for Embark.\n\n## Finding the right plugin\n\nBefore we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn't be too hard. Supported Embark plugins are listed on the [Plugins](/plugins) page. Sometimes it's also helpful to search for repositories on GitHub that have an `embark-` prefix.\n\n## Downloading plugins\n\nOnce we know what plugin we're interested in, it's really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.\n\nThe following command installs a plugin for the `solc` compiler:\n\n```\n$ npm install embark-solc --save\n```\n\nThis will also update our projects `package.json` as we're adding the plugin as a project dependency.\n\n## Configuring plugins\n\nAfter installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.\n\nTo configure a plugin, add a dedicated section to your project's `embark.json` file:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {}\n}\n...\n```\n\nOnce that is done, check out the available configuration options for your plugin of choice. The `embark-solc` plugin allows for configuring whether the plugin should generate binary output or not using the `outputBinary` option. \n\nThe following code sets activates this feature:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {\n    \"outputBinary\": true\n  }\n}\n...\n```\n\n","source":"docs/installing_plugins.md","raw":"title: Installing Plugins\nlayout: docs\n---\nEmbark offers a variety of [plugins](/plugins) you can choose from  and you can even [build your own](/docs/creating_plugins.html) to make Embark work with your tool of choice. Let's take a look at how to install and configure plugins for Embark.\n\n## Finding the right plugin\n\nBefore we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn't be too hard. Supported Embark plugins are listed on the [Plugins](/plugins) page. Sometimes it's also helpful to search for repositories on GitHub that have an `embark-` prefix.\n\n## Downloading plugins\n\nOnce we know what plugin we're interested in, it's really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.\n\nThe following command installs a plugin for the `solc` compiler:\n\n```\n$ npm install embark-solc --save\n```\n\nThis will also update our projects `package.json` as we're adding the plugin as a project dependency.\n\n## Configuring plugins\n\nAfter installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.\n\nTo configure a plugin, add a dedicated section to your project's `embark.json` file:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {}\n}\n...\n```\n\nOnce that is done, check out the available configuration options for your plugin of choice. The `embark-solc` plugin allows for configuring whether the plugin should generate binary output or not using the `outputBinary` option. \n\nThe following code sets activates this feature:\n\n```\n...\n\"plugins\": {\n  \"embark-solc\": {\n    \"outputBinary\": true\n  }\n}\n...\n```\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/installing_plugins.html","comments":1,"_id":"ck5ijm3rm00197hegb39td76m","content":"<p>Embark offers a variety of <a href=\"/plugins\">plugins</a> you can choose from  and you can even <a href=\"/docs/creating_plugins.html\">build your own</a> to make Embark work with your tool of choice. Let’s take a look at how to install and configure plugins for Embark.</p>\n<h2 id=\"Finding-the-right-plugin\"><a href=\"#Finding-the-right-plugin\" class=\"headerlink\" title=\"Finding the right plugin\"></a>Finding the right plugin</h2><p>Before we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn’t be too hard. Supported Embark plugins are listed on the <a href=\"/plugins\">Plugins</a> page. Sometimes it’s also helpful to search for repositories on GitHub that have an <code>embark-</code> prefix.</p>\n<h2 id=\"Downloading-plugins\"><a href=\"#Downloading-plugins\" class=\"headerlink\" title=\"Downloading plugins\"></a>Downloading plugins</h2><p>Once we know what plugin we’re interested in, it’s really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.</p>\n<p>The following command installs a plugin for the <code>solc</code> compiler:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install embark-solc --save</span><br></pre></td></tr></table></figure>\n\n<p>This will also update our projects <code>package.json</code> as we’re adding the plugin as a project dependency.</p>\n<h2 id=\"Configuring-plugins\"><a href=\"#Configuring-plugins\" class=\"headerlink\" title=\"Configuring plugins\"></a>Configuring plugins</h2><p>After installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.</p>\n<p>To configure a plugin, add a dedicated section to your project’s <code>embark.json</code> file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, check out the available configuration options for your plugin of choice. The <code>embark-solc</code> plugin allows for configuring whether the plugin should generate binary output or not using the <code>outputBinary</code> option. </p>\n<p>The following code sets activates this feature:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;</span><br><span class=\"line\">    &quot;outputBinary&quot;: true</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark offers a variety of <a href=\"/plugins\">plugins</a> you can choose from  and you can even <a href=\"/docs/creating_plugins.html\">build your own</a> to make Embark work with your tool of choice. Let’s take a look at how to install and configure plugins for Embark.</p>\n<h2 id=\"Finding-the-right-plugin\"><a href=\"#Finding-the-right-plugin\" class=\"headerlink\" title=\"Finding the right plugin\"></a>Finding the right plugin</h2><p>Before we can install a plugin we need to know which one we want to install first. Finding the right plugin shouldn’t be too hard. Supported Embark plugins are listed on the <a href=\"/plugins\">Plugins</a> page. Sometimes it’s also helpful to search for repositories on GitHub that have an <code>embark-</code> prefix.</p>\n<h2 id=\"Downloading-plugins\"><a href=\"#Downloading-plugins\" class=\"headerlink\" title=\"Downloading plugins\"></a>Downloading plugins</h2><p>Once we know what plugin we’re interested in, it’s really just a matter of adding them to our existing project. This can be done either by downloading and installing them via a package manager such as npm, or even through simple cloning using Git.</p>\n<p>The following command installs a plugin for the <code>solc</code> compiler:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install embark-solc --save</span><br></pre></td></tr></table></figure>\n\n<p>This will also update our projects <code>package.json</code> as we’re adding the plugin as a project dependency.</p>\n<h2 id=\"Configuring-plugins\"><a href=\"#Configuring-plugins\" class=\"headerlink\" title=\"Configuring plugins\"></a>Configuring plugins</h2><p>After installation, we can configure the plugin. What configuration options exist depends entirely on the plugin but the way how configuration works is always the same.</p>\n<p>To configure a plugin, add a dedicated section to your project’s <code>embark.json</code> file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, check out the available configuration options for your plugin of choice. The <code>embark-solc</code> plugin allows for configuring whether the plugin should generate binary output or not using the <code>outputBinary</code> option. </p>\n<p>The following code sets activates this feature:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-solc&quot;: &#123;</span><br><span class=\"line\">    &quot;outputBinary&quot;: true</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Using EmbarkJS","layout":"docs","_content":"\nIn order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called **EmbarkJS**. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.\n\n## Embark Artifacts\n\nFirst of all it's important to understand where EmbarkJS comes from. Whenever `embark run` is executed, Embark will generate the EmbarkJS library and put it in the configured `generationDir`, as discussed in [configuring Embark](/docs/configuration.html). This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.\n\nOther artifacts that Embark generates are:\n\n- Smart Contract ABIs\n- Bootstrapping code\n- Configuration data\n\nWe'll discuss these more in this guide.\n\n## Importing EmbarkJS\n\nOnce Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it's really just a matter of importing them accordingly.\n\nThe following code imports EmbarkJS:\n\n```\nimport EmbarkJS from './embarkArtifacts/embarkjs';\n```\n\n## Waiting for EmbarkJS to be ready\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n## Using `dappConnection`\n\nAfter reading the section above on `EmbarkJS.onReady`, you might be wondering where EmbarkJS establishes a connection.\n\nThe answer is: you decide! You can configure it using `dappConnection`, a config property you can find in the Smart Contract config (by default at `config/contracts.js`).\n\nYou will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.\n\nThe expressions used within `dappConnection` come with special semantics. Here's how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.\n\nIn the case of the Smart Contract config `dappConnection`, the one that is used to connect to the blockchain node and that is indirectly used in `EmbarkJS.onReady`, you will see two special entities: `$WEB3` and `$EMBARK`.\n\n- `$WEB3` tells EmbarkJS to connect to the browser's web3 instance. For example, Metamask or Status.\n- `$EMBARK` tells EmbarkJS to connect to Embark's wallet, implemented using a proxy in between the Dapp and the blockchain node.\n  - This let's you use you own accounts, as set up in your Blockchain config's `accounts` section\n    - If you don't use custom accounts, using `$EMBARK` is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the `dev` `miningMode`\n  - Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner\n  \nIf you want, you can also put a valid node URL in the `dappConnection` array. In that case, EmbarkJS will connect directly to the node, without using Embark's proxy.\nIt is, however, not recommended as you lose some of Embark's features, like the transaction logger.\n\nIf you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (`config/blockchain.js`) using the property `endpoint`.\nThen, using `$EMBARK` will use Embark's proxy, which in part will be connected to that endpoint.\n\n## Requesting account access\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request access to a DApp's user accounts. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\nmodule.exports = {\n  ...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  dappAutoEnable: true,\n  ...\n}\n```\n\nBy default, the value of `dappAutoEnable` is `true` which means that Embark will call `ethereum.enable` for us to request account access when the first page of the DApp is loaded.\n\nIf we want more control over when our application should request account access, we can set `dappAutoEnable` to false and make use of `EmbarkJS.enableEthereum()`.\n\nThis method will essentially cause our application to request account access, giving us full control over when this should happen.\n\n```\ntry {\n  const accounts = await EmbarkJS.enableEthereum();\n  // access granted\n} catch() {\n  // access not granted\n}\n```\n\n## Additional APIs\n\nThis guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we're achieving to build. Have a look at the dedicated guides to learn more:\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","source":"docs/javascript_usage.md","raw":"title: Using EmbarkJS\nlayout: docs\n---\n\nIn order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called **EmbarkJS**. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.\n\n## Embark Artifacts\n\nFirst of all it's important to understand where EmbarkJS comes from. Whenever `embark run` is executed, Embark will generate the EmbarkJS library and put it in the configured `generationDir`, as discussed in [configuring Embark](/docs/configuration.html). This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.\n\nOther artifacts that Embark generates are:\n\n- Smart Contract ABIs\n- Bootstrapping code\n- Configuration data\n\nWe'll discuss these more in this guide.\n\n## Importing EmbarkJS\n\nOnce Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it's really just a matter of importing them accordingly.\n\nThe following code imports EmbarkJS:\n\n```\nimport EmbarkJS from './embarkArtifacts/embarkjs';\n```\n\n## Waiting for EmbarkJS to be ready\n\nEmbarkJS also includes a `onReady` function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nEmbarkJS.onReady((error) => {\n  if (error) {\n    console.error('Error while connecting to web3', error);\n    return;\n  }\n  SimpleStorage.methods.set(100).send();\n});\n```\n\n## Using `dappConnection`\n\nAfter reading the section above on `EmbarkJS.onReady`, you might be wondering where EmbarkJS establishes a connection.\n\nThe answer is: you decide! You can configure it using `dappConnection`, a config property you can find in the Smart Contract config (by default at `config/contracts.js`).\n\nYou will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.\n\nThe expressions used within `dappConnection` come with special semantics. Here's how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.\n\nIn the case of the Smart Contract config `dappConnection`, the one that is used to connect to the blockchain node and that is indirectly used in `EmbarkJS.onReady`, you will see two special entities: `$WEB3` and `$EMBARK`.\n\n- `$WEB3` tells EmbarkJS to connect to the browser's web3 instance. For example, Metamask or Status.\n- `$EMBARK` tells EmbarkJS to connect to Embark's wallet, implemented using a proxy in between the Dapp and the blockchain node.\n  - This let's you use you own accounts, as set up in your Blockchain config's `accounts` section\n    - If you don't use custom accounts, using `$EMBARK` is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the `dev` `miningMode`\n  - Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner\n  \nIf you want, you can also put a valid node URL in the `dappConnection` array. In that case, EmbarkJS will connect directly to the node, without using Embark's proxy.\nIt is, however, not recommended as you lose some of Embark's features, like the transaction logger.\n\nIf you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (`config/blockchain.js`) using the property `endpoint`.\nThen, using `$EMBARK` will use Embark's proxy, which in part will be connected to that endpoint.\n\n## Requesting account access\n\nAs of [EIP1102](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md), decentralized applications MUST request access to a DApp's user accounts. Embark offers several options on how to implement this.\n\nAn Embark application's Smart Contract configuration file (typically located in `config/contracts.js`) comes with a `dappAutoEnable` property which controls whether or not EmbarkJS should automatically try to request account access:\n```\nmodule.exports = {\n  ...\n  // Automatically call `ethereum.enable` if true.\n  // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`\n  dappAutoEnable: true,\n  ...\n}\n```\n\nBy default, the value of `dappAutoEnable` is `true` which means that Embark will call `ethereum.enable` for us to request account access when the first page of the DApp is loaded.\n\nIf we want more control over when our application should request account access, we can set `dappAutoEnable` to false and make use of `EmbarkJS.enableEthereum()`.\n\nThis method will essentially cause our application to request account access, giving us full control over when this should happen.\n\n```\ntry {\n  const accounts = await EmbarkJS.enableEthereum();\n  // access granted\n} catch() {\n  // access not granted\n}\n```\n\n## Additional APIs\n\nThis guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we're achieving to build. Have a look at the dedicated guides to learn more:\n\n* [EmbarkJS.Contract](contracts_javascript.html) - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1\n* [EmbarkJS.Storage](storage_javascript.html) - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..\n* [EmbarkJS.Communication](messages_javascript.html) - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.\n* [EmbarkJS.Names](naming_javascript.html) - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/javascript_usage.html","comments":1,"_id":"ck5ijm3rn001a7hegd50edf60","content":"<p>In order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called <strong>EmbarkJS</strong>. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.</p>\n<h2 id=\"Embark-Artifacts\"><a href=\"#Embark-Artifacts\" class=\"headerlink\" title=\"Embark Artifacts\"></a>Embark Artifacts</h2><p>First of all it’s important to understand where EmbarkJS comes from. Whenever <code>embark run</code> is executed, Embark will generate the EmbarkJS library and put it in the configured <code>generationDir</code>, as discussed in <a href=\"/docs/configuration.html\">configuring Embark</a>. This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.</p>\n<p>Other artifacts that Embark generates are:</p>\n<ul>\n<li>Smart Contract ABIs</li>\n<li>Bootstrapping code</li>\n<li>Configuration data</li>\n</ul>\n<p>We’ll discuss these more in this guide.</p>\n<h2 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h2><p>Once Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it’s really just a matter of importing them accordingly.</p>\n<p>The following code imports EmbarkJS:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;embarkArtifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Waiting-for-EmbarkJS-to-be-ready\"><a href=\"#Waiting-for-EmbarkJS-to-be-ready\" class=\"headerlink\" title=\"Waiting for EmbarkJS to be ready\"></a>Waiting for EmbarkJS to be ready</h2><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-dappConnection\"><a href=\"#Using-dappConnection\" class=\"headerlink\" title=\"Using dappConnection\"></a>Using <code>dappConnection</code></h2><p>After reading the section above on <code>EmbarkJS.onReady</code>, you might be wondering where EmbarkJS establishes a connection.</p>\n<p>The answer is: you decide! You can configure it using <code>dappConnection</code>, a config property you can find in the Smart Contract config (by default at <code>config/contracts.js</code>).</p>\n<p>You will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.</p>\n<p>The expressions used within <code>dappConnection</code> come with special semantics. Here’s how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.</p>\n<p>In the case of the Smart Contract config <code>dappConnection</code>, the one that is used to connect to the blockchain node and that is indirectly used in <code>EmbarkJS.onReady</code>, you will see two special entities: <code>$WEB3</code> and <code>$EMBARK</code>.</p>\n<ul>\n<li><code>$WEB3</code> tells EmbarkJS to connect to the browser’s web3 instance. For example, Metamask or Status.</li>\n<li><code>$EMBARK</code> tells EmbarkJS to connect to Embark’s wallet, implemented using a proxy in between the Dapp and the blockchain node.<ul>\n<li>This let’s you use you own accounts, as set up in your Blockchain config’s <code>accounts</code> section<ul>\n<li>If you don’t use custom accounts, using <code>$EMBARK</code> is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the <code>dev</code> <code>miningMode</code></li>\n</ul>\n</li>\n<li>Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner</li>\n</ul>\n</li>\n</ul>\n<p>If you want, you can also put a valid node URL in the <code>dappConnection</code> array. In that case, EmbarkJS will connect directly to the node, without using Embark’s proxy.<br>It is, however, not recommended as you lose some of Embark’s features, like the transaction logger.</p>\n<p>If you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (<code>config/blockchain.js</code>) using the property <code>endpoint</code>.<br>Then, using <code>$EMBARK</code> will use Embark’s proxy, which in part will be connected to that endpoint.</p>\n<h2 id=\"Requesting-account-access\"><a href=\"#Requesting-account-access\" class=\"headerlink\" title=\"Requesting account access\"></a>Requesting account access</h2><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request access to a DApp’s user accounts. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  dappAutoEnable: true,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>By default, the value of <code>dappAutoEnable</code> is <code>true</code> which means that Embark will call <code>ethereum.enable</code> for us to request account access when the first page of the DApp is loaded.</p>\n<p>If we want more control over when our application should request account access, we can set <code>dappAutoEnable</code> to false and make use of <code>EmbarkJS.enableEthereum()</code>.</p>\n<p>This method will essentially cause our application to request account access, giving us full control over when this should happen.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">try &#123;</span><br><span class=\"line\">  const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">  &#x2F;&#x2F; access granted</span><br><span class=\"line\">&#125; catch() &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; access not granted</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Additional-APIs\"><a href=\"#Additional-APIs\" class=\"headerlink\" title=\"Additional APIs\"></a>Additional APIs</h2><p>This guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we’re achieving to build. Have a look at the dedicated guides to learn more:</p>\n<ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called <strong>EmbarkJS</strong>. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.</p>\n<h2 id=\"Embark-Artifacts\"><a href=\"#Embark-Artifacts\" class=\"headerlink\" title=\"Embark Artifacts\"></a>Embark Artifacts</h2><p>First of all it’s important to understand where EmbarkJS comes from. Whenever <code>embark run</code> is executed, Embark will generate the EmbarkJS library and put it in the configured <code>generationDir</code>, as discussed in <a href=\"/docs/configuration.html\">configuring Embark</a>. This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.</p>\n<p>Other artifacts that Embark generates are:</p>\n<ul>\n<li>Smart Contract ABIs</li>\n<li>Bootstrapping code</li>\n<li>Configuration data</li>\n</ul>\n<p>We’ll discuss these more in this guide.</p>\n<h2 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h2><p>Once Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it’s really just a matter of importing them accordingly.</p>\n<p>The following code imports EmbarkJS:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;embarkArtifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Waiting-for-EmbarkJS-to-be-ready\"><a href=\"#Waiting-for-EmbarkJS-to-be-ready\" class=\"headerlink\" title=\"Waiting for EmbarkJS to be ready\"></a>Waiting for EmbarkJS to be ready</h2><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.onReady((error) &#x3D;&gt; &#123;</span><br><span class=\"line\">  if (error) &#123;</span><br><span class=\"line\">    console.error(&#39;Error while connecting to web3&#39;, error);</span><br><span class=\"line\">    return;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-dappConnection\"><a href=\"#Using-dappConnection\" class=\"headerlink\" title=\"Using dappConnection\"></a>Using <code>dappConnection</code></h2><p>After reading the section above on <code>EmbarkJS.onReady</code>, you might be wondering where EmbarkJS establishes a connection.</p>\n<p>The answer is: you decide! You can configure it using <code>dappConnection</code>, a config property you can find in the Smart Contract config (by default at <code>config/contracts.js</code>).</p>\n<p>You will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.</p>\n<p>The expressions used within <code>dappConnection</code> come with special semantics. Here’s how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.</p>\n<p>In the case of the Smart Contract config <code>dappConnection</code>, the one that is used to connect to the blockchain node and that is indirectly used in <code>EmbarkJS.onReady</code>, you will see two special entities: <code>$WEB3</code> and <code>$EMBARK</code>.</p>\n<ul>\n<li><code>$WEB3</code> tells EmbarkJS to connect to the browser’s web3 instance. For example, Metamask or Status.</li>\n<li><code>$EMBARK</code> tells EmbarkJS to connect to Embark’s wallet, implemented using a proxy in between the Dapp and the blockchain node.<ul>\n<li>This let’s you use you own accounts, as set up in your Blockchain config’s <code>accounts</code> section<ul>\n<li>If you don’t use custom accounts, using <code>$EMBARK</code> is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the <code>dev</code> <code>miningMode</code></li>\n</ul>\n</li>\n<li>Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner</li>\n</ul>\n</li>\n</ul>\n<p>If you want, you can also put a valid node URL in the <code>dappConnection</code> array. In that case, EmbarkJS will connect directly to the node, without using Embark’s proxy.<br>It is, however, not recommended as you lose some of Embark’s features, like the transaction logger.</p>\n<p>If you want to use an external node,  like Infura, we instead recommend to set it in the Blockchain config (<code>config/blockchain.js</code>) using the property <code>endpoint</code>.<br>Then, using <code>$EMBARK</code> will use Embark’s proxy, which in part will be connected to that endpoint.</p>\n<h2 id=\"Requesting-account-access\"><a href=\"#Requesting-account-access\" class=\"headerlink\" title=\"Requesting account access\"></a>Requesting account access</h2><p>As of <a href=\"https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md\" target=\"_blank\" rel=\"noopener\">EIP1102</a>, decentralized applications MUST request access to a DApp’s user accounts. Embark offers several options on how to implement this.</p>\n<p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#x2F;&#x2F; Automatically call &#96;ethereum.enable&#96; if true.</span><br><span class=\"line\">  &#x2F;&#x2F; If false, the following code must run before sending any transaction: &#96;await EmbarkJS.enableEthereum();&#96;</span><br><span class=\"line\">  dappAutoEnable: true,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>By default, the value of <code>dappAutoEnable</code> is <code>true</code> which means that Embark will call <code>ethereum.enable</code> for us to request account access when the first page of the DApp is loaded.</p>\n<p>If we want more control over when our application should request account access, we can set <code>dappAutoEnable</code> to false and make use of <code>EmbarkJS.enableEthereum()</code>.</p>\n<p>This method will essentially cause our application to request account access, giving us full control over when this should happen.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">try &#123;</span><br><span class=\"line\">  const accounts &#x3D; await EmbarkJS.enableEthereum();</span><br><span class=\"line\">  &#x2F;&#x2F; access granted</span><br><span class=\"line\">&#125; catch() &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; access not granted</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Additional-APIs\"><a href=\"#Additional-APIs\" class=\"headerlink\" title=\"Additional APIs\"></a>Additional APIs</h2><p>This guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we’re achieving to build. Have a look at the dedicated guides to learn more:</p>\n<ul>\n<li><a href=\"contracts_javascript.html\">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.1</li>\n<li><a href=\"storage_javascript.html\">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save &amp; retrieve data, upload &amp; download files, etc..</li>\n<li><a href=\"messages_javascript.html\">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li>\n<li><a href=\"naming_javascript.html\">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li>\n</ul>\n"},{"title":"Configuring Messages with Whisper","layout":"docs","_content":"\nWith Embark it's very easy to connect to messaging channels using Whisper. In this guide we'll discuss how to set everything up to add messaging support to our applications.\n\n## Configuration basics\n\nBy default, Embark will check our preferred communication configuration in the file `config/communication.js`. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment (for more information about environments, check out [this guide](/docs/environments.html). Each of these options can be individually overridden on a per environment basis.\n\nHere's an example configuration:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    provider: 'whisper',\n    available_providers: ['whisper']\n  }\n}\n```\n\nAvailable options:\n\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`enabled` | boolean: `true/false` | To enable or completely disable communication support\n`provider` |  string: `whisper`  | Desired provider to automatically connect to in the dapp.\n`available_providers`  | array: `[\"whisper\"]` |  List of communication platforms to be supported in the dapp. This will affect what's available with the EmbarkJS library in the dapp so if you don't need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.\n\n","source":"docs/messages_configuration.md","raw":"title: Configuring Messages with Whisper\nlayout: docs\n---\n\nWith Embark it's very easy to connect to messaging channels using Whisper. In this guide we'll discuss how to set everything up to add messaging support to our applications.\n\n## Configuration basics\n\nBy default, Embark will check our preferred communication configuration in the file `config/communication.js`. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment (for more information about environments, check out [this guide](/docs/environments.html). Each of these options can be individually overridden on a per environment basis.\n\nHere's an example configuration:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    provider: 'whisper',\n    available_providers: ['whisper']\n  }\n}\n```\n\nAvailable options:\n\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`enabled` | boolean: `true/false` | To enable or completely disable communication support\n`provider` |  string: `whisper`  | Desired provider to automatically connect to in the dapp.\n`available_providers`  | array: `[\"whisper\"]` |  List of communication platforms to be supported in the dapp. This will affect what's available with the EmbarkJS library in the dapp so if you don't need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/messages_configuration.html","comments":1,"_id":"ck5ijm3ro001b7hege89ragpf","content":"<p>With Embark it’s very easy to connect to messaging channels using Whisper. In this guide we’ll discuss how to set everything up to add messaging support to our applications.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>By default, Embark will check our preferred communication configuration in the file <code>config/communication.js</code>. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment (for more information about environments, check out <a href=\"/docs/environments.html\">this guide</a>. Each of these options can be individually overridden on a per environment basis.</p>\n<p>Here’s an example configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    provider: &#39;whisper&#39;,</span><br><span class=\"line\">    available_providers: [&#39;whisper&#39;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Available options:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true/false</code></td>\n<td>To enable or completely disable communication support</td>\n</tr>\n<tr>\n<td><code>provider</code></td>\n<td>string: <code>whisper</code></td>\n<td>Desired provider to automatically connect to in the dapp.</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;whisper&quot;]</code></td>\n<td>List of communication platforms to be supported in the dapp. This will affect what’s available with the EmbarkJS library in the dapp so if you don’t need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.</td>\n</tr>\n</tbody></table>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With Embark it’s very easy to connect to messaging channels using Whisper. In this guide we’ll discuss how to set everything up to add messaging support to our applications.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>By default, Embark will check our preferred communication configuration in the file <code>config/communication.js</code>. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment (for more information about environments, check out <a href=\"/docs/environments.html\">this guide</a>. Each of these options can be individually overridden on a per environment basis.</p>\n<p>Here’s an example configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    provider: &#39;whisper&#39;,</span><br><span class=\"line\">    available_providers: [&#39;whisper&#39;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Available options:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true/false</code></td>\n<td>To enable or completely disable communication support</td>\n</tr>\n<tr>\n<td><code>provider</code></td>\n<td>string: <code>whisper</code></td>\n<td>Desired provider to automatically connect to in the dapp.</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;whisper&quot;]</code></td>\n<td>List of communication platforms to be supported in the dapp. This will affect what’s available with the EmbarkJS library in the dapp so if you don’t need Whisper for example, removing it from this will considerably reduce the file size of the generated JS code.</td>\n</tr>\n</tbody></table>\n"},{"title":"Messages in JavaScript","layout":"docs","_content":"\nEmbark's companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we'll take a closer look how this works.\n\nMake sure to read our guide in [using EmbarkJS](/docs/javascript.html) first.\n\n## Setting up EmbarkJS\n\nBy default Embark will initialize EmbarkJS with the provider configured at `config/communication.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Messages.setProvider('whisper')\n```\n\n## Listening to messages\n\nWe can subscribe to channels using the `listenTo()` method by specifying a list of channel topics like this:\n\n```\nEmbarkJS.Messages.listenTo({\n  topic: ['topic1', 'topic2']\n}).subscribe(message {\n  console.log('received: ' + message);\n});\n```\n\n`listenTo()` returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it's important to unsubscribe from it once we're no longer interested in the data. Otherwise we'll introduce memory leaks.\n\n## Sending messages\n\nSending messages can be done using the `sendMessage()` method and it's entirely up to use whether we want to send plain text messages or even objects.\n\n\nHere's how to send a plain text message to the `sometopic` topic:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: 'hello world'\n});\n```\n\nAnd this code snippet shows how to send an object structure:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: { msg: 'hello world' }\n});\n```\n\nNotice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.\n\n{% notification info 'On topic arrays:' %}\nArray of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g `[\"topic1\", [\"topic2\", \"topic3\"]]` => `topic1 AND (topic2 OR topic 3)`.\n{% endnotification %}\n\n","source":"docs/messages_javascript.md","raw":"title: Messages in JavaScript\nlayout: docs\n---\n\nEmbark's companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we'll take a closer look how this works.\n\nMake sure to read our guide in [using EmbarkJS](/docs/javascript.html) first.\n\n## Setting up EmbarkJS\n\nBy default Embark will initialize EmbarkJS with the provider configured at `config/communication.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Messages.setProvider('whisper')\n```\n\n## Listening to messages\n\nWe can subscribe to channels using the `listenTo()` method by specifying a list of channel topics like this:\n\n```\nEmbarkJS.Messages.listenTo({\n  topic: ['topic1', 'topic2']\n}).subscribe(message {\n  console.log('received: ' + message);\n});\n```\n\n`listenTo()` returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it's important to unsubscribe from it once we're no longer interested in the data. Otherwise we'll introduce memory leaks.\n\n## Sending messages\n\nSending messages can be done using the `sendMessage()` method and it's entirely up to use whether we want to send plain text messages or even objects.\n\n\nHere's how to send a plain text message to the `sometopic` topic:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: 'hello world'\n});\n```\n\nAnd this code snippet shows how to send an object structure:\n\n```\nEmbarkJS.Messages.sendMessage({\n  topic: 'sometopic',\n  data: { msg: 'hello world' }\n});\n```\n\nNotice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.\n\n{% notification info 'On topic arrays:' %}\nArray of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g `[\"topic1\", [\"topic2\", \"topic3\"]]` => `topic1 AND (topic2 OR topic 3)`.\n{% endnotification %}\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/messages_javascript.html","comments":1,"_id":"ck5ijm3rp001c7heg49d3513w","content":"<p>Embark’s companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we’ll take a closer look how this works.</p>\n<p>Make sure to read our guide in <a href=\"/docs/javascript.html\">using EmbarkJS</a> first.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.setProvider(&#39;whisper&#39;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Listening-to-messages\"><a href=\"#Listening-to-messages\" class=\"headerlink\" title=\"Listening to messages\"></a>Listening to messages</h2><p>We can subscribe to channels using the <code>listenTo()</code> method by specifying a list of channel topics like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.listenTo(&#123;</span><br><span class=\"line\">  topic: [&#39;topic1&#39;, &#39;topic2&#39;]</span><br><span class=\"line\">&#125;).subscribe(message &#123;</span><br><span class=\"line\">  console.log(&#39;received: &#39; + message);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p><code>listenTo()</code> returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it’s important to unsubscribe from it once we’re no longer interested in the data. Otherwise we’ll introduce memory leaks.</p>\n<h2 id=\"Sending-messages\"><a href=\"#Sending-messages\" class=\"headerlink\" title=\"Sending messages\"></a>Sending messages</h2><p>Sending messages can be done using the <code>sendMessage()</code> method and it’s entirely up to use whether we want to send plain text messages or even objects.</p>\n<p>Here’s how to send a plain text message to the <code>sometopic</code> topic:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#39;hello world&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>And this code snippet shows how to send an object structure:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#123; msg: &#39;hello world&#39; &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On topic arrays:</strong></p>\n  <p><p>Array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code>.</p>\n</p>\n</div> \n\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark’s companion library EmbarkJS comes with some convenient APIs to easily subscribe to and sending messages using messages protocols like Whisper. In this guide we’ll take a closer look how this works.</p>\n<p>Make sure to read our guide in <a href=\"/docs/javascript.html\">using EmbarkJS</a> first.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at runtime, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.setProvider(&#39;whisper&#39;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Listening-to-messages\"><a href=\"#Listening-to-messages\" class=\"headerlink\" title=\"Listening to messages\"></a>Listening to messages</h2><p>We can subscribe to channels using the <code>listenTo()</code> method by specifying a list of channel topics like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.listenTo(&#123;</span><br><span class=\"line\">  topic: [&#39;topic1&#39;, &#39;topic2&#39;]</span><br><span class=\"line\">&#125;).subscribe(message &#123;</span><br><span class=\"line\">  console.log(&#39;received: &#39; + message);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p><code>listenTo()</code> returns an Observable that we can subscribe to. Observables work great if multiple values can be emitted over time, which is exactly the case for messages being emitted with Whisper. In other words, this is a long-living Observable, so it’s important to unsubscribe from it once we’re no longer interested in the data. Otherwise we’ll introduce memory leaks.</p>\n<h2 id=\"Sending-messages\"><a href=\"#Sending-messages\" class=\"headerlink\" title=\"Sending messages\"></a>Sending messages</h2><p>Sending messages can be done using the <code>sendMessage()</code> method and it’s entirely up to use whether we want to send plain text messages or even objects.</p>\n<p>Here’s how to send a plain text message to the <code>sometopic</code> topic:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#39;hello world&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>And this code snippet shows how to send an object structure:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Messages.sendMessage(&#123;</span><br><span class=\"line\">  topic: &#39;sometopic&#39;,</span><br><span class=\"line\">  data: &#123; msg: &#39;hello world&#39; &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that a topic/channel name has to be at least 4 characters long. Whisper will otherwise emit an error on the subscription.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On topic arrays:</strong></p>\n  <p><p>Array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code>.</p>\n</p>\n</div> \n\n\n\n"},{"title":"Migrating from Embark 3.x","layout":"docs","_content":"\nWith the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.\n\nIn this guide we'll discuss the few steps to take a project from Embark 3.2.x to 4.x.\n\n## Upgrading to v4\n\nIn order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:\n\n1. Adding a `generationDir` to the project's `embark.json`\n2. Updating \"magic\" EmbarkJS imports\n3. Installing a blockchain connector\n4. Updating blockchain account configurations\n\nLet's walk through them step by step!\n\n### Adding a `generationDir` to `embark.json`\n\nSince version 4, Embark generates project [specific artifacts](/docs/javascript_usage.html#Embark-Artifacts). We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we'll have to add a [`generationDir`](/docs/configuration.html#generationDir) property to our project's `embark.json` file.\n\n```\n...\n\"generationDir\": \"artifacts\"\n...\n```\n\nThe value of `generationDir` is the name of the folder in which we want Embark to generate artifacts. For new projects, `artifacts` is the default.\n\n### Updating \"magic\" EmbarkJS imports\n\nBefore version 4, EmbarkJS provided a couple of \"magic\" imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.\n\nThe EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we'll have to update our imports to point to the right location.\n\nFor EmbarkJS, replace this import:\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\n```\nwith\n```\nimport EmbarkJS from './artifacts/embarkjs';\n```\n\n{% notification info 'Attention!' %}\nNotice that the import path has to match the path we've specified in `generationDir` earlier.\n{% endnotification %}\n\nFor Smart Contract instances, replace:\n\n```\nimport CONTRACT_NAME from 'Embark/contracts/CONTRACT_NAME';\n```\n\nwith\n\n```\nimport CONTRACT_NAME from './artifacts/contracts/CONTRACT_NAME';\n```\n\n#### Remove web3 imports\n\nPrior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.\n\nRemove the following import from your application:\n\n```\nimport web3 from 'Embark/web3';\n```\n\n### Updating blockchain configurations\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the [Accounts Blockchain configuration guide](/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n\n- **account**: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as described in the docs\n- **simulatorMnemonic**: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config’s mnemonic account type](/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n\n## Updating to v5\n\nSummary:\n- Contract config\n  - Removed the deployment section (now all part of blockchain config)\n  - `contracts` renamed `deploy` to match `beforeDeploy` and `afterDeploy` and for tests\n- Blockchain config\n  - A lot of new defaults, so less that you need to configure [Source](/docs/blockchain_configuration.html#Common-Parameters)\n  - A lot of renamed parameters\n    - isDev: `miningMode: 'dev'`\n    - mineWhenNeeded: `miningMode: 'auto'`\n    - ethereumClientName: `client`\n  - New `endpoint` parameter that let's you connect to an external endpoint or configure more easily which local endpoint to start [Source](/docs/blockchain_configuration.html#Parameter-descriptions)\n  - Now is the only source for accounts [Source](/docs/blockchain_accounts_configuration.html)\n- Tests\n  - Can now configure module configuration\n    - Storage, namesystem (ENS) and communication modules can now be configured \n      - Configure them just like in the configuration files\n      - Tests default to the `test` environment\n      - Modules are turned off by default\n      - Config merges with `test` and `default` so no need to rewrite all the provider configs\n  - `deployement` section removed\n    - You can now configure the accounts and the endpoint in the `blockchain` section\n  - `contracts` renamed `deploy` and put inside the `contracts` section\n","source":"docs/migrating_from_3.x.md","raw":"title: Migrating from Embark 3.x\nlayout: docs\n---\n\nWith the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.\n\nIn this guide we'll discuss the few steps to take a project from Embark 3.2.x to 4.x.\n\n## Upgrading to v4\n\nIn order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:\n\n1. Adding a `generationDir` to the project's `embark.json`\n2. Updating \"magic\" EmbarkJS imports\n3. Installing a blockchain connector\n4. Updating blockchain account configurations\n\nLet's walk through them step by step!\n\n### Adding a `generationDir` to `embark.json`\n\nSince version 4, Embark generates project [specific artifacts](/docs/javascript_usage.html#Embark-Artifacts). We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we'll have to add a [`generationDir`](/docs/configuration.html#generationDir) property to our project's `embark.json` file.\n\n```\n...\n\"generationDir\": \"artifacts\"\n...\n```\n\nThe value of `generationDir` is the name of the folder in which we want Embark to generate artifacts. For new projects, `artifacts` is the default.\n\n### Updating \"magic\" EmbarkJS imports\n\nBefore version 4, EmbarkJS provided a couple of \"magic\" imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.\n\nThe EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we'll have to update our imports to point to the right location.\n\nFor EmbarkJS, replace this import:\n\n```\nimport EmbarkJS from 'Embark/EmbarkJS';\n```\nwith\n```\nimport EmbarkJS from './artifacts/embarkjs';\n```\n\n{% notification info 'Attention!' %}\nNotice that the import path has to match the path we've specified in `generationDir` earlier.\n{% endnotification %}\n\nFor Smart Contract instances, replace:\n\n```\nimport CONTRACT_NAME from 'Embark/contracts/CONTRACT_NAME';\n```\n\nwith\n\n```\nimport CONTRACT_NAME from './artifacts/contracts/CONTRACT_NAME';\n```\n\n#### Remove web3 imports\n\nPrior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.\n\nRemove the following import from your application:\n\n```\nimport web3 from 'Embark/web3';\n```\n\n### Updating blockchain configurations\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the [Accounts Blockchain configuration guide](/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n\n- **account**: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as described in the docs\n- **simulatorMnemonic**: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config’s mnemonic account type](/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n\n## Updating to v5\n\nSummary:\n- Contract config\n  - Removed the deployment section (now all part of blockchain config)\n  - `contracts` renamed `deploy` to match `beforeDeploy` and `afterDeploy` and for tests\n- Blockchain config\n  - A lot of new defaults, so less that you need to configure [Source](/docs/blockchain_configuration.html#Common-Parameters)\n  - A lot of renamed parameters\n    - isDev: `miningMode: 'dev'`\n    - mineWhenNeeded: `miningMode: 'auto'`\n    - ethereumClientName: `client`\n  - New `endpoint` parameter that let's you connect to an external endpoint or configure more easily which local endpoint to start [Source](/docs/blockchain_configuration.html#Parameter-descriptions)\n  - Now is the only source for accounts [Source](/docs/blockchain_accounts_configuration.html)\n- Tests\n  - Can now configure module configuration\n    - Storage, namesystem (ENS) and communication modules can now be configured \n      - Configure them just like in the configuration files\n      - Tests default to the `test` environment\n      - Modules are turned off by default\n      - Config merges with `test` and `default` so no need to rewrite all the provider configs\n  - `deployement` section removed\n    - You can now configure the accounts and the endpoint in the `blockchain` section\n  - `contracts` renamed `deploy` and put inside the `contracts` section\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/migrating_from_3.x.html","comments":1,"_id":"ck5ijm3rp001d7hegbn1k2bi5","content":"<p>With the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.</p>\n<p>In this guide we’ll discuss the few steps to take a project from Embark 3.2.x to 4.x.</p>\n<h2 id=\"Upgrading-to-v4\"><a href=\"#Upgrading-to-v4\" class=\"headerlink\" title=\"Upgrading to v4\"></a>Upgrading to v4</h2><p>In order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:</p>\n<ol>\n<li>Adding a <code>generationDir</code> to the project’s <code>embark.json</code></li>\n<li>Updating “magic” EmbarkJS imports</li>\n<li>Installing a blockchain connector</li>\n<li>Updating blockchain account configurations</li>\n</ol>\n<p>Let’s walk through them step by step!</p>\n<h3 id=\"Adding-a-generationDir-to-embark-json\"><a href=\"#Adding-a-generationDir-to-embark-json\" class=\"headerlink\" title=\"Adding a generationDir to embark.json\"></a>Adding a <code>generationDir</code> to <code>embark.json</code></h3><p>Since version 4, Embark generates project <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">specific artifacts</a>. We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we’ll have to add a <a href=\"/docs/configuration.html#generationDir\"><code>generationDir</code></a> property to our project’s <code>embark.json</code> file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;generationDir&quot;: &quot;artifacts&quot;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The value of <code>generationDir</code> is the name of the folder in which we want Embark to generate artifacts. For new projects, <code>artifacts</code> is the default.</p>\n<h3 id=\"Updating-“magic”-EmbarkJS-imports\"><a href=\"#Updating-“magic”-EmbarkJS-imports\" class=\"headerlink\" title=\"Updating “magic” EmbarkJS imports\"></a>Updating “magic” EmbarkJS imports</h3><p>Before version 4, EmbarkJS provided a couple of “magic” imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.</p>\n<p>The EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we’ll have to update our imports to point to the right location.</p>\n<p>For EmbarkJS, replace this import:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;artifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Attention!</strong></p>\n  <p><p>Notice that the import path has to match the path we’ve specified in <code>generationDir</code> earlier.</p>\n</p>\n</div> \n\n\n\n<p>For Smart Contract instances, replace:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;Embark&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Remove-web3-imports\"><a href=\"#Remove-web3-imports\" class=\"headerlink\" title=\"Remove web3 imports\"></a>Remove web3 imports</h4><p>Prior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.</p>\n<p>Remove the following import from your application:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import web3 from &#39;Embark&#x2F;web3&#39;;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Updating-blockchain-configurations\"><a href=\"#Updating-blockchain-configurations\" class=\"headerlink\" title=\"Updating blockchain configurations\"></a>Updating blockchain configurations</h3><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><strong>account</strong>: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as described in the docs</li>\n<li><strong>simulatorMnemonic</strong>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s mnemonic account type</a>.</li>\n</ul>\n<h2 id=\"Updating-to-v5\"><a href=\"#Updating-to-v5\" class=\"headerlink\" title=\"Updating to v5\"></a>Updating to v5</h2><p>Summary:</p>\n<ul>\n<li>Contract config<ul>\n<li>Removed the deployment section (now all part of blockchain config)</li>\n<li><code>contracts</code> renamed <code>deploy</code> to match <code>beforeDeploy</code> and <code>afterDeploy</code> and for tests</li>\n</ul>\n</li>\n<li>Blockchain config<ul>\n<li>A lot of new defaults, so less that you need to configure <a href=\"/docs/blockchain_configuration.html#Common-Parameters\">Source</a></li>\n<li>A lot of renamed parameters<ul>\n<li>isDev: <code>miningMode: &#39;dev&#39;</code></li>\n<li>mineWhenNeeded: <code>miningMode: &#39;auto&#39;</code></li>\n<li>ethereumClientName: <code>client</code></li>\n</ul>\n</li>\n<li>New <code>endpoint</code> parameter that let’s you connect to an external endpoint or configure more easily which local endpoint to start <a href=\"/docs/blockchain_configuration.html#Parameter-descriptions\">Source</a></li>\n<li>Now is the only source for accounts <a href=\"/docs/blockchain_accounts_configuration.html\">Source</a></li>\n</ul>\n</li>\n<li>Tests<ul>\n<li>Can now configure module configuration<ul>\n<li>Storage, namesystem (ENS) and communication modules can now be configured <ul>\n<li>Configure them just like in the configuration files</li>\n<li>Tests default to the <code>test</code> environment</li>\n<li>Modules are turned off by default</li>\n<li>Config merges with <code>test</code> and <code>default</code> so no need to rewrite all the provider configs</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code>deployement</code> section removed<ul>\n<li>You can now configure the accounts and the endpoint in the <code>blockchain</code> section</li>\n</ul>\n</li>\n<li><code>contracts</code> renamed <code>deploy</code> and put inside the <code>contracts</code> section</li>\n</ul>\n</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With the release of version 4, Embark has introduced a few breaking changes that require developers to take action, if they plan to upgrade.</p>\n<p>In this guide we’ll discuss the few steps to take a project from Embark 3.2.x to 4.x.</p>\n<h2 id=\"Upgrading-to-v4\"><a href=\"#Upgrading-to-v4\" class=\"headerlink\" title=\"Upgrading to v4\"></a>Upgrading to v4</h2><p>In order to take an existing Embark 3.2.x project to version 4.x, the following steps are required:</p>\n<ol>\n<li>Adding a <code>generationDir</code> to the project’s <code>embark.json</code></li>\n<li>Updating “magic” EmbarkJS imports</li>\n<li>Installing a blockchain connector</li>\n<li>Updating blockchain account configurations</li>\n</ol>\n<p>Let’s walk through them step by step!</p>\n<h3 id=\"Adding-a-generationDir-to-embark-json\"><a href=\"#Adding-a-generationDir-to-embark-json\" class=\"headerlink\" title=\"Adding a generationDir to embark.json\"></a>Adding a <code>generationDir</code> to <code>embark.json</code></h3><p>Since version 4, Embark generates project <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">specific artifacts</a>. We need to tell Embark where to generate those artifacts. For new projects, this is not a problem as Embark will create the necessary configuration. However, for existing projects, we’ll have to add a <a href=\"/docs/configuration.html#generationDir\"><code>generationDir</code></a> property to our project’s <code>embark.json</code> file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;generationDir&quot;: &quot;artifacts&quot;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The value of <code>generationDir</code> is the name of the folder in which we want Embark to generate artifacts. For new projects, <code>artifacts</code> is the default.</p>\n<h3 id=\"Updating-“magic”-EmbarkJS-imports\"><a href=\"#Updating-“magic”-EmbarkJS-imports\" class=\"headerlink\" title=\"Updating “magic” EmbarkJS imports\"></a>Updating “magic” EmbarkJS imports</h3><p>Before version 4, EmbarkJS provided a couple of “magic” imports for applications that made it very convenient to get access to EmbarkJS itself, as well as Smart Contract instances.</p>\n<p>The EmbarkJS library as well as Smart Contract instances will now be generated artifacts, meaning we’ll have to update our imports to point to the right location.</p>\n<p>For EmbarkJS, replace this import:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;Embark&#x2F;EmbarkJS&#39;;</span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import EmbarkJS from &#39;.&#x2F;artifacts&#x2F;embarkjs&#39;;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Attention!</strong></p>\n  <p><p>Notice that the import path has to match the path we’ve specified in <code>generationDir</code> earlier.</p>\n</p>\n</div> \n\n\n\n<p>For Smart Contract instances, replace:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;Embark&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<p>with</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import CONTRACT_NAME from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;CONTRACT_NAME&#39;;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Remove-web3-imports\"><a href=\"#Remove-web3-imports\" class=\"headerlink\" title=\"Remove web3 imports\"></a>Remove web3 imports</h4><p>Prior to version 4, EmbarkJS exported a Web3 instance as well. This is no longer the case as it caused a lot of compatibility issues with different Web3 versions. Please rely on the globally available Web3 instance instead.</p>\n<p>Remove the following import from your application:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import web3 from &#39;Embark&#x2F;web3&#39;;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Updating-blockchain-configurations\"><a href=\"#Updating-blockchain-configurations\" class=\"headerlink\" title=\"Updating blockchain configurations\"></a>Updating blockchain configurations</h3><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the Smart Contract configuration. For more information, please read the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><strong>account</strong>: This is completely replaced by the new accounts property (notice the s at the end of accounts). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as described in the docs</li>\n<li><strong>simulatorMnemonic</strong>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s mnemonic account type</a>.</li>\n</ul>\n<h2 id=\"Updating-to-v5\"><a href=\"#Updating-to-v5\" class=\"headerlink\" title=\"Updating to v5\"></a>Updating to v5</h2><p>Summary:</p>\n<ul>\n<li>Contract config<ul>\n<li>Removed the deployment section (now all part of blockchain config)</li>\n<li><code>contracts</code> renamed <code>deploy</code> to match <code>beforeDeploy</code> and <code>afterDeploy</code> and for tests</li>\n</ul>\n</li>\n<li>Blockchain config<ul>\n<li>A lot of new defaults, so less that you need to configure <a href=\"/docs/blockchain_configuration.html#Common-Parameters\">Source</a></li>\n<li>A lot of renamed parameters<ul>\n<li>isDev: <code>miningMode: &#39;dev&#39;</code></li>\n<li>mineWhenNeeded: <code>miningMode: &#39;auto&#39;</code></li>\n<li>ethereumClientName: <code>client</code></li>\n</ul>\n</li>\n<li>New <code>endpoint</code> parameter that let’s you connect to an external endpoint or configure more easily which local endpoint to start <a href=\"/docs/blockchain_configuration.html#Parameter-descriptions\">Source</a></li>\n<li>Now is the only source for accounts <a href=\"/docs/blockchain_accounts_configuration.html\">Source</a></li>\n</ul>\n</li>\n<li>Tests<ul>\n<li>Can now configure module configuration<ul>\n<li>Storage, namesystem (ENS) and communication modules can now be configured <ul>\n<li>Configure them just like in the configuration files</li>\n<li>Tests default to the <code>test</code> environment</li>\n<li>Modules are turned off by default</li>\n<li>Config merges with <code>test</code> and <code>default</code> so no need to rewrite all the provider configs</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code>deployement</code> section removed<ul>\n<li>You can now configure the accounts and the endpoint in the <code>blockchain</code> section</li>\n</ul>\n</li>\n<li><code>contracts</code> renamed <code>deploy</code> and put inside the <code>contracts</code> section</li>\n</ul>\n</li>\n</ul>\n"},{"title":"Naming System Configuration","layout":"docs","_content":"\nWe can configure different naming systems in Embark. In this guide we'll explore how this is done using the Ethereum Name Service.\n\n## Configuration basics\n\nEmbark checks our configuration in `config/namesystem.js` by default. A naming system configuration isn't crucial to run Embark, so this only needs to be enabled when planing to use a naming system.\n\nWhen using ENS as our provider, we can set the `register` section to pre-register sub-domains. This feature is  only available in the development environment:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    available_providers: ['ens', 'ipns'],\n    provider: 'ens',\n    register: {\n      rootDomain: 'embark.eth',\n      subdomains: {\n        // List of subdomains.\n        // The key is the name (eg: status -> status.embark.eth)\n        // The value is the address to where the subdomain points\n        'status': '0x1a2f3b98e434c02363f3dac3174af93c1d690914'\n      }\n    }\n  }\n};\n```\n","source":"docs/naming_configuration.md","raw":"title: Naming System Configuration\nlayout: docs\n---\n\nWe can configure different naming systems in Embark. In this guide we'll explore how this is done using the Ethereum Name Service.\n\n## Configuration basics\n\nEmbark checks our configuration in `config/namesystem.js` by default. A naming system configuration isn't crucial to run Embark, so this only needs to be enabled when planing to use a naming system.\n\nWhen using ENS as our provider, we can set the `register` section to pre-register sub-domains. This feature is  only available in the development environment:\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    available_providers: ['ens', 'ipns'],\n    provider: 'ens',\n    register: {\n      rootDomain: 'embark.eth',\n      subdomains: {\n        // List of subdomains.\n        // The key is the name (eg: status -> status.embark.eth)\n        // The value is the address to where the subdomain points\n        'status': '0x1a2f3b98e434c02363f3dac3174af93c1d690914'\n      }\n    }\n  }\n};\n```\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/naming_configuration.html","comments":1,"_id":"ck5ijm3rq001e7hegcf0yf8ex","content":"<p>We can configure different naming systems in Embark. In this guide we’ll explore how this is done using the Ethereum Name Service.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark checks our configuration in <code>config/namesystem.js</code> by default. A naming system configuration isn’t crucial to run Embark, so this only needs to be enabled when planing to use a naming system.</p>\n<p>When using ENS as our provider, we can set the <code>register</code> section to pre-register sub-domains. This feature is  only available in the development environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    available_providers: [&#39;ens&#39;, &#39;ipns&#39;],</span><br><span class=\"line\">    provider: &#39;ens&#39;,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &#39;embark.eth&#39;,</span><br><span class=\"line\">      subdomains: &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; List of subdomains.</span><br><span class=\"line\">        &#x2F;&#x2F; The key is the name (eg: status -&gt; status.embark.eth)</span><br><span class=\"line\">        &#x2F;&#x2F; The value is the address to where the subdomain points</span><br><span class=\"line\">        &#39;status&#39;: &#39;0x1a2f3b98e434c02363f3dac3174af93c1d690914&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>We can configure different naming systems in Embark. In this guide we’ll explore how this is done using the Ethereum Name Service.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark checks our configuration in <code>config/namesystem.js</code> by default. A naming system configuration isn’t crucial to run Embark, so this only needs to be enabled when planing to use a naming system.</p>\n<p>When using ENS as our provider, we can set the <code>register</code> section to pre-register sub-domains. This feature is  only available in the development environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    available_providers: [&#39;ens&#39;, &#39;ipns&#39;],</span><br><span class=\"line\">    provider: &#39;ens&#39;,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &#39;embark.eth&#39;,</span><br><span class=\"line\">      subdomains: &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; List of subdomains.</span><br><span class=\"line\">        &#x2F;&#x2F; The key is the name (eg: status -&gt; status.embark.eth)</span><br><span class=\"line\">        &#x2F;&#x2F; The value is the address to where the subdomain points</span><br><span class=\"line\">        &#39;status&#39;: &#39;0x1a2f3b98e434c02363f3dac3174af93c1d690914&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n"},{"title":"Naming System (ENS) in JavaScript","layout":"docs","_content":"\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n## Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve()`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n```\nEmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  console.log('ENS address', result)\n});\n```\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve()` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n```\nEmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n```\n\n## Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\nGuess what, `EmbarkJS.Names.lookup()` also returns a Promise in case you prefer using those over callbacks:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\n## Registering a subdomain\n\nThis enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.\n\n```\nEmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n```\n","source":"docs/naming_javascript.md","raw":"title: Naming System (ENS) in JavaScript\nlayout: docs\n---\n\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n## Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve()`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n```\nEmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  console.log('ENS address', result)\n});\n```\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve()` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n```\nEmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n```\n\n## Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\nGuess what, `EmbarkJS.Names.lookup()` also returns a Promise in case you prefer using those over callbacks:\n\n```\nEmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n```\n\n## Registering a subdomain\n\nThis enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.\n\n```\nEmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n```\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/naming_javascript.html","comments":1,"_id":"ck5ijm3rr001f7hegcvbhgqxy","content":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h2 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h2><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve()</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&#39;ethereum.eth&#39;, (err, result) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;ENS address&#39;, result)</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve()</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&quot;ethereum.eth&quot;).then(address &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the address for ethereum.eth is: &quot; + address);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h2><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;, (err, name) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup()</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-a-subdomain\"><a href=\"#Registering-a-subdomain\" class=\"headerlink\" title=\"Registering a subdomain\"></a>Registering a subdomain</h2><p>This enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.registerSubDomain(&#39;newsubdomain&#39;, &#39;0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de&#39;, (err, transaction) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#96;Successfully registered with $&#123;transaction.gasUsed&#125; gas&#96;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h2 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h2><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve()</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&#39;ethereum.eth&#39;, (err, result) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;ENS address&#39;, result)</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve()</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.resolve(&quot;ethereum.eth&quot;).then(address &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the address for ethereum.eth is: &quot; + address);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h2><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;, (err, name) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup()</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.lookup(&quot;0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359&quot;).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&quot;the domain is: &quot; + name);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-a-subdomain\"><a href=\"#Registering-a-subdomain\" class=\"headerlink\" title=\"Registering a subdomain\"></a>Registering a subdomain</h2><p>This enables you to register some others sub-domains. This is mostly for demo purposes as it is only available in development.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Names.registerSubDomain(&#39;newsubdomain&#39;, &#39;0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de&#39;, (err, transaction) &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#96;Successfully registered with $&#123;transaction.gasUsed&#125; gas&#96;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n"},{"title":"Getting Started","layout":"docs","_content":"Welcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the [troubleshooting guide](troubleshooting.html), raise an issue on [GitHub](https://github.com/embarklabs/embark/issues) or ask in the [Gitter Chatroom](https://gitter.im/embark-framework/Lobby) respectively.\n\n{% notification info 'Migrating from 3.2.x' %}\nIf you're planning to upgrade your Embark 3.2.x application to 4.x, head over to our [Migration Guide](/docs/migrating_from_3.x.html).\n{% endnotification %}\n## What is Embark?\n\nEmbark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as \"DApps\". It integrates with [Ethereum](https://ethereum.org/) blockchains, decentralized storages like [IPFS](https://ipfs.io) and [Swarm](https://swarm-guide.readthedocs.io/en/latest/introduction.html), and decentralized communication platforms like [Whisper](https://github.com/ethereum/wiki/wiki/Whisper).\n\nEmbark's goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.\n\nSome of Embark's features, but not all of them, are:\n\n* **Automatic Smart Contract deployment** - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. [Learn more](/docs/contracts_configuration.html)\n* **Client development** - Build your application with the framework of your choice right within Embark.\n* **Testing** - Test your applications and Smart Contracts through Web3 in JavaScript. [Learn More](/docs/contracts_testing.html)\n* **Decentralized app distribution** - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. [Learn more](/docs/storage_configuration.html)\n* **Peer-to-peer messaging** - Send and receive messages via communication protocols like Whisper. [Learn more](/docs/messages_configuration.html)\n* **Cockpit** - An companion application to make developing and debugging decentralized applications a breeze. [Learn more](/docs/cockpit_introduction.html)\n\nThere's so much more, but let's take it one step at a time. Make sure to check out our other guides in case you're looking for a particular feature.\n\nIf you haven't yet, this is a good time to [install Embark](installation.html) on your machine. Read on for more information!\n\n\n","source":"docs/overview.md","raw":"title: Getting Started\nlayout: docs\n---\nWelcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the [troubleshooting guide](troubleshooting.html), raise an issue on [GitHub](https://github.com/embarklabs/embark/issues) or ask in the [Gitter Chatroom](https://gitter.im/embark-framework/Lobby) respectively.\n\n{% notification info 'Migrating from 3.2.x' %}\nIf you're planning to upgrade your Embark 3.2.x application to 4.x, head over to our [Migration Guide](/docs/migrating_from_3.x.html).\n{% endnotification %}\n## What is Embark?\n\nEmbark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as \"DApps\". It integrates with [Ethereum](https://ethereum.org/) blockchains, decentralized storages like [IPFS](https://ipfs.io) and [Swarm](https://swarm-guide.readthedocs.io/en/latest/introduction.html), and decentralized communication platforms like [Whisper](https://github.com/ethereum/wiki/wiki/Whisper).\n\nEmbark's goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.\n\nSome of Embark's features, but not all of them, are:\n\n* **Automatic Smart Contract deployment** - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. [Learn more](/docs/contracts_configuration.html)\n* **Client development** - Build your application with the framework of your choice right within Embark.\n* **Testing** - Test your applications and Smart Contracts through Web3 in JavaScript. [Learn More](/docs/contracts_testing.html)\n* **Decentralized app distribution** - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. [Learn more](/docs/storage_configuration.html)\n* **Peer-to-peer messaging** - Send and receive messages via communication protocols like Whisper. [Learn more](/docs/messages_configuration.html)\n* **Cockpit** - An companion application to make developing and debugging decentralized applications a breeze. [Learn more](/docs/cockpit_introduction.html)\n\nThere's so much more, but let's take it one step at a time. Make sure to check out our other guides in case you're looking for a particular feature.\n\nIf you haven't yet, this is a good time to [install Embark](installation.html) on your machine. Read on for more information!\n\n\n","date":"2020-01-19T20:56:53.012Z","updated":"2020-01-19T20:56:53.012Z","path":"docs/overview.html","_id":"ck5ijm3rs001g7hegemr1hvpm","comments":1,"content":"<p>Welcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the <a href=\"troubleshooting.html\">troubleshooting guide</a>, raise an issue on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a> or ask in the <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter Chatroom</a> respectively.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Migrating from 3.2.x</strong></p>\n  <p><p>If you’re planning to upgrade your Embark 3.2.x application to 4.x, head over to our <a href=\"/docs/migrating_from_3.x.html\">Migration Guide</a>.</p>\n</p>\n</div> \n\n\n<h2 id=\"What-is-Embark\"><a href=\"#What-is-Embark\" class=\"headerlink\" title=\"What is Embark?\"></a>What is Embark?</h2><p>Embark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as “DApps”. It integrates with <a href=\"https://ethereum.org/\" target=\"_blank\" rel=\"noopener\">Ethereum</a> blockchains, decentralized storages like <a href=\"https://ipfs.io\" target=\"_blank\" rel=\"noopener\">IPFS</a> and <a href=\"https://swarm-guide.readthedocs.io/en/latest/introduction.html\" target=\"_blank\" rel=\"noopener\">Swarm</a>, and decentralized communication platforms like <a href=\"https://github.com/ethereum/wiki/wiki/Whisper\" target=\"_blank\" rel=\"noopener\">Whisper</a>.</p>\n<p>Embark’s goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.</p>\n<p>Some of Embark’s features, but not all of them, are:</p>\n<ul>\n<li><strong>Automatic Smart Contract deployment</strong> - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. <a href=\"/docs/contracts_configuration.html\">Learn more</a></li>\n<li><strong>Client development</strong> - Build your application with the framework of your choice right within Embark.</li>\n<li><strong>Testing</strong> - Test your applications and Smart Contracts through Web3 in JavaScript. <a href=\"/docs/contracts_testing.html\">Learn More</a></li>\n<li><strong>Decentralized app distribution</strong> - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. <a href=\"/docs/storage_configuration.html\">Learn more</a></li>\n<li><strong>Peer-to-peer messaging</strong> - Send and receive messages via communication protocols like Whisper. <a href=\"/docs/messages_configuration.html\">Learn more</a></li>\n<li><strong>Cockpit</strong> - An companion application to make developing and debugging decentralized applications a breeze. <a href=\"/docs/cockpit_introduction.html\">Learn more</a></li>\n</ul>\n<p>There’s so much more, but let’s take it one step at a time. Make sure to check out our other guides in case you’re looking for a particular feature.</p>\n<p>If you haven’t yet, this is a good time to <a href=\"installation.html\">install Embark</a> on your machine. Read on for more information!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Welcome to the Embark documentation! The following guides will help you guiding your way through your journey of building decentralized applications. If you encounter any problems when using Embark, or find anything unclear described here, please have a look at the <a href=\"troubleshooting.html\">troubleshooting guide</a>, raise an issue on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a> or ask in the <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter Chatroom</a> respectively.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Migrating from 3.2.x</strong></p>\n  <p><p>If you’re planning to upgrade your Embark 3.2.x application to 4.x, head over to our <a href=\"/docs/migrating_from_3.x.html\">Migration Guide</a>.</p>\n</p>\n</div> \n\n\n<h2 id=\"What-is-Embark\"><a href=\"#What-is-Embark\" class=\"headerlink\" title=\"What is Embark?\"></a>What is Embark?</h2><p>Embark is a fast, easy to use, and powerful developer environment to build and deploy decentralized applications, also known as “DApps”. It integrates with <a href=\"https://ethereum.org/\" target=\"_blank\" rel=\"noopener\">Ethereum</a> blockchains, decentralized storages like <a href=\"https://ipfs.io\" target=\"_blank\" rel=\"noopener\">IPFS</a> and <a href=\"https://swarm-guide.readthedocs.io/en/latest/introduction.html\" target=\"_blank\" rel=\"noopener\">Swarm</a>, and decentralized communication platforms like <a href=\"https://github.com/ethereum/wiki/wiki/Whisper\" target=\"_blank\" rel=\"noopener\">Whisper</a>.</p>\n<p>Embark’s goal is to make building decentralized applications as easy as possible, by providing all the tools needed and staying extensible at the same time.</p>\n<p>Some of Embark’s features, but not all of them, are:</p>\n<ul>\n<li><strong>Automatic Smart Contract deployment</strong> - Embark takes care of deploying your Smart Contracts as well as redeploying them as you make changes to your code. <a href=\"/docs/contracts_configuration.html\">Learn more</a></li>\n<li><strong>Client development</strong> - Build your application with the framework of your choice right within Embark.</li>\n<li><strong>Testing</strong> - Test your applications and Smart Contracts through Web3 in JavaScript. <a href=\"/docs/contracts_testing.html\">Learn More</a></li>\n<li><strong>Decentralized app distribution</strong> - Embark integrates with decentralized storages like IPFS and helps you distributing your app in the network. <a href=\"/docs/storage_configuration.html\">Learn more</a></li>\n<li><strong>Peer-to-peer messaging</strong> - Send and receive messages via communication protocols like Whisper. <a href=\"/docs/messages_configuration.html\">Learn more</a></li>\n<li><strong>Cockpit</strong> - An companion application to make developing and debugging decentralized applications a breeze. <a href=\"/docs/cockpit_introduction.html\">Learn more</a></li>\n</ul>\n<p>There’s so much more, but let’s take it one step at a time. Make sure to check out our other guides in case you’re looking for a particular feature.</p>\n<p>If you haven’t yet, this is a good time to <a href=\"installation.html\">install Embark</a> on your machine. Read on for more information!</p>\n"},{"title":"Building & Asset Pipeline","layout":"docs","_content":"\nAs discussed in [Running Apps](running_apps.html#Using-the-run-command), Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we'll learn how to take full advantage of Embark's flexibility to build our Smart Contracts or even replace the entire build pipeline for our application's assets.\n\n## Building your app\n\nEmbark's `build` command enables us to build our decentralized application and deploy it accordingly. Similar to `embark run`, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app's assets and uploads them to the configured decentralized storage (e.g. IPFS).\n\nBy default, `embark build` will use the `production` mode to build our application.\n\n```\n$ embark build\n```\n### Specifying a mode using `--pipeline`\n\n\nEmbark comes with two modes for building our application:\n\n* **development** - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use `embark run` or `embark console`, this mode is used by default. Since this mode skips code optimizations, it's also the faster mode.\n* **production** - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for `embark build` and `embark upload` commands.\n\nWe can specify a mode using the `--pipeline` option. This is available for both, `embark run` and `embark build` commands:\n\n```\n$ embark build --pipeline development\n```\n\n## Compiling Smart Contracts only\n\nIf we're building a [Smart Contract only application](http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or we're simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the `build` command's `--contracts` option:\n\n```\n$ embark build --contracts\n```\n\n## Understanding the build pipeline\n\nEmbark uses [webpack](https://webpack.js.org/) to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:\n\n* ES2015+ syntax using Babel\n* Importing of CSS, SCSS, PNG, SVG & Fonts in JavaScript\n* Support for React & JSX\n* Automatic support for older browsers via Babel's preset-env (by default, Embark uses a browser list setting of `['last 1 version', 'not dead', '> 0.2%']`\n* Sourcemaps generation (when in development mode)\n* Minification and tree shaking (when in production mode)\n\n{% notification danger 'Deprecation warning:' %}\nSince Embark version 4.0.0 it's possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark's own build pipeline obsolete.\n\nWhen using Embark with any other existing front-end tooling, please turn off Embark's internal build pipeline by setting the following configuration option in `config/pipeline.js`:\n\n<pre class=\"highlight\">\nenabled: false\n</pre>\n{% endnotification %}\n\n\n\n### Customizing the build process\n\nSometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark's built-in build pipeline isn't enough, it enables us to \"eject\" the internally used `webpack.config.js` file, so we can change it to our needs and fully bypass Embark's internal build process.\n\nEjecting the internally used config file is as simple as using Embark's `eject-build-config` command like this:\n\n```\n$ embark eject-build-config\n```\n\n{% notification info 'On --eject-webpack option' %}\nIn older versions of Embark, the same could be achieved using the `--eject-webpack` option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.\n{% endnotification %}\n\n{% notification danger 'Deprecation warning:' %}\nAs mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application's front-end code. This command will be deprecated in future versions of Embark.\n{% endnotification %}\n\n","source":"docs/pipeline_and_webpack.md","raw":"title: Building & Asset Pipeline\nlayout: docs\n---\n\nAs discussed in [Running Apps](running_apps.html#Using-the-run-command), Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we'll learn how to take full advantage of Embark's flexibility to build our Smart Contracts or even replace the entire build pipeline for our application's assets.\n\n## Building your app\n\nEmbark's `build` command enables us to build our decentralized application and deploy it accordingly. Similar to `embark run`, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app's assets and uploads them to the configured decentralized storage (e.g. IPFS).\n\nBy default, `embark build` will use the `production` mode to build our application.\n\n```\n$ embark build\n```\n### Specifying a mode using `--pipeline`\n\n\nEmbark comes with two modes for building our application:\n\n* **development** - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use `embark run` or `embark console`, this mode is used by default. Since this mode skips code optimizations, it's also the faster mode.\n* **production** - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for `embark build` and `embark upload` commands.\n\nWe can specify a mode using the `--pipeline` option. This is available for both, `embark run` and `embark build` commands:\n\n```\n$ embark build --pipeline development\n```\n\n## Compiling Smart Contracts only\n\nIf we're building a [Smart Contract only application](http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), or we're simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the `build` command's `--contracts` option:\n\n```\n$ embark build --contracts\n```\n\n## Understanding the build pipeline\n\nEmbark uses [webpack](https://webpack.js.org/) to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:\n\n* ES2015+ syntax using Babel\n* Importing of CSS, SCSS, PNG, SVG & Fonts in JavaScript\n* Support for React & JSX\n* Automatic support for older browsers via Babel's preset-env (by default, Embark uses a browser list setting of `['last 1 version', 'not dead', '> 0.2%']`\n* Sourcemaps generation (when in development mode)\n* Minification and tree shaking (when in production mode)\n\n{% notification danger 'Deprecation warning:' %}\nSince Embark version 4.0.0 it's possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark's own build pipeline obsolete.\n\nWhen using Embark with any other existing front-end tooling, please turn off Embark's internal build pipeline by setting the following configuration option in `config/pipeline.js`:\n\n<pre class=\"highlight\">\nenabled: false\n</pre>\n{% endnotification %}\n\n\n\n### Customizing the build process\n\nSometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark's built-in build pipeline isn't enough, it enables us to \"eject\" the internally used `webpack.config.js` file, so we can change it to our needs and fully bypass Embark's internal build process.\n\nEjecting the internally used config file is as simple as using Embark's `eject-build-config` command like this:\n\n```\n$ embark eject-build-config\n```\n\n{% notification info 'On --eject-webpack option' %}\nIn older versions of Embark, the same could be achieved using the `--eject-webpack` option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.\n{% endnotification %}\n\n{% notification danger 'Deprecation warning:' %}\nAs mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application's front-end code. This command will be deprecated in future versions of Embark.\n{% endnotification %}\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/pipeline_and_webpack.html","comments":1,"_id":"ck5ijm3rs001h7heg90dngw8a","content":"<p>As discussed in <a href=\"running_apps.html#Using-the-run-command\">Running Apps</a>, Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we’ll learn how to take full advantage of Embark’s flexibility to build our Smart Contracts or even replace the entire build pipeline for our application’s assets.</p>\n<h2 id=\"Building-your-app\"><a href=\"#Building-your-app\" class=\"headerlink\" title=\"Building your app\"></a>Building your app</h2><p>Embark’s <code>build</code> command enables us to build our decentralized application and deploy it accordingly. Similar to <code>embark run</code>, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app’s assets and uploads them to the configured decentralized storage (e.g. IPFS).</p>\n<p>By default, <code>embark build</code> will use the <code>production</code> mode to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build</span><br></pre></td></tr></table></figure>\n<h3 id=\"Specifying-a-mode-using-pipeline\"><a href=\"#Specifying-a-mode-using-pipeline\" class=\"headerlink\" title=\"Specifying a mode using --pipeline\"></a>Specifying a mode using <code>--pipeline</code></h3><p>Embark comes with two modes for building our application:</p>\n<ul>\n<li><strong>development</strong> - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use <code>embark run</code> or <code>embark console</code>, this mode is used by default. Since this mode skips code optimizations, it’s also the faster mode.</li>\n<li><strong>production</strong> - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for <code>embark build</code> and <code>embark upload</code> commands.</li>\n</ul>\n<p>We can specify a mode using the <code>--pipeline</code> option. This is available for both, <code>embark run</code> and <code>embark build</code> commands:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --pipeline development</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Compiling-Smart-Contracts-only\"><a href=\"#Compiling-Smart-Contracts-only\" class=\"headerlink\" title=\"Compiling Smart Contracts only\"></a>Compiling Smart Contracts only</h2><p>If we’re building a <a href=\"http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\" target=\"_blank\" rel=\"noopener\">Smart Contract only application</a>, or we’re simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the <code>build</code> command’s <code>--contracts</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --contracts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Understanding-the-build-pipeline\"><a href=\"#Understanding-the-build-pipeline\" class=\"headerlink\" title=\"Understanding the build pipeline\"></a>Understanding the build pipeline</h2><p>Embark uses <a href=\"https://webpack.js.org/\" target=\"_blank\" rel=\"noopener\">webpack</a> to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:</p>\n<ul>\n<li>ES2015+ syntax using Babel</li>\n<li>Importing of CSS, SCSS, PNG, SVG &amp; Fonts in JavaScript</li>\n<li>Support for React &amp; JSX</li>\n<li>Automatic support for older browsers via Babel’s preset-env (by default, Embark uses a browser list setting of <code>[&#39;last 1 version&#39;, &#39;not dead&#39;, &#39;&gt; 0.2%&#39;]</code></li>\n<li>Sourcemaps generation (when in development mode)</li>\n<li>Minification and tree shaking (when in production mode)</li>\n</ul>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>Since Embark version 4.0.0 it’s possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark’s own build pipeline obsolete.</p>\n<p>When using Embark with any other existing front-end tooling, please turn off Embark’s internal build pipeline by setting the following configuration option in <code>config/pipeline.js</code>:</p>\n<pre class=\"highlight\">\nenabled: false\n</pre></p>\n</div> \n\n\n\n\n\n<h3 id=\"Customizing-the-build-process\"><a href=\"#Customizing-the-build-process\" class=\"headerlink\" title=\"Customizing the build process\"></a>Customizing the build process</h3><p>Sometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark’s built-in build pipeline isn’t enough, it enables us to “eject” the internally used <code>webpack.config.js</code> file, so we can change it to our needs and fully bypass Embark’s internal build process.</p>\n<p>Ejecting the internally used config file is as simple as using Embark’s <code>eject-build-config</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On --eject-webpack option</strong></p>\n  <p><p>In older versions of Embark, the same could be achieved using the <code>--eject-webpack</code> option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>As mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application’s front-end code. This command will be deprecated in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As discussed in <a href=\"running_apps.html#Using-the-run-command\">Running Apps</a>, Embark takes care of quite a few things developing applications, including compiling Smart Contracts, JavaScript and other assets. In this guide we’ll learn how to take full advantage of Embark’s flexibility to build our Smart Contracts or even replace the entire build pipeline for our application’s assets.</p>\n<h2 id=\"Building-your-app\"><a href=\"#Building-your-app\" class=\"headerlink\" title=\"Building your app\"></a>Building your app</h2><p>Embark’s <code>build</code> command enables us to build our decentralized application and deploy it accordingly. Similar to <code>embark run</code>, it compiles our Smart Contracts, deploys them to a blockchain network that our app is connected to, processes our app’s assets and uploads them to the configured decentralized storage (e.g. IPFS).</p>\n<p>By default, <code>embark build</code> will use the <code>production</code> mode to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build</span><br></pre></td></tr></table></figure>\n<h3 id=\"Specifying-a-mode-using-pipeline\"><a href=\"#Specifying-a-mode-using-pipeline\" class=\"headerlink\" title=\"Specifying a mode using --pipeline\"></a>Specifying a mode using <code>--pipeline</code></h3><p>Embark comes with two modes for building our application:</p>\n<ul>\n<li><strong>development</strong> - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use <code>embark run</code> or <code>embark console</code>, this mode is used by default. Since this mode skips code optimizations, it’s also the faster mode.</li>\n<li><strong>production</strong> - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for <code>embark build</code> and <code>embark upload</code> commands.</li>\n</ul>\n<p>We can specify a mode using the <code>--pipeline</code> option. This is available for both, <code>embark run</code> and <code>embark build</code> commands:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --pipeline development</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Compiling-Smart-Contracts-only\"><a href=\"#Compiling-Smart-Contracts-only\" class=\"headerlink\" title=\"Compiling Smart Contracts only\"></a>Compiling Smart Contracts only</h2><p>If we’re building a <a href=\"http://localhost:4000/docs/create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\" target=\"_blank\" rel=\"noopener\">Smart Contract only application</a>, or we’re simply not interested in building the entire application and deploying it, but just want to compile our Smart Contracts, we can use the <code>build</code> command’s <code>--contracts</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark build --contracts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Understanding-the-build-pipeline\"><a href=\"#Understanding-the-build-pipeline\" class=\"headerlink\" title=\"Understanding the build pipeline\"></a>Understanding the build pipeline</h2><p>Embark uses <a href=\"https://webpack.js.org/\" target=\"_blank\" rel=\"noopener\">webpack</a> to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:</p>\n<ul>\n<li>ES2015+ syntax using Babel</li>\n<li>Importing of CSS, SCSS, PNG, SVG &amp; Fonts in JavaScript</li>\n<li>Support for React &amp; JSX</li>\n<li>Automatic support for older browsers via Babel’s preset-env (by default, Embark uses a browser list setting of <code>[&#39;last 1 version&#39;, &#39;not dead&#39;, &#39;&gt; 0.2%&#39;]</code></li>\n<li>Sourcemaps generation (when in development mode)</li>\n<li>Minification and tree shaking (when in production mode)</li>\n</ul>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>Since Embark version 4.0.0 it’s possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark’s own build pipeline obsolete.</p>\n<p>When using Embark with any other existing front-end tooling, please turn off Embark’s internal build pipeline by setting the following configuration option in <code>config/pipeline.js</code>:</p>\n<pre class=\"highlight\">\nenabled: false\n</pre></p>\n</div> \n\n\n\n\n\n<h3 id=\"Customizing-the-build-process\"><a href=\"#Customizing-the-build-process\" class=\"headerlink\" title=\"Customizing the build process\"></a>Customizing the build process</h3><p>Sometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark’s built-in build pipeline isn’t enough, it enables us to “eject” the internally used <code>webpack.config.js</code> file, so we can change it to our needs and fully bypass Embark’s internal build process.</p>\n<p>Ejecting the internally used config file is as simple as using Embark’s <code>eject-build-config</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark eject-build-config</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>On --eject-webpack option</strong></p>\n  <p><p>In older versions of Embark, the same could be achieved using the <code>--eject-webpack</code> option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>Deprecation warning:</strong></p>\n  <p><p>As mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application’s front-end code. This command will be deprecated in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n"},{"title":"Quick Start","tagline":"Build your first DApp with Embark","_content":"\n# Welcome to the Quick Start!\n\nIn 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.\n\nTogether, we're going to:\n\n{% checklist 'Install Embark' 'Create an app' 'Run and deploy the app' %}\n\nHopefully, after that you'll be motivated to explore the rest of Embark's [documentation](/docs/overview.html). If you run into any problems along your journey, check out [our Gitter channel](https://gitter.im/embark-framework/Lobby) as well. We are there to help.\n\nLet's get started!\n\n## Installing Embark\n\nFirst 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:\n\n```\n$ npm install -g embark\n```\n\nOnce that is done, `embark` should be available as a global command.\n\n{% notification info 'Prerequisites' %}\nIn order to actually start a blockchain client or other processes, there are some\nmore tools that need to be installed. Head over to our [installation guide](/docs/installation.html) to learn more.\n{% endnotification %}\n\n## Creating your first app\n\nIn order to get results as quickly as possible, Embark comes with a `demo` command that scaffolds and sets up a complete application for us to play with. Open up a terminal of your choice and run:\n\n```\n$ embark demo\n$ cd embark_demo\n```\n\nThis 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 [dedicated guides](structure.html).\n\n## Running your app\n\nThe fastest way to get your app running is to use Embark's `run` 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 [run your app](running_apps.html), in case you need more control over different processes, but let's not get ahead of ourselves.\n\n```\n$ embark run\n```\n\nOnce 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 `--nodashboard` option.\n\nNotice that the dashboard comes with sections for **Contracts**, **Environment**, **Status**, **Available Services**, **Logs** and **Console**. While most of them are self explanatory, we'll take a closer look at those in the [dashboard guide](dashboard.html).\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nFor 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 `http://localhost:8000`. In fact, Embark has probably already opened a browser window for you. \n\nIf not, give it a try yourself and open [localhost:8000](http://localhost:8000) in your browser of choice!\n\n## Getting help\n\n**Congratulations!** 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 `help` into the running console to get a list of commands you can run inside the dashboard.\n\nAlso, make sure to check out the other guides and let us know if you miss anything! If you run into any problems, the [guide on troubleshooting](troubleshooting.html) is here to help.\n\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n","source":"docs/quick_start.md","raw":"title: Quick Start\ntagline: 'Build your first DApp with Embark'\n---\n\n# Welcome to the Quick Start!\n\nIn 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.\n\nTogether, we're going to:\n\n{% checklist 'Install Embark' 'Create an app' 'Run and deploy the app' %}\n\nHopefully, after that you'll be motivated to explore the rest of Embark's [documentation](/docs/overview.html). If you run into any problems along your journey, check out [our Gitter channel](https://gitter.im/embark-framework/Lobby) as well. We are there to help.\n\nLet's get started!\n\n## Installing Embark\n\nFirst 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:\n\n```\n$ npm install -g embark\n```\n\nOnce that is done, `embark` should be available as a global command.\n\n{% notification info 'Prerequisites' %}\nIn order to actually start a blockchain client or other processes, there are some\nmore tools that need to be installed. Head over to our [installation guide](/docs/installation.html) to learn more.\n{% endnotification %}\n\n## Creating your first app\n\nIn order to get results as quickly as possible, Embark comes with a `demo` command that scaffolds and sets up a complete application for us to play with. Open up a terminal of your choice and run:\n\n```\n$ embark demo\n$ cd embark_demo\n```\n\nThis 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 [dedicated guides](structure.html).\n\n## Running your app\n\nThe fastest way to get your app running is to use Embark's `run` 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 [run your app](running_apps.html), in case you need more control over different processes, but let's not get ahead of ourselves.\n\n```\n$ embark run\n```\n\nOnce 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 `--nodashboard` option.\n\nNotice that the dashboard comes with sections for **Contracts**, **Environment**, **Status**, **Available Services**, **Logs** and **Console**. While most of them are self explanatory, we'll take a closer look at those in the [dashboard guide](dashboard.html).\n\n![Dashboard](/assets/images/embark-dashboard.png)\n\nFor 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 `http://localhost:8000`. In fact, Embark has probably already opened a browser window for you. \n\nIf not, give it a try yourself and open [localhost:8000](http://localhost:8000) in your browser of choice!\n\n## Getting help\n\n**Congratulations!** 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 `help` into the running console to get a list of commands you can run inside the dashboard.\n\nAlso, make sure to check out the other guides and let us know if you miss anything! If you run into any problems, the [guide on troubleshooting](troubleshooting.html) is here to help.\n\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/quick_start.html","comments":1,"layout":"page","_id":"ck5ijm3rt001i7heg76eaeohv","content":"<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>\n<p>Together, we’re going to:</p>\n<div class=\"o-distance-l\">\n  <ul class=\"c-checklist\">\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Install Embark\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Create an app\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Run and deploy the app\n      </li>\n    \n  </ul>\n</div>\n\n\n\n<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>\n<p>Let’s get started!</p>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, <code>embark</code> should be available as a global command.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Prerequisites</strong></p>\n  <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>\n</p>\n</div> \n\n\n\n<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>\n<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>\n\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<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>\n<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>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<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>\n<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>\n<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>\n<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>\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<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>\n<p>Together, we’re going to:</p>\n<div class=\"o-distance-l\">\n  <ul class=\"c-checklist\">\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Install Embark\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Create an app\n      </li>\n    \n      <li class=\"c-checklist__item\">\n        <span class=\"c-checklist__circle\">\n          <svg class=\"c-icon c-checklist__icon\"><use xlink:href=\"../assets/icons/symbols.svg#icon-check\"></use></svg>\n        </span>\n        Run and deploy the app\n      </li>\n    \n  </ul>\n</div>\n\n\n\n<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>\n<p>Let’s get started!</p>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, <code>embark</code> should be available as a global command.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Prerequisites</strong></p>\n  <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>\n</p>\n</div> \n\n\n\n<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>\n<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>\n\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<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>\n<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>\n<p><img src=\"/assets/images/embark-dashboard.png\" alt=\"Dashboard\"></p>\n<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>\n<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>\n<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>\n<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>\n<div class=\"o-container o-distance-l o-center\">\n  <a href=\"/docs/overview.html\" class=\"c-button\" title=\"Take me to the docs\">Take me to the docs &rarr;</a>\n</div>\n"},{"title":"Running apps","layout":"docs","_content":"\nWhile running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.\n\n## Using the `run` command\n\nIf you've read the [quickstart](quick_start.html) you're already aware that running an application is done by simply executing `embark run` within your project:\n\n```\n$ embark run\n```\n\nBy default, this will make Embark do a couple of things:\n\n- It initializes Embark\n- It starts the dashboard\n- It loads plugins\n- It spins up a blockchain and IPFS client, a web server and other necessary services\n- It compiles and deploys your app\n- It monitors running processes and recompiles and redeploys your app if needed\n- It starts [Cockpit](/docs/cockpit_introduction.html)\n\nMost of the time, using the `run` command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.\n\n## Running an app without the dashboard\n\nWhile the dashboard gives us a great overview of all the processes and services that Embark manages for us, it's not required to start it every single time along with compiling and deploying our app. If we don't need the dashboard, we can prevent Embark from starting it by using the `--nodashboard` option:\n\n```\n$ embark run --nodashboard\n```\n\nWhen running the command with `--nodashboard`, Embark will fallback to only use standard log outputs, which are the same that we get in the **Logs** panel within the dashboard.\n\n## Running an app without opening a browser\n\nIn order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application's client. While this is quite convenient, sometimes we don't need a browser window to work on our app. This is the case when we're for example only interested in developing Smart Contracts, without creating a front-end.\n\nIf we don't want Embark to open a browser for us, all we have to do is using the `--nobrowser` option like this:\n\n\n```\n$ embark run --nobrowser\n```\n\n\n## Running an app without starting a web server\n\nIf we aren't interested in Embark starting a web server in the first place, we can easily turn it off by using the `--noserver` option:\n\n```\n$ embark run --noserver\n```\n\n## Running apps in different modes\n\nEmbark comes with different \"modes\" when building applications. `embark run` uses the `development` mode by default. However, this can be overwritten using the `--pipeline` option. The following command run our application in `production` mode.\n\n```\n$ embark run --pipeline production\n```\n\nFor more information about modes, head over to our guide on [building apps](pipeline_and_webpack.html).\n\n## Switching environments\n\nEmbark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project's `blockchain.js` file. \n\nDepending on how you initialized your application, it may have already multiple environments configured. Here's what a sample test network environment could look like:\n\n```\n// config/blockchain.js\n\nmodules.exports = {\n  ...\n  testnet: {\n    networkType: \"testnet\",\n    syncMode: \"light\",\n    account: {\n      password: \"config/testnet/password\"\n    }\n  },\n  ...\n}\n```\n\nFor more information on configuring your Embark application, head over to the [general configuration guide](configuration.html).\n\nRunning an application in a different environment is just a matter of specifying the environment's name as part of the run command:\n\n```\n$ embark run [environment]\n```\n\nSo in case we want to run our app against the test network environment described above, this could be achieved by running:\n\n```\n$ embark run testnet\n```\n\n## Starting a blockchain separately\n\nSometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have `embark run` connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.\n\nEmbark comes with a `blockchain` command that does exactly that:\n\n```\n$ embark blockchain\n```\n\nWhen this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the `run` command, the `blockchain` command also allows to specify an environment:\n\n```\n$ embark blockchain testnet\n```\n\nBy default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.\n\n## Using the blockchain simulator\n\nAnother feature of Embark is to start a **simulated** blockchain. This can be useful for testing purposes as there's no need to wait for transactions to be mined. You might have heard of [Ganache CLI](https://truffleframework.com/docs/ganache/quickstart), which is a great project that implements such a simulated blockchain.\n\nEmbark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the `simulator` command:\n\n```\n$ embark simulator\n```\n\n## Resetting apps\n\nSometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark's powerful [deployment hooks](/docs/contracts_configuration.html#Deployment-hooks) to initialize one of our Smart Contracts based on the deployment of another Smart Contract.\n\nTo test this, we'll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won't try to redeploy the same Smart Contract again.\n\nOne way to deal with this is to use the [deployment tracking](/docs/contracts_configuration.html#Deployment-tracking) configuration. Another way is to use Embark's `reset` command which will remove some files and data that Embark stores in the project's `.embark` folder.\n\nWe can reset our project by running the following command:\n\n```\n$ embark reset\n```\n\nIt's possible to configure what files Embark is going to remove when doing a reset. Check out [this guide](/docs/configuration.html#Configuring-Embark’s-reset-command) to learn more.\n","source":"docs/running_apps.md","raw":"title: Running apps\nlayout: docs\n---\n\nWhile running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.\n\n## Using the `run` command\n\nIf you've read the [quickstart](quick_start.html) you're already aware that running an application is done by simply executing `embark run` within your project:\n\n```\n$ embark run\n```\n\nBy default, this will make Embark do a couple of things:\n\n- It initializes Embark\n- It starts the dashboard\n- It loads plugins\n- It spins up a blockchain and IPFS client, a web server and other necessary services\n- It compiles and deploys your app\n- It monitors running processes and recompiles and redeploys your app if needed\n- It starts [Cockpit](/docs/cockpit_introduction.html)\n\nMost of the time, using the `run` command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.\n\n## Running an app without the dashboard\n\nWhile the dashboard gives us a great overview of all the processes and services that Embark manages for us, it's not required to start it every single time along with compiling and deploying our app. If we don't need the dashboard, we can prevent Embark from starting it by using the `--nodashboard` option:\n\n```\n$ embark run --nodashboard\n```\n\nWhen running the command with `--nodashboard`, Embark will fallback to only use standard log outputs, which are the same that we get in the **Logs** panel within the dashboard.\n\n## Running an app without opening a browser\n\nIn order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application's client. While this is quite convenient, sometimes we don't need a browser window to work on our app. This is the case when we're for example only interested in developing Smart Contracts, without creating a front-end.\n\nIf we don't want Embark to open a browser for us, all we have to do is using the `--nobrowser` option like this:\n\n\n```\n$ embark run --nobrowser\n```\n\n\n## Running an app without starting a web server\n\nIf we aren't interested in Embark starting a web server in the first place, we can easily turn it off by using the `--noserver` option:\n\n```\n$ embark run --noserver\n```\n\n## Running apps in different modes\n\nEmbark comes with different \"modes\" when building applications. `embark run` uses the `development` mode by default. However, this can be overwritten using the `--pipeline` option. The following command run our application in `production` mode.\n\n```\n$ embark run --pipeline production\n```\n\nFor more information about modes, head over to our guide on [building apps](pipeline_and_webpack.html).\n\n## Switching environments\n\nEmbark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project's `blockchain.js` file. \n\nDepending on how you initialized your application, it may have already multiple environments configured. Here's what a sample test network environment could look like:\n\n```\n// config/blockchain.js\n\nmodules.exports = {\n  ...\n  testnet: {\n    networkType: \"testnet\",\n    syncMode: \"light\",\n    account: {\n      password: \"config/testnet/password\"\n    }\n  },\n  ...\n}\n```\n\nFor more information on configuring your Embark application, head over to the [general configuration guide](configuration.html).\n\nRunning an application in a different environment is just a matter of specifying the environment's name as part of the run command:\n\n```\n$ embark run [environment]\n```\n\nSo in case we want to run our app against the test network environment described above, this could be achieved by running:\n\n```\n$ embark run testnet\n```\n\n## Starting a blockchain separately\n\nSometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have `embark run` connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.\n\nEmbark comes with a `blockchain` command that does exactly that:\n\n```\n$ embark blockchain\n```\n\nWhen this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the `run` command, the `blockchain` command also allows to specify an environment:\n\n```\n$ embark blockchain testnet\n```\n\nBy default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.\n\n## Using the blockchain simulator\n\nAnother feature of Embark is to start a **simulated** blockchain. This can be useful for testing purposes as there's no need to wait for transactions to be mined. You might have heard of [Ganache CLI](https://truffleframework.com/docs/ganache/quickstart), which is a great project that implements such a simulated blockchain.\n\nEmbark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the `simulator` command:\n\n```\n$ embark simulator\n```\n\n## Resetting apps\n\nSometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark's powerful [deployment hooks](/docs/contracts_configuration.html#Deployment-hooks) to initialize one of our Smart Contracts based on the deployment of another Smart Contract.\n\nTo test this, we'll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won't try to redeploy the same Smart Contract again.\n\nOne way to deal with this is to use the [deployment tracking](/docs/contracts_configuration.html#Deployment-tracking) configuration. Another way is to use Embark's `reset` command which will remove some files and data that Embark stores in the project's `.embark` folder.\n\nWe can reset our project by running the following command:\n\n```\n$ embark reset\n```\n\nIt's possible to configure what files Embark is going to remove when doing a reset. Check out [this guide](/docs/configuration.html#Configuring-Embark’s-reset-command) to learn more.\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/running_apps.html","comments":1,"_id":"ck5ijm3rt001j7heg41pw16p3","content":"<p>While running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.</p>\n<h2 id=\"Using-the-run-command\"><a href=\"#Using-the-run-command\" class=\"headerlink\" title=\"Using the run command\"></a>Using the <code>run</code> command</h2><p>If you’ve read the <a href=\"quick_start.html\">quickstart</a> you’re already aware that running an application is done by simply executing <code>embark run</code> within your project:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>By default, this will make Embark do a couple of things:</p>\n<ul>\n<li>It initializes Embark</li>\n<li>It starts the dashboard</li>\n<li>It loads plugins</li>\n<li>It spins up a blockchain and IPFS client, a web server and other necessary services</li>\n<li>It compiles and deploys your app</li>\n<li>It monitors running processes and recompiles and redeploys your app if needed</li>\n<li>It starts <a href=\"/docs/cockpit_introduction.html\">Cockpit</a></li>\n</ul>\n<p>Most of the time, using the <code>run</code> command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.</p>\n<h2 id=\"Running-an-app-without-the-dashboard\"><a href=\"#Running-an-app-without-the-dashboard\" class=\"headerlink\" title=\"Running an app without the dashboard\"></a>Running an app without the dashboard</h2><p>While the dashboard gives us a great overview of all the processes and services that Embark manages for us, it’s not required to start it every single time along with compiling and deploying our app. If we don’t need the dashboard, we can prevent Embark from starting it by using the <code>--nodashboard</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nodashboard</span><br></pre></td></tr></table></figure>\n\n<p>When running the command with <code>--nodashboard</code>, Embark will fallback to only use standard log outputs, which are the same that we get in the <strong>Logs</strong> panel within the dashboard.</p>\n<h2 id=\"Running-an-app-without-opening-a-browser\"><a href=\"#Running-an-app-without-opening-a-browser\" class=\"headerlink\" title=\"Running an app without opening a browser\"></a>Running an app without opening a browser</h2><p>In order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application’s client. While this is quite convenient, sometimes we don’t need a browser window to work on our app. This is the case when we’re for example only interested in developing Smart Contracts, without creating a front-end.</p>\n<p>If we don’t want Embark to open a browser for us, all we have to do is using the <code>--nobrowser</code> option like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nobrowser</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Running-an-app-without-starting-a-web-server\"><a href=\"#Running-an-app-without-starting-a-web-server\" class=\"headerlink\" title=\"Running an app without starting a web server\"></a>Running an app without starting a web server</h2><p>If we aren’t interested in Embark starting a web server in the first place, we can easily turn it off by using the <code>--noserver</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --noserver</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Running-apps-in-different-modes\"><a href=\"#Running-apps-in-different-modes\" class=\"headerlink\" title=\"Running apps in different modes\"></a>Running apps in different modes</h2><p>Embark comes with different “modes” when building applications. <code>embark run</code> uses the <code>development</code> mode by default. However, this can be overwritten using the <code>--pipeline</code> option. The following command run our application in <code>production</code> mode.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --pipeline production</span><br></pre></td></tr></table></figure>\n\n<p>For more information about modes, head over to our guide on <a href=\"pipeline_and_webpack.html\">building apps</a>.</p>\n<h2 id=\"Switching-environments\"><a href=\"#Switching-environments\" class=\"headerlink\" title=\"Switching environments\"></a>Switching environments</h2><p>Embark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project’s <code>blockchain.js</code> file. </p>\n<p>Depending on how you initialized your application, it may have already multiple environments configured. Here’s what a sample test network environment could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;blockchain.js</span><br><span class=\"line\"></span><br><span class=\"line\">modules.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    networkType: &quot;testnet&quot;,</span><br><span class=\"line\">    syncMode: &quot;light&quot;,</span><br><span class=\"line\">    account: &#123;</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on configuring your Embark application, head over to the <a href=\"configuration.html\">general configuration guide</a>.</p>\n<p>Running an application in a different environment is just a matter of specifying the environment’s name as part of the run command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>So in case we want to run our app against the test network environment described above, this could be achieved by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run testnet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Starting-a-blockchain-separately\"><a href=\"#Starting-a-blockchain-separately\" class=\"headerlink\" title=\"Starting a blockchain separately\"></a>Starting a blockchain separately</h2><p>Sometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have <code>embark run</code> connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.</p>\n<p>Embark comes with a <code>blockchain</code> command that does exactly that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain</span><br></pre></td></tr></table></figure>\n\n<p>When this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the <code>run</code> command, the <code>blockchain</code> command also allows to specify an environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain testnet</span><br></pre></td></tr></table></figure>\n\n<p>By default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.</p>\n<h2 id=\"Using-the-blockchain-simulator\"><a href=\"#Using-the-blockchain-simulator\" class=\"headerlink\" title=\"Using the blockchain simulator\"></a>Using the blockchain simulator</h2><p>Another feature of Embark is to start a <strong>simulated</strong> blockchain. This can be useful for testing purposes as there’s no need to wait for transactions to be mined. You might have heard of <a href=\"https://truffleframework.com/docs/ganache/quickstart\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, which is a great project that implements such a simulated blockchain.</p>\n<p>Embark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the <code>simulator</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Resetting-apps\"><a href=\"#Resetting-apps\" class=\"headerlink\" title=\"Resetting apps\"></a>Resetting apps</h2><p>Sometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark’s powerful <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> to initialize one of our Smart Contracts based on the deployment of another Smart Contract.</p>\n<p>To test this, we’ll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won’t try to redeploy the same Smart Contract again.</p>\n<p>One way to deal with this is to use the <a href=\"/docs/contracts_configuration.html#Deployment-tracking\">deployment tracking</a> configuration. Another way is to use Embark’s <code>reset</code> command which will remove some files and data that Embark stores in the project’s <code>.embark</code> folder.</p>\n<p>We can reset our project by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to configure what files Embark is going to remove when doing a reset. Check out <a href=\"/docs/configuration.html#Configuring-Embark’s-reset-command\">this guide</a> to learn more.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>While running Embark applications is pretty straight forward, there are some additional options we can take advantage of to change how our application is run. Whether we want Embark to automatically open a browser, open its dashboard or even make our app connect to different blockchains. This guide explores how this is done.</p>\n<h2 id=\"Using-the-run-command\"><a href=\"#Using-the-run-command\" class=\"headerlink\" title=\"Using the run command\"></a>Using the <code>run</code> command</h2><p>If you’ve read the <a href=\"quick_start.html\">quickstart</a> you’re already aware that running an application is done by simply executing <code>embark run</code> within your project:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>By default, this will make Embark do a couple of things:</p>\n<ul>\n<li>It initializes Embark</li>\n<li>It starts the dashboard</li>\n<li>It loads plugins</li>\n<li>It spins up a blockchain and IPFS client, a web server and other necessary services</li>\n<li>It compiles and deploys your app</li>\n<li>It monitors running processes and recompiles and redeploys your app if needed</li>\n<li>It starts <a href=\"/docs/cockpit_introduction.html\">Cockpit</a></li>\n</ul>\n<p>Most of the time, using the <code>run</code> command is all what we need to work on our Embark project, but as mentioned above, we can take a bit more control over running our application.</p>\n<h2 id=\"Running-an-app-without-the-dashboard\"><a href=\"#Running-an-app-without-the-dashboard\" class=\"headerlink\" title=\"Running an app without the dashboard\"></a>Running an app without the dashboard</h2><p>While the dashboard gives us a great overview of all the processes and services that Embark manages for us, it’s not required to start it every single time along with compiling and deploying our app. If we don’t need the dashboard, we can prevent Embark from starting it by using the <code>--nodashboard</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nodashboard</span><br></pre></td></tr></table></figure>\n\n<p>When running the command with <code>--nodashboard</code>, Embark will fallback to only use standard log outputs, which are the same that we get in the <strong>Logs</strong> panel within the dashboard.</p>\n<h2 id=\"Running-an-app-without-opening-a-browser\"><a href=\"#Running-an-app-without-opening-a-browser\" class=\"headerlink\" title=\"Running an app without opening a browser\"></a>Running an app without opening a browser</h2><p>In order to get up and running as fast as possible, Embark also takes care of opening a new browser window that connects to the web server to load our application’s client. While this is quite convenient, sometimes we don’t need a browser window to work on our app. This is the case when we’re for example only interested in developing Smart Contracts, without creating a front-end.</p>\n<p>If we don’t want Embark to open a browser for us, all we have to do is using the <code>--nobrowser</code> option like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --nobrowser</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Running-an-app-without-starting-a-web-server\"><a href=\"#Running-an-app-without-starting-a-web-server\" class=\"headerlink\" title=\"Running an app without starting a web server\"></a>Running an app without starting a web server</h2><p>If we aren’t interested in Embark starting a web server in the first place, we can easily turn it off by using the <code>--noserver</code> option:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --noserver</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Running-apps-in-different-modes\"><a href=\"#Running-apps-in-different-modes\" class=\"headerlink\" title=\"Running apps in different modes\"></a>Running apps in different modes</h2><p>Embark comes with different “modes” when building applications. <code>embark run</code> uses the <code>development</code> mode by default. However, this can be overwritten using the <code>--pipeline</code> option. The following command run our application in <code>production</code> mode.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run --pipeline production</span><br></pre></td></tr></table></figure>\n\n<p>For more information about modes, head over to our guide on <a href=\"pipeline_and_webpack.html\">building apps</a>.</p>\n<h2 id=\"Switching-environments\"><a href=\"#Switching-environments\" class=\"headerlink\" title=\"Switching environments\"></a>Switching environments</h2><p>Embark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project’s <code>blockchain.js</code> file. </p>\n<p>Depending on how you initialized your application, it may have already multiple environments configured. Here’s what a sample test network environment could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;blockchain.js</span><br><span class=\"line\"></span><br><span class=\"line\">modules.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    networkType: &quot;testnet&quot;,</span><br><span class=\"line\">    syncMode: &quot;light&quot;,</span><br><span class=\"line\">    account: &#123;</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on configuring your Embark application, head over to the <a href=\"configuration.html\">general configuration guide</a>.</p>\n<p>Running an application in a different environment is just a matter of specifying the environment’s name as part of the run command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run [environment]</span><br></pre></td></tr></table></figure>\n\n<p>So in case we want to run our app against the test network environment described above, this could be achieved by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run testnet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Starting-a-blockchain-separately\"><a href=\"#Starting-a-blockchain-separately\" class=\"headerlink\" title=\"Starting a blockchain separately\"></a>Starting a blockchain separately</h2><p>Sometimes we might want to have more control over the different processes involved when running our application with Embark. One of those things is to spin up a blockchain first and then have <code>embark run</code> connect to it. This enables us to stop and restart the blockchain process, without stopping Embark from doing its work.</p>\n<p>Embark comes with a <code>blockchain</code> command that does exactly that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain</span><br></pre></td></tr></table></figure>\n\n<p>When this is executed before Embark is run within a project, the run command will skip spinning up a blockchain node itself and connect to the existing process. Similar to the <code>run</code> command, the <code>blockchain</code> command also allows to specify an environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark blockchain testnet</span><br></pre></td></tr></table></figure>\n\n<p>By default Embark blockchain will mine a minimum amount of ether and will only mine when new transactions come in.</p>\n<h2 id=\"Using-the-blockchain-simulator\"><a href=\"#Using-the-blockchain-simulator\" class=\"headerlink\" title=\"Using the blockchain simulator\"></a>Using the blockchain simulator</h2><p>Another feature of Embark is to start a <strong>simulated</strong> blockchain. This can be useful for testing purposes as there’s no need to wait for transactions to be mined. You might have heard of <a href=\"https://truffleframework.com/docs/ganache/quickstart\" target=\"_blank\" rel=\"noopener\">Ganache CLI</a>, which is a great project that implements such a simulated blockchain.</p>\n<p>Embark integrates perfectly with this existing tool chain. To start a simulated blockchain, all we have do is to use the <code>simulator</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark simulator</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Resetting-apps\"><a href=\"#Resetting-apps\" class=\"headerlink\" title=\"Resetting apps\"></a>Resetting apps</h2><p>Sometimes we want to develop and test behaviours that are related to the deployment of our application. For example, we might want to use some of Embark’s powerful <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> to initialize one of our Smart Contracts based on the deployment of another Smart Contract.</p>\n<p>To test this, we’ll have to redeploy our Smart Contracts. However once a Smart Contract is deployed, Embark keeps track of it and won’t try to redeploy the same Smart Contract again.</p>\n<p>One way to deal with this is to use the <a href=\"/docs/contracts_configuration.html#Deployment-tracking\">deployment tracking</a> configuration. Another way is to use Embark’s <code>reset</code> command which will remove some files and data that Embark stores in the project’s <code>.embark</code> folder.</p>\n<p>We can reset our project by running the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark reset</span><br></pre></td></tr></table></figure>\n\n<p>It’s possible to configure what files Embark is going to remove when doing a reset. Check out <a href=\"/docs/configuration.html#Configuring-Embark’s-reset-command\">this guide</a> to learn more.</p>\n"},{"title":"Sending and Receiving messages","layout":"docs","_content":"\n### listening to messages\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n### sending messages\n\nYou can send plain text\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\nOr an object\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\nNote: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g ``[\"topic1\", [\"topic2\", \"topic3\"]]`` => ``topic1 AND (topic2 OR topic 3)``\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/communication.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n","source":"docs/sending_and_receiving_messages.md","raw":"title: Sending and Receiving messages\nlayout: docs\n---\n\n### listening to messages\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n### sending messages\n\nYou can send plain text\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\nOr an object\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\nNote: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g ``[\"topic1\", [\"topic2\", \"topic3\"]]`` => ``topic1 AND (topic2 OR topic 3)``\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/communication.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/sending_and_receiving_messages.html","comments":1,"_id":"ck5ijm3ru001k7heg3fkc3809","content":"<h3 id=\"listening-to-messages\"><a href=\"#listening-to-messages\" class=\"headerlink\" title=\"listening to messages\"></a>listening to messages</h3><pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n<h3 id=\"sending-messages\"><a href=\"#sending-messages\" class=\"headerlink\" title=\"sending messages\"></a>sending messages</h3><p>You can send plain text</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\n<p>Or an object</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\n<p>Note: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code></p>\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h3 id=\"listening-to-messages\"><a href=\"#listening-to-messages\" class=\"headerlink\" title=\"listening to messages\"></a>listening to messages</h3><pre><code class=\"javascript\">EmbarkJS.Messages.listenTo({topic: [\"topic1\", \"topic2\"]}).then(function(message) {\n  console.log(\"received: \" + message);\n})\n</code></pre>\n\n<h3 id=\"sending-messages\"><a href=\"#sending-messages\" class=\"headerlink\" title=\"sending messages\"></a>sending messages</h3><p>You can send plain text</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: 'hello world'})\n</code></pre>\n\n<p>Or an object</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.sendMessage({topic: \"sometopic\", data: {msg: 'hello world'}})\n</code></pre>\n\n<p>Note: array of topics are considered an AND. In Whisper you can use another array for OR combinations of several topics e.g <code>[&quot;topic1&quot;, [&quot;topic2&quot;, &quot;topic3&quot;]]</code> =&gt; <code>topic1 AND (topic2 OR topic 3)</code></p>\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/communication.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Messages.setProvider('whisper')\n</code></pre>\n\n\n"},{"title":"Smart Contract Objects","layout":"docs","_content":"### Interacting with contracts in Javascript\n\nEmbark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:\n\n```\n// app/contracts/simple_storage.sol\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill automatically be available in Javascript as:\n\n```\n// app/js/index.js\n\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nSimpleStorage.methods.set(100).send();\nSimpleStorage.methods.get().call().then(function(value) { console.log(value) });\nSimpleStorage.methods.storedData().call().then(function(value) { console.log(value) });\n```\n\nThe syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a>\n","source":"docs/smart_contract_objects.md","raw":"title: Smart Contract Objects\nlayout: docs\n---\n### Interacting with contracts in Javascript\n\nEmbark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:\n\n```\n// app/contracts/simple_storage.sol\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  function SimpleStorage(uint initialValue) {\n    storedData = initialValue;\n  }\n\n  function set(uint x) {\n    storedData = x;\n  }\n  function get() constant returns (uint retVal) {\n    return storedData;\n  }\n}\n```\n\nWill automatically be available in Javascript as:\n\n```\n// app/js/index.js\n\nimport SimpleStorage from 'Embark/contracts/SimpleStorage';\n\nSimpleStorage.methods.set(100).send();\nSimpleStorage.methods.get().call().then(function(value) { console.log(value) });\nSimpleStorage.methods.storedData().call().then(function(value) { console.log(value) });\n```\n\nThe syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a>\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/smart_contract_objects.html","comments":1,"_id":"ck5ijm3rv001l7heg41h7gzra","content":"<h3 id=\"Interacting-with-contracts-in-Javascript\"><a href=\"#Interacting-with-contracts-in-Javascript\" class=\"headerlink\" title=\"Interacting with contracts in Javascript\"></a>Interacting with contracts in Javascript</h3><p>Embark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;contracts&#x2F;simple_storage.sol</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will automatically be available in Javascript as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;js&#x2F;index.js</span><br><span class=\"line\"></span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">SimpleStorage.methods.get().call().then(function(value) &#123; console.log(value) &#125;);</span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(function(value) &#123; console.log(value) &#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h3 id=\"Interacting-with-contracts-in-Javascript\"><a href=\"#Interacting-with-contracts-in-Javascript\" class=\"headerlink\" title=\"Interacting with contracts in Javascript\"></a>Interacting with contracts in Javascript</h3><p>Embark will automatically take care of deployment for you and set all needed JS bindings. For example, the contract below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;contracts&#x2F;simple_storage.sol</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  function SimpleStorage(uint initialValue) &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  function get() constant returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Will automatically be available in Javascript as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; app&#x2F;js&#x2F;index.js</span><br><span class=\"line\"></span><br><span class=\"line\">import SimpleStorage from &#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">SimpleStorage.methods.set(100).send();</span><br><span class=\"line\">SimpleStorage.methods.get().call().then(function(value) &#123; console.log(value) &#125;);</span><br><span class=\"line\">SimpleStorage.methods.storedData().call().then(function(value) &#123; console.log(value) &#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The syntax used is <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\">web3.js 1.2.1</a></p>\n"},{"title":"Solidity Documentation","_content":"\nThe documentation for Solidity can be found [here](https://solidity.readthedocs.io/)\n\n","source":"docs/solidity.md","raw":"title: Solidity Documentation\n---\n\nThe documentation for Solidity can be found [here](https://solidity.readthedocs.io/)\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/solidity.html","comments":1,"layout":"page","_id":"ck5ijm3rv001m7hegeg1e1h1s","content":"<p>The documentation for Solidity can be found <a href=\"https://solidity.readthedocs.io/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The documentation for Solidity can be found <a href=\"https://solidity.readthedocs.io/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n"},{"title":"Configuring decentralized storages","layout":"docs","_content":"\nWith Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let's take a closer look at how to make use of this.\n\n## Configuration basics\n\nEmbark will check our preferred storage configuration in the file `config/storage.js`, unless [configured differently](/docs/configuration.html) in our application's `embark.json` file. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment. If [environments in Embark](/docs/environments.html) are new to you, check out the dedicated guide first and come back.\n\nEach of these configuration options can be individually overridden on a per environment basis.\n\n```\nmodule.exports = {\n  \"default\": {\n    \"enabled\": true,\n    \"ipfs_bin\": \"ipfs\",\n    \"available_providers\": [\"ipfs\", \"swarm\"],\n    \"upload\":{\n      \"provider\": \"ipfs\",\n      \"host\": \"localhost\",\n      \"port\": 5001,\n      \"getUrl\": \"http://localhost:8080/ipfs\"\n    },\n    \"dappConnection\":[\n      {\"provider\": \"swarm\", \"host\": \"localhost\", \"port\": 8500, \"getUrl\": \"http://localhost:8500/bzz:/\"},\n      {\"provider\": \"ipfs\", \"host\": \"localhost\", \"port\": 5001, \"getUrl\": \"http://localhost:8080/ipfs/\"}\n    ]\n  },\n  \"development\": {\n    \"enabled\": true,\n    \"provider\": \"ipfs\",\n    \"host\": \"localhost\",\n    \"port\": 5001\n  }\n}\n```\n\nThe available options are:\n\nOption | Type: `default` | Value\n--- | --- | ---\n`enabled`    | boolean: `true` | Enables or completely disables storage support\n`ipfs_bin`    | string: `ipfs` | Name or desired path to the ipfs binary\n`available_providers`    | array: `[\"ipfs\", \"swarm\"]` | List of storages to be supported on the dapp. This will affect what's available with the EmbarkJS library on the dapp.\n`upload`      | | The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.\n`upload.provider`    | string: `ipfs` | Desired provider to use when uploading dapp.\n`upload.protocol`    | string: `http` | Storage provider protocol for upload, ie `http` or `https`\n`upload.host`        | string: `localhost` | Host value used to interact with the storage provider for upload, i.e. `localhost` or `swarm-gateways.net`\n`upload.port`        | integer: `5001` | Port value used to interact with the storage provider for upload, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`\n`upload.getUrl`      | string: `http://localhost:8080/ipfs/` | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n`dappConnection`     | | List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify `$BZZ` to attempt to connect to an injected swarm object.\n`dappConnection.provider` | string: `ipfs` | Desired provider to use for dapp storage.\n`dappConnection.protocol`    | string: `http` | Storage provider protocol used in the dapp, i.e. `http` or `https`\n`dappConnection.host`        | string | Host value used to interact with the storage provider in the dapp, i.e. `localhost` or `swarm-gateways.net`\n`dappConnection.port`        | integer | Port value used to interact with the storage provider in the dapp, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`. Can specify `false` if a port should not be included in the connection URL (i.e. for a public gateway like `http://swarm-gateways.net`).\n`dappConnection.getUrl`      | string | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n\n## Using a local node\n\nEither for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port `5001` and Swarm runs on `8500`.\n\nWe can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.\n\n**Important configurations for swarm**:\n\n```\n{\n  \"development\": {\n    \"provider\": \"swarm\",\n    \"account\": {\n      \"address\": \"YOUR_ACCOUNT_ADDRESS\",\n      \"password\": \"PATH/TO/PASSWORD/FILE\"\n    },\n    \"swarmPath\": \"PATH/TO/SWARM/EXECUTABLE\"\n  }\n}\n```\n\n## Using a public gateway\n\nEmbark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following `config/storage.js` options:\n\n### IPFS\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\":{\n    \"provider\": \"ipfs\",\n    \"host\": \"ipfs.infura.io\",\n    \"port\": 80,\n    \"protocol\": \"https\",\n    \"getUrl\": \"https://ipfs.infura.io/ipfs/\"\n  }\n}\n```\n\n### Swarm\n\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\": {\n    \"provider\": \"swarm\",\n    \"host\": \"localhost\",\n    \"port\": 8500\n  }\n}\n```\n\n## Troubleshooting\n\nIf you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.\n\nIf you are using the built in webserver, the CORS would need to be set to `http://localhost:8000`, however if you are using `embark upload`, the domain of the decentralised storage host should be included in CORS.\n\nDepending on your `upload` settings in `storage.js`, this could be `http://localhost:8080` or `http://ipfs.infura.io` for IPFS or it could be `http://localhost:8500` or `http://swarm-gateways.net` for Swarm.\n\nOf course, if you are hosting your DApp on a different domain (i.e. not `localhost`, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:\n\n```\nipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin \"[\\\"http://localhost:8000\\\", \\\"http://localhost:8500\\\", \\\"http://localhost:8545\\\", \\\"ws://localhost:8546\\\"]\"\n```\nNOTE: `http://localhost:8545` and `ws://localhost:8546` are for geth.\n\n```\nswarm --bzzaccount=fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir=~/.bzz-data/ --password=config/development/password --corsdomain=http://localhost:8000,http://localhost:8080,http://localhost:8545,ws://localhost:8546 --ens-api=''\n```\n","source":"docs/storage_configuration.md","raw":"title: Configuring decentralized storages\nlayout: docs\n---\n\nWith Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let's take a closer look at how to make use of this.\n\n## Configuration basics\n\nEmbark will check our preferred storage configuration in the file `config/storage.js`, unless [configured differently](/docs/configuration.html) in our application's `embark.json` file. This file contains the preferred configuration for each environment, with `default` being the configuration that applies to every environment. If [environments in Embark](/docs/environments.html) are new to you, check out the dedicated guide first and come back.\n\nEach of these configuration options can be individually overridden on a per environment basis.\n\n```\nmodule.exports = {\n  \"default\": {\n    \"enabled\": true,\n    \"ipfs_bin\": \"ipfs\",\n    \"available_providers\": [\"ipfs\", \"swarm\"],\n    \"upload\":{\n      \"provider\": \"ipfs\",\n      \"host\": \"localhost\",\n      \"port\": 5001,\n      \"getUrl\": \"http://localhost:8080/ipfs\"\n    },\n    \"dappConnection\":[\n      {\"provider\": \"swarm\", \"host\": \"localhost\", \"port\": 8500, \"getUrl\": \"http://localhost:8500/bzz:/\"},\n      {\"provider\": \"ipfs\", \"host\": \"localhost\", \"port\": 5001, \"getUrl\": \"http://localhost:8080/ipfs/\"}\n    ]\n  },\n  \"development\": {\n    \"enabled\": true,\n    \"provider\": \"ipfs\",\n    \"host\": \"localhost\",\n    \"port\": 5001\n  }\n}\n```\n\nThe available options are:\n\nOption | Type: `default` | Value\n--- | --- | ---\n`enabled`    | boolean: `true` | Enables or completely disables storage support\n`ipfs_bin`    | string: `ipfs` | Name or desired path to the ipfs binary\n`available_providers`    | array: `[\"ipfs\", \"swarm\"]` | List of storages to be supported on the dapp. This will affect what's available with the EmbarkJS library on the dapp.\n`upload`      | | The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.\n`upload.provider`    | string: `ipfs` | Desired provider to use when uploading dapp.\n`upload.protocol`    | string: `http` | Storage provider protocol for upload, ie `http` or `https`\n`upload.host`        | string: `localhost` | Host value used to interact with the storage provider for upload, i.e. `localhost` or `swarm-gateways.net`\n`upload.port`        | integer: `5001` | Port value used to interact with the storage provider for upload, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`\n`upload.getUrl`      | string: `http://localhost:8080/ipfs/` | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n`dappConnection`     | | List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify `$BZZ` to attempt to connect to an injected swarm object.\n`dappConnection.provider` | string: `ipfs` | Desired provider to use for dapp storage.\n`dappConnection.protocol`    | string: `http` | Storage provider protocol used in the dapp, i.e. `http` or `https`\n`dappConnection.host`        | string | Host value used to interact with the storage provider in the dapp, i.e. `localhost` or `swarm-gateways.net`\n`dappConnection.port`        | integer | Port value used to interact with the storage provider in the dapp, i.e. `5001` (IPFS local node) or `8500` (Swarm local node) or `80`. Can specify `false` if a port should not be included in the connection URL (i.e. for a public gateway like `http://swarm-gateways.net`).\n`dappConnection.getUrl`      | string | Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.\n\n## Using a local node\n\nEither for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port `5001` and Swarm runs on `8500`.\n\nWe can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.\n\n**Important configurations for swarm**:\n\n```\n{\n  \"development\": {\n    \"provider\": \"swarm\",\n    \"account\": {\n      \"address\": \"YOUR_ACCOUNT_ADDRESS\",\n      \"password\": \"PATH/TO/PASSWORD/FILE\"\n    },\n    \"swarmPath\": \"PATH/TO/SWARM/EXECUTABLE\"\n  }\n}\n```\n\n## Using a public gateway\n\nEmbark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following `config/storage.js` options:\n\n### IPFS\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\":{\n    \"provider\": \"ipfs\",\n    \"host\": \"ipfs.infura.io\",\n    \"port\": 80,\n    \"protocol\": \"https\",\n    \"getUrl\": \"https://ipfs.infura.io/ipfs/\"\n  }\n}\n```\n\n### Swarm\n\n```\n\"development\": {\n  \"enabled\": true,\n  \"upload\": {\n    \"provider\": \"swarm\",\n    \"host\": \"localhost\",\n    \"port\": 8500\n  }\n}\n```\n\n## Troubleshooting\n\nIf you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.\n\nIf you are using the built in webserver, the CORS would need to be set to `http://localhost:8000`, however if you are using `embark upload`, the domain of the decentralised storage host should be included in CORS.\n\nDepending on your `upload` settings in `storage.js`, this could be `http://localhost:8080` or `http://ipfs.infura.io` for IPFS or it could be `http://localhost:8500` or `http://swarm-gateways.net` for Swarm.\n\nOf course, if you are hosting your DApp on a different domain (i.e. not `localhost`, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:\n\n```\nipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin \"[\\\"http://localhost:8000\\\", \\\"http://localhost:8500\\\", \\\"http://localhost:8545\\\", \\\"ws://localhost:8546\\\"]\"\n```\nNOTE: `http://localhost:8545` and `ws://localhost:8546` are for geth.\n\n```\nswarm --bzzaccount=fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir=~/.bzz-data/ --password=config/development/password --corsdomain=http://localhost:8000,http://localhost:8080,http://localhost:8545,ws://localhost:8546 --ens-api=''\n```\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/storage_configuration.html","comments":1,"_id":"ck5ijm3rw001n7heghk4sbt8r","content":"<p>With Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let’s take a closer look at how to make use of this.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark will check our preferred storage configuration in the file <code>config/storage.js</code>, unless <a href=\"/docs/configuration.html\">configured differently</a> in our application’s <code>embark.json</code> file. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment. If <a href=\"/docs/environments.html\">environments in Embark</a> are new to you, check out the dedicated guide first and come back.</p>\n<p>Each of these configuration options can be individually overridden on a per environment basis.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;ipfs_bin&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;available_providers&quot;: [&quot;ipfs&quot;, &quot;swarm&quot;],</span><br><span class=\"line\">    &quot;upload&quot;:&#123;</span><br><span class=\"line\">      &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 5001,</span><br><span class=\"line\">      &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;dappConnection&quot;:[</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;swarm&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 8500, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8500&#x2F;bzz:&#x2F;&quot;&#125;,</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;ipfs&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 5001, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&#x2F;&quot;&#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 5001</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The available options are:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Enables or completely disables storage support</td>\n</tr>\n<tr>\n<td><code>ipfs_bin</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Name or desired path to the ipfs binary</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;ipfs&quot;, &quot;swarm&quot;]</code></td>\n<td>List of storages to be supported on the dapp. This will affect what’s available with the EmbarkJS library on the dapp.</td>\n</tr>\n<tr>\n<td><code>upload</code></td>\n<td></td>\n<td>The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.</td>\n</tr>\n<tr>\n<td><code>upload.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use when uploading dapp.</td>\n</tr>\n<tr>\n<td><code>upload.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol for upload, ie <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>upload.host</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host value used to interact with the storage provider for upload, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>upload.port</code></td>\n<td>integer: <code>5001</code></td>\n<td>Port value used to interact with the storage provider for upload, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code></td>\n</tr>\n<tr>\n<td><code>upload.getUrl</code></td>\n<td>string: <code>http://localhost:8080/ipfs/</code></td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n<tr>\n<td><code>dappConnection</code></td>\n<td></td>\n<td>List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify <code>$BZZ</code> to attempt to connect to an injected swarm object.</td>\n</tr>\n<tr>\n<td><code>dappConnection.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use for dapp storage.</td>\n</tr>\n<tr>\n<td><code>dappConnection.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol used in the dapp, i.e. <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.host</code></td>\n<td>string</td>\n<td>Host value used to interact with the storage provider in the dapp, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.port</code></td>\n<td>integer</td>\n<td>Port value used to interact with the storage provider in the dapp, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code>. Can specify <code>false</code> if a port should not be included in the connection URL (i.e. for a public gateway like <code>http://swarm-gateways.net</code>).</td>\n</tr>\n<tr>\n<td><code>dappConnection.getUrl</code></td>\n<td>string</td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n</tbody></table>\n<h2 id=\"Using-a-local-node\"><a href=\"#Using-a-local-node\" class=\"headerlink\" title=\"Using a local node\"></a>Using a local node</h2><p>Either for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port <code>5001</code> and Swarm runs on <code>8500</code>.</p>\n<p>We can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.</p>\n<p><strong>Important configurations for swarm</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;account&quot;: &#123;</span><br><span class=\"line\">      &quot;address&quot;: &quot;YOUR_ACCOUNT_ADDRESS&quot;,</span><br><span class=\"line\">      &quot;password&quot;: &quot;PATH&#x2F;TO&#x2F;PASSWORD&#x2F;FILE&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;swarmPath&quot;: &quot;PATH&#x2F;TO&#x2F;SWARM&#x2F;EXECUTABLE&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-a-public-gateway\"><a href=\"#Using-a-public-gateway\" class=\"headerlink\" title=\"Using a public gateway\"></a>Using a public gateway</h2><p>Embark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following <code>config/storage.js</code> options:</p>\n<h3 id=\"IPFS\"><a href=\"#IPFS\" class=\"headerlink\" title=\"IPFS\"></a>IPFS</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;:&#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;ipfs.infura.io&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 80,</span><br><span class=\"line\">    &quot;protocol&quot;: &quot;https&quot;,</span><br><span class=\"line\">    &quot;getUrl&quot;: &quot;https:&#x2F;&#x2F;ipfs.infura.io&#x2F;ipfs&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Swarm\"><a href=\"#Swarm\" class=\"headerlink\" title=\"Swarm\"></a>Swarm</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 8500</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Troubleshooting\"><a href=\"#Troubleshooting\" class=\"headerlink\" title=\"Troubleshooting\"></a>Troubleshooting</h2><p>If you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.</p>\n<p>If you are using the built in webserver, the CORS would need to be set to <code>http://localhost:8000</code>, however if you are using <code>embark upload</code>, the domain of the decentralised storage host should be included in CORS.</p>\n<p>Depending on your <code>upload</code> settings in <code>storage.js</code>, this could be <code>http://localhost:8080</code> or <code>http://ipfs.infura.io</code> for IPFS or it could be <code>http://localhost:8500</code> or <code>http://swarm-gateways.net</code> for Swarm.</p>\n<p>Of course, if you are hosting your DApp on a different domain (i.e. not <code>localhost</code>, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin &quot;[\\&quot;http:&#x2F;&#x2F;localhost:8000\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8500\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8545\\&quot;, \\&quot;ws:&#x2F;&#x2F;localhost:8546\\&quot;]&quot;</span><br></pre></td></tr></table></figure>\n<p>NOTE: <code>http://localhost:8545</code> and <code>ws://localhost:8546</code> are for geth.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">swarm --bzzaccount&#x3D;fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir&#x3D;~&#x2F;.bzz-data&#x2F; --password&#x3D;config&#x2F;development&#x2F;password --corsdomain&#x3D;http:&#x2F;&#x2F;localhost:8000,http:&#x2F;&#x2F;localhost:8080,http:&#x2F;&#x2F;localhost:8545,ws:&#x2F;&#x2F;localhost:8546 --ens-api&#x3D;&#39;&#39;</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>With Embark, we easily connect to decentralized storage solutions such as IPFS and Swarm. This enables us to upload, storing and download data and assets for our decentralized applications. Let’s take a closer look at how to make use of this.</p>\n<h2 id=\"Configuration-basics\"><a href=\"#Configuration-basics\" class=\"headerlink\" title=\"Configuration basics\"></a>Configuration basics</h2><p>Embark will check our preferred storage configuration in the file <code>config/storage.js</code>, unless <a href=\"/docs/configuration.html\">configured differently</a> in our application’s <code>embark.json</code> file. This file contains the preferred configuration for each environment, with <code>default</code> being the configuration that applies to every environment. If <a href=\"/docs/environments.html\">environments in Embark</a> are new to you, check out the dedicated guide first and come back.</p>\n<p>Each of these configuration options can be individually overridden on a per environment basis.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;ipfs_bin&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;available_providers&quot;: [&quot;ipfs&quot;, &quot;swarm&quot;],</span><br><span class=\"line\">    &quot;upload&quot;:&#123;</span><br><span class=\"line\">      &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 5001,</span><br><span class=\"line\">      &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;dappConnection&quot;:[</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;swarm&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 8500, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8500&#x2F;bzz:&#x2F;&quot;&#125;,</span><br><span class=\"line\">      &#123;&quot;provider&quot;: &quot;ipfs&quot;, &quot;host&quot;: &quot;localhost&quot;, &quot;port&quot;: 5001, &quot;getUrl&quot;: &quot;http:&#x2F;&#x2F;localhost:8080&#x2F;ipfs&#x2F;&quot;&#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;enabled&quot;: true,</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 5001</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The available options are:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Enables or completely disables storage support</td>\n</tr>\n<tr>\n<td><code>ipfs_bin</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Name or desired path to the ipfs binary</td>\n</tr>\n<tr>\n<td><code>available_providers</code></td>\n<td>array: <code>[&quot;ipfs&quot;, &quot;swarm&quot;]</code></td>\n<td>List of storages to be supported on the dapp. This will affect what’s available with the EmbarkJS library on the dapp.</td>\n</tr>\n<tr>\n<td><code>upload</code></td>\n<td></td>\n<td>The upload element specifies storage provider settings used for uploading your dapp. A swarm node will be automatically launched in a child process using these settings.</td>\n</tr>\n<tr>\n<td><code>upload.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use when uploading dapp.</td>\n</tr>\n<tr>\n<td><code>upload.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol for upload, ie <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>upload.host</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host value used to interact with the storage provider for upload, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>upload.port</code></td>\n<td>integer: <code>5001</code></td>\n<td>Port value used to interact with the storage provider for upload, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code></td>\n</tr>\n<tr>\n<td><code>upload.getUrl</code></td>\n<td>string: <code>http://localhost:8080/ipfs/</code></td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n<tr>\n<td><code>dappConnection</code></td>\n<td></td>\n<td>List of storage providers to attempt connection to in the dapp. Each provider process will be launched in a child process. Each connection listed will be tried in order on the dapp, until one is avaialable. Can also specify <code>$BZZ</code> to attempt to connect to an injected swarm object.</td>\n</tr>\n<tr>\n<td><code>dappConnection.provider</code></td>\n<td>string: <code>ipfs</code></td>\n<td>Desired provider to use for dapp storage.</td>\n</tr>\n<tr>\n<td><code>dappConnection.protocol</code></td>\n<td>string: <code>http</code></td>\n<td>Storage provider protocol used in the dapp, i.e. <code>http</code> or <code>https</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.host</code></td>\n<td>string</td>\n<td>Host value used to interact with the storage provider in the dapp, i.e. <code>localhost</code> or <code>swarm-gateways.net</code></td>\n</tr>\n<tr>\n<td><code>dappConnection.port</code></td>\n<td>integer</td>\n<td>Port value used to interact with the storage provider in the dapp, i.e. <code>5001</code> (IPFS local node) or <code>8500</code> (Swarm local node) or <code>80</code>. Can specify <code>false</code> if a port should not be included in the connection URL (i.e. for a public gateway like <code>http://swarm-gateways.net</code>).</td>\n</tr>\n<tr>\n<td><code>dappConnection.getUrl</code></td>\n<td>string</td>\n<td>Only for IPFS. This sets the file/document retrieval URL, which is different than the host/port combination used to interact with the IPFS API.</td>\n</tr>\n</tbody></table>\n<h2 id=\"Using-a-local-node\"><a href=\"#Using-a-local-node\" class=\"headerlink\" title=\"Using a local node\"></a>Using a local node</h2><p>Either for IPFS or Swarm, Embark will default to use a local node for development purposes. Note that we still need to set up the right port according to the storage platform we use. By default, IPFS runs on port <code>5001</code> and Swarm runs on <code>8500</code>.</p>\n<p>We can start a local storage node ourselves or now we can let Embark start the node for us. Letting Embark do the job lets us focus on developing faster while doing it ourselves might give us more flexibility. Obviously, we still need to have IPFS or Swarm installed locally for it to work.</p>\n<p><strong>Important configurations for swarm</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;development&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;account&quot;: &#123;</span><br><span class=\"line\">      &quot;address&quot;: &quot;YOUR_ACCOUNT_ADDRESS&quot;,</span><br><span class=\"line\">      &quot;password&quot;: &quot;PATH&#x2F;TO&#x2F;PASSWORD&#x2F;FILE&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;swarmPath&quot;: &quot;PATH&#x2F;TO&#x2F;SWARM&#x2F;EXECUTABLE&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-a-public-gateway\"><a href=\"#Using-a-public-gateway\" class=\"headerlink\" title=\"Using a public gateway\"></a>Using a public gateway</h2><p>Embark can connect to a public gateway when using any of the available storage options. To use a public gateway, instead of running a local node, for IPFS or Swarm, use the following <code>config/storage.js</code> options:</p>\n<h3 id=\"IPFS\"><a href=\"#IPFS\" class=\"headerlink\" title=\"IPFS\"></a>IPFS</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;:&#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;ipfs&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;ipfs.infura.io&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 80,</span><br><span class=\"line\">    &quot;protocol&quot;: &quot;https&quot;,</span><br><span class=\"line\">    &quot;getUrl&quot;: &quot;https:&#x2F;&#x2F;ipfs.infura.io&#x2F;ipfs&#x2F;&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Swarm\"><a href=\"#Swarm\" class=\"headerlink\" title=\"Swarm\"></a>Swarm</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;development&quot;: &#123;</span><br><span class=\"line\">  &quot;enabled&quot;: true,</span><br><span class=\"line\">  &quot;upload&quot;: &#123;</span><br><span class=\"line\">    &quot;provider&quot;: &quot;swarm&quot;,</span><br><span class=\"line\">    &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">    &quot;port&quot;: 8500</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Troubleshooting\"><a href=\"#Troubleshooting\" class=\"headerlink\" title=\"Troubleshooting\"></a>Troubleshooting</h2><p>If you are running your own processes for IPFS or Swarm, the CORS needs to be set to the domain of your application, to the geth domain, and to the domain of the storage used inside the application.</p>\n<p>If you are using the built in webserver, the CORS would need to be set to <code>http://localhost:8000</code>, however if you are using <code>embark upload</code>, the domain of the decentralised storage host should be included in CORS.</p>\n<p>Depending on your <code>upload</code> settings in <code>storage.js</code>, this could be <code>http://localhost:8080</code> or <code>http://ipfs.infura.io</code> for IPFS or it could be <code>http://localhost:8500</code> or <code>http://swarm-gateways.net</code> for Swarm.</p>\n<p>Of course, if you are hosting your DApp on a different domain (i.e. not <code>localhost</code>, then that would need to be included in CORS as well. Examples of how to include multiple domains for each are below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin &quot;[\\&quot;http:&#x2F;&#x2F;localhost:8000\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8500\\&quot;, \\&quot;http:&#x2F;&#x2F;localhost:8545\\&quot;, \\&quot;ws:&#x2F;&#x2F;localhost:8546\\&quot;]&quot;</span><br></pre></td></tr></table></figure>\n<p>NOTE: <code>http://localhost:8545</code> and <code>ws://localhost:8546</code> are for geth.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">swarm --bzzaccount&#x3D;fedda09fd9218d1ea4fd41ad44694fa4ccba1878 --datadir&#x3D;~&#x2F;.bzz-data&#x2F; --password&#x3D;config&#x2F;development&#x2F;password --corsdomain&#x3D;http:&#x2F;&#x2F;localhost:8000,http:&#x2F;&#x2F;localhost:8080,http:&#x2F;&#x2F;localhost:8545,ws:&#x2F;&#x2F;localhost:8546 --ens-api&#x3D;&#39;&#39;</span><br></pre></td></tr></table></figure>\n"},{"title":"Deploying Apps","layout":"docs","_content":"\nTo build truly decentralized applications, we probably want to upload and host our application's assets on a decentralized storage network as well. In this guide we'll explore how to upload data to IPFS and Swarm using Embark.\n\n## Deploying using the `upload` command\n\nTo upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our [storage configuration](/docs/storage_configuration.html). \n\nOnce that is done we can use Embark's `upload` command to take the assets located in the configured `buildDir` (read [here](/docs/configuration.html) for more information) and upload it to the configured storage network.\n\n```\n$ embark upload\n```\n\nSimilar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the `livenet` environment configuration:\n\n```\n$ embark upload livenet\n```\n\n## Associating an ENS domain\n\n\nWe can associate our uploaded data to an ENS domain by using the `--ens` option. This will take the storage hash and upload it to an ENS domain.\n\nFor example, the following command will upload our application to IPFS or Swarm and connect it with the `embark.eth` domain:\n\n```\n$ embark upload --ens=embark.etk\n```\n\n{% notification info 'Important:' %}\nYou need to be the owner of the given domain for this to work. Head over to [ens.domains](https://ens.domains/) for more information.\n{% endnotification %}\n\n\n","source":"docs/storage_deployment.md","raw":"title: Deploying Apps\nlayout: docs\n---\n\nTo build truly decentralized applications, we probably want to upload and host our application's assets on a decentralized storage network as well. In this guide we'll explore how to upload data to IPFS and Swarm using Embark.\n\n## Deploying using the `upload` command\n\nTo upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our [storage configuration](/docs/storage_configuration.html). \n\nOnce that is done we can use Embark's `upload` command to take the assets located in the configured `buildDir` (read [here](/docs/configuration.html) for more information) and upload it to the configured storage network.\n\n```\n$ embark upload\n```\n\nSimilar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the `livenet` environment configuration:\n\n```\n$ embark upload livenet\n```\n\n## Associating an ENS domain\n\n\nWe can associate our uploaded data to an ENS domain by using the `--ens` option. This will take the storage hash and upload it to an ENS domain.\n\nFor example, the following command will upload our application to IPFS or Swarm and connect it with the `embark.eth` domain:\n\n```\n$ embark upload --ens=embark.etk\n```\n\n{% notification info 'Important:' %}\nYou need to be the owner of the given domain for this to work. Head over to [ens.domains](https://ens.domains/) for more information.\n{% endnotification %}\n\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/storage_deployment.html","comments":1,"_id":"ck5ijm3rx001o7heg6dhubmwp","content":"<p>To build truly decentralized applications, we probably want to upload and host our application’s assets on a decentralized storage network as well. In this guide we’ll explore how to upload data to IPFS and Swarm using Embark.</p>\n<h2 id=\"Deploying-using-the-upload-command\"><a href=\"#Deploying-using-the-upload-command\" class=\"headerlink\" title=\"Deploying using the upload command\"></a>Deploying using the <code>upload</code> command</h2><p>To upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our <a href=\"/docs/storage_configuration.html\">storage configuration</a>. </p>\n<p>Once that is done we can use Embark’s <code>upload</code> command to take the assets located in the configured <code>buildDir</code> (read <a href=\"/docs/configuration.html\">here</a> for more information) and upload it to the configured storage network.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload</span><br></pre></td></tr></table></figure>\n\n<p>Similar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the <code>livenet</code> environment configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload livenet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Associating-an-ENS-domain\"><a href=\"#Associating-an-ENS-domain\" class=\"headerlink\" title=\"Associating an ENS domain\"></a>Associating an ENS domain</h2><p>We can associate our uploaded data to an ENS domain by using the <code>--ens</code> option. This will take the storage hash and upload it to an ENS domain.</p>\n<p>For example, the following command will upload our application to IPFS or Swarm and connect it with the <code>embark.eth</code> domain:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload --ens&#x3D;embark.etk</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important:</strong></p>\n  <p><p>You need to be the owner of the given domain for this to work. Head over to <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">ens.domains</a> for more information.</p>\n</p>\n</div> \n\n\n\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>To build truly decentralized applications, we probably want to upload and host our application’s assets on a decentralized storage network as well. In this guide we’ll explore how to upload data to IPFS and Swarm using Embark.</p>\n<h2 id=\"Deploying-using-the-upload-command\"><a href=\"#Deploying-using-the-upload-command\" class=\"headerlink\" title=\"Deploying using the upload command\"></a>Deploying using the <code>upload</code> command</h2><p>To upload our application to IPFS or Swarm, we first need to ensure we have correctly set up our <a href=\"/docs/storage_configuration.html\">storage configuration</a>. </p>\n<p>Once that is done we can use Embark’s <code>upload</code> command to take the assets located in the configured <code>buildDir</code> (read <a href=\"/docs/configuration.html\">here</a> for more information) and upload it to the configured storage network.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload</span><br></pre></td></tr></table></figure>\n\n<p>Similar to other available services that Embark supports, we can upload our data to different environments. The follow command uploads data using the <code>livenet</code> environment configuration:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload livenet</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Associating-an-ENS-domain\"><a href=\"#Associating-an-ENS-domain\" class=\"headerlink\" title=\"Associating an ENS domain\"></a>Associating an ENS domain</h2><p>We can associate our uploaded data to an ENS domain by using the <code>--ens</code> option. This will take the storage hash and upload it to an ENS domain.</p>\n<p>For example, the following command will upload our application to IPFS or Swarm and connect it with the <code>embark.eth</code> domain:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark upload --ens&#x3D;embark.etk</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Important:</strong></p>\n  <p><p>You need to be the owner of the given domain for this to work. Head over to <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">ens.domains</a> for more information.</p>\n</p>\n</div> \n\n\n\n\n"},{"title":"Storage APIs in JavaScript","layout":"docs","_content":"\nAs mentioned in our guide on [Using EmbarkJS](/docs/javascript_usage.html), Embark's companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let's a have closer look at what `EmbarkJS.Storage` has to offer.\n\n## Setting up EmbarkJS\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Storage.setProvider('swarm', options);\n```\n\nOptions are optional and if provided, will override the values in `storage.js`. Here's what a manual configuration could look like:\n\n```\nEmbarkJS.Storage.setProvider('ipfs', {\n  server: 'localhost',\n  port: '5001'\n});\n\n// OR\n\nEmbarkJS.Storage.setProvider('swarm', {\n  server: 'swarm-gateways.net',\n  port: '80'\n});\n```\n\n## Saving text data\n\nString data can be easily uploaded to the configured storage using `EmbarkJS.Storage.saveText()`. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:\n\n```\nEmbarkJS.Storage\n  .saveText(\"hello world\").then(hash => {\n    ...\n  });\n```\n\n## Retrieving text data\n\nIf we happen to have a storage hash, we can use to to retrieve the data that's associated to it using `EmbarkJS.Storage.get()` as shown below. Just like `saveText()` this method returns a Promise and resolves with the data the hash points to:\n\n```\nEmbarkJS.Storage.get(hash).then(content =>  {\n  ...\n});\n```\n\n## Upload binary data\n\nWe can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type `input[type=file]` and pass it the `uploadFile()` method. So assuming we had an input that looked something like this:\n\n```\n<input type=\"file\">\n```\n\nWe can upload its data like this: \n```\nconst input = document.querySelector('input[type=file\"]');\n\nEmbarkJS.Storage.uploadFile(input).then(hash => {\n  ...    \n})\n```\n\nSimilar to `saveText()` and `get()`, this method returns a Promise and can be used with JavaScript's `async/await` syntec as well.\n\n## Display data using URLs\n\nTo display any uploaded data in the browser, we can request a fully qualified URL using `EmbarkJS.Storage.getUrl()` and a dedicated storage hash:\n\n```\nEmbarkJS.Storage.getUrl(hash).then(url => {\n  ...\n});\n```\n\n## Checking for storage provider availability\n\nWe can check whether our configured storage provider is available or not using `isAvailable()`. This method resolves with either `true` or `false` depending on whether the service is available:\n\n```\nEmbarkJS.Storage.isAvailable().then(isAvailable => { \n  ...\n});\n```\n\n## IPNS registration\n\nWe can register IPFS hashes using IPNS using the `register()` method has shown below:\n\n```\nEmbarkJS.Storage.register(some_hash).then(name => {\n  console.log('Registred: ', name);\n});\n```\n\n{% notification info 'Note on registering hashes:' %}\nRegistering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.\n{% endnotification %}\n\nAnd of course, we can resolve hashes to their IPFS paths as well, using the `resolve()` method:\n\n```Javascript\nEmbarkJS.Storage.resolve(some_hash).then(name => {\n  console.log('Resolved ', name);\n});\n```\n\n","source":"docs/storage_javascript.md","raw":"title: Storage APIs in JavaScript\nlayout: docs\n---\n\nAs mentioned in our guide on [Using EmbarkJS](/docs/javascript_usage.html), Embark's companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let's a have closer look at what `EmbarkJS.Storage` has to offer.\n\n## Setting up EmbarkJS\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the `setProvider()` method:\n\n```\nEmbarkJS.Storage.setProvider('swarm', options);\n```\n\nOptions are optional and if provided, will override the values in `storage.js`. Here's what a manual configuration could look like:\n\n```\nEmbarkJS.Storage.setProvider('ipfs', {\n  server: 'localhost',\n  port: '5001'\n});\n\n// OR\n\nEmbarkJS.Storage.setProvider('swarm', {\n  server: 'swarm-gateways.net',\n  port: '80'\n});\n```\n\n## Saving text data\n\nString data can be easily uploaded to the configured storage using `EmbarkJS.Storage.saveText()`. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:\n\n```\nEmbarkJS.Storage\n  .saveText(\"hello world\").then(hash => {\n    ...\n  });\n```\n\n## Retrieving text data\n\nIf we happen to have a storage hash, we can use to to retrieve the data that's associated to it using `EmbarkJS.Storage.get()` as shown below. Just like `saveText()` this method returns a Promise and resolves with the data the hash points to:\n\n```\nEmbarkJS.Storage.get(hash).then(content =>  {\n  ...\n});\n```\n\n## Upload binary data\n\nWe can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type `input[type=file]` and pass it the `uploadFile()` method. So assuming we had an input that looked something like this:\n\n```\n<input type=\"file\">\n```\n\nWe can upload its data like this: \n```\nconst input = document.querySelector('input[type=file\"]');\n\nEmbarkJS.Storage.uploadFile(input).then(hash => {\n  ...    \n})\n```\n\nSimilar to `saveText()` and `get()`, this method returns a Promise and can be used with JavaScript's `async/await` syntec as well.\n\n## Display data using URLs\n\nTo display any uploaded data in the browser, we can request a fully qualified URL using `EmbarkJS.Storage.getUrl()` and a dedicated storage hash:\n\n```\nEmbarkJS.Storage.getUrl(hash).then(url => {\n  ...\n});\n```\n\n## Checking for storage provider availability\n\nWe can check whether our configured storage provider is available or not using `isAvailable()`. This method resolves with either `true` or `false` depending on whether the service is available:\n\n```\nEmbarkJS.Storage.isAvailable().then(isAvailable => { \n  ...\n});\n```\n\n## IPNS registration\n\nWe can register IPFS hashes using IPNS using the `register()` method has shown below:\n\n```\nEmbarkJS.Storage.register(some_hash).then(name => {\n  console.log('Registred: ', name);\n});\n```\n\n{% notification info 'Note on registering hashes:' %}\nRegistering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.\n{% endnotification %}\n\nAnd of course, we can resolve hashes to their IPFS paths as well, using the `resolve()` method:\n\n```Javascript\nEmbarkJS.Storage.resolve(some_hash).then(name => {\n  console.log('Resolved ', name);\n});\n```\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/storage_javascript.html","comments":1,"_id":"ck5ijm3rx001p7hegalb842ji","content":"<p>As mentioned in our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>, Embark’s companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let’s a have closer look at what <code>EmbarkJS.Storage</code> has to offer.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, options);</span><br></pre></td></tr></table></figure>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. Here’s what a manual configuration could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;ipfs&#39;, &#123;</span><br><span class=\"line\">  server: &#39;localhost&#39;,</span><br><span class=\"line\">  port: &#39;5001&#39;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">&#x2F;&#x2F; OR</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, &#123;</span><br><span class=\"line\">  server: &#39;swarm-gateways.net&#39;,</span><br><span class=\"line\">  port: &#39;80&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Saving-text-data\"><a href=\"#Saving-text-data\" class=\"headerlink\" title=\"Saving text data\"></a>Saving text data</h2><p>String data can be easily uploaded to the configured storage using <code>EmbarkJS.Storage.saveText()</code>. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage</span><br><span class=\"line\">  .saveText(&quot;hello world&quot;).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Retrieving-text-data\"><a href=\"#Retrieving-text-data\" class=\"headerlink\" title=\"Retrieving text data\"></a>Retrieving text data</h2><p>If we happen to have a storage hash, we can use to to retrieve the data that’s associated to it using <code>EmbarkJS.Storage.get()</code> as shown below. Just like <code>saveText()</code> this method returns a Promise and resolves with the data the hash points to:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.get(hash).then(content &#x3D;&gt;  &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Upload-binary-data\"><a href=\"#Upload-binary-data\" class=\"headerlink\" title=\"Upload binary data\"></a>Upload binary data</h2><p>We can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type <code>input[type=file]</code> and pass it the <code>uploadFile()</code> method. So assuming we had an input that looked something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;input type&#x3D;&quot;file&quot;&gt;</span><br></pre></td></tr></table></figure>\n\n<p>We can upload its data like this: </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const input &#x3D; document.querySelector(&#39;input[type&#x3D;file&quot;]&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.uploadFile(input).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...    </span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <code>saveText()</code> and <code>get()</code>, this method returns a Promise and can be used with JavaScript’s <code>async/await</code> syntec as well.</p>\n<h2 id=\"Display-data-using-URLs\"><a href=\"#Display-data-using-URLs\" class=\"headerlink\" title=\"Display data using URLs\"></a>Display data using URLs</h2><p>To display any uploaded data in the browser, we can request a fully qualified URL using <code>EmbarkJS.Storage.getUrl()</code> and a dedicated storage hash:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.getUrl(hash).then(url &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Checking-for-storage-provider-availability\"><a href=\"#Checking-for-storage-provider-availability\" class=\"headerlink\" title=\"Checking for storage provider availability\"></a>Checking for storage provider availability</h2><p>We can check whether our configured storage provider is available or not using <code>isAvailable()</code>. This method resolves with either <code>true</code> or <code>false</code> depending on whether the service is available:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.isAvailable().then(isAvailable &#x3D;&gt; &#123; </span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h2><p>We can register IPFS hashes using IPNS using the <code>register()</code> method has shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(some_hash).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;Registred: &#39;, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Note on registering hashes:</strong></p>\n  <p><p>Registering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.</p>\n</p>\n</div> \n\n\n\n<p>And of course, we can resolve hashes to their IPFS paths as well, using the <code>resolve()</code> method:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(some_hash).then(<span class=\"function\"><span class=\"params\">name</span> =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved '</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As mentioned in our guide on <a href=\"/docs/javascript_usage.html\">Using EmbarkJS</a>, Embark’s companion JavaScript library EmbarkJS comes with APIs specifically designed to make working with decentralized Storages a breeze. Let’s a have closer look at what <code>EmbarkJS.Storage</code> has to offer.</p>\n<h2 id=\"Setting-up-EmbarkJS\"><a href=\"#Setting-up-EmbarkJS\" class=\"headerlink\" title=\"Setting up EmbarkJS\"></a>Setting up EmbarkJS</h2><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if we are using EmbarkJS directly or wish to change the provider configuration at run time, we can do so using the <code>setProvider()</code> method:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, options);</span><br></pre></td></tr></table></figure>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. Here’s what a manual configuration could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;ipfs&#39;, &#123;</span><br><span class=\"line\">  server: &#39;localhost&#39;,</span><br><span class=\"line\">  port: &#39;5001&#39;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">&#x2F;&#x2F; OR</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.setProvider(&#39;swarm&#39;, &#123;</span><br><span class=\"line\">  server: &#39;swarm-gateways.net&#39;,</span><br><span class=\"line\">  port: &#39;80&#39;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Saving-text-data\"><a href=\"#Saving-text-data\" class=\"headerlink\" title=\"Saving text data\"></a>Saving text data</h2><p>String data can be easily uploaded to the configured storage using <code>EmbarkJS.Storage.saveText()</code>. This method takes any string and returns a Promise that resolves with a storage hash that can then be used to retrieve the data:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage</span><br><span class=\"line\">  .saveText(&quot;hello world&quot;).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Retrieving-text-data\"><a href=\"#Retrieving-text-data\" class=\"headerlink\" title=\"Retrieving text data\"></a>Retrieving text data</h2><p>If we happen to have a storage hash, we can use to to retrieve the data that’s associated to it using <code>EmbarkJS.Storage.get()</code> as shown below. Just like <code>saveText()</code> this method returns a Promise and resolves with the data the hash points to:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.get(hash).then(content &#x3D;&gt;  &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Upload-binary-data\"><a href=\"#Upload-binary-data\" class=\"headerlink\" title=\"Upload binary data\"></a>Upload binary data</h2><p>We can upload files as binary data using EmbarkJS as well. All we need is a reference to a DOM object of type <code>input[type=file]</code> and pass it the <code>uploadFile()</code> method. So assuming we had an input that looked something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;input type&#x3D;&quot;file&quot;&gt;</span><br></pre></td></tr></table></figure>\n\n<p>We can upload its data like this: </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const input &#x3D; document.querySelector(&#39;input[type&#x3D;file&quot;]&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">EmbarkJS.Storage.uploadFile(input).then(hash &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...    </span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <code>saveText()</code> and <code>get()</code>, this method returns a Promise and can be used with JavaScript’s <code>async/await</code> syntec as well.</p>\n<h2 id=\"Display-data-using-URLs\"><a href=\"#Display-data-using-URLs\" class=\"headerlink\" title=\"Display data using URLs\"></a>Display data using URLs</h2><p>To display any uploaded data in the browser, we can request a fully qualified URL using <code>EmbarkJS.Storage.getUrl()</code> and a dedicated storage hash:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.getUrl(hash).then(url &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Checking-for-storage-provider-availability\"><a href=\"#Checking-for-storage-provider-availability\" class=\"headerlink\" title=\"Checking for storage provider availability\"></a>Checking for storage provider availability</h2><p>We can check whether our configured storage provider is available or not using <code>isAvailable()</code>. This method resolves with either <code>true</code> or <code>false</code> depending on whether the service is available:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.isAvailable().then(isAvailable &#x3D;&gt; &#123; </span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h2><p>We can register IPFS hashes using IPNS using the <code>register()</code> method has shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(some_hash).then(name &#x3D;&gt; &#123;</span><br><span class=\"line\">  console.log(&#39;Registred: &#39;, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Note on registering hashes:</strong></p>\n  <p><p>Registering a hash with IPFS can take a bit of time, so keep that in mind when relying on these APIs.</p>\n</p>\n</div> \n\n\n\n<p>And of course, we can resolve hashes to their IPFS paths as well, using the <code>resolve()</code> method:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(some_hash).then(<span class=\"function\"><span class=\"params\">name</span> =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved '</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Application Structure","layout":"docs","_content":"\nOnce a [project is initialized](/docs/create_project.html), 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.\n\n**For Smart Contract developers**: This [guide covers](#Smart-Contracts-only-template-structure) projects that have been created with the [`--contracts-only` option](create_project.html#Creating-“contracts-only”-apps) as well.\n\n{% notification info 'Project structure with other tools' %}\nSince 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 [Angular CLI](https://cli.angular.io), [Vue CLI](https://cli.vuejs.org) or [Create React App](https://github.com/facebook/create-react-app).\n\nWhen 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.\n{% endnotification %}\n\n## Overview\n\nAn Embark project's structure is pretty straight forward. It contains a `config`, a `test`, an `app`, a `contracts` and a `dist` folder for their dedicated purposes. Most of them are self explanatory, but let's take a look at the overall file tree.\n\n``` plain\n├── app/\n├── contracts/\n├── config\n|   ├── blockchain.js\n|   └── contracts.js\n|   └── storage.js\n|   └── communication.js\n|   └── webserver.js\n└── test/\n└── dist/\n└── chains.json\n└── embark.json\n```\n\n### app/\n\nThis 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 `app`.\n\n### contracts/\n\nSmart 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.\n\n### config/\n\nThere 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.\n\n* **blockchain.js**\nThis 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.\n\n* **contracts.js**\nThis 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 [Configuring Contracts](contracts_configuration.html) for more details.\n\n* **storage.js**\nThis 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 [configuring decentralized storage](storage_configuration.html) for details configuring a decentralized storage system for our application.\n\n* **communication.js**\nSimilar 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 [message configuration](messages_configuration.html) to learn more about the available configuration options.\n\n* **webserver.js**\nThis 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.\n\n### test/\n\nEmbark lets us write tests for our Smart Contracts in JavaScript as well as [Solidity](https://github.com/ethereum/remix/tree/master/remix-tests). All of our tests are located here. To learn more about testing with Embark head over to our [guide on testing](contracts_testing.html).\n\n### dist/\n\nThe 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 `embark upload`.\n\n### chains.json\n\nThis 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\n\n### embark.json\n\nIn order to provide as much flexibility for our users as possible, Embark comes with an `embark.json` 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 [configuring embark.json](configuration.html).\n\n## Smart Contracts only template structure\n\nWhen creating a project using the `--contracts-only` option, the resulting structure is a little bit simpler. Let's take quick look:\n\n```\n├── contracts/\n└── test/\n└── dist/\n├── contracts.js\n└── chains.json\n└── embark.json\n```\n\nMost 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 `embark.json` configuration file if needed. Notice that this time, the `contracts.js` config file is in the root of the project's directory. This is because in the `embark.json` config file,`contracts` points to a path in the same folder.\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\nAs mentioned earlier, other services like storage and blockchain support can be easily re-enabled by changing them to path values as well.\n\nAwesome, 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!\n","source":"docs/structure.md","raw":"title: Application Structure\nlayout: docs\n---\n\nOnce a [project is initialized](/docs/create_project.html), 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.\n\n**For Smart Contract developers**: This [guide covers](#Smart-Contracts-only-template-structure) projects that have been created with the [`--contracts-only` option](create_project.html#Creating-“contracts-only”-apps) as well.\n\n{% notification info 'Project structure with other tools' %}\nSince 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 [Angular CLI](https://cli.angular.io), [Vue CLI](https://cli.vuejs.org) or [Create React App](https://github.com/facebook/create-react-app).\n\nWhen 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.\n{% endnotification %}\n\n## Overview\n\nAn Embark project's structure is pretty straight forward. It contains a `config`, a `test`, an `app`, a `contracts` and a `dist` folder for their dedicated purposes. Most of them are self explanatory, but let's take a look at the overall file tree.\n\n``` plain\n├── app/\n├── contracts/\n├── config\n|   ├── blockchain.js\n|   └── contracts.js\n|   └── storage.js\n|   └── communication.js\n|   └── webserver.js\n└── test/\n└── dist/\n└── chains.json\n└── embark.json\n```\n\n### app/\n\nThis 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 `app`.\n\n### contracts/\n\nSmart 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.\n\n### config/\n\nThere 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.\n\n* **blockchain.js**\nThis 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.\n\n* **contracts.js**\nThis 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 [Configuring Contracts](contracts_configuration.html) for more details.\n\n* **storage.js**\nThis 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 [configuring decentralized storage](storage_configuration.html) for details configuring a decentralized storage system for our application.\n\n* **communication.js**\nSimilar 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 [message configuration](messages_configuration.html) to learn more about the available configuration options.\n\n* **webserver.js**\nThis 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.\n\n### test/\n\nEmbark lets us write tests for our Smart Contracts in JavaScript as well as [Solidity](https://github.com/ethereum/remix/tree/master/remix-tests). All of our tests are located here. To learn more about testing with Embark head over to our [guide on testing](contracts_testing.html).\n\n### dist/\n\nThe 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 `embark upload`.\n\n### chains.json\n\nThis 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\n\n### embark.json\n\nIn order to provide as much flexibility for our users as possible, Embark comes with an `embark.json` 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 [configuring embark.json](configuration.html).\n\n## Smart Contracts only template structure\n\nWhen creating a project using the `--contracts-only` option, the resulting structure is a little bit simpler. Let's take quick look:\n\n```\n├── contracts/\n└── test/\n└── dist/\n├── contracts.js\n└── chains.json\n└── embark.json\n```\n\nMost 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 `embark.json` configuration file if needed. Notice that this time, the `contracts.js` config file is in the root of the project's directory. This is because in the `embark.json` config file,`contracts` points to a path in the same folder.\n\n```\n...\n\"config\": {\n  \"contracts\": \"contracts.js\",\n  \"blockchain\": false,\n  \"storage\": false,\n  \"communication\": false,\n  \"webserver\": false\n},\n...\n```\nAs mentioned earlier, other services like storage and blockchain support can be easily re-enabled by changing them to path values as well.\n\nAwesome, 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!\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/structure.html","comments":1,"_id":"ck5ijm3ry001q7heghat16oa6","content":"<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>\n<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>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Project structure with other tools</strong></p>\n  <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>\n<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>\n</p>\n</div> \n\n\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── app&#x2F;</span><br><span class=\"line\">├── contracts&#x2F;</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&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</span><br><span class=\"line\">└── chains.json</span><br><span class=\"line\">└── embark.json</span><br></pre></td></tr></table></figure>\n\n<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>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts/\"></a>contracts/</h3><p>Smart Contracts go here. Embark will automatically compile, deploy &amp; 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>\n<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>\n<ul>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n</ul>\n<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>\n<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>\n<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>\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</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>\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n<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>\n<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>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<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>\n<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>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Project structure with other tools</strong></p>\n  <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>\n<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>\n</p>\n</div> \n\n\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── app&#x2F;</span><br><span class=\"line\">├── contracts&#x2F;</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&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</span><br><span class=\"line\">└── chains.json</span><br><span class=\"line\">└── embark.json</span><br></pre></td></tr></table></figure>\n\n<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>\n<h3 id=\"contracts\"><a href=\"#contracts\" class=\"headerlink\" title=\"contracts/\"></a>contracts/</h3><p>Smart Contracts go here. Embark will automatically compile, deploy &amp; 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>\n<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>\n<ul>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n<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>\n</li>\n</ul>\n<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>\n<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>\n<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>\n<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>\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">└── dist&#x2F;</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>\n\n<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>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;config&quot;: &#123;</span><br><span class=\"line\">  &quot;contracts&quot;: &quot;contracts.js&quot;,</span><br><span class=\"line\">  &quot;blockchain&quot;: false,</span><br><span class=\"line\">  &quot;storage&quot;: false,</span><br><span class=\"line\">  &quot;communication&quot;: false,</span><br><span class=\"line\">  &quot;webserver&quot;: false</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n<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>\n<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>\n"},{"title":"Using the Cockpit Debugger","layout":"docs","_content":"\nCockpit comes with a very powerful integrated debugger similar to the one provided by the [Remix](https://remix.ethereum.org/) browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.\n\nIn this guide we'll take a look at how to use the debugger.\n\n## Entering the Debugger\n\nFirst things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.\n\nTherefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a \"Debug\" button. Clicking that button takes us to Cockpit's [Code Editor](/docs/cockpit_editor.html) in its debugging mode.\n\nProbably the most straight forward way to do that is entering the [Explorer](/docs/cockpit_explorer.html) and simply select any transaction that is a Smart Contract call.\n\n![Cockpit Enter Debugger](/assets/images/cockpit_enter_debugger.gif)\n\n## Debugger View\n\nOnce we enter the debugger mode inside the Code Editor we'll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). \n\n![Cockpit Debugger Controls](/assets/images/cockpit_debugger_controls.png)\n\nFrom left to right, the controls are:\n\n- **Jump to previous breakpoint** - Jumps to the previous available breakpoint within the current function\n- **Jump to next breakpoint** - Jumps to the next available breakpoint within the current function\n- **Step over previous function call** - Executes the previous function without stepping into it\n- **Step over next function call** - Executes the next function without stepping into it\n- **Step into previous function call** - Steps into the previous function call and sets temporary breakpoint\n- **Step into next function call** - Steps into the next function call and sets temporary breakpoint\n\nWhen using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. \n\n![Cockpit Using Debugger](/assets/images/cockpit_using_debugger.gif)\n\n## Debugger variables\n\nAs we're using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we're debugging. This is a very useful feature as we can see in real-time which variables contain which value.\n\nThe debugger provides variables in the following scopes:\n\n- **contract** - These are variable members of the Smart Contract instance itself.\n- **globals** - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current `block` as well as `msg`.\n- **locals** - These are parameter variables scoped to the function that is being debugged.\n","source":"docs/cockpit_debugger.md","raw":"title: Using the Cockpit Debugger\nlayout: docs\n---\n\nCockpit comes with a very powerful integrated debugger similar to the one provided by the [Remix](https://remix.ethereum.org/) browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.\n\nIn this guide we'll take a look at how to use the debugger.\n\n## Entering the Debugger\n\nFirst things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.\n\nTherefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a \"Debug\" button. Clicking that button takes us to Cockpit's [Code Editor](/docs/cockpit_editor.html) in its debugging mode.\n\nProbably the most straight forward way to do that is entering the [Explorer](/docs/cockpit_explorer.html) and simply select any transaction that is a Smart Contract call.\n\n![Cockpit Enter Debugger](/assets/images/cockpit_enter_debugger.gif)\n\n## Debugger View\n\nOnce we enter the debugger mode inside the Code Editor we'll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). \n\n![Cockpit Debugger Controls](/assets/images/cockpit_debugger_controls.png)\n\nFrom left to right, the controls are:\n\n- **Jump to previous breakpoint** - Jumps to the previous available breakpoint within the current function\n- **Jump to next breakpoint** - Jumps to the next available breakpoint within the current function\n- **Step over previous function call** - Executes the previous function without stepping into it\n- **Step over next function call** - Executes the next function without stepping into it\n- **Step into previous function call** - Steps into the previous function call and sets temporary breakpoint\n- **Step into next function call** - Steps into the next function call and sets temporary breakpoint\n\nWhen using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. \n\n![Cockpit Using Debugger](/assets/images/cockpit_using_debugger.gif)\n\n## Debugger variables\n\nAs we're using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we're debugging. This is a very useful feature as we can see in real-time which variables contain which value.\n\nThe debugger provides variables in the following scopes:\n\n- **contract** - These are variable members of the Smart Contract instance itself.\n- **globals** - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current `block` as well as `msg`.\n- **locals** - These are parameter variables scoped to the function that is being debugged.\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/cockpit_debugger.html","comments":1,"_id":"ck5ijm3ry001r7hegh8osc273","content":"<p>Cockpit comes with a very powerful integrated debugger similar to the one provided by the <a href=\"https://remix.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Remix</a> browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.</p>\n<p>In this guide we’ll take a look at how to use the debugger.</p>\n<h2 id=\"Entering-the-Debugger\"><a href=\"#Entering-the-Debugger\" class=\"headerlink\" title=\"Entering the Debugger\"></a>Entering the Debugger</h2><p>First things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.</p>\n<p>Therefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a “Debug” button. Clicking that button takes us to Cockpit’s <a href=\"/docs/cockpit_editor.html\">Code Editor</a> in its debugging mode.</p>\n<p>Probably the most straight forward way to do that is entering the <a href=\"/docs/cockpit_explorer.html\">Explorer</a> and simply select any transaction that is a Smart Contract call.</p>\n<p><img src=\"/assets/images/cockpit_enter_debugger.gif\" alt=\"Cockpit Enter Debugger\"></p>\n<h2 id=\"Debugger-View\"><a href=\"#Debugger-View\" class=\"headerlink\" title=\"Debugger View\"></a>Debugger View</h2><p>Once we enter the debugger mode inside the Code Editor we’ll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). </p>\n<p><img src=\"/assets/images/cockpit_debugger_controls.png\" alt=\"Cockpit Debugger Controls\"></p>\n<p>From left to right, the controls are:</p>\n<ul>\n<li><strong>Jump to previous breakpoint</strong> - Jumps to the previous available breakpoint within the current function</li>\n<li><strong>Jump to next breakpoint</strong> - Jumps to the next available breakpoint within the current function</li>\n<li><strong>Step over previous function call</strong> - Executes the previous function without stepping into it</li>\n<li><strong>Step over next function call</strong> - Executes the next function without stepping into it</li>\n<li><strong>Step into previous function call</strong> - Steps into the previous function call and sets temporary breakpoint</li>\n<li><strong>Step into next function call</strong> - Steps into the next function call and sets temporary breakpoint</li>\n</ul>\n<p>When using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. </p>\n<p><img src=\"/assets/images/cockpit_using_debugger.gif\" alt=\"Cockpit Using Debugger\"></p>\n<h2 id=\"Debugger-variables\"><a href=\"#Debugger-variables\" class=\"headerlink\" title=\"Debugger variables\"></a>Debugger variables</h2><p>As we’re using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we’re debugging. This is a very useful feature as we can see in real-time which variables contain which value.</p>\n<p>The debugger provides variables in the following scopes:</p>\n<ul>\n<li><strong>contract</strong> - These are variable members of the Smart Contract instance itself.</li>\n<li><strong>globals</strong> - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current <code>block</code> as well as <code>msg</code>.</li>\n<li><strong>locals</strong> - These are parameter variables scoped to the function that is being debugged.</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Cockpit comes with a very powerful integrated debugger similar to the one provided by the <a href=\"https://remix.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Remix</a> browser IDE. Having an integrated debugger experience right at our finger tips makes us more productive when building decentralized applications and improves our developer experience.</p>\n<p>In this guide we’ll take a look at how to use the debugger.</p>\n<h2 id=\"Entering-the-Debugger\"><a href=\"#Entering-the-Debugger\" class=\"headerlink\" title=\"Entering the Debugger\"></a>Entering the Debugger</h2><p>First things first, we need to know where to find the debugger and how to enter it. In Cockpit, basically any transaction that is a Smart Contract call can be debugged.</p>\n<p>Therefore, there are different entry points to the debugger. Most of the UI components that represent transaction come with a “Debug” button. Clicking that button takes us to Cockpit’s <a href=\"/docs/cockpit_editor.html\">Code Editor</a> in its debugging mode.</p>\n<p>Probably the most straight forward way to do that is entering the <a href=\"/docs/cockpit_explorer.html\">Explorer</a> and simply select any transaction that is a Smart Contract call.</p>\n<p><img src=\"/assets/images/cockpit_enter_debugger.gif\" alt=\"Cockpit Enter Debugger\"></p>\n<h2 id=\"Debugger-View\"><a href=\"#Debugger-View\" class=\"headerlink\" title=\"Debugger View\"></a>Debugger View</h2><p>Once we enter the debugger mode inside the Code Editor we’ll see that Cockpit provides us with several controls to and variable scopes to debug transactions. The controls are very similar to controls in other debugger tools (such as the browser devtools). </p>\n<p><img src=\"/assets/images/cockpit_debugger_controls.png\" alt=\"Cockpit Debugger Controls\"></p>\n<p>From left to right, the controls are:</p>\n<ul>\n<li><strong>Jump to previous breakpoint</strong> - Jumps to the previous available breakpoint within the current function</li>\n<li><strong>Jump to next breakpoint</strong> - Jumps to the next available breakpoint within the current function</li>\n<li><strong>Step over previous function call</strong> - Executes the previous function without stepping into it</li>\n<li><strong>Step over next function call</strong> - Executes the next function without stepping into it</li>\n<li><strong>Step into previous function call</strong> - Steps into the previous function call and sets temporary breakpoint</li>\n<li><strong>Step into next function call</strong> - Steps into the next function call and sets temporary breakpoint</li>\n</ul>\n<p>When using any of these controls, the breakpoint indicator in the source of the Smart Contract, as well as the variables in the Scopes view  will update as well. </p>\n<p><img src=\"/assets/images/cockpit_using_debugger.gif\" alt=\"Cockpit Using Debugger\"></p>\n<h2 id=\"Debugger-variables\"><a href=\"#Debugger-variables\" class=\"headerlink\" title=\"Debugger variables\"></a>Debugger variables</h2><p>As we’re using the debugger and step through function calls, Cockpit updates and outputs relevant variables within the scope of the function we’re debugging. This is a very useful feature as we can see in real-time which variables contain which value.</p>\n<p>The debugger provides variables in the following scopes:</p>\n<ul>\n<li><strong>contract</strong> - These are variable members of the Smart Contract instance itself.</li>\n<li><strong>globals</strong> - These are global variables available in the current scope of the function that is being debugged. This includes useful values such as the current <code>block</code> as well as <code>msg</code>.</li>\n<li><strong>locals</strong> - These are parameter variables scoped to the function that is being debugged.</li>\n</ul>\n"},{"title":"Troubleshooting","layout":"docs","_content":"In case you're experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn't help you solve your problem, try doing a search on [GitHub](https://github.com/embarklabs/embark/issues).\n\n## node-gyp problems\nnode-gyp can cause problems, because it requires a C++ compiler.\n\nIf you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).\n\nIf you still have problems and are on Windows, try the following:\n- run `npm config set msvs_version 2015` before `npm install`\n- Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.\n\n## EACCES / npm ERR Permission denied\n\nIssues typically occur if NodeJS and/or Embark are installed using `sudo`, avoid using it possible. There are [several options](https://docs.npmjs.com/getting-started/fixing-npm-permissions) to fix this. We recommend installing node using [NVM](https://github.com/creationix/nvm/blob/master/README.md)\n\n## Assuming Contract to be an interface\n\nThis warning happens when Embark can't deploy one of your Smart Contracts because the compiler did not return a bytecode.\n\nHere are some of the reasons:\n- If it inherits from an interface, it must have all the functions implemented\n- The contract's constructor must be `public`\n","source":"docs/troubleshooting.md","raw":"title: Troubleshooting\nlayout: docs\n---\nIn case you're experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn't help you solve your problem, try doing a search on [GitHub](https://github.com/embarklabs/embark/issues).\n\n## node-gyp problems\nnode-gyp can cause problems, because it requires a C++ compiler.\n\nIf you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).\n\nIf you still have problems and are on Windows, try the following:\n- run `npm config set msvs_version 2015` before `npm install`\n- Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.\n\n## EACCES / npm ERR Permission denied\n\nIssues typically occur if NodeJS and/or Embark are installed using `sudo`, avoid using it possible. There are [several options](https://docs.npmjs.com/getting-started/fixing-npm-permissions) to fix this. We recommend installing node using [NVM](https://github.com/creationix/nvm/blob/master/README.md)\n\n## Assuming Contract to be an interface\n\nThis warning happens when Embark can't deploy one of your Smart Contracts because the compiler did not return a bytecode.\n\nHere are some of the reasons:\n- If it inherits from an interface, it must have all the functions implemented\n- The contract's constructor must be `public`\n","date":"2020-01-19T20:56:53.015Z","updated":"2020-01-19T20:56:53.015Z","path":"docs/troubleshooting.html","_id":"ck5ijm3rz001s7hegffe14sf7","comments":1,"content":"<p>In case you’re experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn’t help you solve your problem, try doing a search on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a>.</p>\n<h2 id=\"node-gyp-problems\"><a href=\"#node-gyp-problems\" class=\"headerlink\" title=\"node-gyp problems\"></a>node-gyp problems</h2><p>node-gyp can cause problems, because it requires a C++ compiler.</p>\n<p>If you do have problems caused by it, first follow the installation steps for your OS <a href=\"https://github.com/nodejs/node-gyp#installation\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>If you still have problems and are on Windows, try the following:</p>\n<ul>\n<li>run <code>npm config set msvs_version 2015</code> before <code>npm install</code></li>\n<li>Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.</li>\n</ul>\n<h2 id=\"EACCES-npm-ERR-Permission-denied\"><a href=\"#EACCES-npm-ERR-Permission-denied\" class=\"headerlink\" title=\"EACCES / npm ERR Permission denied\"></a>EACCES / npm ERR Permission denied</h2><p>Issues typically occur if NodeJS and/or Embark are installed using <code>sudo</code>, avoid using it possible. There are <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">several options</a> to fix this. We recommend installing node using <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">NVM</a></p>\n<h2 id=\"Assuming-Contract-to-be-an-interface\"><a href=\"#Assuming-Contract-to-be-an-interface\" class=\"headerlink\" title=\"Assuming Contract to be an interface\"></a>Assuming Contract to be an interface</h2><p>This warning happens when Embark can’t deploy one of your Smart Contracts because the compiler did not return a bytecode.</p>\n<p>Here are some of the reasons:</p>\n<ul>\n<li>If it inherits from an interface, it must have all the functions implemented</li>\n<li>The contract’s constructor must be <code>public</code></li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In case you’re experiencing problems with using Embark, here is a list of solutions to some frequently encountered issues. If this page doesn’t help you solve your problem, try doing a search on <a href=\"https://github.com/embarklabs/embark/issues\" target=\"_blank\" rel=\"noopener\">GitHub</a>.</p>\n<h2 id=\"node-gyp-problems\"><a href=\"#node-gyp-problems\" class=\"headerlink\" title=\"node-gyp problems\"></a>node-gyp problems</h2><p>node-gyp can cause problems, because it requires a C++ compiler.</p>\n<p>If you do have problems caused by it, first follow the installation steps for your OS <a href=\"https://github.com/nodejs/node-gyp#installation\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>If you still have problems and are on Windows, try the following:</p>\n<ul>\n<li>run <code>npm config set msvs_version 2015</code> before <code>npm install</code></li>\n<li>Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.</li>\n</ul>\n<h2 id=\"EACCES-npm-ERR-Permission-denied\"><a href=\"#EACCES-npm-ERR-Permission-denied\" class=\"headerlink\" title=\"EACCES / npm ERR Permission denied\"></a>EACCES / npm ERR Permission denied</h2><p>Issues typically occur if NodeJS and/or Embark are installed using <code>sudo</code>, avoid using it possible. There are <a href=\"https://docs.npmjs.com/getting-started/fixing-npm-permissions\" target=\"_blank\" rel=\"noopener\">several options</a> to fix this. We recommend installing node using <a href=\"https://github.com/creationix/nvm/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">NVM</a></p>\n<h2 id=\"Assuming-Contract-to-be-an-interface\"><a href=\"#Assuming-Contract-to-be-an-interface\" class=\"headerlink\" title=\"Assuming Contract to be an interface\"></a>Assuming Contract to be an interface</h2><p>This warning happens when Embark can’t deploy one of your Smart Contracts because the compiler did not return a bytecode.</p>\n<p>Here are some of the reasons:</p>\n<ul>\n<li>If it inherits from an interface, it must have all the functions implemented</li>\n<li>The contract’s constructor must be <code>public</code></li>\n</ul>\n"},{"title":"Using Storages","layout":"docs","_content":"\n### Save Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Retrieve Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Upload a file\n\n<pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Display a file\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n### Check for storage provider availability\nThis will return true if the storage provider (IPFS or Swarm) is available and running. \n\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\nOptions are optional and if provided, will override the values in `storage.js`. \n\nFor example,\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n### IPNS registration\n\nYou can register your IPFS hash using IPNS.\n\n*It can take up to a minute to register.\n\n#### IPNS - Register\n\n```Javascript\nEmbarkJS.Storage.register('IPFS_hash', (err, name) => {\n    if(err){\n        console.log(\"Error registering\", err.message);\n        return;\n    }\n    console.log('Registred to the following hash:', name);\n});\n```\n\n#### IPNS - Resolve\n\n```Javascript\nEmbarkJS.Storage.resolve('IPNS_hash', (err, path) => {\n    if(err){\n        console.log(\"Error resolving\", err.message);\n        return;\n    }\n    console.log('Resolved to the following IPFS path:', name);\n});\n```\n\n","source":"docs/using_storages.md","raw":"title: Using Storages\nlayout: docs\n---\n\n### Save Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Retrieve Text/Data\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Upload a file\n\n<pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Display a file\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n### Check for storage provider availability\nThis will return true if the storage provider (IPFS or Swarm) is available and running. \n\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n### Setup\n\nBy default Embark will automatically initialize EmbarkJS with the provider configured at `config/storage.js`. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:\n\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\nOptions are optional and if provided, will override the values in `storage.js`. \n\nFor example,\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n### IPNS registration\n\nYou can register your IPFS hash using IPNS.\n\n*It can take up to a minute to register.\n\n#### IPNS - Register\n\n```Javascript\nEmbarkJS.Storage.register('IPFS_hash', (err, name) => {\n    if(err){\n        console.log(\"Error registering\", err.message);\n        return;\n    }\n    console.log('Registred to the following hash:', name);\n});\n```\n\n#### IPNS - Resolve\n\n```Javascript\nEmbarkJS.Storage.resolve('IPNS_hash', (err, path) => {\n    if(err){\n        console.log(\"Error resolving\", err.message);\n        return;\n    }\n    console.log('Resolved to the following IPFS path:', name);\n});\n```\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/using_storages.html","comments":1,"_id":"ck5ijm3s0001t7heghjkv38tk","content":"<h3 id=\"Save-Text-Data\"><a href=\"#Save-Text-Data\" class=\"headerlink\" title=\"Save Text/Data\"></a>Save Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Retrieve-Text-Data\"><a href=\"#Retrieve-Text-Data\" class=\"headerlink\" title=\"Retrieve Text/Data\"></a>Retrieve Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Upload-a-file\"><a href=\"#Upload-a-file\" class=\"headerlink\" title=\"Upload a file\"></a>Upload a file</h3><pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Display-a-file\"><a href=\"#Display-a-file\" class=\"headerlink\" title=\"Display a file\"></a>Display a file</h3><pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n<h3 id=\"Check-for-storage-provider-availability\"><a href=\"#Check-for-storage-provider-availability\" class=\"headerlink\" title=\"Check for storage provider availability\"></a>Check for storage provider availability</h3><p>This will return true if the storage provider (IPFS or Swarm) is available and running. </p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. </p>\n<p>For example,</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n<h3 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h3><p>You can register your IPFS hash using IPNS.</p>\n<p>*It can take up to a minute to register.</p>\n<h4 id=\"IPNS-Register\"><a href=\"#IPNS-Register\" class=\"headerlink\" title=\"IPNS - Register\"></a>IPNS - Register</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(<span class=\"string\">'IPFS_hash'</span>, (err, name) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error registering\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Registred to the following hash:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"IPNS-Resolve\"><a href=\"#IPNS-Resolve\" class=\"headerlink\" title=\"IPNS - Resolve\"></a>IPNS - Resolve</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(<span class=\"string\">'IPNS_hash'</span>, (err, path) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error resolving\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved to the following IPFS path:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h3 id=\"Save-Text-Data\"><a href=\"#Save-Text-Data\" class=\"headerlink\" title=\"Save Text/Data\"></a>Save Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.saveText(\"hello world\")\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS saveText Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Retrieve-Text-Data\"><a href=\"#Retrieve-Text-Data\" class=\"headerlink\" title=\"Retrieve Text/Data\"></a>Retrieve Text/Data</h3><pre><code class=\"javascript\">EmbarkJS.Storage.get(hash)\n  .then(function(content) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS get Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Upload-a-file\"><a href=\"#Upload-a-file\" class=\"headerlink\" title=\"Upload a file\"></a>Upload a file</h3><pre><code class=\"xml\">&lt;input type=&quot;file&quot;&gt;\n</code></pre>\n<br>\n<pre><code class=\"javascript\">var input = $(\"input[type=file\"]);\nEmbarkJS.Storage.uploadFile(input)\n  .then(function(hash) {})\n  .catch(function(err) {\n      if(err){\n        console.log(\"IPFS uploadFile Error => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Display-a-file\"><a href=\"#Display-a-file\" class=\"headerlink\" title=\"Display a file\"></a>Display a file</h3><pre><code class=\"javascript\">EmbarkJS.Storage.getUrl(hash);\n</code></pre>\n\n<h3 id=\"Check-for-storage-provider-availability\"><a href=\"#Check-for-storage-provider-availability\" class=\"headerlink\" title=\"Check for storage provider availability\"></a>Check for storage provider availability</h3><p>This will return true if the storage provider (IPFS or Swarm) is available and running. </p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.isAvailable()\n  .then(isAvailable => { alert(`The storage provider is: ${isAvailable ? 'available' : 'not available'}`) })\n  .catch(function(err) {\n      if(err){\n        console.log(\"Error getting storage provider availability => \" + err.message);\n      }\n  });\n</code></pre>\n\n<h3 id=\"Setup\"><a href=\"#Setup\" class=\"headerlink\" title=\"Setup\"></a>Setup</h3><p>By default Embark will automatically initialize EmbarkJS with the provider configured at <code>config/storage.js</code>. However if you are using EmbarkJS directly or wish to change the provider configuration on the fly you can do:</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('swarm', options);\n</code></pre>\n\n<p>Options are optional and if provided, will override the values in <code>storage.js</code>. </p>\n<p>For example,</p>\n<pre><code class=\"javascript\">EmbarkJS.Storage.setProvider('ipfs', {server: 'localhost', port: '5001'});\n// OR\nEmbarkJS.Storage.setProvider('swarm', {server: 'swarm-gateways.net', port: '80'});\n</code></pre>\n\n<h3 id=\"IPNS-registration\"><a href=\"#IPNS-registration\" class=\"headerlink\" title=\"IPNS registration\"></a>IPNS registration</h3><p>You can register your IPFS hash using IPNS.</p>\n<p>*It can take up to a minute to register.</p>\n<h4 id=\"IPNS-Register\"><a href=\"#IPNS-Register\" class=\"headerlink\" title=\"IPNS - Register\"></a>IPNS - Register</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.register(<span class=\"string\">'IPFS_hash'</span>, (err, name) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error registering\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Registred to the following hash:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"IPNS-Resolve\"><a href=\"#IPNS-Resolve\" class=\"headerlink\" title=\"IPNS - Resolve\"></a>IPNS - Resolve</h4><figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.Storage.resolve(<span class=\"string\">'IPNS_hash'</span>, (err, path) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span>(err)&#123;</span><br><span class=\"line\">        <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Error resolving\"</span>, err.message);</span><br><span class=\"line\">        <span class=\"keyword\">return</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(<span class=\"string\">'Resolved to the following IPFS path:'</span>, name);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n"},{"title":"Using the Interactive Console","layout":"docs","_content":"\nAnother powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we'll take a closer look at how to work with it.\n\n## Starting the console\n\nStarting Embark's interactive console is just a matter of running\n\n```\n$ embark console\n```\n\nVery similar to `embark run`, Embark will compile and deploy your application, however, it won't spin up a webserver for your application. After that, you'll see a prompt sitting IDLE, waiting for you to enter commands.\n\n```\nEmbark (development) > _\n```\n\nThe console will surface the environment we're running Embark in at the moment. If we don't specify an environment, Embark will default to `development`, as discussed in our [guide on environments](/docs/environments.html).\n\nFrom now on, we can keep entering commands and have them processed by Embark until we're done with whatever we're aiming to do.\n\nLet's take a look at a few them!\n\n## The `help` command\n\nProbably one of the most important commands is the console's `help` command. This will give us some useful information about what we can and what we can not do inside the interactive console.\n\nEnter the following command and see for yourself:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThis is a good time to read a bit through the available commands and familiarize yourself with them.\n\n## Enabling and disabling process logs\n\nBy default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the `log` command.\n\nSimply specify the process and turn it `on` or `off`:\n\n```\nEmbark (development) > log ipfs off\n```\n\n## Accessing Smart Contract instances\n\nOne thing that the console’s help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nThis turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract's are available within the interactive console, but also 3rd-party Smart Contracts that [have been configured](/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts) accordingly.\n\n## Calling asynchronous APIs\n\nThe interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.\n\nThis applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use `Promise`-based APIs, making them a great fit for JavaScript's `async/await` syntax.\n\n`await` is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let's us wait for a Promise to resolve and simply returns the result.\n\nIn both the dashboard's console and the standalone console, you can use `await` for `Promise`-based calls:\n\n```\nEmbark (development) > await SimpleStorage.methods.get().call()<ENTER>\n```\n\nThis works with other objects as well. The following example outputs available accounts emitted by the `web3` object:\n\n```\nEmbark (development) > await web3.eth.getAccounts()<ENTER>\n```\n\n## Installing plugins\n\nWe can also install Embark plugins using the interactive console. This can be done using the `plugin` command.\n\n```\nEmbark (development) > plugin install embark-status\n```\n\nThis will install and load the plugin, without the need to restart Embark.\n\n## Retrieving authentication tokens for Cockpit\n\nWhen using [Cockpit](/docs/cockpit_introduction.html), Embark's companion web interface, it's necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.\n\nTo get a valid token, use the `token` command, which will output the token and copy it to your clipboard:\n\n```\nEmbark (development) > token<ENTER>\n```\n\n## Registering custom commands\n\nIt's possible to extend Embark's interactive console to include custom commands. Head over to our [Plugin guide](/docs/plugin_reference.html#registerConsoleCommand-options) which discusses this in more detail!\n\n## Dashboard or interactive console?\n\nIn our section on [using the dashboard](/docs/dashboard.html) we've slightly mentioned that Embark's dashboard comes with a console as well and you might wonder, why there's a separate command to start an interactive console in standalone mode.\n\nThis is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:\n\n- You want to copy & paste output from Embark (this doesn't work well within the dashboard)\n- You already have an existing Embark instance running and want to connect to it using the interactive console\n\nAs the last point suggests, running `embark console` when Embark is already running on your machine, it'll connect to that existing process,\nletting you interact with an already deployed application.\n\n","source":"docs/using_the_console.md","raw":"title: Using the Interactive Console\nlayout: docs\n---\n\nAnother powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we'll take a closer look at how to work with it.\n\n## Starting the console\n\nStarting Embark's interactive console is just a matter of running\n\n```\n$ embark console\n```\n\nVery similar to `embark run`, Embark will compile and deploy your application, however, it won't spin up a webserver for your application. After that, you'll see a prompt sitting IDLE, waiting for you to enter commands.\n\n```\nEmbark (development) > _\n```\n\nThe console will surface the environment we're running Embark in at the moment. If we don't specify an environment, Embark will default to `development`, as discussed in our [guide on environments](/docs/environments.html).\n\nFrom now on, we can keep entering commands and have them processed by Embark until we're done with whatever we're aiming to do.\n\nLet's take a look at a few them!\n\n## The `help` command\n\nProbably one of the most important commands is the console's `help` command. This will give us some useful information about what we can and what we can not do inside the interactive console.\n\nEnter the following command and see for yourself:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThis is a good time to read a bit through the available commands and familiarize yourself with them.\n\n## Enabling and disabling process logs\n\nBy default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the `log` command.\n\nSimply specify the process and turn it `on` or `off`:\n\n```\nEmbark (development) > log ipfs off\n```\n\n## Accessing Smart Contract instances\n\nOne thing that the console’s help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nThis turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract's are available within the interactive console, but also 3rd-party Smart Contracts that [have been configured](/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts) accordingly.\n\n## Calling asynchronous APIs\n\nThe interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.\n\nThis applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use `Promise`-based APIs, making them a great fit for JavaScript's `async/await` syntax.\n\n`await` is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let's us wait for a Promise to resolve and simply returns the result.\n\nIn both the dashboard's console and the standalone console, you can use `await` for `Promise`-based calls:\n\n```\nEmbark (development) > await SimpleStorage.methods.get().call()<ENTER>\n```\n\nThis works with other objects as well. The following example outputs available accounts emitted by the `web3` object:\n\n```\nEmbark (development) > await web3.eth.getAccounts()<ENTER>\n```\n\n## Installing plugins\n\nWe can also install Embark plugins using the interactive console. This can be done using the `plugin` command.\n\n```\nEmbark (development) > plugin install embark-status\n```\n\nThis will install and load the plugin, without the need to restart Embark.\n\n## Retrieving authentication tokens for Cockpit\n\nWhen using [Cockpit](/docs/cockpit_introduction.html), Embark's companion web interface, it's necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.\n\nTo get a valid token, use the `token` command, which will output the token and copy it to your clipboard:\n\n```\nEmbark (development) > token<ENTER>\n```\n\n## Registering custom commands\n\nIt's possible to extend Embark's interactive console to include custom commands. Head over to our [Plugin guide](/docs/plugin_reference.html#registerConsoleCommand-options) which discusses this in more detail!\n\n## Dashboard or interactive console?\n\nIn our section on [using the dashboard](/docs/dashboard.html) we've slightly mentioned that Embark's dashboard comes with a console as well and you might wonder, why there's a separate command to start an interactive console in standalone mode.\n\nThis is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:\n\n- You want to copy & paste output from Embark (this doesn't work well within the dashboard)\n- You already have an existing Embark instance running and want to connect to it using the interactive console\n\nAs the last point suggests, running `embark console` when Embark is already running on your machine, it'll connect to that existing process,\nletting you interact with an already deployed application.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/using_the_console.html","comments":1,"_id":"ck5ijm3s0001u7heg86nh4d80","content":"<p>Another powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we’ll take a closer look at how to work with it.</p>\n<h2 id=\"Starting-the-console\"><a href=\"#Starting-the-console\" class=\"headerlink\" title=\"Starting the console\"></a>Starting the console</h2><p>Starting Embark’s interactive console is just a matter of running</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark console</span><br></pre></td></tr></table></figure>\n\n<p>Very similar to <code>embark run</code>, Embark will compile and deploy your application, however, it won’t spin up a webserver for your application. After that, you’ll see a prompt sitting IDLE, waiting for you to enter commands.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; _</span><br></pre></td></tr></table></figure>\n\n<p>The console will surface the environment we’re running Embark in at the moment. If we don’t specify an environment, Embark will default to <code>development</code>, as discussed in our <a href=\"/docs/environments.html\">guide on environments</a>.</p>\n<p>From now on, we can keep entering commands and have them processed by Embark until we’re done with whatever we’re aiming to do.</p>\n<p>Let’s take a look at a few them!</p>\n<h2 id=\"The-help-command\"><a href=\"#The-help-command\" class=\"headerlink\" title=\"The help command\"></a>The <code>help</code> command</h2><p>Probably one of the most important commands is the console’s <code>help</code> command. This will give us some useful information about what we can and what we can not do inside the interactive console.</p>\n<p>Enter the following command and see for yourself:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This is a good time to read a bit through the available commands and familiarize yourself with them.</p>\n<h2 id=\"Enabling-and-disabling-process-logs\"><a href=\"#Enabling-and-disabling-process-logs\" class=\"headerlink\" title=\"Enabling and disabling process logs\"></a>Enabling and disabling process logs</h2><p>By default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the <code>log</code> command.</p>\n<p>Simply specify the process and turn it <code>on</code> or <code>off</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; log ipfs off</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract’s are available within the interactive console, but also 3rd-party Smart Contracts that <a href=\"/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts\">have been configured</a> accordingly.</p>\n<h2 id=\"Calling-asynchronous-APIs\"><a href=\"#Calling-asynchronous-APIs\" class=\"headerlink\" title=\"Calling asynchronous APIs\"></a>Calling asynchronous APIs</h2><p>The interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.</p>\n<p>This applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use <code>Promise</code>-based APIs, making them a great fit for JavaScript’s <code>async/await</code> syntax.</p>\n<p><code>await</code> is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let’s us wait for a Promise to resolve and simply returns the result.</p>\n<p>In both the dashboard’s console and the standalone console, you can use <code>await</code> for <code>Promise</code>-based calls:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.methods.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This works with other objects as well. The following example outputs available accounts emitted by the <code>web3</code> object:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await web3.eth.getAccounts()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-plugins\"><a href=\"#Installing-plugins\" class=\"headerlink\" title=\"Installing plugins\"></a>Installing plugins</h2><p>We can also install Embark plugins using the interactive console. This can be done using the <code>plugin</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; plugin install embark-status</span><br></pre></td></tr></table></figure>\n\n<p>This will install and load the plugin, without the need to restart Embark.</p>\n<h2 id=\"Retrieving-authentication-tokens-for-Cockpit\"><a href=\"#Retrieving-authentication-tokens-for-Cockpit\" class=\"headerlink\" title=\"Retrieving authentication tokens for Cockpit\"></a>Retrieving authentication tokens for Cockpit</h2><p>When using <a href=\"/docs/cockpit_introduction.html\">Cockpit</a>, Embark’s companion web interface, it’s necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.</p>\n<p>To get a valid token, use the <code>token</code> command, which will output the token and copy it to your clipboard:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; token&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-custom-commands\"><a href=\"#Registering-custom-commands\" class=\"headerlink\" title=\"Registering custom commands\"></a>Registering custom commands</h2><p>It’s possible to extend Embark’s interactive console to include custom commands. Head over to our <a href=\"/docs/plugin_reference.html#registerConsoleCommand-options\">Plugin guide</a> which discusses this in more detail!</p>\n<h2 id=\"Dashboard-or-interactive-console\"><a href=\"#Dashboard-or-interactive-console\" class=\"headerlink\" title=\"Dashboard or interactive console?\"></a>Dashboard or interactive console?</h2><p>In our section on <a href=\"/docs/dashboard.html\">using the dashboard</a> we’ve slightly mentioned that Embark’s dashboard comes with a console as well and you might wonder, why there’s a separate command to start an interactive console in standalone mode.</p>\n<p>This is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:</p>\n<ul>\n<li>You want to copy &amp; paste output from Embark (this doesn’t work well within the dashboard)</li>\n<li>You already have an existing Embark instance running and want to connect to it using the interactive console</li>\n</ul>\n<p>As the last point suggests, running <code>embark console</code> when Embark is already running on your machine, it’ll connect to that existing process,<br>letting you interact with an already deployed application.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Another powerful feature of Embark is its interactive console. It helps you debugging your application and lets you talk to your already deployed Smart Contracts. In this guide we’ll take a closer look at how to work with it.</p>\n<h2 id=\"Starting-the-console\"><a href=\"#Starting-the-console\" class=\"headerlink\" title=\"Starting the console\"></a>Starting the console</h2><p>Starting Embark’s interactive console is just a matter of running</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark console</span><br></pre></td></tr></table></figure>\n\n<p>Very similar to <code>embark run</code>, Embark will compile and deploy your application, however, it won’t spin up a webserver for your application. After that, you’ll see a prompt sitting IDLE, waiting for you to enter commands.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; _</span><br></pre></td></tr></table></figure>\n\n<p>The console will surface the environment we’re running Embark in at the moment. If we don’t specify an environment, Embark will default to <code>development</code>, as discussed in our <a href=\"/docs/environments.html\">guide on environments</a>.</p>\n<p>From now on, we can keep entering commands and have them processed by Embark until we’re done with whatever we’re aiming to do.</p>\n<p>Let’s take a look at a few them!</p>\n<h2 id=\"The-help-command\"><a href=\"#The-help-command\" class=\"headerlink\" title=\"The help command\"></a>The <code>help</code> command</h2><p>Probably one of the most important commands is the console’s <code>help</code> command. This will give us some useful information about what we can and what we can not do inside the interactive console.</p>\n<p>Enter the following command and see for yourself:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This is a good time to read a bit through the available commands and familiarize yourself with them.</p>\n<h2 id=\"Enabling-and-disabling-process-logs\"><a href=\"#Enabling-and-disabling-process-logs\" class=\"headerlink\" title=\"Enabling and disabling process logs\"></a>Enabling and disabling process logs</h2><p>By default, Embark will log output from all processes into the console. Since this can get quite verbose sometimes, we can disable logging for certain processes using the <code>log</code> command.</p>\n<p>Simply specify the process and turn it <code>on</code> or <code>off</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; log ipfs off</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This turns out to be very useful when inspecting available methods and properties on already deployed Smart Contracts. Notice that not only your own Smart Contract’s are available within the interactive console, but also 3rd-party Smart Contracts that <a href=\"/docs/contracts_configuration.html#Referencing-already-deployed-Smart-Contracts\">have been configured</a> accordingly.</p>\n<h2 id=\"Calling-asynchronous-APIs\"><a href=\"#Calling-asynchronous-APIs\" class=\"headerlink\" title=\"Calling asynchronous APIs\"></a>Calling asynchronous APIs</h2><p>The interactive console comes with its own JavaScript execution context, meaning we can actually run JavaScript code from inside the console.</p>\n<p>This applies to synchronous as well as asynchronous APIs, which is very common when dealing with Smart Contract instances. There is different ways to use asynchronous APIs in JavaScript. Smart Contract instances tend to use <code>Promise</code>-based APIs, making them a great fit for JavaScript’s <code>async/await</code> syntax.</p>\n<p><code>await</code> is an ES2015 keyword that is very useful when dealing with asynchronous APIs. It let’s us wait for a Promise to resolve and simply returns the result.</p>\n<p>In both the dashboard’s console and the standalone console, you can use <code>await</code> for <code>Promise</code>-based calls:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.methods.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>This works with other objects as well. The following example outputs available accounts emitted by the <code>web3</code> object:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await web3.eth.getAccounts()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Installing-plugins\"><a href=\"#Installing-plugins\" class=\"headerlink\" title=\"Installing plugins\"></a>Installing plugins</h2><p>We can also install Embark plugins using the interactive console. This can be done using the <code>plugin</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; plugin install embark-status</span><br></pre></td></tr></table></figure>\n\n<p>This will install and load the plugin, without the need to restart Embark.</p>\n<h2 id=\"Retrieving-authentication-tokens-for-Cockpit\"><a href=\"#Retrieving-authentication-tokens-for-Cockpit\" class=\"headerlink\" title=\"Retrieving authentication tokens for Cockpit\"></a>Retrieving authentication tokens for Cockpit</h2><p>When using <a href=\"/docs/cockpit_introduction.html\">Cockpit</a>, Embark’s companion web interface, it’s necessary to authenticate through the web browser with the Embark process we want Cockpit to connect to. Embark and Cockpit use an authentication token based system for that. All we have to do is entering a valid token in the authentication mask, or append it as a query parameter to Cockpit.</p>\n<p>To get a valid token, use the <code>token</code> command, which will output the token and copy it to your clipboard:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; token&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Registering-custom-commands\"><a href=\"#Registering-custom-commands\" class=\"headerlink\" title=\"Registering custom commands\"></a>Registering custom commands</h2><p>It’s possible to extend Embark’s interactive console to include custom commands. Head over to our <a href=\"/docs/plugin_reference.html#registerConsoleCommand-options\">Plugin guide</a> which discusses this in more detail!</p>\n<h2 id=\"Dashboard-or-interactive-console\"><a href=\"#Dashboard-or-interactive-console\" class=\"headerlink\" title=\"Dashboard or interactive console?\"></a>Dashboard or interactive console?</h2><p>In our section on <a href=\"/docs/dashboard.html\">using the dashboard</a> we’ve slightly mentioned that Embark’s dashboard comes with a console as well and you might wonder, why there’s a separate command to start an interactive console in standalone mode.</p>\n<p>This is a very valid question, so here are a few scenarios where you might want to prefer running the interactive console over the dashboard:</p>\n<ul>\n<li>You want to copy &amp; paste output from Embark (this doesn’t work well within the dashboard)</li>\n<li>You already have an existing Embark instance running and want to connect to it using the interactive console</li>\n</ul>\n<p>As the last point suggests, running <code>embark console</code> when Embark is already running on your machine, it’ll connect to that existing process,<br>letting you interact with an already deployed application.</p>\n"},{"title":"Vyper","_content":"\nAs of Embark 3.0, Vyper is supported out of the box. You only need to [install the compiler](https://vyper.readthedocs.io/en/latest/installing-vyper.html) yourself.\n\nEmbark's Vyper support means that any files with the extension `.vy` in the contracts directory will be deployed with the file name as the contract name, so, for instance, `contracts/Crowdfunding.vy` will be deployed as `Crowdfunding`.\n\nTo see Vyper in action, generate a new demo project by running:\n\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\nInside the demo's root directory, remove `contracts/simple_storage.sol` and replace it with this file instead:\n\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\nThis has exactly the same logic as its Solidity counterpart, so the tests will still pass:\n\n<pre><code class=\"shell\">$ embark test</code></pre>\n\nThe full documentation for Vyper can be found [here](https://vyper.readthedocs.io/en/latest/vyper-by-example.html)\n","source":"docs/vyper.md","raw":"title: Vyper\n---\n\nAs of Embark 3.0, Vyper is supported out of the box. You only need to [install the compiler](https://vyper.readthedocs.io/en/latest/installing-vyper.html) yourself.\n\nEmbark's Vyper support means that any files with the extension `.vy` in the contracts directory will be deployed with the file name as the contract name, so, for instance, `contracts/Crowdfunding.vy` will be deployed as `Crowdfunding`.\n\nTo see Vyper in action, generate a new demo project by running:\n\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\nInside the demo's root directory, remove `contracts/simple_storage.sol` and replace it with this file instead:\n\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\nThis has exactly the same logic as its Solidity counterpart, so the tests will still pass:\n\n<pre><code class=\"shell\">$ embark test</code></pre>\n\nThe full documentation for Vyper can be found [here](https://vyper.readthedocs.io/en/latest/vyper-by-example.html)\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/vyper.html","comments":1,"layout":"page","_id":"ck5ijm3s1001v7heg068n1gik","content":"<p>As of Embark 3.0, Vyper is supported out of the box. You only need to <a href=\"https://vyper.readthedocs.io/en/latest/installing-vyper.html\" target=\"_blank\" rel=\"noopener\">install the compiler</a> yourself.</p>\n<p>Embark’s Vyper support means that any files with the extension <code>.vy</code> in the contracts directory will be deployed with the file name as the contract name, so, for instance, <code>contracts/Crowdfunding.vy</code> will be deployed as <code>Crowdfunding</code>.</p>\n<p>To see Vyper in action, generate a new demo project by running:</p>\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\n<p>Inside the demo’s root directory, remove <code>contracts/simple_storage.sol</code> and replace it with this file instead:</p>\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\n<p>This has exactly the same logic as its Solidity counterpart, so the tests will still pass:</p>\n<pre><code class=\"shell\">$ embark test</code></pre>\n\n<p>The full documentation for Vyper can be found <a href=\"https://vyper.readthedocs.io/en/latest/vyper-by-example.html\" target=\"_blank\" rel=\"noopener\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As of Embark 3.0, Vyper is supported out of the box. You only need to <a href=\"https://vyper.readthedocs.io/en/latest/installing-vyper.html\" target=\"_blank\" rel=\"noopener\">install the compiler</a> yourself.</p>\n<p>Embark’s Vyper support means that any files with the extension <code>.vy</code> in the contracts directory will be deployed with the file name as the contract name, so, for instance, <code>contracts/Crowdfunding.vy</code> will be deployed as <code>Crowdfunding</code>.</p>\n<p>To see Vyper in action, generate a new demo project by running:</p>\n<pre><code class=\"shell\">$ embark demo</code></pre>\n\n<p>Inside the demo’s root directory, remove <code>contracts/simple_storage.sol</code> and replace it with this file instead:</p>\n<pre><code class=\"python\"># contracts/SimpleStorage.vy\nstoredData: public(uint256)\n\n@public\ndef __init__(initialValue: uint256):\n  self.storedData = initialValue\n\n@public\n@payable\ndef set(x: uint256):\n  self.storedData = x\n\n@public\ndef get() -> uint256:\n  return self.storedData\n</code></pre>\n\n<p>This has exactly the same logic as its Solidity counterpart, so the tests will still pass:</p>\n<pre><code class=\"shell\">$ embark test</code></pre>\n\n<p>The full documentation for Vyper can be found <a href=\"https://vyper.readthedocs.io/en/latest/vyper-by-example.html\" target=\"_blank\" rel=\"noopener\">here</a></p>\n"},{"title":"Web3.js Documentation","_content":"\nThe documentation for Web3.js can be found [here](https://web3js.readthedocs.io/en/v1.2.1/)\n","source":"docs/web3js.md","raw":"title: Web3.js Documentation\n---\n\nThe documentation for Web3.js can be found [here](https://web3js.readthedocs.io/en/v1.2.1/)\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/web3js.html","comments":1,"layout":"page","_id":"ck5ijm3s1001w7heg18r26xcv","content":"<p>The documentation for Web3.js can be found <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The documentation for Web3.js can be found <a href=\"https://web3js.readthedocs.io/en/v1.2.1/\" target=\"_blank\" rel=\"noopener\">here</a></p>\n"},{"title":"Integrating with Webpack","_content":"\nTODO\n\n","source":"docs/webpack.md","raw":"title: Integrating with Webpack\n---\n\nTODO\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/webpack.html","comments":1,"layout":"page","_id":"ck5ijm3s2001x7heg2sqyh4ii","content":"<p>TODO</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>TODO</p>\n"},{"title":"What is a DApp","_content":"\n## What is a DApp\n\nA Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.\n\n","source":"docs/what_dapp.md","raw":"title: What is a DApp\n---\n\n## What is a DApp\n\nA Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/what_dapp.html","comments":1,"layout":"page","_id":"ck5ijm3s2001y7hegb6i804bx","content":"<h2 id=\"What-is-a-DApp\"><a href=\"#What-is-a-DApp\" class=\"headerlink\" title=\"What is a DApp\"></a>What is a DApp</h2><p>A Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h2 id=\"What-is-a-DApp\"><a href=\"#What-is-a-DApp\" class=\"headerlink\" title=\"What is a DApp\"></a>What is a DApp</h2><p>A Decentralized Application is a serverless html5 application that uses one or more decentralized technologies.</p>\n"},{"title":"Working with Name Systems","layout":"docs","_content":"\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n### Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n### Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\nGuess what, `EmbarkJS.Names.lookup` also returns a Promise in case you prefer using those over callbacks:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n### Register a sub-domain\n\nThis enables you to register some others sub-domains.\nThis is mostly for demo purposes as it is only available in development.\n\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n","source":"docs/working_with_name_systems.md","raw":"title: Working with Name Systems\nlayout: docs\n---\n\nIn order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it's a good practice to take advantage of the [Ethereum Name Service](https://ens.domains/) and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.\n\nLet's take a look at how this is done.\n\n### Resolving a Domain to an address\n\nResolving a domain to its corresponding address is done by calling `EmbarkJS.Names.resolve`, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\nIf you prefer using Promises, Embark has got you covered! `EmbarkJS.Names.resolve` returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn't resolve to an address:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n### Reverse resolve an ENS domain\n\nSimilar to resolving addresses, looking up domains is really just a matter of calling `EmbarkJS.Names.lookup`, which takes an address as argument. Just like `EmbarkJS.Names.resolve`, a callback can be used to get notified whether the lookup was successful or not:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\nGuess what, `EmbarkJS.Names.lookup` also returns a Promise in case you prefer using those over callbacks:\n\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n### Register a sub-domain\n\nThis enables you to register some others sub-domains.\nThis is mostly for demo purposes as it is only available in development.\n\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/working_with_name_systems.html","comments":1,"_id":"ck5ijm3s3001z7hegefgi88bl","content":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h3 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h3><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n<h3 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h3><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<h3 id=\"Register-a-sub-domain\"><a href=\"#Register-a-sub-domain\" class=\"headerlink\" title=\"Register a sub-domain\"></a>Register a sub-domain</h3><p>This enables you to register some others sub-domains.<br>This is mostly for demo purposes as it is only available in development.</p>\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In order to improve the user experience of decentralized applications that deal with smart contracts or Ethereum addresses in general, it’s a good practice to take advantage of the <a href=\"https://ens.domains/\" target=\"_blank\" rel=\"noopener\">Ethereum Name Service</a> and its registered, human-readable names. Embark provides APIs to either resolve a given domain to its corresponding address, or lookup a registered name by a given address.</p>\n<p>Let’s take a look at how this is done.</p>\n<h3 id=\"Resolving-a-Domain-to-an-address\"><a href=\"#Resolving-a-Domain-to-an-address\" class=\"headerlink\" title=\"Resolving a Domain to an address\"></a>Resolving a Domain to an address</h3><p>Resolving a domain to its corresponding address is done by calling <code>EmbarkJS.Names.resolve</code>, which takes the domain in question as first argument and a callback function that has access to the resolved address as a second argument:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve('ethereum.eth', (err, result) => {\n  if (err) {\n    console.error('ENS resolve error', err);\n  }\n  console.log('ENS address', result)\n});\n</code></pre>\n\n<p>If you prefer using Promises, Embark has got you covered! <code>EmbarkJS.Names.resolve</code> returns a promise that resolves with the corresponding address, or an error message in case the given domain doesn’t resolve to an address:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.resolve(\"ethereum.eth\").then(address => {\n  console.log(\"the address for ethereum.eth is: \" + address);\n})\n</code></pre>\n\n<h3 id=\"Reverse-resolve-an-ENS-domain\"><a href=\"#Reverse-resolve-an-ENS-domain\" class=\"headerlink\" title=\"Reverse resolve an ENS domain\"></a>Reverse resolve an ENS domain</h3><p>Similar to resolving addresses, looking up domains is really just a matter of calling <code>EmbarkJS.Names.lookup</code>, which takes an address as argument. Just like <code>EmbarkJS.Names.resolve</code>, a callback can be used to get notified whether the lookup was successful or not:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\", (err, name) => {\n  if (err) {\n    console.error('ENS lookup error', err);\n  }\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<p>Guess what, <code>EmbarkJS.Names.lookup</code> also returns a Promise in case you prefer using those over callbacks:</p>\n<pre><code class=\"javascript\">EmbarkJS.Names.lookup(\"0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359\").then(name => {\n  console.log(\"the domain is: \" + name);\n})\n</code></pre>\n\n<h3 id=\"Register-a-sub-domain\"><a href=\"#Register-a-sub-domain\" class=\"headerlink\" title=\"Register a sub-domain\"></a>Register a sub-domain</h3><p>This enables you to register some others sub-domains.<br>This is mostly for demo purposes as it is only available in development.</p>\n<pre><code class=\"javascript\">\n EmbarkJS.Names.registerSubDomain('newsubdomain', '0x4a17f35f0a9927fb4141aa91cbbc72c1b31598de', (err, transaction) => {\n  if (err) {\n    console.error('ENS register error', err);\n  }\n  console.log(`Successfully registered with ${transaction.gasUsed} gas`);\n});\n</code></pre>\n\n"},{"title":"blog.header.title","tagline":"blog.header.tagline","layout":"blog","_content":"","source":"news/index.md","raw":"title: blog.header.title\ntagline: blog.header.tagline\nlayout: blog\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"news/index.html","comments":1,"_id":"ck5ijm3s400207heg7ovygrsl","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"layout":"plugins","tagline":"plugins_page.header.tagline","title":"plugins_page.header.title","data":"plugins","intro":"plugins_page.intro_section.heading.referal","_content":"","source":"plugins/index.md","raw":"layout: plugins\ntagline: plugins_page.header.tagline\ntitle: plugins_page.header.title\ndata: plugins\nintro: plugins_page.intro_section.heading.referal\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"plugins/index.html","comments":1,"_id":"ck5ijm3s400217heg1pdtd3jb","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Using Infura","_content":"\nTo deploy to a test network  (or even the mainnet), you usually have [to synchronize a blockchain node yourself](/docs/blockchain_configuration.html#Testnet-configuration) to be able to connect.\n\nThere is thankfully another alternative to save time and it is to use something like [Infura](https://infura.io/), that has already synchronized nodes to which you can connect to.\n\nThey offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.\n\n### Registration\n\nTo start you will need to first register with Infura. Go to [https://infura.io/register](https://infura.io/register) and register.\n\nAfterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.\n\n![Screenshot](infura_guide/api-keys.png)\n\n### Account Configuration\n\nTo deploy to Infura, we need to configure Embark with an account containing funds.\n\nIn this example we will use a mnemonic.\nIt is also possible to use a private key (the documentation for the accounts functionality can be found [here](/docs/contracts.html#Using-accounts-in-a-wallet)).\n\nMake sure to read our recommendations on how to make sure your credentials stay secure [here](/docs/contracts_deployment.html#Deploying-to-Mainnet).\n\nEdit your contract configuration (usually found at `config/contracts.js`) and add a new environment, which we will name `infura`:\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\nMake sure the account has funds in the network you are deploying to. Most testnets have faucets.\nFor example you can find a faucet for Rinkeby [here](https://faucet.rinkeby.io/).\n\n### Adding Infura\n\nNow we will add the infura endpoint to our configuration. **You should replace the key in the `host` field with your own.**\nWe will use Rinkeby for this example. You can specify the network as `<network>.infura.io`.\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n### Deploying\n\nNow to deploy, all you need to do is run `embark run infura` and Embark will deploy using Infura!\n\n![Screenshot](infura_guide/lift-off.jpg)\n","source":"tutorials/infura_guide.md","raw":"title: Using Infura\n---\n\nTo deploy to a test network  (or even the mainnet), you usually have [to synchronize a blockchain node yourself](/docs/blockchain_configuration.html#Testnet-configuration) to be able to connect.\n\nThere is thankfully another alternative to save time and it is to use something like [Infura](https://infura.io/), that has already synchronized nodes to which you can connect to.\n\nThey offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.\n\n### Registration\n\nTo start you will need to first register with Infura. Go to [https://infura.io/register](https://infura.io/register) and register.\n\nAfterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.\n\n![Screenshot](infura_guide/api-keys.png)\n\n### Account Configuration\n\nTo deploy to Infura, we need to configure Embark with an account containing funds.\n\nIn this example we will use a mnemonic.\nIt is also possible to use a private key (the documentation for the accounts functionality can be found [here](/docs/contracts.html#Using-accounts-in-a-wallet)).\n\nMake sure to read our recommendations on how to make sure your credentials stay secure [here](/docs/contracts_deployment.html#Deploying-to-Mainnet).\n\nEdit your contract configuration (usually found at `config/contracts.js`) and add a new environment, which we will name `infura`:\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\nMake sure the account has funds in the network you are deploying to. Most testnets have faucets.\nFor example you can find a faucet for Rinkeby [here](https://faucet.rinkeby.io/).\n\n### Adding Infura\n\nNow we will add the infura endpoint to our configuration. **You should replace the key in the `host` field with your own.**\nWe will use Rinkeby for this example. You can specify the network as `<network>.infura.io`.\n\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n### Deploying\n\nNow to deploy, all you need to do is run `embark run infura` and Embark will deploy using Infura!\n\n![Screenshot](infura_guide/lift-off.jpg)\n","date":"2020-01-17T19:00:03.904Z","updated":"2020-01-17T19:00:03.904Z","path":"tutorials/infura_guide.html","comments":1,"layout":"page","_id":"ck5ijm3s500227hegfai76hxj","content":"<p>To deploy to a test network  (or even the mainnet), you usually have <a href=\"/docs/blockchain_configuration.html#Testnet-configuration\">to synchronize a blockchain node yourself</a> to be able to connect.</p>\n<p>There is thankfully another alternative to save time and it is to use something like <a href=\"https://infura.io/\" target=\"_blank\" rel=\"noopener\">Infura</a>, that has already synchronized nodes to which you can connect to.</p>\n<p>They offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.</p>\n<h3 id=\"Registration\"><a href=\"#Registration\" class=\"headerlink\" title=\"Registration\"></a>Registration</h3><p>To start you will need to first register with Infura. Go to <a href=\"https://infura.io/register\" target=\"_blank\" rel=\"noopener\">https://infura.io/register</a> and register.</p>\n<p>Afterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.</p>\n<p><img src=\"infura_guide/api-keys.png\" alt=\"Screenshot\"></p>\n<h3 id=\"Account-Configuration\"><a href=\"#Account-Configuration\" class=\"headerlink\" title=\"Account Configuration\"></a>Account Configuration</h3><p>To deploy to Infura, we need to configure Embark with an account containing funds.</p>\n<p>In this example we will use a mnemonic.<br>It is also possible to use a private key (the documentation for the accounts functionality can be found <a href=\"/docs/contracts.html#Using-accounts-in-a-wallet\">here</a>).</p>\n<p>Make sure to read our recommendations on how to make sure your credentials stay secure <a href=\"/docs/contracts_deployment.html#Deploying-to-Mainnet\">here</a>.</p>\n<p>Edit your contract configuration (usually found at <code>config/contracts.js</code>) and add a new environment, which we will name <code>infura</code>:</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\n<p>Make sure the account has funds in the network you are deploying to. Most testnets have faucets.<br>For example you can find a faucet for Rinkeby <a href=\"https://faucet.rinkeby.io/\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h3 id=\"Adding-Infura\"><a href=\"#Adding-Infura\" class=\"headerlink\" title=\"Adding Infura\"></a>Adding Infura</h3><p>Now we will add the infura endpoint to our configuration. <strong>You should replace the key in the <code>host</code> field with your own.</strong><br>We will use Rinkeby for this example. You can specify the network as <code>&lt;network&gt;.infura.io</code>.</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n<h3 id=\"Deploying\"><a href=\"#Deploying\" class=\"headerlink\" title=\"Deploying\"></a>Deploying</h3><p>Now to deploy, all you need to do is run <code>embark run infura</code> and Embark will deploy using Infura!</p>\n<p><img src=\"infura_guide/lift-off.jpg\" alt=\"Screenshot\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>To deploy to a test network  (or even the mainnet), you usually have <a href=\"/docs/blockchain_configuration.html#Testnet-configuration\">to synchronize a blockchain node yourself</a> to be able to connect.</p>\n<p>There is thankfully another alternative to save time and it is to use something like <a href=\"https://infura.io/\" target=\"_blank\" rel=\"noopener\">Infura</a>, that has already synchronized nodes to which you can connect to.</p>\n<p>They offer nodes for the most popular testnets like Ropsten, Kovan and Rinkeby and also for the main network.</p>\n<h3 id=\"Registration\"><a href=\"#Registration\" class=\"headerlink\" title=\"Registration\"></a>Registration</h3><p>To start you will need to first register with Infura. Go to <a href=\"https://infura.io/register\" target=\"_blank\" rel=\"noopener\">https://infura.io/register</a> and register.</p>\n<p>Afterwards, you will get an API KEY by email. Save this key, you will need it to configure Infura. Careful, it is private.</p>\n<p><img src=\"infura_guide/api-keys.png\" alt=\"Screenshot\"></p>\n<h3 id=\"Account-Configuration\"><a href=\"#Account-Configuration\" class=\"headerlink\" title=\"Account Configuration\"></a>Account Configuration</h3><p>To deploy to Infura, we need to configure Embark with an account containing funds.</p>\n<p>In this example we will use a mnemonic.<br>It is also possible to use a private key (the documentation for the accounts functionality can be found <a href=\"/docs/contracts.html#Using-accounts-in-a-wallet\">here</a>).</p>\n<p>Make sure to read our recommendations on how to make sure your credentials stay secure <a href=\"/docs/contracts_deployment.html#Deploying-to-Mainnet\">here</a>.</p>\n<p>Edit your contract configuration (usually found at <code>config/contracts.js</code>) and add a new environment, which we will name <code>infura</code>:</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-1\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\"><mark id=\"code-1\" class=\"highlight-inline\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]\n  }\n}\n</mark></code></pre>\n\n<p>Make sure the account has funds in the network you are deploying to. Most testnets have faucets.<br>For example you can find a faucet for Rinkeby <a href=\"https://faucet.rinkeby.io/\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h3 id=\"Adding-Infura\"><a href=\"#Adding-Infura\" class=\"headerlink\" title=\"Adding Infura\"></a>Adding Infura</h3><p>Now we will add the infura endpoint to our configuration. <strong>You should replace the key in the <code>host</code> field with your own.</strong><br>We will use Rinkeby for this example. You can specify the network as <code>&lt;network&gt;.infura.io</code>.</p>\n<pre>\n<button class=\"btn\" data-clipboard-target=\"#code-2\"><img class=\"clippy\" width=\"13\" src=\"/img/clippy.svg\" alt=\"Copy to clipboard\"></button>\n<code class=\"javascript\">infura: {\n  deployment:{\n    accounts: [\n      {\n        mnemonic: process.env.yourMnemonic\n      }\n    ]<mark id=\"code-2\" class=\"highlight-inline\">,\n    host: \"rinkeby.infura.io/YOUR_KEY\",\n    port: false,\n    protocol: 'https'\n    type: \"rpc\"</mark>\n  }\n}\n</code></pre>\n\n<h3 id=\"Deploying\"><a href=\"#Deploying\" class=\"headerlink\" title=\"Deploying\"></a>Deploying</h3><p>Now to deploy, all you need to do is run <code>embark run infura</code> and Embark will deploy using Infura!</p>\n<p><img src=\"infura_guide/lift-off.jpg\" alt=\"Screenshot\"></p>\n"},{"layout":"plugins","tagline":"Pick one and start right away.","title":"Templates","data":"templates","_content":"","source":"templates/index.md","raw":"layout: plugins\ntagline: 'Pick one and start right away.'\ntitle: Templates\ndata: templates\n---\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"templates/index.html","comments":1,"_id":"ck5ijm3s600237heg3zfh286o","content":"","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":""},{"title":"Blockchain client configuration","layout":"docs","_content":"\nWhen in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we'll explore how to configure a blockchain client we want Embark to connect to. Embark uses the `blockchain.js` file inside the `./config` folder by default for blockchain related configurations. This [can be configured](/docs/configuration.html#config) to different locations if we want to.\n\nEmbark offers a lot of configuration options and most of them already come with a decent default so we can start right away.\n\n## Common Parameters\n\nHere are the common parameters. You will often need only a few of them to make your Embark node work.\n\nIf you want more configuration options, you can find them [here](/docs/blockchain_configuration.html#Advanced-parameters)\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {  \n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nSimilar to [configuring Smart Contracts](/docs/contracts_configuration.html), this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about [environments here](https://embark.embarklabs.io/docs/environments.html).\n\n### Parameter descriptions\n\nMost of the options are self-explanatory, still, here are some brief descriptions:\n\nOption | Type: `default` | Value\n--- | --- | --- \n`enabled` | boolean: `true` | Whether or not to spawn an Ethereum node\n`client` | string: `geth` |  Client to use for the Ethereum node. Currently supported: `geth` and `parity`\n`miningMode` | string: `dev` |  The mining mode to use for the node.<br/>`dev`: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/>`auto`: Uses a mining script to mine only when needed.<br/>`always`: Miner is always on.<br/>`off`: Turns off the miner\n`endpoint` | string |  Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by `embark run`)\n`accounts` | array |  Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go [here](/docs/blockchain_accounts_configuration.html)\n\n## Advanced parameters\n\nHere are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don't need to specify those.\n\nWe recommend putting those inside the `clientConfig` object a better structure.\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`rpcHost` | string: `localhost` | Host the RPC server listens to\n`rpcPort` | number: `8545` | Port the RPC server listens to\n`rpcCorsDomain` | object | The CORS domains the node accepts\n`rpcCorsDomain.auto` | | When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.\n`rpcCorsDomain.additionalCors` | | Manual list of CORS domains to accept. If `auto` is set to `true`, any URLs specified here will be applied *in addition to* those automatically added with `auto`.\n`wsRPC` | boolean: `true` | Whether or not to enable the Websocket server\n`wsOrigins` | object | Same as `rpcCorsDomain`, but for the Websocket server\n`wsHost` | string: `localhost` | Same as `rpcHost`, but for the Websocket server\n`wsPort` | number: `8546` | Same as `rpcPort`, but for the Websocket server\n`ethereumClientBin` | string: `geth` |  Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)\n`datadir` | string |  Directory where to put the Node's data (eg: keystores)\n`networkType` | string: `custom` |  Can be: `testnet`, `rinkeby`, `kovan` or custom, in which case, it will use the specified `networkId`\n`networkId` | number: `1337` |  Used when `networkType` is set as `custom`. [List of known network ids](https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids)\n`nodiscover`| boolean: `true` | Disables the peer discovery mechanism when set to `true`\n`maxpeers` | number: `0` |  Maximum number of network peers\n`proxy` | boolean: `true` | Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.\n`targetGasLimit` | number |  Artificial target gas floor for the blocks to mine\n`genesisBlock` | string |  The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on [genesis blocks here](https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/)\n\n{% notification info 'Using Parity and Metamask' %}\n\nParity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension's URL in the CORS.\n\nYou can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like `chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn`.\n\nAfterwards, in your blockchain config, add it to `additionalCors` of `rpcCorsDomain` and `wsOrigins`.\n{% endnotification %}\n\n## Privatenet configuration\n\nA private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.\n\nLuckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.\n\n### Privatenet parameters\n\nHere are common parameters for private net configurations:\n```\nprivatenet: {\n  clientConfig: {\n    miningMode: 'auto',\n    genesisBlock: \"config/privatenet/genesis.json\"\n  }\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/privatenet/password\"\n    }\n  ]\n}\n```\n\nNote that we can always use the parameters we saw in the [Common parameters section](#Common-Parameters) to override the `default` parameters.\n\n### Parameter descriptions\n\nOption | Type: `value` | Description         \n--- | --- | --- \n`miningMode` | string: `auto` | You need to set `miningMode` to `auto` or `always` so you don't use the development mode\n`genesisBlock` | string |  File to start the chain in a clean state for your private network\n`accounts` | array |  Array of accounts to connect to. Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Testnet configuration\n\nTest networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.\n\nThe big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren't using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.\n\n### Testnet parameters\n\n```\ntestnet: {\n  networkType: \"testnet\",\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/testnet/password\"\n    }\n  ]\n}\n```\n\nHere are the necessary parameters. Again, we can add more to override as you see fit.\n\n### Parameter descriptions\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`networkType` | string: `testnet` | Again, used to specify the network. `testnet` here represents Ropsten. You can change the network by using a `networkId` by changing `networkType` to `custom`\n`syncMode` | string |  Blockchain sync mode\n`syncMode = 'light' `| |  Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth\n`syncMode = 'fast'` | | Faster, but higher store\n`syncMode = 'full'`| | Normal sync\n`accounts` | array |  Array of accounts to connect to.  Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Mainnet configuration\n\nFinally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a [test network](#Testnet-configuration). The only major difference is that the `networkType` needs to be `custom` with the `networkId` set to `1`.\n\n```\nmainnet: {\n  networkType: \"custom\",\n  networkId: 1,\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/mainnet/password\"\n    }\n  ]\n}\n```\n","source":"docs/blockchain_configuration.md","raw":"title: Blockchain client configuration\nlayout: docs\n---\n\nWhen in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we'll explore how to configure a blockchain client we want Embark to connect to. Embark uses the `blockchain.js` file inside the `./config` folder by default for blockchain related configurations. This [can be configured](/docs/configuration.html#config) to different locations if we want to.\n\nEmbark offers a lot of configuration options and most of them already come with a decent default so we can start right away.\n\n## Common Parameters\n\nHere are the common parameters. You will often need only a few of them to make your Embark node work.\n\nIf you want more configuration options, you can find them [here](/docs/blockchain_configuration.html#Advanced-parameters)\n\n```\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {  \n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nSimilar to [configuring Smart Contracts](/docs/contracts_configuration.html), this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about [environments here](https://embark.embarklabs.io/docs/environments.html).\n\n### Parameter descriptions\n\nMost of the options are self-explanatory, still, here are some brief descriptions:\n\nOption | Type: `default` | Value\n--- | --- | --- \n`enabled` | boolean: `true` | Whether or not to spawn an Ethereum node\n`client` | string: `geth` |  Client to use for the Ethereum node. Currently supported: `geth` and `parity`\n`miningMode` | string: `dev` |  The mining mode to use for the node.<br/>`dev`: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/>`auto`: Uses a mining script to mine only when needed.<br/>`always`: Miner is always on.<br/>`off`: Turns off the miner\n`endpoint` | string |  Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by `embark run`)\n`accounts` | array |  Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go [here](/docs/blockchain_accounts_configuration.html)\n\n## Advanced parameters\n\nHere are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don't need to specify those.\n\nWe recommend putting those inside the `clientConfig` object a better structure.\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`rpcHost` | string: `localhost` | Host the RPC server listens to\n`rpcPort` | number: `8545` | Port the RPC server listens to\n`rpcCorsDomain` | object | The CORS domains the node accepts\n`rpcCorsDomain.auto` | | When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.\n`rpcCorsDomain.additionalCors` | | Manual list of CORS domains to accept. If `auto` is set to `true`, any URLs specified here will be applied *in addition to* those automatically added with `auto`.\n`wsRPC` | boolean: `true` | Whether or not to enable the Websocket server\n`wsOrigins` | object | Same as `rpcCorsDomain`, but for the Websocket server\n`wsHost` | string: `localhost` | Same as `rpcHost`, but for the Websocket server\n`wsPort` | number: `8546` | Same as `rpcPort`, but for the Websocket server\n`ethereumClientBin` | string: `geth` |  Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)\n`datadir` | string |  Directory where to put the Node's data (eg: keystores)\n`networkType` | string: `custom` |  Can be: `testnet`, `rinkeby`, `kovan` or custom, in which case, it will use the specified `networkId`\n`networkId` | number: `1337` |  Used when `networkType` is set as `custom`. [List of known network ids](https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids)\n`nodiscover`| boolean: `true` | Disables the peer discovery mechanism when set to `true`\n`maxpeers` | number: `0` |  Maximum number of network peers\n`proxy` | boolean: `true` | Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.\n`targetGasLimit` | number |  Artificial target gas floor for the blocks to mine\n`genesisBlock` | string |  The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on [genesis blocks here](https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/)\n\n{% notification info 'Using Parity and Metamask' %}\n\nParity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension's URL in the CORS.\n\nYou can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like `chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn`.\n\nAfterwards, in your blockchain config, add it to `additionalCors` of `rpcCorsDomain` and `wsOrigins`.\n{% endnotification %}\n\n## Privatenet configuration\n\nA private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.\n\nLuckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.\n\n### Privatenet parameters\n\nHere are common parameters for private net configurations:\n```\nprivatenet: {\n  clientConfig: {\n    miningMode: 'auto',\n    genesisBlock: \"config/privatenet/genesis.json\"\n  }\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/privatenet/password\"\n    }\n  ]\n}\n```\n\nNote that we can always use the parameters we saw in the [Common parameters section](#Common-Parameters) to override the `default` parameters.\n\n### Parameter descriptions\n\nOption | Type: `value` | Description         \n--- | --- | --- \n`miningMode` | string: `auto` | You need to set `miningMode` to `auto` or `always` so you don't use the development mode\n`genesisBlock` | string |  File to start the chain in a clean state for your private network\n`accounts` | array |  Array of accounts to connect to. Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Testnet configuration\n\nTest networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.\n\nThe big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren't using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.\n\n### Testnet parameters\n\n```\ntestnet: {\n  networkType: \"testnet\",\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/testnet/password\"\n    }\n  ]\n}\n```\n\nHere are the necessary parameters. Again, we can add more to override as you see fit.\n\n### Parameter descriptions\n\nOption | Type: `default` | Value         \n--- | --- | --- \n`networkType` | string: `testnet` | Again, used to specify the network. `testnet` here represents Ropsten. You can change the network by using a `networkId` by changing `networkType` to `custom`\n`syncMode` | string |  Blockchain sync mode\n`syncMode = 'light' `| |  Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth\n`syncMode = 'fast'` | | Faster, but higher store\n`syncMode = 'full'`| | Normal sync\n`accounts` | array |  Array of accounts to connect to.  Go to the [Accounts configuration](/docs/blockchain_accounts_configuration.html) page to learn more on accounts\n\n## Mainnet configuration\n\nFinally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a [test network](#Testnet-configuration). The only major difference is that the `networkType` needs to be `custom` with the `networkId` set to `1`.\n\n```\nmainnet: {\n  networkType: \"custom\",\n  networkId: 1,\n  syncMode: \"light\",\n  accounts: [\n    {\n      nodeAccounts: true,\n      password: \"config/mainnet/password\"\n    }\n  ]\n}\n```\n","date":"2020-01-19T20:56:53.007Z","updated":"2020-01-19T20:56:53.007Z","path":"docs/blockchain_configuration.html","_id":"ck5ijm3ts00257hegda3sa842","comments":1,"content":"<p>When in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we’ll explore how to configure a blockchain client we want Embark to connect to. Embark uses the <code>blockchain.js</code> file inside the <code>./config</code> folder by default for blockchain related configurations. This <a href=\"/docs/configuration.html#config\">can be configured</a> to different locations if we want to.</p>\n<p>Embark offers a lot of configuration options and most of them already come with a decent default so we can start right away.</p>\n<h2 id=\"Common-Parameters\"><a href=\"#Common-Parameters\" class=\"headerlink\" title=\"Common Parameters\"></a>Common Parameters</h2><p>Here are the common parameters. You will often need only a few of them to make your Embark node work.</p>\n<p>If you want more configuration options, you can find them <a href=\"/docs/blockchain_configuration.html#Advanced-parameters\">here</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    client: &quot;geth&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;  </span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: &#39;dev&#39;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: &quot;https:&#x2F;&#x2F;external-node.com&quot;,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: &quot;12 word mnemonic&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about <a href=\"https://embark.embarklabs.io/docs/environments.html\">environments here</a>.</p>\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><p>Most of the options are self-explanatory, still, here are some brief descriptions:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to spawn an Ethereum node</td>\n</tr>\n<tr>\n<td><code>client</code></td>\n<td>string: <code>geth</code></td>\n<td>Client to use for the Ethereum node. Currently supported: <code>geth</code> and <code>parity</code></td>\n</tr>\n<tr>\n<td><code>miningMode</code></td>\n<td>string: <code>dev</code></td>\n<td>The mining mode to use for the node.<br/><code>dev</code>: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/><code>auto</code>: Uses a mining script to mine only when needed.<br/><code>always</code>: Miner is always on.<br/><code>off</code>: Turns off the miner</td>\n</tr>\n<tr>\n<td><code>endpoint</code></td>\n<td>string</td>\n<td>Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by <code>embark run</code>)</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go <a href=\"/docs/blockchain_accounts_configuration.html\">here</a></td>\n</tr>\n</tbody></table>\n<h2 id=\"Advanced-parameters\"><a href=\"#Advanced-parameters\" class=\"headerlink\" title=\"Advanced parameters\"></a>Advanced parameters</h2><p>Here are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don’t need to specify those.</p>\n<p>We recommend putting those inside the <code>clientConfig</code> object a better structure.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>rpcHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcPort</code></td>\n<td>number: <code>8545</code></td>\n<td>Port the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain</code></td>\n<td>object</td>\n<td>The CORS domains the node accepts</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.auto</code></td>\n<td></td>\n<td>When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.additionalCors</code></td>\n<td></td>\n<td>Manual list of CORS domains to accept. If <code>auto</code> is set to <code>true</code>, any URLs specified here will be applied <em>in addition to</em> those automatically added with <code>auto</code>.</td>\n</tr>\n<tr>\n<td><code>wsRPC</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to enable the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsOrigins</code></td>\n<td>object</td>\n<td>Same as <code>rpcCorsDomain</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Same as <code>rpcHost</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsPort</code></td>\n<td>number: <code>8546</code></td>\n<td>Same as <code>rpcPort</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>ethereumClientBin</code></td>\n<td>string: <code>geth</code></td>\n<td>Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)</td>\n</tr>\n<tr>\n<td><code>datadir</code></td>\n<td>string</td>\n<td>Directory where to put the Node’s data (eg: keystores)</td>\n</tr>\n<tr>\n<td><code>networkType</code></td>\n<td>string: <code>custom</code></td>\n<td>Can be: <code>testnet</code>, <code>rinkeby</code>, <code>kovan</code> or custom, in which case, it will use the specified <code>networkId</code></td>\n</tr>\n<tr>\n<td><code>networkId</code></td>\n<td>number: <code>1337</code></td>\n<td>Used when <code>networkType</code> is set as <code>custom</code>. <a href=\"https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids\" target=\"_blank\" rel=\"noopener\">List of known network ids</a></td>\n</tr>\n<tr>\n<td><code>nodiscover</code></td>\n<td>boolean: <code>true</code></td>\n<td>Disables the peer discovery mechanism when set to <code>true</code></td>\n</tr>\n<tr>\n<td><code>maxpeers</code></td>\n<td>number: <code>0</code></td>\n<td>Maximum number of network peers</td>\n</tr>\n<tr>\n<td><code>proxy</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.</td>\n</tr>\n<tr>\n<td><code>targetGasLimit</code></td>\n<td>number</td>\n<td>Artificial target gas floor for the blocks to mine</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on <a href=\"https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/\" target=\"_blank\" rel=\"noopener\">genesis blocks here</a></td>\n</tr>\n</tbody></table>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Using Parity and Metamask</strong></p>\n  <p><p>Parity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension’s URL in the CORS.</p>\n<p>You can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like <code>chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn</code>.</p>\n<p>Afterwards, in your blockchain config, add it to <code>additionalCors</code> of <code>rpcCorsDomain</code> and <code>wsOrigins</code>.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Privatenet-configuration\"><a href=\"#Privatenet-configuration\" class=\"headerlink\" title=\"Privatenet configuration\"></a>Privatenet configuration</h2><p>A private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.</p>\n<p>Luckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.</p>\n<h3 id=\"Privatenet-parameters\"><a href=\"#Privatenet-parameters\" class=\"headerlink\" title=\"Privatenet parameters\"></a>Privatenet parameters</h3><p>Here are common parameters for private net configurations:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">privatenet: &#123;</span><br><span class=\"line\">  clientConfig: &#123;</span><br><span class=\"line\">    miningMode: &#39;auto&#39;,</span><br><span class=\"line\">    genesisBlock: &quot;config&#x2F;privatenet&#x2F;genesis.json&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;privatenet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note that we can always use the parameters we saw in the <a href=\"#Common-Parameters\">Common parameters section</a> to override the <code>default</code> parameters.</p>\n<h3 id=\"Parameter-descriptions-1\"><a href=\"#Parameter-descriptions-1\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>value</code></th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>miningMode</code></td>\n<td>string: <code>auto</code></td>\n<td>You need to set <code>miningMode</code> to <code>auto</code> or <code>always</code> so you don’t use the development mode</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>File to start the chain in a clean state for your private network</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to. Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Testnet-configuration\"><a href=\"#Testnet-configuration\" class=\"headerlink\" title=\"Testnet configuration\"></a>Testnet configuration</h2><p>Test networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.</p>\n<p>The big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren’t using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.</p>\n<h3 id=\"Testnet-parameters\"><a href=\"#Testnet-parameters\" class=\"headerlink\" title=\"Testnet parameters\"></a>Testnet parameters</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">testnet: &#123;</span><br><span class=\"line\">  networkType: &quot;testnet&quot;,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here are the necessary parameters. Again, we can add more to override as you see fit.</p>\n<h3 id=\"Parameter-descriptions-2\"><a href=\"#Parameter-descriptions-2\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>networkType</code></td>\n<td>string: <code>testnet</code></td>\n<td>Again, used to specify the network. <code>testnet</code> here represents Ropsten. You can change the network by using a <code>networkId</code> by changing <code>networkType</code> to <code>custom</code></td>\n</tr>\n<tr>\n<td><code>syncMode</code></td>\n<td>string</td>\n<td>Blockchain sync mode</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;light&#39;</code></td>\n<td></td>\n<td>Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;fast&#39;</code></td>\n<td></td>\n<td>Faster, but higher store</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;full&#39;</code></td>\n<td></td>\n<td>Normal sync</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to.  Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Mainnet-configuration\"><a href=\"#Mainnet-configuration\" class=\"headerlink\" title=\"Mainnet configuration\"></a>Mainnet configuration</h2><p>Finally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a <a href=\"#Testnet-configuration\">test network</a>. The only major difference is that the <code>networkType</code> needs to be <code>custom</code> with the <code>networkId</code> set to <code>1</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">mainnet: &#123;</span><br><span class=\"line\">  networkType: &quot;custom&quot;,</span><br><span class=\"line\">  networkId: 1,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;mainnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>When in developing, to interact with a blockchain, it is necessary to use a local Ethereum node, either using a simulator or a client like Geth or Parity. In this guide we’ll explore how to configure a blockchain client we want Embark to connect to. Embark uses the <code>blockchain.js</code> file inside the <code>./config</code> folder by default for blockchain related configurations. This <a href=\"/docs/configuration.html#config\">can be configured</a> to different locations if we want to.</p>\n<p>Embark offers a lot of configuration options and most of them already come with a decent default so we can start right away.</p>\n<h2 id=\"Common-Parameters\"><a href=\"#Common-Parameters\" class=\"headerlink\" title=\"Common Parameters\"></a>Common Parameters</h2><p>Here are the common parameters. You will often need only a few of them to make your Embark node work.</p>\n<p>If you want more configuration options, you can find them <a href=\"/docs/blockchain_configuration.html#Advanced-parameters\">here</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  default: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    client: &quot;geth&quot;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;  </span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: &#39;dev&#39;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: &quot;https:&#x2F;&#x2F;external-node.com&quot;,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: &quot;12 word mnemonic&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, this config contains environments that help configuring certain parameters differently depending of the environment. You can read more about <a href=\"https://embark.embarklabs.io/docs/environments.html\">environments here</a>.</p>\n<h3 id=\"Parameter-descriptions\"><a href=\"#Parameter-descriptions\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><p>Most of the options are self-explanatory, still, here are some brief descriptions:</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>enabled</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to spawn an Ethereum node</td>\n</tr>\n<tr>\n<td><code>client</code></td>\n<td>string: <code>geth</code></td>\n<td>Client to use for the Ethereum node. Currently supported: <code>geth</code> and <code>parity</code></td>\n</tr>\n<tr>\n<td><code>miningMode</code></td>\n<td>string: <code>dev</code></td>\n<td>The mining mode to use for the node.<br/><code>dev</code>: This is a special mode where the node uses a development account as defaultAccount. This account is already funded and transactions are faster.<br/><code>auto</code>: Uses a mining script to mine only when needed.<br/><code>always</code>: Miner is always on.<br/><code>off</code>: Turns off the miner</td>\n</tr>\n<tr>\n<td><code>endpoint</code></td>\n<td>string</td>\n<td>Endpoint to connect to. Works for external endpoints (like Infura) and local ones too (only for nodes started by <code>embark run</code>)</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Accounts array for the node and to deploy. When no account is given, defaults to one node account. For more details, go <a href=\"/docs/blockchain_accounts_configuration.html\">here</a></td>\n</tr>\n</tbody></table>\n<h2 id=\"Advanced-parameters\"><a href=\"#Advanced-parameters\" class=\"headerlink\" title=\"Advanced parameters\"></a>Advanced parameters</h2><p>Here are all the parameters you can use to customize your node. Note that they all come with defaults that make it that you don’t need to specify those.</p>\n<p>We recommend putting those inside the <code>clientConfig</code> object a better structure.</p>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>rpcHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Host the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcPort</code></td>\n<td>number: <code>8545</code></td>\n<td>Port the RPC server listens to</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain</code></td>\n<td>object</td>\n<td>The CORS domains the node accepts</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.auto</code></td>\n<td></td>\n<td>When set to true, Embark checks your other configurations to set the CORS domains. This only adds the required domains.</td>\n</tr>\n<tr>\n<td><code>rpcCorsDomain.additionalCors</code></td>\n<td></td>\n<td>Manual list of CORS domains to accept. If <code>auto</code> is set to <code>true</code>, any URLs specified here will be applied <em>in addition to</em> those automatically added with <code>auto</code>.</td>\n</tr>\n<tr>\n<td><code>wsRPC</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not to enable the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsOrigins</code></td>\n<td>object</td>\n<td>Same as <code>rpcCorsDomain</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsHost</code></td>\n<td>string: <code>localhost</code></td>\n<td>Same as <code>rpcHost</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>wsPort</code></td>\n<td>number: <code>8546</code></td>\n<td>Same as <code>rpcPort</code>, but for the Websocket server</td>\n</tr>\n<tr>\n<td><code>ethereumClientBin</code></td>\n<td>string: <code>geth</code></td>\n<td>Path to the client binary. By default, Embark uses the client name as an executable (if it is in the PATH)</td>\n</tr>\n<tr>\n<td><code>datadir</code></td>\n<td>string</td>\n<td>Directory where to put the Node’s data (eg: keystores)</td>\n</tr>\n<tr>\n<td><code>networkType</code></td>\n<td>string: <code>custom</code></td>\n<td>Can be: <code>testnet</code>, <code>rinkeby</code>, <code>kovan</code> or custom, in which case, it will use the specified <code>networkId</code></td>\n</tr>\n<tr>\n<td><code>networkId</code></td>\n<td>number: <code>1337</code></td>\n<td>Used when <code>networkType</code> is set as <code>custom</code>. <a href=\"https://github.com/ethereumbook/ethereumbook/blob/3e8cf74eb935d4be495f4306b73de027af95fd97/contrib/devp2p-protocol.asciidoc#known-current-network-ids\" target=\"_blank\" rel=\"noopener\">List of known network ids</a></td>\n</tr>\n<tr>\n<td><code>nodiscover</code></td>\n<td>boolean: <code>true</code></td>\n<td>Disables the peer discovery mechanism when set to <code>true</code></td>\n</tr>\n<tr>\n<td><code>maxpeers</code></td>\n<td>number: <code>0</code></td>\n<td>Maximum number of network peers</td>\n</tr>\n<tr>\n<td><code>proxy</code></td>\n<td>boolean: <code>true</code></td>\n<td>Whether or not Embark should use a proxy to add functionalities. This proxy is used by Embark to see the different transactions that go through, for example, and shows them to you.</td>\n</tr>\n<tr>\n<td><code>targetGasLimit</code></td>\n<td>number</td>\n<td>Artificial target gas floor for the blocks to mine</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>The genesis file to use to create the network. This file is used when creating the network. It tells the client the parameters to initiate the node with. You can read more on <a href=\"https://arvanaghi.com/blog/explaining-the-genesis-block-in-ethereum/\" target=\"_blank\" rel=\"noopener\">genesis blocks here</a></td>\n</tr>\n</tbody></table>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Using Parity and Metamask</strong></p>\n  <p><p>Parity has very strict CORS policies. In order to use it with Metamask (or any other browser extension), you need to add the extension’s URL in the CORS.</p>\n<p>You can do so by opening Metamask in its own tab. Then, copy the URL. It will look something like <code>chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn</code>.</p>\n<p>Afterwards, in your blockchain config, add it to <code>additionalCors</code> of <code>rpcCorsDomain</code> and <code>wsOrigins</code>.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Privatenet-configuration\"><a href=\"#Privatenet-configuration\" class=\"headerlink\" title=\"Privatenet configuration\"></a>Privatenet configuration</h2><p>A private network is really similar to using the development mode of a client. The biggest differences is that it does not come with a default pre-funded account and it will not use POA (proof of authority), meaning that blocks will need to be mined.</p>\n<p>Luckily, Embark has settings to limit the mining to a minimum so that everything can run smoothly while testing in a more realistic environment before going to a test network.</p>\n<h3 id=\"Privatenet-parameters\"><a href=\"#Privatenet-parameters\" class=\"headerlink\" title=\"Privatenet parameters\"></a>Privatenet parameters</h3><p>Here are common parameters for private net configurations:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">privatenet: &#123;</span><br><span class=\"line\">  clientConfig: &#123;</span><br><span class=\"line\">    miningMode: &#39;auto&#39;,</span><br><span class=\"line\">    genesisBlock: &quot;config&#x2F;privatenet&#x2F;genesis.json&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;privatenet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note that we can always use the parameters we saw in the <a href=\"#Common-Parameters\">Common parameters section</a> to override the <code>default</code> parameters.</p>\n<h3 id=\"Parameter-descriptions-1\"><a href=\"#Parameter-descriptions-1\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>value</code></th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>miningMode</code></td>\n<td>string: <code>auto</code></td>\n<td>You need to set <code>miningMode</code> to <code>auto</code> or <code>always</code> so you don’t use the development mode</td>\n</tr>\n<tr>\n<td><code>genesisBlock</code></td>\n<td>string</td>\n<td>File to start the chain in a clean state for your private network</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to. Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Testnet-configuration\"><a href=\"#Testnet-configuration\" class=\"headerlink\" title=\"Testnet configuration\"></a>Testnet configuration</h2><p>Test networks are networks that are public. Knowing that, if we want to connect to a node that we control, we will first need to synchronize it. This can take hours, as we need to download the blocks that we are missing from the other peers.</p>\n<p>The big advantage of using a local synced node is that we have control over it and it preserves our privacy, as we aren’t using a third party node. However, as mentioned, it takes a lot of time to synchronize a node and also requires a lot of computer resources, so keep it in mind if you want to go down that route.</p>\n<h3 id=\"Testnet-parameters\"><a href=\"#Testnet-parameters\" class=\"headerlink\" title=\"Testnet parameters\"></a>Testnet parameters</h3><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">testnet: &#123;</span><br><span class=\"line\">  networkType: &quot;testnet&quot;,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;testnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here are the necessary parameters. Again, we can add more to override as you see fit.</p>\n<h3 id=\"Parameter-descriptions-2\"><a href=\"#Parameter-descriptions-2\" class=\"headerlink\" title=\"Parameter descriptions\"></a>Parameter descriptions</h3><table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Type: <code>default</code></th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>networkType</code></td>\n<td>string: <code>testnet</code></td>\n<td>Again, used to specify the network. <code>testnet</code> here represents Ropsten. You can change the network by using a <code>networkId</code> by changing <code>networkType</code> to <code>custom</code></td>\n</tr>\n<tr>\n<td><code>syncMode</code></td>\n<td>string</td>\n<td>Blockchain sync mode</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;light&#39;</code></td>\n<td></td>\n<td>Light clients synchronize a bare minimum of data and fetch necessary data on-demand from the network. Much lower in storage, potentially higher in bandwidth</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;fast&#39;</code></td>\n<td></td>\n<td>Faster, but higher store</td>\n</tr>\n<tr>\n<td><code>syncMode = &#39;full&#39;</code></td>\n<td></td>\n<td>Normal sync</td>\n</tr>\n<tr>\n<td><code>accounts</code></td>\n<td>array</td>\n<td>Array of accounts to connect to.  Go to the <a href=\"/docs/blockchain_accounts_configuration.html\">Accounts configuration</a> page to learn more on accounts</td>\n</tr>\n</tbody></table>\n<h2 id=\"Mainnet-configuration\"><a href=\"#Mainnet-configuration\" class=\"headerlink\" title=\"Mainnet configuration\"></a>Mainnet configuration</h2><p>Finally, the main network, a.k.a. mainnet. It may come as no surprise, but to sync to the mainnet, the step and configurations are actually the same as for a <a href=\"#Testnet-configuration\">test network</a>. The only major difference is that the <code>networkType</code> needs to be <code>custom</code> with the <code>networkId</code> set to <code>1</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">mainnet: &#123;</span><br><span class=\"line\">  networkType: &quot;custom&quot;,</span><br><span class=\"line\">  networkId: 1,</span><br><span class=\"line\">  syncMode: &quot;light&quot;,</span><br><span class=\"line\">  accounts: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      nodeAccounts: true,</span><br><span class=\"line\">      password: &quot;config&#x2F;mainnet&#x2F;password&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n"},{"title":"Testing Smart Contracts","layout":"docs","_content":"\nTesting is a crucial part of developing robust and high-quality software. That's why Embark aims to make testing our Smart Contract as easy as possible. In this guide we'll explore Embark specific testing APIs and how to write tests for our Smart Contracts.\n\n## Creating tests\n\nTest files resides in a project's `test` folder. Any JavaScript file within `test/` is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in `contract()` functions. A single spec is written using `it()` blocks. \n\nHere's what such a test could look like:\n\n```\ncontract('SomeContract', () => {\n  it('should pass', () => {\n    assert.ok(true);\n  });\n});\n```\n\nThis is a single test spec which will always pass. We're using a globally available `assert` object to make assertions in our specs. If you're familiar with the [Mocha testing framework](https://mochajs.org), this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.\n\n`contract()` is just an alias for Mocha's `describe()` function and is globally available. In general, global functions and objects are:\n\n- `contract()`: Same as Mocha's `describe`\n- `config()`: Function to configure Embark and deploy contracts\n- `web3`: Web3 object\n- `assert`: Node's assert\n- Mocha functions: `describe()`, `it()`, `before()`, etc.\n\n### Importing EmbarkJS\n\nIf we want to use any of EmbarkJS' APIs, we can require it as expected:\n\n```\nconst EmbarkJS = require('Embark/EmbarkJS');\n```\n\nFor more information on EmbarkJS's APIs, head over to [this guide](/docs/javascript_usage.html).\n\n## Running tests\n\nOnce we've written our tests, we can execute them using Embark's `test` command:\n\n```\n$ embark test\n```\n\nAs mentioned earlier, this will pick up all files inside the `test/` folder and run them as test files.\n\n### Running test subsets\n\nIf we aren't interested in running all tests but only a specific subset, we can specify a test file as part of the `test` command like this:\n\n```\n$ embark test test/SomeContract_spec.js\n```\n\n### Running tests against a different node\n\nBy default, tests are run using an Ethereum simulator ([Ganache](https://www.truffleframework.com/ganache)). We can use the `--node` option to change that behavior. Passing `--node embark` to `embark test` will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:\n\n```\n$ embark test --node ws://localhost:8556\n```\n\n### Outputting gas cost details\n\nWhen running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a `--gasDetails` option that makes this possible.\n\n```\n$ embark test --gasDetails\n```\n\n## Test environment\n\nWhen running tests, the default [environment}(/docs/environments.html) is `test`. You can obviously change this using the `--env` flag.\n\nThe special thing with the `test` environment is that if you do not have a `test` section in your module configuration, that module with be disabled (`enabled: false`). This is done to speed up the test as if you don't need a module, it is disabled.\n\n## Configuring Smart Contracts for tests\n\nVery similar to how we [configure our Smart Contracts](/docs/contracts_configuration.html) for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.\n\nTo do that, Embark adds a global `config()` function to the execution context, which uses the same API as the configuration object for our application's Smart Contracts. So if we had a `SomeContract` that should be picked up for deployment, this is what the configuration would look like:\n\n```\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in Smart Contract configuration guide\n    }\n  }\n});\n\ncontract('SomContract', () => {\n  ...\n});\n```\n\nOne thing that's important to note here is that, behind the scenes, Embark has to run `config()` first to deploy the Smart Contracts and only **then** starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.\n\n{% notification info 'A note on config()' %}\nThe global `config()` function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.\n{% endnotification %}\n\n## Accessing Smart Contract instances\n\nTo write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, [Embark generates Smart Contract instances](/docs/javascript_usage.html#Embark-Artifacts) for us. All we have to do is importing and using them accordingly.\n\nThe following code imports `SomeContract` and calls an imaginary method on it inside a spec:\n\n```\nconst SomeContract = require('EmbarkJS/contracts/SomeContract');\n\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {}\n    }\n  }\n});\n\ncontract('SomeContract', () => {\n\n  it('should do something', async () => {\n    const result = await SomeContract.methods.doSomething.call();\n    assert.equal(result, 'foo');\n  });\n});\n```\n\nThere's one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use `SmartContract` right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.\n\nThis is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.\n\n{% notification info 'Smart Contract reference hydration' %}\nSmart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside `contract()` blocks.\n{% endnotification %}\n\n## Configuring accounts\n\nAccounts within the testing environment can be configured [just like we're used to](/docs/contracts_deployment.html). The same rules apply here, and [configuring an Ether balance](/docs/contracts_deployment.html#Configuring-account-balance-for-development) is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. \n\n```\nconfig({\n  blockchain: {\n    accounts: [\n      {\n        privateKeyFile: 'path/to/file',\n        balance: '42 shannon'\n      }\n    ]\n  }\n});\n```\n\n## Accessing Accounts\n\nObviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a `from` address to send transactions from. For those cases we very likely want to access any of our our available accounts.\n\nAll available accounts are emitted by `config()` and can be accessed using a callback parameter like this:\n\n```\nlet accounts = [];\n\nconfig({\n  ...\n}, (err, accounts) => {\n  accounts = accounts;\n});\n```\n\nYou can also grab the accounts from the callback of the `contract()` function (`describe` alias):\n\n```\ncontract('SomeContract', (accounts) => {\n  const myAccounts = accounts[0];\n\n  it('should do something', async () => {\n    ...\n  });\n});\n```\n\n## Connecting to a different node\n\nBy default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the `host`, `port` and `type` options as shown below:\n\n```\nconfig({\n  blockchain: {\n    \"endpoint\": \"http://localhost:8545\"\n  }\n});\n```\n\n## Configuring modules\n\nYou can configure the different Embark modules directly in your test file. The available modules are: [storage](/docs/storage_configuration.html), [namesystem](/docs/naming_configuration.html) and [communication](/docs/messages_configuration.html).\n\nAll configuration options for the respective modules are available. Also, the configurations you put inside the `config` function are merged inside the ones that are in the configuration file (meaning that you don't have to put all the provider options if they are already in the default configs).\n\n```\nconfig({\n  storage: {\n    enabled: true\n  },\n  communication: {\n    enabled: true\n  },\n  namesystem: {\n    enabled: true,\n    register: {\n      rootDomain: \"test.eth\"\n    }\n  }\n});\n```\n\nIf the module is not started (eg. IPFS), Embark will start it for you.\n\n## Manually deploying Smart Contracts\n\nAs mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function `config()` function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we're doing this inside a `contract()` block as discussed earlier:\n\n```\nconst SimpleStorage = require('Embark/contracts/SimpleStorage');\n\ncontract('SimpleStorage Deploy', () => {\n  let SimpleStorageInstance;\n\n  before(async function() {\n    SimpleStorageInstance = await SimpleStorage.deploy({ arguments: [150] }).send();\n  });\n\n  it('should set constructor value', async () => {\n    let result = await SimpleStorageInstance.methods.storedData().call();\n    assert.strictEqual(parseInt(result, 10), 150);\n  });\n});\n```\n\n## Util functions\n\n### assert.reverts\n\nUsing `assert.reverts`, you can easily assert that your transaction reverts.\n\n```javascript\nawait assert.reverts(contractMethodAndArguments[, options][, message])\n```\n\n- `contractMethodAndArguments`: [Function] Contract method to call `send` on, including the arguments\n- `options`: [Object] Optional options to pass to the `send` function\n- `message`: [String] Optional string to match the revert message\n\nReturns a promise that you can wait for with `await`.\n\n```javascript\nit(\"should revert with a value lower than 5\", async function() {\n    await assert.reverts(SimpleStorage.methods.setHigher5(2), {from: web3.eth.defaultAccount},\n      'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5');\n  });\n```\n\n### assert.eventEmitted\n\nUsing `eventEmitted`, you can assert that a transaction has emitted an event. You can also check for the returned values.\n\n```javascript\nassert.eventEmitted(transaction, event[, values])\n```\n\n- `transaction`: [Object] Transaction object returns by a `send` call\n- `event`: [String] Name of the event being emitted\n- `values`: [Array or Object] Optional array or object of the returned values of the event.\n    - Using array: The order of the values put in the array need to match the order in which the values are returned by the event\n    - Using object: The object needs to have the right key/value pair(s)\n    \n```javascript\nit('asserts that the event was triggered', async function() {\n const transaction = await SimpleStorage.methods.set(100).send();\n assert.eventEmitted(transaction, 'EventOnSet', {value: \"100\", success: true});\n});\n```\n\n### increaseTime\n\nThis function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.\n\n```javascript\nawait increaseTime(amount);\n```\n\n`amount`: [Number] Number of seconds to increase\n\n```javascript\nit(\"should have expired after increasing time\", async function () {\n    await increaseTime(5001);\n    const isExpired = await Expiration.methods.isExpired().call();\n    assert.strictEqual(isExpired, true);\n});\n```\n\n## Code coverage\n\nEmbark allows you to generate a coverage report for your Solidity Smart Contracts by passing the `--coverage` option on the `embark test` command.\n\n```\n$ embark test --coverage\n```\n\nThe generated report looks something like this:\n\n![Coverage Report: Files](/coverage-files.png)\n\nThis gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here's what it looks like:\n\n![Coverage Report: Detailed](/coverage-report.png)\n","source":"docs/contracts_testing.md","raw":"title: Testing Smart Contracts\nlayout: docs\n---\n\nTesting is a crucial part of developing robust and high-quality software. That's why Embark aims to make testing our Smart Contract as easy as possible. In this guide we'll explore Embark specific testing APIs and how to write tests for our Smart Contracts.\n\n## Creating tests\n\nTest files resides in a project's `test` folder. Any JavaScript file within `test/` is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in `contract()` functions. A single spec is written using `it()` blocks. \n\nHere's what such a test could look like:\n\n```\ncontract('SomeContract', () => {\n  it('should pass', () => {\n    assert.ok(true);\n  });\n});\n```\n\nThis is a single test spec which will always pass. We're using a globally available `assert` object to make assertions in our specs. If you're familiar with the [Mocha testing framework](https://mochajs.org), this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.\n\n`contract()` is just an alias for Mocha's `describe()` function and is globally available. In general, global functions and objects are:\n\n- `contract()`: Same as Mocha's `describe`\n- `config()`: Function to configure Embark and deploy contracts\n- `web3`: Web3 object\n- `assert`: Node's assert\n- Mocha functions: `describe()`, `it()`, `before()`, etc.\n\n### Importing EmbarkJS\n\nIf we want to use any of EmbarkJS' APIs, we can require it as expected:\n\n```\nconst EmbarkJS = require('Embark/EmbarkJS');\n```\n\nFor more information on EmbarkJS's APIs, head over to [this guide](/docs/javascript_usage.html).\n\n## Running tests\n\nOnce we've written our tests, we can execute them using Embark's `test` command:\n\n```\n$ embark test\n```\n\nAs mentioned earlier, this will pick up all files inside the `test/` folder and run them as test files.\n\n### Running test subsets\n\nIf we aren't interested in running all tests but only a specific subset, we can specify a test file as part of the `test` command like this:\n\n```\n$ embark test test/SomeContract_spec.js\n```\n\n### Running tests against a different node\n\nBy default, tests are run using an Ethereum simulator ([Ganache](https://www.truffleframework.com/ganache)). We can use the `--node` option to change that behavior. Passing `--node embark` to `embark test` will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:\n\n```\n$ embark test --node ws://localhost:8556\n```\n\n### Outputting gas cost details\n\nWhen running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a `--gasDetails` option that makes this possible.\n\n```\n$ embark test --gasDetails\n```\n\n## Test environment\n\nWhen running tests, the default [environment}(/docs/environments.html) is `test`. You can obviously change this using the `--env` flag.\n\nThe special thing with the `test` environment is that if you do not have a `test` section in your module configuration, that module with be disabled (`enabled: false`). This is done to speed up the test as if you don't need a module, it is disabled.\n\n## Configuring Smart Contracts for tests\n\nVery similar to how we [configure our Smart Contracts](/docs/contracts_configuration.html) for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.\n\nTo do that, Embark adds a global `config()` function to the execution context, which uses the same API as the configuration object for our application's Smart Contracts. So if we had a `SomeContract` that should be picked up for deployment, this is what the configuration would look like:\n\n```\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in Smart Contract configuration guide\n    }\n  }\n});\n\ncontract('SomContract', () => {\n  ...\n});\n```\n\nOne thing that's important to note here is that, behind the scenes, Embark has to run `config()` first to deploy the Smart Contracts and only **then** starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.\n\n{% notification info 'A note on config()' %}\nThe global `config()` function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.\n{% endnotification %}\n\n## Accessing Smart Contract instances\n\nTo write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, [Embark generates Smart Contract instances](/docs/javascript_usage.html#Embark-Artifacts) for us. All we have to do is importing and using them accordingly.\n\nThe following code imports `SomeContract` and calls an imaginary method on it inside a spec:\n\n```\nconst SomeContract = require('EmbarkJS/contracts/SomeContract');\n\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {}\n    }\n  }\n});\n\ncontract('SomeContract', () => {\n\n  it('should do something', async () => {\n    const result = await SomeContract.methods.doSomething.call();\n    assert.equal(result, 'foo');\n  });\n});\n```\n\nThere's one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use `SmartContract` right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.\n\nThis is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.\n\n{% notification info 'Smart Contract reference hydration' %}\nSmart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside `contract()` blocks.\n{% endnotification %}\n\n## Configuring accounts\n\nAccounts within the testing environment can be configured [just like we're used to](/docs/contracts_deployment.html). The same rules apply here, and [configuring an Ether balance](/docs/contracts_deployment.html#Configuring-account-balance-for-development) is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. \n\n```\nconfig({\n  blockchain: {\n    accounts: [\n      {\n        privateKeyFile: 'path/to/file',\n        balance: '42 shannon'\n      }\n    ]\n  }\n});\n```\n\n## Accessing Accounts\n\nObviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a `from` address to send transactions from. For those cases we very likely want to access any of our our available accounts.\n\nAll available accounts are emitted by `config()` and can be accessed using a callback parameter like this:\n\n```\nlet accounts = [];\n\nconfig({\n  ...\n}, (err, accounts) => {\n  accounts = accounts;\n});\n```\n\nYou can also grab the accounts from the callback of the `contract()` function (`describe` alias):\n\n```\ncontract('SomeContract', (accounts) => {\n  const myAccounts = accounts[0];\n\n  it('should do something', async () => {\n    ...\n  });\n});\n```\n\n## Connecting to a different node\n\nBy default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the `host`, `port` and `type` options as shown below:\n\n```\nconfig({\n  blockchain: {\n    \"endpoint\": \"http://localhost:8545\"\n  }\n});\n```\n\n## Configuring modules\n\nYou can configure the different Embark modules directly in your test file. The available modules are: [storage](/docs/storage_configuration.html), [namesystem](/docs/naming_configuration.html) and [communication](/docs/messages_configuration.html).\n\nAll configuration options for the respective modules are available. Also, the configurations you put inside the `config` function are merged inside the ones that are in the configuration file (meaning that you don't have to put all the provider options if they are already in the default configs).\n\n```\nconfig({\n  storage: {\n    enabled: true\n  },\n  communication: {\n    enabled: true\n  },\n  namesystem: {\n    enabled: true,\n    register: {\n      rootDomain: \"test.eth\"\n    }\n  }\n});\n```\n\nIf the module is not started (eg. IPFS), Embark will start it for you.\n\n## Manually deploying Smart Contracts\n\nAs mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function `config()` function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we're doing this inside a `contract()` block as discussed earlier:\n\n```\nconst SimpleStorage = require('Embark/contracts/SimpleStorage');\n\ncontract('SimpleStorage Deploy', () => {\n  let SimpleStorageInstance;\n\n  before(async function() {\n    SimpleStorageInstance = await SimpleStorage.deploy({ arguments: [150] }).send();\n  });\n\n  it('should set constructor value', async () => {\n    let result = await SimpleStorageInstance.methods.storedData().call();\n    assert.strictEqual(parseInt(result, 10), 150);\n  });\n});\n```\n\n## Util functions\n\n### assert.reverts\n\nUsing `assert.reverts`, you can easily assert that your transaction reverts.\n\n```javascript\nawait assert.reverts(contractMethodAndArguments[, options][, message])\n```\n\n- `contractMethodAndArguments`: [Function] Contract method to call `send` on, including the arguments\n- `options`: [Object] Optional options to pass to the `send` function\n- `message`: [String] Optional string to match the revert message\n\nReturns a promise that you can wait for with `await`.\n\n```javascript\nit(\"should revert with a value lower than 5\", async function() {\n    await assert.reverts(SimpleStorage.methods.setHigher5(2), {from: web3.eth.defaultAccount},\n      'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5');\n  });\n```\n\n### assert.eventEmitted\n\nUsing `eventEmitted`, you can assert that a transaction has emitted an event. You can also check for the returned values.\n\n```javascript\nassert.eventEmitted(transaction, event[, values])\n```\n\n- `transaction`: [Object] Transaction object returns by a `send` call\n- `event`: [String] Name of the event being emitted\n- `values`: [Array or Object] Optional array or object of the returned values of the event.\n    - Using array: The order of the values put in the array need to match the order in which the values are returned by the event\n    - Using object: The object needs to have the right key/value pair(s)\n    \n```javascript\nit('asserts that the event was triggered', async function() {\n const transaction = await SimpleStorage.methods.set(100).send();\n assert.eventEmitted(transaction, 'EventOnSet', {value: \"100\", success: true});\n});\n```\n\n### increaseTime\n\nThis function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.\n\n```javascript\nawait increaseTime(amount);\n```\n\n`amount`: [Number] Number of seconds to increase\n\n```javascript\nit(\"should have expired after increasing time\", async function () {\n    await increaseTime(5001);\n    const isExpired = await Expiration.methods.isExpired().call();\n    assert.strictEqual(isExpired, true);\n});\n```\n\n## Code coverage\n\nEmbark allows you to generate a coverage report for your Solidity Smart Contracts by passing the `--coverage` option on the `embark test` command.\n\n```\n$ embark test --coverage\n```\n\nThe generated report looks something like this:\n\n![Coverage Report: Files](/coverage-files.png)\n\nThis gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here's what it looks like:\n\n![Coverage Report: Detailed](/coverage-report.png)\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_testing.html","comments":1,"_id":"ck5ijm3tu00277hegd72zaomq","content":"<p>Testing is a crucial part of developing robust and high-quality software. That’s why Embark aims to make testing our Smart Contract as easy as possible. In this guide we’ll explore Embark specific testing APIs and how to write tests for our Smart Contracts.</p>\n<h2 id=\"Creating-tests\"><a href=\"#Creating-tests\" class=\"headerlink\" title=\"Creating tests\"></a>Creating tests</h2><p>Test files resides in a project’s <code>test</code> folder. Any JavaScript file within <code>test/</code> is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in <code>contract()</code> functions. A single spec is written using <code>it()</code> blocks. </p>\n<p>Here’s what such a test could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  it(&#39;should pass&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is a single test spec which will always pass. We’re using a globally available <code>assert</code> object to make assertions in our specs. If you’re familiar with the <a href=\"https://mochajs.org\" target=\"_blank\" rel=\"noopener\">Mocha testing framework</a>, this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.</p>\n<p><code>contract()</code> is just an alias for Mocha’s <code>describe()</code> function and is globally available. In general, global functions and objects are:</p>\n<ul>\n<li><code>contract()</code>: Same as Mocha’s <code>describe</code></li>\n<li><code>config()</code>: Function to configure Embark and deploy contracts</li>\n<li><code>web3</code>: Web3 object</li>\n<li><code>assert</code>: Node’s assert</li>\n<li>Mocha functions: <code>describe()</code>, <code>it()</code>, <code>before()</code>, etc.</li>\n</ul>\n<h3 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h3><p>If we want to use any of EmbarkJS’ APIs, we can require it as expected:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const EmbarkJS &#x3D; require(&#39;Embark&#x2F;EmbarkJS&#39;);</span><br></pre></td></tr></table></figure>\n\n<p>For more information on EmbarkJS’s APIs, head over to <a href=\"/docs/javascript_usage.html\">this guide</a>.</p>\n<h2 id=\"Running-tests\"><a href=\"#Running-tests\" class=\"headerlink\" title=\"Running tests\"></a>Running tests</h2><p>Once we’ve written our tests, we can execute them using Embark’s <code>test</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>As mentioned earlier, this will pick up all files inside the <code>test/</code> folder and run them as test files.</p>\n<h3 id=\"Running-test-subsets\"><a href=\"#Running-test-subsets\" class=\"headerlink\" title=\"Running test subsets\"></a>Running test subsets</h3><p>If we aren’t interested in running all tests but only a specific subset, we can specify a test file as part of the <code>test</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test test&#x2F;SomeContract_spec.js</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Running-tests-against-a-different-node\"><a href=\"#Running-tests-against-a-different-node\" class=\"headerlink\" title=\"Running tests against a different node\"></a>Running tests against a different node</h3><p>By default, tests are run using an Ethereum simulator (<a href=\"https://www.truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>). We can use the <code>--node</code> option to change that behavior. Passing <code>--node embark</code> to <code>embark test</code> will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --node ws:&#x2F;&#x2F;localhost:8556</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Outputting-gas-cost-details\"><a href=\"#Outputting-gas-cost-details\" class=\"headerlink\" title=\"Outputting gas cost details\"></a>Outputting gas cost details</h3><p>When running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a <code>--gasDetails</code> option that makes this possible.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --gasDetails</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-environment\"><a href=\"#Test-environment\" class=\"headerlink\" title=\"Test environment\"></a>Test environment</h2><p>When running tests, the default [environment}(/docs/environments.html) is <code>test</code>. You can obviously change this using the <code>--env</code> flag.</p>\n<p>The special thing with the <code>test</code> environment is that if you do not have a <code>test</code> section in your module configuration, that module with be disabled (<code>enabled: false</code>). This is done to speed up the test as if you don’t need a module, it is disabled.</p>\n<h2 id=\"Configuring-Smart-Contracts-for-tests\"><a href=\"#Configuring-Smart-Contracts-for-tests\" class=\"headerlink\" title=\"Configuring Smart Contracts for tests\"></a>Configuring Smart Contracts for tests</h2><p>Very similar to how we <a href=\"/docs/contracts_configuration.html\">configure our Smart Contracts</a> for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.</p>\n<p>To do that, Embark adds a global <code>config()</code> function to the execution context, which uses the same API as the configuration object for our application’s Smart Contracts. So if we had a <code>SomeContract</code> that should be picked up for deployment, this is what the configuration would look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; &#x2F;&#x2F; options as discussed in Smart Contract configuration guide</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>One thing that’s important to note here is that, behind the scenes, Embark has to run <code>config()</code> first to deploy the Smart Contracts and only <strong>then</strong> starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on config()</strong></p>\n  <p><p>The global <code>config()</code> function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>To write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Embark generates Smart Contract instances</a> for us. All we have to do is importing and using them accordingly.</p>\n<p>The following code imports <code>SomeContract</code> and calls an imaginary method on it inside a spec:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SomeContract &#x3D; require(&#39;EmbarkJS&#x2F;contracts&#x2F;SomeContract&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const result &#x3D; await SomeContract.methods.doSomething.call();</span><br><span class=\"line\">    assert.equal(result, &#39;foo&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use <code>SmartContract</code> right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.</p>\n<p>This is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Smart Contract reference hydration</strong></p>\n  <p><p>Smart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside <code>contract()</code> blocks.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-accounts\"><a href=\"#Configuring-accounts\" class=\"headerlink\" title=\"Configuring accounts\"></a>Configuring accounts</h2><p>Accounts within the testing environment can be configured <a href=\"/docs/contracts_deployment.html\">just like we’re used to</a>. The same rules apply here, and <a href=\"/docs/contracts_deployment.html#Configuring-account-balance-for-development\">configuring an Ether balance</a> is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        privateKeyFile: &#39;path&#x2F;to&#x2F;file&#39;,</span><br><span class=\"line\">        balance: &#39;42 shannon&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Accounts\"><a href=\"#Accessing-Accounts\" class=\"headerlink\" title=\"Accessing Accounts\"></a>Accessing Accounts</h2><p>Obviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a <code>from</code> address to send transactions from. For those cases we very likely want to access any of our our available accounts.</p>\n<p>All available accounts are emitted by <code>config()</code> and can be accessed using a callback parameter like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;, (err, accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You can also grab the accounts from the callback of the <code>contract()</code> function (<code>describe</code> alias):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, (accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const myAccounts &#x3D; accounts[0];</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Connecting-to-a-different-node\"><a href=\"#Connecting-to-a-different-node\" class=\"headerlink\" title=\"Connecting to a different node\"></a>Connecting to a different node</h2><p>By default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the <code>host</code>, <code>port</code> and <code>type</code> options as shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    &quot;endpoint&quot;: &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-modules\"><a href=\"#Configuring-modules\" class=\"headerlink\" title=\"Configuring modules\"></a>Configuring modules</h2><p>You can configure the different Embark modules directly in your test file. The available modules are: <a href=\"/docs/storage_configuration.html\">storage</a>, <a href=\"/docs/naming_configuration.html\">namesystem</a> and <a href=\"/docs/messages_configuration.html\">communication</a>.</p>\n<p>All configuration options for the respective modules are available. Also, the configurations you put inside the <code>config</code> function are merged inside the ones that are in the configuration file (meaning that you don’t have to put all the provider options if they are already in the default configs).</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  storage: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  communication: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  namesystem: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &quot;test.eth&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If the module is not started (eg. IPFS), Embark will start it for you.</p>\n<h2 id=\"Manually-deploying-Smart-Contracts\"><a href=\"#Manually-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Manually deploying Smart Contracts\"></a>Manually deploying Smart Contracts</h2><p>As mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function <code>config()</code> function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we’re doing this inside a <code>contract()</code> block as discussed earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SimpleStorage &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SimpleStorage Deploy&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  let SimpleStorageInstance;</span><br><span class=\"line\"></span><br><span class=\"line\">  before(async function() &#123;</span><br><span class=\"line\">    SimpleStorageInstance &#x3D; await SimpleStorage.deploy(&#123; arguments: [150] &#125;).send();</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should set constructor value&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    let result &#x3D; await SimpleStorageInstance.methods.storedData().call();</span><br><span class=\"line\">    assert.strictEqual(parseInt(result, 10), 150);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Util-functions\"><a href=\"#Util-functions\" class=\"headerlink\" title=\"Util functions\"></a>Util functions</h2><h3 id=\"assert-reverts\"><a href=\"#assert-reverts\" class=\"headerlink\" title=\"assert.reverts\"></a>assert.reverts</h3><p>Using <code>assert.reverts</code>, you can easily assert that your transaction reverts.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> assert.reverts(contractMethodAndArguments[, options][, message])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>contractMethodAndArguments</code>: [Function] Contract method to call <code>send</code> on, including the arguments</li>\n<li><code>options</code>: [Object] Optional options to pass to the <code>send</code> function</li>\n<li><code>message</code>: [String] Optional string to match the revert message</li>\n</ul>\n<p>Returns a promise that you can wait for with <code>await</code>.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should revert with a value lower than 5\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> assert.reverts(SimpleStorage.methods.setHigher5(<span class=\"number\">2</span>), &#123;<span class=\"attr\">from</span>: web3.eth.defaultAccount&#125;,</span><br><span class=\"line\">      <span class=\"string\">'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5'</span>);</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"assert-eventEmitted\"><a href=\"#assert-eventEmitted\" class=\"headerlink\" title=\"assert.eventEmitted\"></a>assert.eventEmitted</h3><p>Using <code>eventEmitted</code>, you can assert that a transaction has emitted an event. You can also check for the returned values.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">assert.eventEmitted(transaction, event[, values])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>transaction</code>: [Object] Transaction object returns by a <code>send</code> call</li>\n<li><code>event</code>: [String] Name of the event being emitted</li>\n<li><code>values</code>: [Array or Object] Optional array or object of the returned values of the event.<ul>\n<li>Using array: The order of the values put in the array need to match the order in which the values are returned by the event</li>\n<li>Using object: The object needs to have the right key/value pair(s)</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">'asserts that the event was triggered'</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\"> <span class=\"keyword\">const</span> transaction = <span class=\"keyword\">await</span> SimpleStorage.methods.set(<span class=\"number\">100</span>).send();</span><br><span class=\"line\"> assert.eventEmitted(transaction, <span class=\"string\">'EventOnSet'</span>, &#123;<span class=\"attr\">value</span>: <span class=\"string\">\"100\"</span>, <span class=\"attr\">success</span>: <span class=\"literal\">true</span>&#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"increaseTime\"><a href=\"#increaseTime\" class=\"headerlink\" title=\"increaseTime\"></a>increaseTime</h3><p>This function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> increaseTime(amount);</span><br></pre></td></tr></table></figure>\n\n<p><code>amount</code>: [Number] Number of seconds to increase</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should have expired after increasing time\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> increaseTime(<span class=\"number\">5001</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> isExpired = <span class=\"keyword\">await</span> Expiration.methods.isExpired().call();</span><br><span class=\"line\">    assert.strictEqual(isExpired, <span class=\"literal\">true</span>);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Code-coverage\"><a href=\"#Code-coverage\" class=\"headerlink\" title=\"Code coverage\"></a>Code coverage</h2><p>Embark allows you to generate a coverage report for your Solidity Smart Contracts by passing the <code>--coverage</code> option on the <code>embark test</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --coverage</span><br></pre></td></tr></table></figure>\n\n<p>The generated report looks something like this:</p>\n<p><img src=\"/coverage-files.png\" alt=\"Coverage Report: Files\"></p>\n<p>This gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here’s what it looks like:</p>\n<p><img src=\"/coverage-report.png\" alt=\"Coverage Report: Detailed\"></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Testing is a crucial part of developing robust and high-quality software. That’s why Embark aims to make testing our Smart Contract as easy as possible. In this guide we’ll explore Embark specific testing APIs and how to write tests for our Smart Contracts.</p>\n<h2 id=\"Creating-tests\"><a href=\"#Creating-tests\" class=\"headerlink\" title=\"Creating tests\"></a>Creating tests</h2><p>Test files resides in a project’s <code>test</code> folder. Any JavaScript file within <code>test/</code> is considered a spec file and will be executed by Embark as such. A spec file contains test specs which are grouped in <code>contract()</code> functions. A single spec is written using <code>it()</code> blocks. </p>\n<p>Here’s what such a test could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  it(&#39;should pass&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is a single test spec which will always pass. We’re using a globally available <code>assert</code> object to make assertions in our specs. If you’re familiar with the <a href=\"https://mochajs.org\" target=\"_blank\" rel=\"noopener\">Mocha testing framework</a>, this syntax might be familiar. In fact, Embark uses Mocha as a test runner behind the scenes.</p>\n<p><code>contract()</code> is just an alias for Mocha’s <code>describe()</code> function and is globally available. In general, global functions and objects are:</p>\n<ul>\n<li><code>contract()</code>: Same as Mocha’s <code>describe</code></li>\n<li><code>config()</code>: Function to configure Embark and deploy contracts</li>\n<li><code>web3</code>: Web3 object</li>\n<li><code>assert</code>: Node’s assert</li>\n<li>Mocha functions: <code>describe()</code>, <code>it()</code>, <code>before()</code>, etc.</li>\n</ul>\n<h3 id=\"Importing-EmbarkJS\"><a href=\"#Importing-EmbarkJS\" class=\"headerlink\" title=\"Importing EmbarkJS\"></a>Importing EmbarkJS</h3><p>If we want to use any of EmbarkJS’ APIs, we can require it as expected:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const EmbarkJS &#x3D; require(&#39;Embark&#x2F;EmbarkJS&#39;);</span><br></pre></td></tr></table></figure>\n\n<p>For more information on EmbarkJS’s APIs, head over to <a href=\"/docs/javascript_usage.html\">this guide</a>.</p>\n<h2 id=\"Running-tests\"><a href=\"#Running-tests\" class=\"headerlink\" title=\"Running tests\"></a>Running tests</h2><p>Once we’ve written our tests, we can execute them using Embark’s <code>test</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>As mentioned earlier, this will pick up all files inside the <code>test/</code> folder and run them as test files.</p>\n<h3 id=\"Running-test-subsets\"><a href=\"#Running-test-subsets\" class=\"headerlink\" title=\"Running test subsets\"></a>Running test subsets</h3><p>If we aren’t interested in running all tests but only a specific subset, we can specify a test file as part of the <code>test</code> command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test test&#x2F;SomeContract_spec.js</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Running-tests-against-a-different-node\"><a href=\"#Running-tests-against-a-different-node\" class=\"headerlink\" title=\"Running tests against a different node\"></a>Running tests against a different node</h3><p>By default, tests are run using an Ethereum simulator (<a href=\"https://www.truffleframework.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>). We can use the <code>--node</code> option to change that behavior. Passing <code>--node embark</code> to <code>embark test</code> will use the Ethereum node associated with an already running embark process. We can also specify a custom endpoint, for example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --node ws:&#x2F;&#x2F;localhost:8556</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Outputting-gas-cost-details\"><a href=\"#Outputting-gas-cost-details\" class=\"headerlink\" title=\"Outputting gas cost details\"></a>Outputting gas cost details</h3><p>When running tests, we can even get an idea of what the gas costs of our Smart Contract deployments are. Embark comes with a <code>--gasDetails</code> option that makes this possible.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --gasDetails</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-environment\"><a href=\"#Test-environment\" class=\"headerlink\" title=\"Test environment\"></a>Test environment</h2><p>When running tests, the default [environment}(/docs/environments.html) is <code>test</code>. You can obviously change this using the <code>--env</code> flag.</p>\n<p>The special thing with the <code>test</code> environment is that if you do not have a <code>test</code> section in your module configuration, that module with be disabled (<code>enabled: false</code>). This is done to speed up the test as if you don’t need a module, it is disabled.</p>\n<h2 id=\"Configuring-Smart-Contracts-for-tests\"><a href=\"#Configuring-Smart-Contracts-for-tests\" class=\"headerlink\" title=\"Configuring Smart Contracts for tests\"></a>Configuring Smart Contracts for tests</h2><p>Very similar to how we <a href=\"/docs/contracts_configuration.html\">configure our Smart Contracts</a> for deployment, we have to configure them for our tests as well. This is important, so that our Smart Contracts get deployed with the correct testing data.</p>\n<p>To do that, Embark adds a global <code>config()</code> function to the execution context, which uses the same API as the configuration object for our application’s Smart Contracts. So if we had a <code>SomeContract</code> that should be picked up for deployment, this is what the configuration would look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; &#x2F;&#x2F; options as discussed in Smart Contract configuration guide</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>One thing that’s important to note here is that, behind the scenes, Embark has to run <code>config()</code> first to deploy the Smart Contracts and only <strong>then</strong> starts running tests. This will have an impact on the developer experience when importing Smart Contract instances within spec files. But more on that later.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on config()</strong></p>\n  <p><p>The global <code>config()</code> function is used for Smart Contract deployment and therefore delays the execution of tests until deployment is done.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Accessing-Smart-Contract-instances\"><a href=\"#Accessing-Smart-Contract-instances\" class=\"headerlink\" title=\"Accessing Smart Contract instances\"></a>Accessing Smart Contract instances</h2><p>To write meaningful tests, we obviously want to interact with our Smart Contracts. As we know, <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Embark generates Smart Contract instances</a> for us. All we have to do is importing and using them accordingly.</p>\n<p>The following code imports <code>SomeContract</code> and calls an imaginary method on it inside a spec:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SomeContract &#x3D; require(&#39;EmbarkJS&#x2F;contracts&#x2F;SomeContract&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SomeContract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const result &#x3D; await SomeContract.methods.doSomething.call();</span><br><span class=\"line\">    assert.equal(result, &#39;foo&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind though. Looking at the snippet above, it seems like we can use <code>SmartContract</code> right away once it is imported. However, this is not actually true. As mentioned earlier, Embark first has to actually deploy our Smart Contracts and until that happens, all imported Smart Contract references are empty objects.</p>\n<p>This is not a problem anymore when using Smart Contract instances inside spec blocks, because we know that tests are executed after all Smart Contracts have been deployed. Embark will hydrate the imported references with actual data before the tests are run.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Smart Contract reference hydration</strong></p>\n  <p><p>Smart Contract references imported from EmbarkJS are empty until the Smart Contract are actually deployed. This means Smart Contract references can only be used inside <code>contract()</code> blocks.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-accounts\"><a href=\"#Configuring-accounts\" class=\"headerlink\" title=\"Configuring accounts\"></a>Configuring accounts</h2><p>Accounts within the testing environment can be configured <a href=\"/docs/contracts_deployment.html\">just like we’re used to</a>. The same rules apply here, and <a href=\"/docs/contracts_deployment.html#Configuring-account-balance-for-development\">configuring an Ether balance</a> is supported as well. Configuring custom accounts in tests is especially useful if we want to use a specific account for our tests. </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        privateKeyFile: &#39;path&#x2F;to&#x2F;file&#39;,</span><br><span class=\"line\">        balance: &#39;42 shannon&#39;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Accessing-Accounts\"><a href=\"#Accessing-Accounts\" class=\"headerlink\" title=\"Accessing Accounts\"></a>Accessing Accounts</h2><p>Obviously, we want to access all configured accounts as well. Sometimes we want to test functions or methods that require us to specify a <code>from</code> address to send transactions from. For those cases we very likely want to access any of our our available accounts.</p>\n<p>All available accounts are emitted by <code>config()</code> and can be accessed using a callback parameter like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;, (err, accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You can also grab the accounts from the callback of the <code>contract()</code> function (<code>describe</code> alias):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;SomeContract&#39;, (accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const myAccounts &#x3D; accounts[0];</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should do something&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Connecting-to-a-different-node\"><a href=\"#Connecting-to-a-different-node\" class=\"headerlink\" title=\"Connecting to a different node\"></a>Connecting to a different node</h2><p>By default, Embark will use an internal VM to run the tests. However we can also specify a node to connect to and run the tests there, using the <code>host</code>, <code>port</code> and <code>type</code> options as shown below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  blockchain: &#123;</span><br><span class=\"line\">    &quot;endpoint&quot;: &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Configuring-modules\"><a href=\"#Configuring-modules\" class=\"headerlink\" title=\"Configuring modules\"></a>Configuring modules</h2><p>You can configure the different Embark modules directly in your test file. The available modules are: <a href=\"/docs/storage_configuration.html\">storage</a>, <a href=\"/docs/naming_configuration.html\">namesystem</a> and <a href=\"/docs/messages_configuration.html\">communication</a>.</p>\n<p>All configuration options for the respective modules are available. Also, the configurations you put inside the <code>config</code> function are merged inside the ones that are in the configuration file (meaning that you don’t have to put all the provider options if they are already in the default configs).</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  storage: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  communication: &#123;</span><br><span class=\"line\">    enabled: true</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  namesystem: &#123;</span><br><span class=\"line\">    enabled: true,</span><br><span class=\"line\">    register: &#123;</span><br><span class=\"line\">      rootDomain: &quot;test.eth&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>If the module is not started (eg. IPFS), Embark will start it for you.</p>\n<h2 id=\"Manually-deploying-Smart-Contracts\"><a href=\"#Manually-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Manually deploying Smart Contracts\"></a>Manually deploying Smart Contracts</h2><p>As mentioned earlier, Embark handles the deployment of our Smart Contracts using  the function <code>config()</code> function. If we wish to deploy particular Smart Contracts manually, we can do so using an imported Smart Contract reference. We just need to make sure that we’re doing this inside a <code>contract()</code> block as discussed earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const SimpleStorage &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;SimpleStorage&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;SimpleStorage Deploy&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  let SimpleStorageInstance;</span><br><span class=\"line\"></span><br><span class=\"line\">  before(async function() &#123;</span><br><span class=\"line\">    SimpleStorageInstance &#x3D; await SimpleStorage.deploy(&#123; arguments: [150] &#125;).send();</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;should set constructor value&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    let result &#x3D; await SimpleStorageInstance.methods.storedData().call();</span><br><span class=\"line\">    assert.strictEqual(parseInt(result, 10), 150);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Util-functions\"><a href=\"#Util-functions\" class=\"headerlink\" title=\"Util functions\"></a>Util functions</h2><h3 id=\"assert-reverts\"><a href=\"#assert-reverts\" class=\"headerlink\" title=\"assert.reverts\"></a>assert.reverts</h3><p>Using <code>assert.reverts</code>, you can easily assert that your transaction reverts.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> assert.reverts(contractMethodAndArguments[, options][, message])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>contractMethodAndArguments</code>: [Function] Contract method to call <code>send</code> on, including the arguments</li>\n<li><code>options</code>: [Object] Optional options to pass to the <code>send</code> function</li>\n<li><code>message</code>: [String] Optional string to match the revert message</li>\n</ul>\n<p>Returns a promise that you can wait for with <code>await</code>.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should revert with a value lower than 5\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> assert.reverts(SimpleStorage.methods.setHigher5(<span class=\"number\">2</span>), &#123;<span class=\"attr\">from</span>: web3.eth.defaultAccount&#125;,</span><br><span class=\"line\">      <span class=\"string\">'Returned error: VM Exception while processing transaction: revert Value needs to be higher than 5'</span>);</span><br><span class=\"line\">  &#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"assert-eventEmitted\"><a href=\"#assert-eventEmitted\" class=\"headerlink\" title=\"assert.eventEmitted\"></a>assert.eventEmitted</h3><p>Using <code>eventEmitted</code>, you can assert that a transaction has emitted an event. You can also check for the returned values.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">assert.eventEmitted(transaction, event[, values])</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>transaction</code>: [Object] Transaction object returns by a <code>send</code> call</li>\n<li><code>event</code>: [String] Name of the event being emitted</li>\n<li><code>values</code>: [Array or Object] Optional array or object of the returned values of the event.<ul>\n<li>Using array: The order of the values put in the array need to match the order in which the values are returned by the event</li>\n<li>Using object: The object needs to have the right key/value pair(s)</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">'asserts that the event was triggered'</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\"> <span class=\"keyword\">const</span> transaction = <span class=\"keyword\">await</span> SimpleStorage.methods.set(<span class=\"number\">100</span>).send();</span><br><span class=\"line\"> assert.eventEmitted(transaction, <span class=\"string\">'EventOnSet'</span>, &#123;<span class=\"attr\">value</span>: <span class=\"string\">\"100\"</span>, <span class=\"attr\">success</span>: <span class=\"literal\">true</span>&#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"increaseTime\"><a href=\"#increaseTime\" class=\"headerlink\" title=\"increaseTime\"></a>increaseTime</h3><p>This function lets you increase the time of the EVM. It is useful in the case where you want to test expiration times for example.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">await</span> increaseTime(amount);</span><br></pre></td></tr></table></figure>\n\n<p><code>amount</code>: [Number] Number of seconds to increase</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(<span class=\"string\">\"should have expired after increasing time\"</span>, <span class=\"keyword\">async</span> <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>&#123;</span><br><span class=\"line\">    <span class=\"keyword\">await</span> increaseTime(<span class=\"number\">5001</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> isExpired = <span class=\"keyword\">await</span> Expiration.methods.isExpired().call();</span><br><span class=\"line\">    assert.strictEqual(isExpired, <span class=\"literal\">true</span>);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Code-coverage\"><a href=\"#Code-coverage\" class=\"headerlink\" title=\"Code coverage\"></a>Code coverage</h2><p>Embark allows you to generate a coverage report for your Solidity Smart Contracts by passing the <code>--coverage</code> option on the <code>embark test</code> command.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test --coverage</span><br></pre></td></tr></table></figure>\n\n<p>The generated report looks something like this:</p>\n<p><img src=\"/coverage-files.png\" alt=\"Coverage Report: Files\"></p>\n<p>This gives us a birds-eye view on the state of the coverage of our Smart Contracts: how many of the functions were called, how many lines were hit, even whether all the branch cases were executed. When selecting a file, a more detailed report is produced. Here’s what it looks like:</p>\n<p><img src=\"/coverage-report.png\" alt=\"Coverage Report: Detailed\"></p>\n"},{"title":"Contributing to Embark","layout":"docs","_content":"\nWe would love for you to contribute to Embark  and help make it even better than it is\ntoday! As a contributor, here are the guidelines we would like you to follow:\n\n - [Code of Conduct](#coc)\n - [Question or Problem?](#question)\n - [Issues and Bugs](#issue)\n - [Feature Requests](#feature)\n - [Submission Guidelines](#submit)\n - [Coding Rules](#rules)\n - [Commit Message Guidelines](#commit)\n\n## <a name=\"coc\"></a> Code of Conduct\nHelp us keep Embark open and inclusive. Please read and follow our [Code of Conduct](https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md).\n\n## <a name=\"question\"></a> Got a Question or Problem?\n\nDo not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Exchange](https://ethereum.stackexchange.com/search?tab=newest&q=embark) where the questions should be tagged with tag `embark`.\n\nStack Exchange is a much better place to ask questions since:\n\n- there are thousands of people willing to help\n- questions and answers stay available for public viewing so your question / answer might help someone else\n- Stack Exchange's voting system assures that the best answers are prominently visible.\n\nTo save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.\n\nIf you would like to chat about the question in real-time, you can reach out via [our gitter channel](https://gitter.im/embark-framework/Lobby).\n\n## <a name=\"issue\"></a> Found a Bug?\nIf you find a bug in the source code, you can help us by\n[submitting an issue](#submit-issue) to our [GitHub Repository](https://github.com/embarklabs/embark/). Even better, you can\n[submit a Pull Request](#submit-pr) with a fix.\n\n## <a name=\"feature\"></a> Missing a Feature?\nYou can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub\nRepository. If you would like to *implement* a new feature, please submit an issue with\na proposal for your work first, to be sure that we can use it.\nPlease consider what kind of change it is:\n\n* For a **Major Feature**, first open an issue and outline your proposal so that it can be\ndiscussed. This will also allow us to better coordinate our efforts, prevent duplication of work,\nand help you to craft the change so that it is successfully accepted into the project.\n* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).\n\n## <a name=\"submit\"></a> Submission Guidelines\n\n### <a name=\"submit-issue\"></a> Submitting an Issue\n\nBefore you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.\n\nWe want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.\n\nYou can file new issues by filling out our [new issue form](https://github.com/embarklabs/embark/issues/new/choose).\n\n### <a name=\"submit-pr\"></a> Submitting a Pull Request (PR)\nBefore you submit your Pull Request (PR) consider the following guidelines:\n\n1. Search [GitHub](https://github.com/embarklabs/embark/pulls) for an open or closed PR\n  that relates to your submission. You don't want to duplicate effort.\n1. Fork the embarklabs/embark repo.\n1. Make your changes in a new git branch:\n\n     ```shell\n     git checkout -b my-fix-branch master\n     ```\n\n1. Create your patch, **including appropriate test cases**.\n1. Run the QA suite, by running `$ npm run qa` and ensure that all steps succeed.\n1. Commit your changes using a descriptive commit message that follows our\n  [commit message conventions](#commit). Adherence to these conventions\n  is necessary because release notes are automatically generated from these messages.\n\n     ```shell\n     git commit -a\n     ```\n    Note: the optional commit `-a` command line option will automatically \"add\" and \"rm\" edited files.\n\n1. Push your branch to GitHub:\n\n    ```shell\n    git push origin my-fix-branch\n    ```\n\n1. In GitHub, send a pull request to `embark:master`.\n* If we suggest changes then:\n  * Make the required updates.\n  * Re-run the test suites to ensure tests are still passing.\n  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):\n\n    ```shell\n    git rebase master -i\n    git push -f\n    ```\n\nThat's it! Thank you for your contribution!\n\n#### After your pull request is merged\n\nAfter your pull request is merged, you can safely delete your branch and pull the changes\nfrom the main (upstream) repository:\n\n* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:\n\n    ```shell\n    git push origin --delete my-fix-branch\n    ```\n\n* Check out the master branch:\n\n    ```shell\n    git checkout master -f\n    ```\n\n* Delete the local branch:\n\n    ```shell\n    git branch -D my-fix-branch\n    ```\n\n* Update your master with the latest upstream version:\n\n    ```shell\n    git pull --ff upstream master\n    ```\n\n## <a name=\"rules\"></a> Coding Rules\nTo ensure consistency throughout the source code, keep these rules in mind as you are working:\n\n* All public API methods **must be documented**.\n\n## <a name=\"commit\"></a> Commit Message Guidelines\n\nWe have very precise rules over how our git commit messages can be formatted.  This leads to **more\nreadable messages** that are easy to follow when looking through the **project history**.  But also,\nwe use the git commit messages to **generate the Embark change log**.\n\n### Commit Message Format\nEach commit message consists of a **header**, a **body** and a **footer**.  The header has a special\nformat that includes a **type**, a **scope** and a **subject**:\n\n```\ntype(@embark|@cockpit/<SCOPE>): <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\nThe **header** is mandatory and the **scope** of the header is optional.\n\nAny line of the commit message cannot be longer 100 characters! This allows the message to be easier\nto read on GitHub as well as in various git tools.\n\nThe footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.\n\nSamples:\n\n```\ndocs(changelog): update changelog to beta.5\n```\n```\nfix(release): need to depend on latest rxjs and zone.js\n\nThe version in our package.json gets copied to the one we publish, and users need the latest of these.\n```\n\n### Revert\nIf the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.\n\n### Type\nMust be one of the following:\n\n* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n* **docs**: Documentation only changes\n* **feat**: A new feature\n* **fix**: A bug fix\n* **perf**: A code change that improves performance\n* **refactor**: A code change that neither fixes a bug nor adds a feature\n* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n* **test**: Adding missing tests or correcting existing tests\n\n### Scope\nThe scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.\n\nThe following is the list of supported scopes:\n\n* **@embark/cli** - Embark command line interface\n* **@embark/core** - Embark core\n* **@embark/<`module`>** - Embark core module (any folder name under `packages/embark/src/lib/modules`), ie `@embark/console` or `@embark/debugger`\n* **@embark/<`package`>** - Embark package in the mono repo (any folder name under `packages`), ie `@embark/embarkjs` or `@embark/embark-compiler`\n* **@embark/<`section`>** - Cockpit site section, ie `@cockpit/explorer`\n\nThere are currently a few exceptions to the \"use package name\" rule:\n\n* **packaging**: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.\n* **changelog**: used for updating the release notes in CHANGELOG.md\n* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)\n\n### Subject\nThe subject contains a succinct description of the change:\n\n* use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n* don't capitalize the first letter\n* no dot (.) at the end\n\n### Body\nJust as in the **subject**, use the imperative, present tense: \"change\" not \"changed\" nor \"changes\".\nThe body should include the motivation for the change and contrast this with previous behavior.\n\n### Footer\nThe footer should contain any information about **Breaking Changes** and is also the place to\nreference GitHub issues that this commit **Closes**.\n\n**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.\n\n","source":"docs/contributing.md","raw":"title: Contributing to Embark\nlayout: docs\n---\n\nWe would love for you to contribute to Embark  and help make it even better than it is\ntoday! As a contributor, here are the guidelines we would like you to follow:\n\n - [Code of Conduct](#coc)\n - [Question or Problem?](#question)\n - [Issues and Bugs](#issue)\n - [Feature Requests](#feature)\n - [Submission Guidelines](#submit)\n - [Coding Rules](#rules)\n - [Commit Message Guidelines](#commit)\n\n## <a name=\"coc\"></a> Code of Conduct\nHelp us keep Embark open and inclusive. Please read and follow our [Code of Conduct](https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md).\n\n## <a name=\"question\"></a> Got a Question or Problem?\n\nDo not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Exchange](https://ethereum.stackexchange.com/search?tab=newest&q=embark) where the questions should be tagged with tag `embark`.\n\nStack Exchange is a much better place to ask questions since:\n\n- there are thousands of people willing to help\n- questions and answers stay available for public viewing so your question / answer might help someone else\n- Stack Exchange's voting system assures that the best answers are prominently visible.\n\nTo save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.\n\nIf you would like to chat about the question in real-time, you can reach out via [our gitter channel](https://gitter.im/embark-framework/Lobby).\n\n## <a name=\"issue\"></a> Found a Bug?\nIf you find a bug in the source code, you can help us by\n[submitting an issue](#submit-issue) to our [GitHub Repository](https://github.com/embarklabs/embark/). Even better, you can\n[submit a Pull Request](#submit-pr) with a fix.\n\n## <a name=\"feature\"></a> Missing a Feature?\nYou can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub\nRepository. If you would like to *implement* a new feature, please submit an issue with\na proposal for your work first, to be sure that we can use it.\nPlease consider what kind of change it is:\n\n* For a **Major Feature**, first open an issue and outline your proposal so that it can be\ndiscussed. This will also allow us to better coordinate our efforts, prevent duplication of work,\nand help you to craft the change so that it is successfully accepted into the project.\n* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).\n\n## <a name=\"submit\"></a> Submission Guidelines\n\n### <a name=\"submit-issue\"></a> Submitting an Issue\n\nBefore you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.\n\nWe want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.\n\nYou can file new issues by filling out our [new issue form](https://github.com/embarklabs/embark/issues/new/choose).\n\n### <a name=\"submit-pr\"></a> Submitting a Pull Request (PR)\nBefore you submit your Pull Request (PR) consider the following guidelines:\n\n1. Search [GitHub](https://github.com/embarklabs/embark/pulls) for an open or closed PR\n  that relates to your submission. You don't want to duplicate effort.\n1. Fork the embarklabs/embark repo.\n1. Make your changes in a new git branch:\n\n     ```shell\n     git checkout -b my-fix-branch master\n     ```\n\n1. Create your patch, **including appropriate test cases**.\n1. Run the QA suite, by running `$ npm run qa` and ensure that all steps succeed.\n1. Commit your changes using a descriptive commit message that follows our\n  [commit message conventions](#commit). Adherence to these conventions\n  is necessary because release notes are automatically generated from these messages.\n\n     ```shell\n     git commit -a\n     ```\n    Note: the optional commit `-a` command line option will automatically \"add\" and \"rm\" edited files.\n\n1. Push your branch to GitHub:\n\n    ```shell\n    git push origin my-fix-branch\n    ```\n\n1. In GitHub, send a pull request to `embark:master`.\n* If we suggest changes then:\n  * Make the required updates.\n  * Re-run the test suites to ensure tests are still passing.\n  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):\n\n    ```shell\n    git rebase master -i\n    git push -f\n    ```\n\nThat's it! Thank you for your contribution!\n\n#### After your pull request is merged\n\nAfter your pull request is merged, you can safely delete your branch and pull the changes\nfrom the main (upstream) repository:\n\n* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:\n\n    ```shell\n    git push origin --delete my-fix-branch\n    ```\n\n* Check out the master branch:\n\n    ```shell\n    git checkout master -f\n    ```\n\n* Delete the local branch:\n\n    ```shell\n    git branch -D my-fix-branch\n    ```\n\n* Update your master with the latest upstream version:\n\n    ```shell\n    git pull --ff upstream master\n    ```\n\n## <a name=\"rules\"></a> Coding Rules\nTo ensure consistency throughout the source code, keep these rules in mind as you are working:\n\n* All public API methods **must be documented**.\n\n## <a name=\"commit\"></a> Commit Message Guidelines\n\nWe have very precise rules over how our git commit messages can be formatted.  This leads to **more\nreadable messages** that are easy to follow when looking through the **project history**.  But also,\nwe use the git commit messages to **generate the Embark change log**.\n\n### Commit Message Format\nEach commit message consists of a **header**, a **body** and a **footer**.  The header has a special\nformat that includes a **type**, a **scope** and a **subject**:\n\n```\ntype(@embark|@cockpit/<SCOPE>): <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\nThe **header** is mandatory and the **scope** of the header is optional.\n\nAny line of the commit message cannot be longer 100 characters! This allows the message to be easier\nto read on GitHub as well as in various git tools.\n\nThe footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.\n\nSamples:\n\n```\ndocs(changelog): update changelog to beta.5\n```\n```\nfix(release): need to depend on latest rxjs and zone.js\n\nThe version in our package.json gets copied to the one we publish, and users need the latest of these.\n```\n\n### Revert\nIf the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.\n\n### Type\nMust be one of the following:\n\n* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n* **docs**: Documentation only changes\n* **feat**: A new feature\n* **fix**: A bug fix\n* **perf**: A code change that improves performance\n* **refactor**: A code change that neither fixes a bug nor adds a feature\n* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n* **test**: Adding missing tests or correcting existing tests\n\n### Scope\nThe scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.\n\nThe following is the list of supported scopes:\n\n* **@embark/cli** - Embark command line interface\n* **@embark/core** - Embark core\n* **@embark/<`module`>** - Embark core module (any folder name under `packages/embark/src/lib/modules`), ie `@embark/console` or `@embark/debugger`\n* **@embark/<`package`>** - Embark package in the mono repo (any folder name under `packages`), ie `@embark/embarkjs` or `@embark/embark-compiler`\n* **@embark/<`section`>** - Cockpit site section, ie `@cockpit/explorer`\n\nThere are currently a few exceptions to the \"use package name\" rule:\n\n* **packaging**: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.\n* **changelog**: used for updating the release notes in CHANGELOG.md\n* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)\n\n### Subject\nThe subject contains a succinct description of the change:\n\n* use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n* don't capitalize the first letter\n* no dot (.) at the end\n\n### Body\nJust as in the **subject**, use the imperative, present tense: \"change\" not \"changed\" nor \"changes\".\nThe body should include the motivation for the change and contrast this with previous behavior.\n\n### Footer\nThe footer should contain any information about **Breaking Changes** and is also the place to\nreference GitHub issues that this commit **Closes**.\n\n**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.\n\n","date":"2020-01-19T20:56:53.009Z","updated":"2020-01-19T20:56:53.009Z","path":"docs/contributing.html","_id":"ck5ijm3tx00297hegejua6ytu","comments":1,"content":"<p>We would love for you to contribute to Embark  and help make it even better than it is<br>today! As a contributor, here are the guidelines we would like you to follow:</p>\n<ul>\n<li><a href=\"#coc\">Code of Conduct</a></li>\n<li><a href=\"#question\">Question or Problem?</a></li>\n<li><a href=\"#issue\">Issues and Bugs</a></li>\n<li><a href=\"#feature\">Feature Requests</a></li>\n<li><a href=\"#submit\">Submission Guidelines</a></li>\n<li><a href=\"#rules\">Coding Rules</a></li>\n<li><a href=\"#commit\">Commit Message Guidelines</a></li>\n</ul>\n<h2 id=\"Code-of-Conduct\"><a href=\"#Code-of-Conduct\" class=\"headerlink\" title=\" Code of Conduct\"></a><a name=\"coc\"></a> Code of Conduct</h2><p>Help us keep Embark open and inclusive. Please read and follow our <a href=\"https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md\" target=\"_blank\" rel=\"noopener\">Code of Conduct</a>.</p>\n<h2 id=\"Got-a-Question-or-Problem\"><a href=\"#Got-a-Question-or-Problem\" class=\"headerlink\" title=\" Got a Question or Problem?\"></a><a name=\"question\"></a> Got a Question or Problem?</h2><p>Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You’ve got much better chances of getting your question answered on <a href=\"https://ethereum.stackexchange.com/search?tab=newest&q=embark\" target=\"_blank\" rel=\"noopener\">Stack Exchange</a> where the questions should be tagged with tag <code>embark</code>.</p>\n<p>Stack Exchange is a much better place to ask questions since:</p>\n<ul>\n<li>there are thousands of people willing to help</li>\n<li>questions and answers stay available for public viewing so your question / answer might help someone else</li>\n<li>Stack Exchange’s voting system assures that the best answers are prominently visible.</li>\n</ul>\n<p>To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.</p>\n<p>If you would like to chat about the question in real-time, you can reach out via <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">our gitter channel</a>.</p>\n<h2 id=\"Found-a-Bug\"><a href=\"#Found-a-Bug\" class=\"headerlink\" title=\" Found a Bug?\"></a><a name=\"issue\"></a> Found a Bug?</h2><p>If you find a bug in the source code, you can help us by<br><a href=\"#submit-issue\">submitting an issue</a> to our <a href=\"https://github.com/embarklabs/embark/\" target=\"_blank\" rel=\"noopener\">GitHub Repository</a>. Even better, you can<br><a href=\"#submit-pr\">submit a Pull Request</a> with a fix.</p>\n<h2 id=\"Missing-a-Feature\"><a href=\"#Missing-a-Feature\" class=\"headerlink\" title=\" Missing a Feature?\"></a><a name=\"feature\"></a> Missing a Feature?</h2><p>You can <em>request</em> a new feature by <a href=\"#submit-issue\">submitting an issue</a> to our GitHub<br>Repository. If you would like to <em>implement</em> a new feature, please submit an issue with<br>a proposal for your work first, to be sure that we can use it.<br>Please consider what kind of change it is:</p>\n<ul>\n<li>For a <strong>Major Feature</strong>, first open an issue and outline your proposal so that it can be<br>discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,<br>and help you to craft the change so that it is successfully accepted into the project.</li>\n<li><strong>Small Features</strong> can be crafted and directly <a href=\"#submit-pr\">submitted as a Pull Request</a>.</li>\n</ul>\n<h2 id=\"Submission-Guidelines\"><a href=\"#Submission-Guidelines\" class=\"headerlink\" title=\" Submission Guidelines\"></a><a name=\"submit\"></a> Submission Guidelines</h2><h3 id=\"Submitting-an-Issue\"><a href=\"#Submitting-an-Issue\" class=\"headerlink\" title=\" Submitting an Issue\"></a><a name=\"submit-issue\"></a> Submitting an Issue</h3><p>Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.</p>\n<p>We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.</p>\n<p>You can file new issues by filling out our <a href=\"https://github.com/embarklabs/embark/issues/new/choose\" target=\"_blank\" rel=\"noopener\">new issue form</a>.</p>\n<h3 id=\"Submitting-a-Pull-Request-PR\"><a href=\"#Submitting-a-Pull-Request-PR\" class=\"headerlink\" title=\" Submitting a Pull Request (PR)\"></a><a name=\"submit-pr\"></a> Submitting a Pull Request (PR)</h3><p>Before you submit your Pull Request (PR) consider the following guidelines:</p>\n<ol>\n<li><p>Search <a href=\"https://github.com/embarklabs/embark/pulls\" target=\"_blank\" rel=\"noopener\">GitHub</a> for an open or closed PR<br>that relates to your submission. You don’t want to duplicate effort.</p>\n</li>\n<li><p>Fork the embarklabs/embark repo.</p>\n</li>\n<li><p>Make your changes in a new git branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout -b my-fix-branch master</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Create your patch, <strong>including appropriate test cases</strong>.</p>\n</li>\n<li><p>Run the QA suite, by running <code>$ npm run qa</code> and ensure that all steps succeed.</p>\n</li>\n<li><p>Commit your changes using a descriptive commit message that follows our<br><a href=\"#commit\">commit message conventions</a>. Adherence to these conventions<br>is necessary because release notes are automatically generated from these messages.</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit -a</span><br></pre></td></tr></table></figure>\n<p> Note: the optional commit <code>-a</code> command line option will automatically “add” and “rm” edited files.</p>\n</li>\n<li><p>Push your branch to GitHub:</p>\n <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>In GitHub, send a pull request to <code>embark:master</code>.</p>\n</li>\n</ol>\n<ul>\n<li><p>If we suggest changes then:</p>\n<ul>\n<li><p>Make the required updates.</p>\n</li>\n<li><p>Re-run the test suites to ensure tests are still passing.</p>\n</li>\n<li><p>Rebase your branch and force push to your GitHub repository (this will update your Pull Request):</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git rebase master -i</span><br><span class=\"line\">git push -f</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n</li>\n</ul>\n<p>That’s it! Thank you for your contribution!</p>\n<h4 id=\"After-your-pull-request-is-merged\"><a href=\"#After-your-pull-request-is-merged\" class=\"headerlink\" title=\"After your pull request is merged\"></a>After your pull request is merged</h4><p>After your pull request is merged, you can safely delete your branch and pull the changes<br>from the main (upstream) repository:</p>\n<ul>\n<li><p>Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin --delete my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Check out the master branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout master -f</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Delete the local branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch -D my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Update your master with the latest upstream version:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git pull --ff upstream master</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n<h2 id=\"Coding-Rules\"><a href=\"#Coding-Rules\" class=\"headerlink\" title=\" Coding Rules\"></a><a name=\"rules\"></a> Coding Rules</h2><p>To ensure consistency throughout the source code, keep these rules in mind as you are working:</p>\n<ul>\n<li>All public API methods <strong>must be documented</strong>.</li>\n</ul>\n<h2 id=\"Commit-Message-Guidelines\"><a href=\"#Commit-Message-Guidelines\" class=\"headerlink\" title=\" Commit Message Guidelines\"></a><a name=\"commit\"></a> Commit Message Guidelines</h2><p>We have very precise rules over how our git commit messages can be formatted.  This leads to <strong>more<br>readable messages</strong> that are easy to follow when looking through the <strong>project history</strong>.  But also,<br>we use the git commit messages to <strong>generate the Embark change log</strong>.</p>\n<h3 id=\"Commit-Message-Format\"><a href=\"#Commit-Message-Format\" class=\"headerlink\" title=\"Commit Message Format\"></a>Commit Message Format</h3><p>Each commit message consists of a <strong>header</strong>, a <strong>body</strong> and a <strong>footer</strong>.  The header has a special<br>format that includes a <strong>type</strong>, a <strong>scope</strong> and a <strong>subject</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">type(@embark|@cockpit&#x2F;&lt;SCOPE&gt;): &lt;subject&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;footer&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The <strong>header</strong> is mandatory and the <strong>scope</strong> of the header is optional.</p>\n<p>Any line of the commit message cannot be longer 100 characters! This allows the message to be easier<br>to read on GitHub as well as in various git tools.</p>\n<p>The footer should contain a <a href=\"https://help.github.com/articles/closing-issues-via-commit-messages/\" target=\"_blank\" rel=\"noopener\">closing reference to an issue</a> if any.</p>\n<p>Samples:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">docs(changelog): update changelog to beta.5</span><br></pre></td></tr></table></figure>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">fix(release): need to depend on latest rxjs and zone.js</span><br><span class=\"line\"></span><br><span class=\"line\">The version in our package.json gets copied to the one we publish, and users need the latest of these.</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Revert\"><a href=\"#Revert\" class=\"headerlink\" title=\"Revert\"></a>Revert</h3><p>If the commit reverts a previous commit, it should begin with <code>revert:</code>, followed by the header of the reverted commit. In the body it should say: <code>This reverts commit &lt;hash&gt;.</code>, where the hash is the SHA of the commit being reverted.</p>\n<h3 id=\"Type\"><a href=\"#Type\" class=\"headerlink\" title=\"Type\"></a>Type</h3><p>Must be one of the following:</p>\n<ul>\n<li><strong>build</strong>: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)</li>\n<li><strong>ci</strong>: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)</li>\n<li><strong>docs</strong>: Documentation only changes</li>\n<li><strong>feat</strong>: A new feature</li>\n<li><strong>fix</strong>: A bug fix</li>\n<li><strong>perf</strong>: A code change that improves performance</li>\n<li><strong>refactor</strong>: A code change that neither fixes a bug nor adds a feature</li>\n<li><strong>style</strong>: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)</li>\n<li><strong>test</strong>: Adding missing tests or correcting existing tests</li>\n</ul>\n<h3 id=\"Scope\"><a href=\"#Scope\" class=\"headerlink\" title=\"Scope\"></a>Scope</h3><p>The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.</p>\n<p>The following is the list of supported scopes:</p>\n<ul>\n<li><strong>@embark/cli</strong> - Embark command line interface</li>\n<li><strong>@embark/core</strong> - Embark core</li>\n<li><strong>@embark/&lt;<code>module</code>&gt;</strong> - Embark core module (any folder name under <code>packages/embark/src/lib/modules</code>), ie <code>@embark/console</code> or <code>@embark/debugger</code></li>\n<li><strong>@embark/&lt;<code>package</code>&gt;</strong> - Embark package in the mono repo (any folder name under <code>packages</code>), ie <code>@embark/embarkjs</code> or <code>@embark/embark-compiler</code></li>\n<li><strong>@embark/&lt;<code>section</code>&gt;</strong> - Cockpit site section, ie <code>@cockpit/explorer</code></li>\n</ul>\n<p>There are currently a few exceptions to the “use package name” rule:</p>\n<ul>\n<li><strong>packaging</strong>: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.</li>\n<li><strong>changelog</strong>: used for updating the release notes in CHANGELOG.md</li>\n<li>none/empty string: useful for <code>style</code>, <code>test</code> and <code>refactor</code> changes that are done across all packages (e.g. <code>style: add missing semicolons</code>)</li>\n</ul>\n<h3 id=\"Subject\"><a href=\"#Subject\" class=\"headerlink\" title=\"Subject\"></a>Subject</h3><p>The subject contains a succinct description of the change:</p>\n<ul>\n<li>use the imperative, present tense: “change” not “changed” nor “changes”</li>\n<li>don’t capitalize the first letter</li>\n<li>no dot (.) at the end</li>\n</ul>\n<h3 id=\"Body\"><a href=\"#Body\" class=\"headerlink\" title=\"Body\"></a>Body</h3><p>Just as in the <strong>subject</strong>, use the imperative, present tense: “change” not “changed” nor “changes”.<br>The body should include the motivation for the change and contrast this with previous behavior.</p>\n<h3 id=\"Footer\"><a href=\"#Footer\" class=\"headerlink\" title=\"Footer\"></a>Footer</h3><p>The footer should contain any information about <strong>Breaking Changes</strong> and is also the place to<br>reference GitHub issues that this commit <strong>Closes</strong>.</p>\n<p><strong>Breaking Changes</strong> should start with the word <code>BREAKING CHANGE:</code> with a space or two newlines. The rest of the commit message is then used for this.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>We would love for you to contribute to Embark  and help make it even better than it is<br>today! As a contributor, here are the guidelines we would like you to follow:</p>\n<ul>\n<li><a href=\"#coc\">Code of Conduct</a></li>\n<li><a href=\"#question\">Question or Problem?</a></li>\n<li><a href=\"#issue\">Issues and Bugs</a></li>\n<li><a href=\"#feature\">Feature Requests</a></li>\n<li><a href=\"#submit\">Submission Guidelines</a></li>\n<li><a href=\"#rules\">Coding Rules</a></li>\n<li><a href=\"#commit\">Commit Message Guidelines</a></li>\n</ul>\n<h2 id=\"Code-of-Conduct\"><a href=\"#Code-of-Conduct\" class=\"headerlink\" title=\" Code of Conduct\"></a><a name=\"coc\"></a> Code of Conduct</h2><p>Help us keep Embark open and inclusive. Please read and follow our <a href=\"https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md\" target=\"_blank\" rel=\"noopener\">Code of Conduct</a>.</p>\n<h2 id=\"Got-a-Question-or-Problem\"><a href=\"#Got-a-Question-or-Problem\" class=\"headerlink\" title=\" Got a Question or Problem?\"></a><a name=\"question\"></a> Got a Question or Problem?</h2><p>Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You’ve got much better chances of getting your question answered on <a href=\"https://ethereum.stackexchange.com/search?tab=newest&q=embark\" target=\"_blank\" rel=\"noopener\">Stack Exchange</a> where the questions should be tagged with tag <code>embark</code>.</p>\n<p>Stack Exchange is a much better place to ask questions since:</p>\n<ul>\n<li>there are thousands of people willing to help</li>\n<li>questions and answers stay available for public viewing so your question / answer might help someone else</li>\n<li>Stack Exchange’s voting system assures that the best answers are prominently visible.</li>\n</ul>\n<p>To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Exchange.</p>\n<p>If you would like to chat about the question in real-time, you can reach out via <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">our gitter channel</a>.</p>\n<h2 id=\"Found-a-Bug\"><a href=\"#Found-a-Bug\" class=\"headerlink\" title=\" Found a Bug?\"></a><a name=\"issue\"></a> Found a Bug?</h2><p>If you find a bug in the source code, you can help us by<br><a href=\"#submit-issue\">submitting an issue</a> to our <a href=\"https://github.com/embarklabs/embark/\" target=\"_blank\" rel=\"noopener\">GitHub Repository</a>. Even better, you can<br><a href=\"#submit-pr\">submit a Pull Request</a> with a fix.</p>\n<h2 id=\"Missing-a-Feature\"><a href=\"#Missing-a-Feature\" class=\"headerlink\" title=\" Missing a Feature?\"></a><a name=\"feature\"></a> Missing a Feature?</h2><p>You can <em>request</em> a new feature by <a href=\"#submit-issue\">submitting an issue</a> to our GitHub<br>Repository. If you would like to <em>implement</em> a new feature, please submit an issue with<br>a proposal for your work first, to be sure that we can use it.<br>Please consider what kind of change it is:</p>\n<ul>\n<li>For a <strong>Major Feature</strong>, first open an issue and outline your proposal so that it can be<br>discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,<br>and help you to craft the change so that it is successfully accepted into the project.</li>\n<li><strong>Small Features</strong> can be crafted and directly <a href=\"#submit-pr\">submitted as a Pull Request</a>.</li>\n</ul>\n<h2 id=\"Submission-Guidelines\"><a href=\"#Submission-Guidelines\" class=\"headerlink\" title=\" Submission Guidelines\"></a><a name=\"submit\"></a> Submission Guidelines</h2><h3 id=\"Submitting-an-Issue\"><a href=\"#Submitting-an-Issue\" class=\"headerlink\" title=\" Submitting an Issue\"></a><a name=\"submit-issue\"></a> Submitting an Issue</h3><p>Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.</p>\n<p>We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide steps to reproduce your issue.</p>\n<p>You can file new issues by filling out our <a href=\"https://github.com/embarklabs/embark/issues/new/choose\" target=\"_blank\" rel=\"noopener\">new issue form</a>.</p>\n<h3 id=\"Submitting-a-Pull-Request-PR\"><a href=\"#Submitting-a-Pull-Request-PR\" class=\"headerlink\" title=\" Submitting a Pull Request (PR)\"></a><a name=\"submit-pr\"></a> Submitting a Pull Request (PR)</h3><p>Before you submit your Pull Request (PR) consider the following guidelines:</p>\n<ol>\n<li><p>Search <a href=\"https://github.com/embarklabs/embark/pulls\" target=\"_blank\" rel=\"noopener\">GitHub</a> for an open or closed PR<br>that relates to your submission. You don’t want to duplicate effort.</p>\n</li>\n<li><p>Fork the embarklabs/embark repo.</p>\n</li>\n<li><p>Make your changes in a new git branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout -b my-fix-branch master</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Create your patch, <strong>including appropriate test cases</strong>.</p>\n</li>\n<li><p>Run the QA suite, by running <code>$ npm run qa</code> and ensure that all steps succeed.</p>\n</li>\n<li><p>Commit your changes using a descriptive commit message that follows our<br><a href=\"#commit\">commit message conventions</a>. Adherence to these conventions<br>is necessary because release notes are automatically generated from these messages.</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit -a</span><br></pre></td></tr></table></figure>\n<p> Note: the optional commit <code>-a</code> command line option will automatically “add” and “rm” edited files.</p>\n</li>\n<li><p>Push your branch to GitHub:</p>\n <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>In GitHub, send a pull request to <code>embark:master</code>.</p>\n</li>\n</ol>\n<ul>\n<li><p>If we suggest changes then:</p>\n<ul>\n<li><p>Make the required updates.</p>\n</li>\n<li><p>Re-run the test suites to ensure tests are still passing.</p>\n</li>\n<li><p>Rebase your branch and force push to your GitHub repository (this will update your Pull Request):</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git rebase master -i</span><br><span class=\"line\">git push -f</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n</li>\n</ul>\n<p>That’s it! Thank you for your contribution!</p>\n<h4 id=\"After-your-pull-request-is-merged\"><a href=\"#After-your-pull-request-is-merged\" class=\"headerlink\" title=\"After your pull request is merged\"></a>After your pull request is merged</h4><p>After your pull request is merged, you can safely delete your branch and pull the changes<br>from the main (upstream) repository:</p>\n<ul>\n<li><p>Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git push origin --delete my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Check out the master branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout master -f</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Delete the local branch:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch -D my-fix-branch</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Update your master with the latest upstream version:</p>\n  <figure class=\"highlight shell\"><table><tr><td class=\"code\"><pre><span class=\"line\">git pull --ff upstream master</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n<h2 id=\"Coding-Rules\"><a href=\"#Coding-Rules\" class=\"headerlink\" title=\" Coding Rules\"></a><a name=\"rules\"></a> Coding Rules</h2><p>To ensure consistency throughout the source code, keep these rules in mind as you are working:</p>\n<ul>\n<li>All public API methods <strong>must be documented</strong>.</li>\n</ul>\n<h2 id=\"Commit-Message-Guidelines\"><a href=\"#Commit-Message-Guidelines\" class=\"headerlink\" title=\" Commit Message Guidelines\"></a><a name=\"commit\"></a> Commit Message Guidelines</h2><p>We have very precise rules over how our git commit messages can be formatted.  This leads to <strong>more<br>readable messages</strong> that are easy to follow when looking through the <strong>project history</strong>.  But also,<br>we use the git commit messages to <strong>generate the Embark change log</strong>.</p>\n<h3 id=\"Commit-Message-Format\"><a href=\"#Commit-Message-Format\" class=\"headerlink\" title=\"Commit Message Format\"></a>Commit Message Format</h3><p>Each commit message consists of a <strong>header</strong>, a <strong>body</strong> and a <strong>footer</strong>.  The header has a special<br>format that includes a <strong>type</strong>, a <strong>scope</strong> and a <strong>subject</strong>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">type(@embark|@cockpit&#x2F;&lt;SCOPE&gt;): &lt;subject&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">&lt;BLANK LINE&gt;</span><br><span class=\"line\">&lt;footer&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The <strong>header</strong> is mandatory and the <strong>scope</strong> of the header is optional.</p>\n<p>Any line of the commit message cannot be longer 100 characters! This allows the message to be easier<br>to read on GitHub as well as in various git tools.</p>\n<p>The footer should contain a <a href=\"https://help.github.com/articles/closing-issues-via-commit-messages/\" target=\"_blank\" rel=\"noopener\">closing reference to an issue</a> if any.</p>\n<p>Samples:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">docs(changelog): update changelog to beta.5</span><br></pre></td></tr></table></figure>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">fix(release): need to depend on latest rxjs and zone.js</span><br><span class=\"line\"></span><br><span class=\"line\">The version in our package.json gets copied to the one we publish, and users need the latest of these.</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Revert\"><a href=\"#Revert\" class=\"headerlink\" title=\"Revert\"></a>Revert</h3><p>If the commit reverts a previous commit, it should begin with <code>revert:</code>, followed by the header of the reverted commit. In the body it should say: <code>This reverts commit &lt;hash&gt;.</code>, where the hash is the SHA of the commit being reverted.</p>\n<h3 id=\"Type\"><a href=\"#Type\" class=\"headerlink\" title=\"Type\"></a>Type</h3><p>Must be one of the following:</p>\n<ul>\n<li><strong>build</strong>: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)</li>\n<li><strong>ci</strong>: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)</li>\n<li><strong>docs</strong>: Documentation only changes</li>\n<li><strong>feat</strong>: A new feature</li>\n<li><strong>fix</strong>: A bug fix</li>\n<li><strong>perf</strong>: A code change that improves performance</li>\n<li><strong>refactor</strong>: A code change that neither fixes a bug nor adds a feature</li>\n<li><strong>style</strong>: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)</li>\n<li><strong>test</strong>: Adding missing tests or correcting existing tests</li>\n</ul>\n<h3 id=\"Scope\"><a href=\"#Scope\" class=\"headerlink\" title=\"Scope\"></a>Scope</h3><p>The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.</p>\n<p>The following is the list of supported scopes:</p>\n<ul>\n<li><strong>@embark/cli</strong> - Embark command line interface</li>\n<li><strong>@embark/core</strong> - Embark core</li>\n<li><strong>@embark/&lt;<code>module</code>&gt;</strong> - Embark core module (any folder name under <code>packages/embark/src/lib/modules</code>), ie <code>@embark/console</code> or <code>@embark/debugger</code></li>\n<li><strong>@embark/&lt;<code>package</code>&gt;</strong> - Embark package in the mono repo (any folder name under <code>packages</code>), ie <code>@embark/embarkjs</code> or <code>@embark/embark-compiler</code></li>\n<li><strong>@embark/&lt;<code>section</code>&gt;</strong> - Cockpit site section, ie <code>@cockpit/explorer</code></li>\n</ul>\n<p>There are currently a few exceptions to the “use package name” rule:</p>\n<ul>\n<li><strong>packaging</strong>: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.</li>\n<li><strong>changelog</strong>: used for updating the release notes in CHANGELOG.md</li>\n<li>none/empty string: useful for <code>style</code>, <code>test</code> and <code>refactor</code> changes that are done across all packages (e.g. <code>style: add missing semicolons</code>)</li>\n</ul>\n<h3 id=\"Subject\"><a href=\"#Subject\" class=\"headerlink\" title=\"Subject\"></a>Subject</h3><p>The subject contains a succinct description of the change:</p>\n<ul>\n<li>use the imperative, present tense: “change” not “changed” nor “changes”</li>\n<li>don’t capitalize the first letter</li>\n<li>no dot (.) at the end</li>\n</ul>\n<h3 id=\"Body\"><a href=\"#Body\" class=\"headerlink\" title=\"Body\"></a>Body</h3><p>Just as in the <strong>subject</strong>, use the imperative, present tense: “change” not “changed” nor “changes”.<br>The body should include the motivation for the change and contrast this with previous behavior.</p>\n<h3 id=\"Footer\"><a href=\"#Footer\" class=\"headerlink\" title=\"Footer\"></a>Footer</h3><p>The footer should contain any information about <strong>Breaking Changes</strong> and is also the place to<br>reference GitHub issues that this commit <strong>Closes</strong>.</p>\n<p><strong>Breaking Changes</strong> should start with the word <code>BREAKING CHANGE:</code> with a space or two newlines. The rest of the commit message is then used for this.</p>\n"},{"title":"Configuring Smart Contracts","layout":"docs","_content":"\nAs many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That's why Embark offers a declarative approach to define what Smart Contracts we're interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.\n\n## Basic Smart Contract Configuration\n\nUnless specified differently in our application's `embark.json`, Smart Contracts are configured either in the `config/contracts.js` file, or, if we're dealing with a [Smart Contract only app](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), the `./contracts.js` file in the root of our project.\n\nA Smart Contract configuration is placed in an environment's `deploy` property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the `SimpleStorage` contract in the `development` environment:\n\n```\nmodule.exports = {\n  ...\n  development: {\n    ...\n    deploy: {\n      SimpleStorage: {\n        ...\n      }\n    }\n  }\n  ...\n}\n```\n\nSmart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our [guide on environments](environments.html) to learn more about this.\n\n### Configuring constructor parameters\n\nOften, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract's constructor parameters using the `args` property. `args` is either a list of values, which will be applied to the Smart Contract's constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n}\n...\n```\n\nThe following configuration configures the `SimpleStorage`'s `initialValue` parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn't matter anymore:\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: {\n        initialValue: 100\n      }\n    }\n  }\n}\n...\n```\n\n### Configuring gas and gas price\n\nBoth, `gas` and `gasPrice` can be configured for each Smart Contract. If we don't want to configure that for every single contract, we can also specify `gas: auto` in the environment, like this:\n\n```\n...\ndevelopment: {\n  gas: 'auto',\n  deploy: {\n    SimpleStorage: {\n      args: [100],\n      gas: 800000,\n      gasPrice: 5\n    }\n  }\n}\n...\n```\n\nAnother cool feature of Embark is that it supports human readable ether units, to improve the developer experience.\n\n{% notification info 'Human readable ether units' %}\n\nEmbark supports **human readable ether units** in places where ether unit values are required. [Read here](#Human-readable-Ether-units) for more information.\n{% endnotification %}\n\n## Configuring Smart Contract Dependencies\n\nWhen building more complex applications, it's very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.\n\nAll we have to do is specifying the name of the Smart Contract we're interested in, prefixed with a \"$\". Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all `$CONTRACT_NAME`'s with their corresponding addresses. Assuming `SimpleStorage` depends on `OtherContract`, this can be easily configured like this:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100, '$OtherContract']\n  },\n  OtherContract: {...}\n}\n...\n```\n\n## Disabling deployment\n\nSometimes we want to configure different behaviour for certain contracts within different [environments](environments.html). One of those cases could be that we don't actually want to deploy `SimpleStorage` in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.\n\nWe can prevent Embark from deploying any of our Smart Contracts by using the `deploy` configuration and setting it to `false` like this:\n\n```\n...\ndevelopment:\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n},\nproduction: {\n  deploy: {\n    SimpleStorage: {\n      deploy: false\n    }\n  }\n}\n...\n```\n\n## Deployment strategies\n\nIn order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called \"deployment strategies\". Deployment strategies tell Embark whether it should deploy all of the user's Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.\n\nThere are two possible strategy options:\n\n- **implicit** - This is the default. Using the `implicit` strategy, Embark tries to deploy all Smart Contracts configured in the `deploy` configuration, including its (3rd-party) dependencies.\n- **explicit** - Setting this option to `explicit` tells Embark to deploy the Smart Contracts specified in the `deploy` configuration without their dependencies. This can be combined with [disabling deployment](#Disabling-deployment) of individual Smart Contracts for fine control.\n\n```\nstrategy: 'explicit' // 'implicit' is the default\ndeploy: {\n  ...\n}\n```\n\n\n## Deploying multiple instances\n\nIn cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the `instanceOf` property and refer to the original Smart Contract that should be deployed multiple times.\n\nThis can then be combined with [disabling the deployment](#Disabling-deployment) of the original Smart Contract like this:\n\n```\n...\ndeploy: {\n  Currency: {\n    deploy: false,\n  },\n  Usd: {\n    instanceOf: 'Currency',\n    args: [200]\n  },\n  MyCoin: {\n    instanceOf: 'Currency',\n    args: [300]\n  }\n}\n...\n```\n\nIn the example above, we deploy `Usd` and `MyCoin` as instances of `Currency`. Notice that `Currency` itself isn't going to be deployed but merely functions as a \"recipe\" to create other instances of it.\n\n## Referencing already deployed Smart Contracts\n\nEmbark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the `address` of the instance in question.\n\nThe following example configures `UserStorage` to be a Smart Contract instance that's already deployed:\n\n```\n...\ndeploy: {\n  UserStorage: {\n    address: '0x123456'\n  }\n}\n...\n```\n\n## Using accounts in arguments\n\nAccounts can be used as arguments using Embark's built-in interpolation syntax, similar to referring to Smart Contract instances.\n\n```\nmodule.exports = {\n  development: {\n    deploy: {\n      MyContractThatNeedsAccountAddresses: {\n        args: ['$accounts[0]', '$accounts[4]']\n      }\n    }\n  }\n}\n```\n\n## Dynamic Addresses\n\nThere are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as `address`, which returns the address we're interested in. Usually, other Smart Contract instances are needed to perform that computation, so the [`deps` configuration](#Deployment-hooks) comes in handy as well:\n\n```\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n  },\n  OtherContract: {\n    deps: ['SimpleStorage'],\n    address: async (deps) => {\n      // use `deps.contracts.SimpleStorage` to determine and return address\n    },\n    abiDefinition: ABI\n  },\n}\n```\n\nIn the example above, `OtherContract` will be deployed after `SimpleStorage` because it uses the `deps` property to define Smart Contracts that it depends on. All dependencies are exposed on the `address` function parameter similar to [deployment hooks](#Deployment-hooks). Also, notice that the `abiDefinition` is only needed if the Smart Contracts bytecode isn't already on disk.\n\n\n## Configuring source files\n\nBy default Embark will look for Smart Contracts inside the folder that's configured in the application's [embark.json](configuration.html#contracts), the default being the `contracts` folder. However, if we want to change the location to look for a single Smart Contract's source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the `file` property.\n\n`file` specifies a full path to a file that contains the source code for the Smart Contract in question.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    file: './some_folder/simple_storage.sol',\n    args: [100]\n  }\n}\n...\n```\n\nIf Embark doesn't find the file in the specified path, it'll expect it to be a path inside installed `node_modules` dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:\n\n```\n...\ndeploy: {\n  ERC20: {\n    file: 'openzeppelin-solidity/contracts/token/ERC20/ERC20.sol'\n  }\n}\n...\n```\n\nEmbark even supports reading the source from `https`, `git`, `ipfs` and `bzz` URIs, enabling us to compile Solidity Smart Contracts that aren't even located in our local machine.\n\n```\n...\ndeploy: {\n  ERC725: {\n    file: 'git://github.com/status/contracts/contracts/identity/ERC725.sol#develop'\n  },\n  ERC725: {\n    file: 'github.com/status/contracts/contracts/identity/ERC725.sol'\n  },\n  Ownable: {\n    file: 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol'\n  }\n}\n...\n```\n\n## Providing ABIs\n\nIn order to use Smart Contract instances created by web3 either in [deployment hooks](Deployment-hooks) or in [Embark's JavaScript client](contracts_javascript.html), Embark needs to get hold of the Smart Contracts' ABIs and pass those on to web3.\n\nThis is not a problem when dealing with Smart Contracts that we own, or at least have [access to their sources](#Configuring-source-files) so we Embark can compile them accordingly. However, if we don't have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the `abiDefinition` property, so Embark can make use of that.\n\nThe following example configures `SimpleStorage` to be already deployed somewhere, but we'd still like to use the web3 instance in our `afterDeploy` hook.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    address: '0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9',\n    abiDefinition: [...]\n  }\n},\nafterDeploy: async (deps) => {\n  const value = await deps.contracts.SimpleStorage.methods.get().call();\n  console.log(value);\n}\n...\n```\n\n`afterDeploy` and other deployment hooks are covered in [Deployment Hooks](#Deployment-hooks).\n\n## Providing Artifacts\n\nSimilar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.\n\nThat way, you don't need to have the contract on disk or even deploy it, if the address is specified in it.\n\nHere is how you can do it:\n\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n## Deployment tracking\n\nEmbark's Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don't have to worry about keeping track of it. The way this works is that, by default, Embark creates a file `./.embark/chains.json` in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:\n\n```\n{\n  BLOCK_HASH {\n    \"contracts\": {\n      HASH(NAME, BYTECODE, ARGS, ADDRESS): {\n        \"name\": NAME,\n        \"address: ADDRESS\n      }\n    }\n  }\n}\n```\n\nWith concrete data, the contents of `chains.json` could look something like this:\n\n```\n{\n  \"0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a\": {\n    \"contracts\": {\n      \"0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be\": {\n        \"name\": \"ENSRegistry\",\n        \"address\": \"0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528\"\n      },\n      \"0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93\": {\n        \"name\": \"Resolver\",\n        \"address\": \"0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f\"\n      },\n      \"0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334\": {\n        \"name\": \"FIFSRegistrar\",\n        \"address\": \"0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E\"\n      },\n      \"0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b\": {\n        \"name\": \"SimpleStorage\",\n        \"address\": \"0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E\"\n      }\n    }\n  }\n}\n```\n\n### Disabling tracking\n\nIf we prefer to have full control over the deployment process and don't want Embark to keep track of individual Smart Contract deployments, we use the `track` configuration and set it `false`.\n\nThe following example ensures `ERC20` won't be tracked and therefore redeployed in every deployment cycle.\n\n```\n...\ndeploy: {\n  ERC20: {\n    track: false\n  }\n}\n...\n```\n\n### Specifying a tracking file\n\nIn addition to enabling and disabling tracking, it's also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don't want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.\n\n```\n...\ntracking: 'path/to/some/file'\n...\n```\n\nHaving the file referenced above under version control ensures that other users of our project don't redeploy the Smart Contracts on different platforms.\n\n\n### Reducing contract size\n\nTo reduce the size of the contract JSON files that are included in the build directory, you can set `minimalContractSize` to `true`. It defaults to `false`.\nWhen set to `true`, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.\n\n```\nminimalContractSize: true,\n```\n\nYou can also have more control over the filtering by adding a `filteredFields` array. In the array, you can add the name of the fields you want to filter out.\nThis is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.\nNote that you need to have `minimalContractSize` set to `true`.\n\n```\nminimalContractSize: true,\nfilteredFields: ['runtimeBytecode', 'realRuntimeBytecode'] // This will filter out only runtimeBytecode and realRuntimeBytecode\n```\n\n\n## Deployment hooks\n\nSometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we'd even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks `beforeDeploy`, `deployIf`, `onDeploy` and `afterDeploy`.\n\nDeployment hooks have access to a `dependencies` object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the `deps` property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current `web3` instance and a `logger` instance as shown in the examples below.\n\n### Conditional Deployment with `deployIf`\n\nWe can specify a condition that decides whether a contract should be deployed by using the `deployIf` hook. `deployIf` is a function that either returns a promise or is created using `async/await` syntax and has to resolve to a boolean value. If the resolve value is `true`, the Smart Contract in question will be deployed. If it's `false`, Embark will skip deploying the Smart Contract in question.\n\n```\n...\ndeploy: {\n  ERC20: {\n    deployIf: async (dependencies) => {\n      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();\n    },\n    deps: ['Manager']\n  },\n  Manager: {...}\n}\n...\n```\n\nNotice how `dependencies.contracts` gives access to the `Manager` contract instance. This however, is only possible because `Manager` has been defined as dependency of `ERC20` using the `deps` property. If we're using a Node version that doesn't support async/await, the same can be achieved using promises like this (web3 APIs already return promises):\n\n```\n...\nERC20: {\n  deployIf: (dependencies) => {\n    return dependencies.contracts.Manager.methods.isUpdateApproved().call();\n  },\n  deps: ['Manager']\n},\n...\n```\n\n### `beforeDeploy` hook\n\n`beforeDeploy` is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the [afterDeploy](#afterDeploy-hook) and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures `beforeDeploy` just for `SimpleStorage`:\n\n```\nSimpleStorage: {\n  beforeDeploy: async () => {\n    console.log('before deploying SimpleStorage');\n  }\n}\n```\n\nWheras this configuration here runs the hook before all Smart Contracts are being deployed:\n\n```\ndeploy: {\n  SimpleStorage: { ... }\n  beforeDeploy: async () => {\n    console.log('Before all deploy');\n  }\n}\n```\n\n### `onDeploy` hook\n\nWe can specify the `onDeploy` hook to execute code, right after a contract has been deployed. Just like `deployIf` and `afterDeploy`, `onDeploy` is a function that has access to the Smart Contract's dependencies defined in its `deps` property. The following example executes `SimpleStorage`'s `set()` method, once deployed.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    onDeploy: async (dependencies) => {\n      await dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n    }\n  }\n}\n...\n```\n\nTo actually `send` transactions and not just make `call`s, you will probably need to provide a `from` account. You can use the `web3` instance inside `dependencies` to get the `defaultAccount` as above.\n\nAlso, as mentioned above, every deployment hook works with plain promises as well:\n\n```\n...\nSimpleStorage: {\n  args: [100],\n  onDeploy: (dependencies) => {\n    return dependencies.contracts.SimpleStorage.methods.set(150).send();\n  }\n}\n...\n```\n\n### `afterDeploy` hook\n\nIf we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the `afterDeploy` hook. The same rules apply here. `afterDeploy` has access to all deployed contract instances through the `dependencies` object.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100]\n  },\n},\nafterDeploy: (dependencies) => {\n  dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n}\n...\n```\n\n### Error Handling\n\nSince we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:\n\n```\nonDeploy: async (dependencies) => {\n  try {\n    await dependencies.contracts.SimpleStorage.methods.set(85).send({from: dependencies.web3.eth.defaultAccount});\n  } catch (e) {\n    console.error('Error during onDeploy', e);\n  }\n}\n```\n\n{% notification info 'A note on deployment hook string syntax' %}\nIn older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don't support functions.\n\nThe examples above can be therefore written as:\n\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\nThis string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n\n### Logging with context\n\nOften we use log statements to either debug code or simply to output what's going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don't drown in the rest of Embark's output, we can use the injected `logger` which prefixes every log message with a context indicator.\n\nFor example, when logging something from within an `onDeploy` hook of a Smart Contract, the output will look like this:\n\n```\nSmartContractName > onDeploy > [YOUR MESSAGE]\n```\n\nThe `logger` is injected as part of the `dependencies` object, so we can use it like this:\n\n```\ndeploy: {\n  SimpleStorage: {\n    onDeploy: async (dependencies) => {\n      dependencies.logger.info('Hello from onDeploy!');\n    }\n  }\n}\n```\n\nWhich will result in\n\n```\nSimpleStorage > onDeploy > Hello from onDeploy!\n```\n\n## Human readable Ether units\n\nEmbark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as `wei`, `kwei`, `Kwei`, `shannon`, `finney`, ... etc.\n\nLet's take the simple Smart Contract configuration from the [configuring gas and gas price](#Configuring-gas-and-gas-price) section:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: 800000,\n    gasPrice: 5\n  }\n}\n...\n```\n\nThis can as well be written as:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: '800 Kwei',\n    gasPrice: 5\n  }\n}\n...\n```\n\nEmbark will take care of converting those units to their dedicated Wei values.\n","source":"docs/contracts_configuration.md","raw":"title: Configuring Smart Contracts\nlayout: docs\n---\n\nAs many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That's why Embark offers a declarative approach to define what Smart Contracts we're interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.\n\n## Basic Smart Contract Configuration\n\nUnless specified differently in our application's `embark.json`, Smart Contracts are configured either in the `config/contracts.js` file, or, if we're dealing with a [Smart Contract only app](create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps), the `./contracts.js` file in the root of our project.\n\nA Smart Contract configuration is placed in an environment's `deploy` property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the `SimpleStorage` contract in the `development` environment:\n\n```\nmodule.exports = {\n  ...\n  development: {\n    ...\n    deploy: {\n      SimpleStorage: {\n        ...\n      }\n    }\n  }\n  ...\n}\n```\n\nSmart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our [guide on environments](environments.html) to learn more about this.\n\n### Configuring constructor parameters\n\nOften, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract's constructor parameters using the `args` property. `args` is either a list of values, which will be applied to the Smart Contract's constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n}\n...\n```\n\nThe following configuration configures the `SimpleStorage`'s `initialValue` parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn't matter anymore:\n\n```\n...\ndevelopment: {\n  deploy: {\n    SimpleStorage: {\n      args: {\n        initialValue: 100\n      }\n    }\n  }\n}\n...\n```\n\n### Configuring gas and gas price\n\nBoth, `gas` and `gasPrice` can be configured for each Smart Contract. If we don't want to configure that for every single contract, we can also specify `gas: auto` in the environment, like this:\n\n```\n...\ndevelopment: {\n  gas: 'auto',\n  deploy: {\n    SimpleStorage: {\n      args: [100],\n      gas: 800000,\n      gasPrice: 5\n    }\n  }\n}\n...\n```\n\nAnother cool feature of Embark is that it supports human readable ether units, to improve the developer experience.\n\n{% notification info 'Human readable ether units' %}\n\nEmbark supports **human readable ether units** in places where ether unit values are required. [Read here](#Human-readable-Ether-units) for more information.\n{% endnotification %}\n\n## Configuring Smart Contract Dependencies\n\nWhen building more complex applications, it's very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.\n\nAll we have to do is specifying the name of the Smart Contract we're interested in, prefixed with a \"$\". Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all `$CONTRACT_NAME`'s with their corresponding addresses. Assuming `SimpleStorage` depends on `OtherContract`, this can be easily configured like this:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100, '$OtherContract']\n  },\n  OtherContract: {...}\n}\n...\n```\n\n## Disabling deployment\n\nSometimes we want to configure different behaviour for certain contracts within different [environments](environments.html). One of those cases could be that we don't actually want to deploy `SimpleStorage` in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.\n\nWe can prevent Embark from deploying any of our Smart Contracts by using the `deploy` configuration and setting it to `false` like this:\n\n```\n...\ndevelopment:\n  deploy: {\n    SimpleStorage: {\n      args: [100]\n    }\n  }\n},\nproduction: {\n  deploy: {\n    SimpleStorage: {\n      deploy: false\n    }\n  }\n}\n...\n```\n\n## Deployment strategies\n\nIn order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called \"deployment strategies\". Deployment strategies tell Embark whether it should deploy all of the user's Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.\n\nThere are two possible strategy options:\n\n- **implicit** - This is the default. Using the `implicit` strategy, Embark tries to deploy all Smart Contracts configured in the `deploy` configuration, including its (3rd-party) dependencies.\n- **explicit** - Setting this option to `explicit` tells Embark to deploy the Smart Contracts specified in the `deploy` configuration without their dependencies. This can be combined with [disabling deployment](#Disabling-deployment) of individual Smart Contracts for fine control.\n\n```\nstrategy: 'explicit' // 'implicit' is the default\ndeploy: {\n  ...\n}\n```\n\n\n## Deploying multiple instances\n\nIn cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the `instanceOf` property and refer to the original Smart Contract that should be deployed multiple times.\n\nThis can then be combined with [disabling the deployment](#Disabling-deployment) of the original Smart Contract like this:\n\n```\n...\ndeploy: {\n  Currency: {\n    deploy: false,\n  },\n  Usd: {\n    instanceOf: 'Currency',\n    args: [200]\n  },\n  MyCoin: {\n    instanceOf: 'Currency',\n    args: [300]\n  }\n}\n...\n```\n\nIn the example above, we deploy `Usd` and `MyCoin` as instances of `Currency`. Notice that `Currency` itself isn't going to be deployed but merely functions as a \"recipe\" to create other instances of it.\n\n## Referencing already deployed Smart Contracts\n\nEmbark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the `address` of the instance in question.\n\nThe following example configures `UserStorage` to be a Smart Contract instance that's already deployed:\n\n```\n...\ndeploy: {\n  UserStorage: {\n    address: '0x123456'\n  }\n}\n...\n```\n\n## Using accounts in arguments\n\nAccounts can be used as arguments using Embark's built-in interpolation syntax, similar to referring to Smart Contract instances.\n\n```\nmodule.exports = {\n  development: {\n    deploy: {\n      MyContractThatNeedsAccountAddresses: {\n        args: ['$accounts[0]', '$accounts[4]']\n      }\n    }\n  }\n}\n```\n\n## Dynamic Addresses\n\nThere are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as `address`, which returns the address we're interested in. Usually, other Smart Contract instances are needed to perform that computation, so the [`deps` configuration](#Deployment-hooks) comes in handy as well:\n\n```\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n  },\n  OtherContract: {\n    deps: ['SimpleStorage'],\n    address: async (deps) => {\n      // use `deps.contracts.SimpleStorage` to determine and return address\n    },\n    abiDefinition: ABI\n  },\n}\n```\n\nIn the example above, `OtherContract` will be deployed after `SimpleStorage` because it uses the `deps` property to define Smart Contracts that it depends on. All dependencies are exposed on the `address` function parameter similar to [deployment hooks](#Deployment-hooks). Also, notice that the `abiDefinition` is only needed if the Smart Contracts bytecode isn't already on disk.\n\n\n## Configuring source files\n\nBy default Embark will look for Smart Contracts inside the folder that's configured in the application's [embark.json](configuration.html#contracts), the default being the `contracts` folder. However, if we want to change the location to look for a single Smart Contract's source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the `file` property.\n\n`file` specifies a full path to a file that contains the source code for the Smart Contract in question.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    file: './some_folder/simple_storage.sol',\n    args: [100]\n  }\n}\n...\n```\n\nIf Embark doesn't find the file in the specified path, it'll expect it to be a path inside installed `node_modules` dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:\n\n```\n...\ndeploy: {\n  ERC20: {\n    file: 'openzeppelin-solidity/contracts/token/ERC20/ERC20.sol'\n  }\n}\n...\n```\n\nEmbark even supports reading the source from `https`, `git`, `ipfs` and `bzz` URIs, enabling us to compile Solidity Smart Contracts that aren't even located in our local machine.\n\n```\n...\ndeploy: {\n  ERC725: {\n    file: 'git://github.com/status/contracts/contracts/identity/ERC725.sol#develop'\n  },\n  ERC725: {\n    file: 'github.com/status/contracts/contracts/identity/ERC725.sol'\n  },\n  Ownable: {\n    file: 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol'\n  }\n}\n...\n```\n\n## Providing ABIs\n\nIn order to use Smart Contract instances created by web3 either in [deployment hooks](Deployment-hooks) or in [Embark's JavaScript client](contracts_javascript.html), Embark needs to get hold of the Smart Contracts' ABIs and pass those on to web3.\n\nThis is not a problem when dealing with Smart Contracts that we own, or at least have [access to their sources](#Configuring-source-files) so we Embark can compile them accordingly. However, if we don't have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the `abiDefinition` property, so Embark can make use of that.\n\nThe following example configures `SimpleStorage` to be already deployed somewhere, but we'd still like to use the web3 instance in our `afterDeploy` hook.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    address: '0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9',\n    abiDefinition: [...]\n  }\n},\nafterDeploy: async (deps) => {\n  const value = await deps.contracts.SimpleStorage.methods.get().call();\n  console.log(value);\n}\n...\n```\n\n`afterDeploy` and other deployment hooks are covered in [Deployment Hooks](#Deployment-hooks).\n\n## Providing Artifacts\n\nSimilar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.\n\nThat way, you don't need to have the contract on disk or even deploy it, if the address is specified in it.\n\nHere is how you can do it:\n\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n## Deployment tracking\n\nEmbark's Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don't have to worry about keeping track of it. The way this works is that, by default, Embark creates a file `./.embark/chains.json` in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:\n\n```\n{\n  BLOCK_HASH {\n    \"contracts\": {\n      HASH(NAME, BYTECODE, ARGS, ADDRESS): {\n        \"name\": NAME,\n        \"address: ADDRESS\n      }\n    }\n  }\n}\n```\n\nWith concrete data, the contents of `chains.json` could look something like this:\n\n```\n{\n  \"0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a\": {\n    \"contracts\": {\n      \"0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be\": {\n        \"name\": \"ENSRegistry\",\n        \"address\": \"0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528\"\n      },\n      \"0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93\": {\n        \"name\": \"Resolver\",\n        \"address\": \"0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f\"\n      },\n      \"0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334\": {\n        \"name\": \"FIFSRegistrar\",\n        \"address\": \"0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E\"\n      },\n      \"0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b\": {\n        \"name\": \"SimpleStorage\",\n        \"address\": \"0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E\"\n      }\n    }\n  }\n}\n```\n\n### Disabling tracking\n\nIf we prefer to have full control over the deployment process and don't want Embark to keep track of individual Smart Contract deployments, we use the `track` configuration and set it `false`.\n\nThe following example ensures `ERC20` won't be tracked and therefore redeployed in every deployment cycle.\n\n```\n...\ndeploy: {\n  ERC20: {\n    track: false\n  }\n}\n...\n```\n\n### Specifying a tracking file\n\nIn addition to enabling and disabling tracking, it's also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don't want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.\n\n```\n...\ntracking: 'path/to/some/file'\n...\n```\n\nHaving the file referenced above under version control ensures that other users of our project don't redeploy the Smart Contracts on different platforms.\n\n\n### Reducing contract size\n\nTo reduce the size of the contract JSON files that are included in the build directory, you can set `minimalContractSize` to `true`. It defaults to `false`.\nWhen set to `true`, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.\n\n```\nminimalContractSize: true,\n```\n\nYou can also have more control over the filtering by adding a `filteredFields` array. In the array, you can add the name of the fields you want to filter out.\nThis is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.\nNote that you need to have `minimalContractSize` set to `true`.\n\n```\nminimalContractSize: true,\nfilteredFields: ['runtimeBytecode', 'realRuntimeBytecode'] // This will filter out only runtimeBytecode and realRuntimeBytecode\n```\n\n\n## Deployment hooks\n\nSometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we'd even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks `beforeDeploy`, `deployIf`, `onDeploy` and `afterDeploy`.\n\nDeployment hooks have access to a `dependencies` object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the `deps` property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current `web3` instance and a `logger` instance as shown in the examples below.\n\n### Conditional Deployment with `deployIf`\n\nWe can specify a condition that decides whether a contract should be deployed by using the `deployIf` hook. `deployIf` is a function that either returns a promise or is created using `async/await` syntax and has to resolve to a boolean value. If the resolve value is `true`, the Smart Contract in question will be deployed. If it's `false`, Embark will skip deploying the Smart Contract in question.\n\n```\n...\ndeploy: {\n  ERC20: {\n    deployIf: async (dependencies) => {\n      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();\n    },\n    deps: ['Manager']\n  },\n  Manager: {...}\n}\n...\n```\n\nNotice how `dependencies.contracts` gives access to the `Manager` contract instance. This however, is only possible because `Manager` has been defined as dependency of `ERC20` using the `deps` property. If we're using a Node version that doesn't support async/await, the same can be achieved using promises like this (web3 APIs already return promises):\n\n```\n...\nERC20: {\n  deployIf: (dependencies) => {\n    return dependencies.contracts.Manager.methods.isUpdateApproved().call();\n  },\n  deps: ['Manager']\n},\n...\n```\n\n### `beforeDeploy` hook\n\n`beforeDeploy` is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the [afterDeploy](#afterDeploy-hook) and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures `beforeDeploy` just for `SimpleStorage`:\n\n```\nSimpleStorage: {\n  beforeDeploy: async () => {\n    console.log('before deploying SimpleStorage');\n  }\n}\n```\n\nWheras this configuration here runs the hook before all Smart Contracts are being deployed:\n\n```\ndeploy: {\n  SimpleStorage: { ... }\n  beforeDeploy: async () => {\n    console.log('Before all deploy');\n  }\n}\n```\n\n### `onDeploy` hook\n\nWe can specify the `onDeploy` hook to execute code, right after a contract has been deployed. Just like `deployIf` and `afterDeploy`, `onDeploy` is a function that has access to the Smart Contract's dependencies defined in its `deps` property. The following example executes `SimpleStorage`'s `set()` method, once deployed.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    onDeploy: async (dependencies) => {\n      await dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n    }\n  }\n}\n...\n```\n\nTo actually `send` transactions and not just make `call`s, you will probably need to provide a `from` account. You can use the `web3` instance inside `dependencies` to get the `defaultAccount` as above.\n\nAlso, as mentioned above, every deployment hook works with plain promises as well:\n\n```\n...\nSimpleStorage: {\n  args: [100],\n  onDeploy: (dependencies) => {\n    return dependencies.contracts.SimpleStorage.methods.set(150).send();\n  }\n}\n...\n```\n\n### `afterDeploy` hook\n\nIf we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the `afterDeploy` hook. The same rules apply here. `afterDeploy` has access to all deployed contract instances through the `dependencies` object.\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100]\n  },\n},\nafterDeploy: (dependencies) => {\n  dependencies.contracts.SimpleStorage.methods.set(150).send({from: dependencies.web3.eth.defaultAccount});\n}\n...\n```\n\n### Error Handling\n\nSince we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:\n\n```\nonDeploy: async (dependencies) => {\n  try {\n    await dependencies.contracts.SimpleStorage.methods.set(85).send({from: dependencies.web3.eth.defaultAccount});\n  } catch (e) {\n    console.error('Error during onDeploy', e);\n  }\n}\n```\n\n{% notification info 'A note on deployment hook string syntax' %}\nIn older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don't support functions.\n\nThe examples above can be therefore written as:\n\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\nThis string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.\n{% endnotification %}\n\n### Logging with context\n\nOften we use log statements to either debug code or simply to output what's going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don't drown in the rest of Embark's output, we can use the injected `logger` which prefixes every log message with a context indicator.\n\nFor example, when logging something from within an `onDeploy` hook of a Smart Contract, the output will look like this:\n\n```\nSmartContractName > onDeploy > [YOUR MESSAGE]\n```\n\nThe `logger` is injected as part of the `dependencies` object, so we can use it like this:\n\n```\ndeploy: {\n  SimpleStorage: {\n    onDeploy: async (dependencies) => {\n      dependencies.logger.info('Hello from onDeploy!');\n    }\n  }\n}\n```\n\nWhich will result in\n\n```\nSimpleStorage > onDeploy > Hello from onDeploy!\n```\n\n## Human readable Ether units\n\nEmbark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as `wei`, `kwei`, `Kwei`, `shannon`, `finney`, ... etc.\n\nLet's take the simple Smart Contract configuration from the [configuring gas and gas price](#Configuring-gas-and-gas-price) section:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: 800000,\n    gasPrice: 5\n  }\n}\n...\n```\n\nThis can as well be written as:\n\n```\n...\ndeploy: {\n  SimpleStorage: {\n    args: [100],\n    gas: '800 Kwei',\n    gasPrice: 5\n  }\n}\n...\n```\n\nEmbark will take care of converting those units to their dedicated Wei values.\n","date":"2020-01-17T19:00:03.896Z","updated":"2020-01-17T19:00:03.896Z","path":"docs/contracts_configuration.html","comments":1,"_id":"ck5ijm3ui002s7heg7xxzgbhz","content":"<p>As many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That’s why Embark offers a declarative approach to define what Smart Contracts we’re interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.</p>\n<h2 id=\"Basic-Smart-Contract-Configuration\"><a href=\"#Basic-Smart-Contract-Configuration\" class=\"headerlink\" title=\"Basic Smart Contract Configuration\"></a>Basic Smart Contract Configuration</h2><p>Unless specified differently in our application’s <code>embark.json</code>, Smart Contracts are configured either in the <code>config/contracts.js</code> file, or, if we’re dealing with a <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">Smart Contract only app</a>, the <code>./contracts.js</code> file in the root of our project.</p>\n<p>A Smart Contract configuration is placed in an environment’s <code>deploy</code> property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the <code>SimpleStorage</code> contract in the <code>development</code> environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Smart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our <a href=\"environments.html\">guide on environments</a> to learn more about this.</p>\n<h3 id=\"Configuring-constructor-parameters\"><a href=\"#Configuring-constructor-parameters\" class=\"headerlink\" title=\"Configuring constructor parameters\"></a>Configuring constructor parameters</h3><p>Often, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract’s constructor parameters using the <code>args</code> property. <code>args</code> is either a list of values, which will be applied to the Smart Contract’s constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The following configuration configures the <code>SimpleStorage</code>‘s <code>initialValue</code> parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn’t matter anymore:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: &#123;</span><br><span class=\"line\">        initialValue: 100</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Configuring-gas-and-gas-price\"><a href=\"#Configuring-gas-and-gas-price\" class=\"headerlink\" title=\"Configuring gas and gas price\"></a>Configuring gas and gas price</h3><p>Both, <code>gas</code> and <code>gasPrice</code> can be configured for each Smart Contract. If we don’t want to configure that for every single contract, we can also specify <code>gas: auto</code> in the environment, like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  gas: &#39;auto&#39;,</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100],</span><br><span class=\"line\">      gas: 800000,</span><br><span class=\"line\">      gasPrice: 5</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Another cool feature of Embark is that it supports human readable ether units, to improve the developer experience.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Human readable ether units</strong></p>\n  <p><p>Embark supports <strong>human readable ether units</strong> in places where ether unit values are required. <a href=\"#Human-readable-Ether-units\">Read here</a> for more information.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-Smart-Contract-Dependencies\"><a href=\"#Configuring-Smart-Contract-Dependencies\" class=\"headerlink\" title=\"Configuring Smart Contract Dependencies\"></a>Configuring Smart Contract Dependencies</h2><p>When building more complex applications, it’s very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.</p>\n<p>All we have to do is specifying the name of the Smart Contract we’re interested in, prefixed with a “$”. Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all <code>$CONTRACT_NAME</code>‘s with their corresponding addresses. Assuming <code>SimpleStorage</code> depends on <code>OtherContract</code>, this can be easily configured like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100, &#39;$OtherContract&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Disabling-deployment\"><a href=\"#Disabling-deployment\" class=\"headerlink\" title=\"Disabling deployment\"></a>Disabling deployment</h2><p>Sometimes we want to configure different behaviour for certain contracts within different <a href=\"environments.html\">environments</a>. One of those cases could be that we don’t actually want to deploy <code>SimpleStorage</code> in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.</p>\n<p>We can prevent Embark from deploying any of our Smart Contracts by using the <code>deploy</code> configuration and setting it to <code>false</code> like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development:</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">production: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      deploy: false</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Deployment-strategies\"><a href=\"#Deployment-strategies\" class=\"headerlink\" title=\"Deployment strategies\"></a>Deployment strategies</h2><p>In order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called “deployment strategies”. Deployment strategies tell Embark whether it should deploy all of the user’s Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.</p>\n<p>There are two possible strategy options:</p>\n<ul>\n<li><strong>implicit</strong> - This is the default. Using the <code>implicit</code> strategy, Embark tries to deploy all Smart Contracts configured in the <code>deploy</code> configuration, including its (3rd-party) dependencies.</li>\n<li><strong>explicit</strong> - Setting this option to <code>explicit</code> tells Embark to deploy the Smart Contracts specified in the <code>deploy</code> configuration without their dependencies. This can be combined with <a href=\"#Disabling-deployment\">disabling deployment</a> of individual Smart Contracts for fine control.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">strategy: &#39;explicit&#39; &#x2F;&#x2F; &#39;implicit&#39; is the default</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deploying-multiple-instances\"><a href=\"#Deploying-multiple-instances\" class=\"headerlink\" title=\"Deploying multiple instances\"></a>Deploying multiple instances</h2><p>In cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the <code>instanceOf</code> property and refer to the original Smart Contract that should be deployed multiple times.</p>\n<p>This can then be combined with <a href=\"#Disabling-deployment\">disabling the deployment</a> of the original Smart Contract like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Currency: &#123;</span><br><span class=\"line\">    deploy: false,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Usd: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [200]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  MyCoin: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [300]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, we deploy <code>Usd</code> and <code>MyCoin</code> as instances of <code>Currency</code>. Notice that <code>Currency</code> itself isn’t going to be deployed but merely functions as a “recipe” to create other instances of it.</p>\n<h2 id=\"Referencing-already-deployed-Smart-Contracts\"><a href=\"#Referencing-already-deployed-Smart-Contracts\" class=\"headerlink\" title=\"Referencing already deployed Smart Contracts\"></a>Referencing already deployed Smart Contracts</h2><p>Embark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the <code>address</code> of the instance in question.</p>\n<p>The following example configures <code>UserStorage</code> to be a Smart Contract instance that’s already deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  UserStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x123456&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-accounts-in-arguments\"><a href=\"#Using-accounts-in-arguments\" class=\"headerlink\" title=\"Using accounts in arguments\"></a>Using accounts in arguments</h2><p>Accounts can be used as arguments using Embark’s built-in interpolation syntax, similar to referring to Smart Contract instances.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      MyContractThatNeedsAccountAddresses: &#123;</span><br><span class=\"line\">        args: [&#39;$accounts[0]&#39;, &#39;$accounts[4]&#39;]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Dynamic-Addresses\"><a href=\"#Dynamic-Addresses\" class=\"headerlink\" title=\"Dynamic Addresses\"></a>Dynamic Addresses</h2><p>There are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as <code>address</code>, which returns the address we’re interested in. Usually, other Smart Contract instances are needed to perform that computation, so the <a href=\"#Deployment-hooks\"><code>deps</code> configuration</a> comes in handy as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: 0,</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;</span><br><span class=\"line\">    deps: [&#39;SimpleStorage&#39;],</span><br><span class=\"line\">    address: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; use &#96;deps.contracts.SimpleStorage&#96; to determine and return address</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    abiDefinition: ABI</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, <code>OtherContract</code> will be deployed after <code>SimpleStorage</code> because it uses the <code>deps</code> property to define Smart Contracts that it depends on. All dependencies are exposed on the <code>address</code> function parameter similar to <a href=\"#Deployment-hooks\">deployment hooks</a>. Also, notice that the <code>abiDefinition</code> is only needed if the Smart Contracts bytecode isn’t already on disk.</p>\n<h2 id=\"Configuring-source-files\"><a href=\"#Configuring-source-files\" class=\"headerlink\" title=\"Configuring source files\"></a>Configuring source files</h2><p>By default Embark will look for Smart Contracts inside the folder that’s configured in the application’s <a href=\"configuration.html#contracts\">embark.json</a>, the default being the <code>contracts</code> folder. However, if we want to change the location to look for a single Smart Contract’s source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the <code>file</code> property.</p>\n<p><code>file</code> specifies a full path to a file that contains the source code for the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    file: &#39;.&#x2F;some_folder&#x2F;simple_storage.sol&#39;,</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>If Embark doesn’t find the file in the specified path, it’ll expect it to be a path inside installed <code>node_modules</code> dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    file: &#39;openzeppelin-solidity&#x2F;contracts&#x2F;token&#x2F;ERC20&#x2F;ERC20.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark even supports reading the source from <code>https</code>, <code>git</code>, <code>ipfs</code> and <code>bzz</code> URIs, enabling us to compile Solidity Smart Contracts that aren’t even located in our local machine.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    file: &#39;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Providing-ABIs\"><a href=\"#Providing-ABIs\" class=\"headerlink\" title=\"Providing ABIs\"></a>Providing ABIs</h2><p>In order to use Smart Contract instances created by web3 either in <a href=\"Deployment-hooks\">deployment hooks</a> or in <a href=\"contracts_javascript.html\">Embark’s JavaScript client</a>, Embark needs to get hold of the Smart Contracts’ ABIs and pass those on to web3.</p>\n<p>This is not a problem when dealing with Smart Contracts that we own, or at least have <a href=\"#Configuring-source-files\">access to their sources</a> so we Embark can compile them accordingly. However, if we don’t have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the <code>abiDefinition</code> property, so Embark can make use of that.</p>\n<p>The following example configures <code>SimpleStorage</code> to be already deployed somewhere, but we’d still like to use the web3 instance in our <code>afterDeploy</code> hook.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9&#39;,</span><br><span class=\"line\">    abiDefinition: [...]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const value &#x3D; await deps.contracts.SimpleStorage.methods.get().call();</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p><code>afterDeploy</code> and other deployment hooks are covered in <a href=\"#Deployment-hooks\">Deployment Hooks</a>.</p>\n<h2 id=\"Providing-Artifacts\"><a href=\"#Providing-Artifacts\" class=\"headerlink\" title=\"Providing Artifacts\"></a>Providing Artifacts</h2><p>Similar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.</p>\n<p>That way, you don’t need to have the contract on disk or even deploy it, if the address is specified in it.</p>\n<p>Here is how you can do it:</p>\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n<h2 id=\"Deployment-tracking\"><a href=\"#Deployment-tracking\" class=\"headerlink\" title=\"Deployment tracking\"></a>Deployment tracking</h2><p>Embark’s Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don’t have to worry about keeping track of it. The way this works is that, by default, Embark creates a file <code>./.embark/chains.json</code> in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  BLOCK_HASH &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      HASH(NAME, BYTECODE, ARGS, ADDRESS): &#123;</span><br><span class=\"line\">        &quot;name&quot;: NAME,</span><br><span class=\"line\">        &quot;address: ADDRESS</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With concrete data, the contents of <code>chains.json</code> could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a&quot;: &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      &quot;0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;ENSRegistry&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;Resolver&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;FIFSRegistrar&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;SimpleStorage&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Disabling-tracking\"><a href=\"#Disabling-tracking\" class=\"headerlink\" title=\"Disabling tracking\"></a>Disabling tracking</h3><p>If we prefer to have full control over the deployment process and don’t want Embark to keep track of individual Smart Contract deployments, we use the <code>track</code> configuration and set it <code>false</code>.</p>\n<p>The following example ensures <code>ERC20</code> won’t be tracked and therefore redeployed in every deployment cycle.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    track: false</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Specifying-a-tracking-file\"><a href=\"#Specifying-a-tracking-file\" class=\"headerlink\" title=\"Specifying a tracking file\"></a>Specifying a tracking file</h3><p>In addition to enabling and disabling tracking, it’s also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don’t want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">tracking: &#39;path&#x2F;to&#x2F;some&#x2F;file&#39;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Having the file referenced above under version control ensures that other users of our project don’t redeploy the Smart Contracts on different platforms.</p>\n<h3 id=\"Reducing-contract-size\"><a href=\"#Reducing-contract-size\" class=\"headerlink\" title=\"Reducing contract size\"></a>Reducing contract size</h3><p>To reduce the size of the contract JSON files that are included in the build directory, you can set <code>minimalContractSize</code> to <code>true</code>. It defaults to <code>false</code>.<br>When set to <code>true</code>, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br></pre></td></tr></table></figure>\n\n<p>You can also have more control over the filtering by adding a <code>filteredFields</code> array. In the array, you can add the name of the fields you want to filter out.<br>This is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.<br>Note that you need to have <code>minimalContractSize</code> set to <code>true</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br><span class=\"line\">filteredFields: [&#39;runtimeBytecode&#39;, &#39;realRuntimeBytecode&#39;] &#x2F;&#x2F; This will filter out only runtimeBytecode and realRuntimeBytecode</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deployment-hooks\"><a href=\"#Deployment-hooks\" class=\"headerlink\" title=\"Deployment hooks\"></a>Deployment hooks</h2><p>Sometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we’d even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks <code>beforeDeploy</code>, <code>deployIf</code>, <code>onDeploy</code> and <code>afterDeploy</code>.</p>\n<p>Deployment hooks have access to a <code>dependencies</code> object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the <code>deps</code> property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current <code>web3</code> instance and a <code>logger</code> instance as shown in the examples below.</p>\n<h3 id=\"Conditional-Deployment-with-deployIf\"><a href=\"#Conditional-Deployment-with-deployIf\" class=\"headerlink\" title=\"Conditional Deployment with deployIf\"></a>Conditional Deployment with <code>deployIf</code></h3><p>We can specify a condition that decides whether a contract should be deployed by using the <code>deployIf</code> hook. <code>deployIf</code> is a function that either returns a promise or is created using <code>async/await</code> syntax and has to resolve to a boolean value. If the resolve value is <code>true</code>, the Smart Contract in question will be deployed. If it’s <code>false</code>, Embark will skip deploying the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    deployIf: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    deps: [&#39;Manager&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Manager: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Notice how <code>dependencies.contracts</code> gives access to the <code>Manager</code> contract instance. This however, is only possible because <code>Manager</code> has been defined as dependency of <code>ERC20</code> using the <code>deps</code> property. If we’re using a Node version that doesn’t support async/await, the same can be achieved using promises like this (web3 APIs already return promises):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">ERC20: &#123;</span><br><span class=\"line\">  deployIf: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  deps: [&#39;Manager&#39;]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"beforeDeploy-hook\"><a href=\"#beforeDeploy-hook\" class=\"headerlink\" title=\"beforeDeploy hook\"></a><code>beforeDeploy</code> hook</h3><p><code>beforeDeploy</code> is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the <a href=\"#afterDeploy-hook\">afterDeploy</a> and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures <code>beforeDeploy</code> just for <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;before deploying SimpleStorage&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wheras this configuration here runs the hook before all Smart Contracts are being deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123; ... &#125;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;Before all deploy&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"onDeploy-hook\"><a href=\"#onDeploy-hook\" class=\"headerlink\" title=\"onDeploy hook\"></a><code>onDeploy</code> hook</h3><p>We can specify the <code>onDeploy</code> hook to execute code, right after a contract has been deployed. Just like <code>deployIf</code> and <code>afterDeploy</code>, <code>onDeploy</code> is a function that has access to the Smart Contract’s dependencies defined in its <code>deps</code> property. The following example executes <code>SimpleStorage</code>‘s <code>set()</code> method, once deployed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      await dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>To actually <code>send</code> transactions and not just make <code>call</code>s, you will probably need to provide a <code>from</code> account. You can use the <code>web3</code> instance inside <code>dependencies</code> to get the <code>defaultAccount</code> as above.</p>\n<p>Also, as mentioned above, every deployment hook works with plain promises as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [100],</span><br><span class=\"line\">  onDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.SimpleStorage.methods.set(150).send();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"afterDeploy-hook\"><a href=\"#afterDeploy-hook\" class=\"headerlink\" title=\"afterDeploy hook\"></a><code>afterDeploy</code> hook</h3><p>If we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the <code>afterDeploy</code> hook. The same rules apply here. <code>afterDeploy</code> has access to all deployed contract instances through the <code>dependencies</code> object.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Error-Handling\"><a href=\"#Error-Handling\" class=\"headerlink\" title=\"Error Handling\"></a>Error Handling</h3><p>Since we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    await dependencies.contracts.SimpleStorage.methods.set(85).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">  &#125; catch (e) &#123;</span><br><span class=\"line\">    console.error(&#39;Error during onDeploy&#39;, e);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on deployment hook string syntax</strong></p>\n  <p><p>In older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don’t support functions.</p>\n<p>The examples above can be therefore written as:</p>\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\n<p>This string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Logging-with-context\"><a href=\"#Logging-with-context\" class=\"headerlink\" title=\"Logging with context\"></a>Logging with context</h3><p>Often we use log statements to either debug code or simply to output what’s going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don’t drown in the rest of Embark’s output, we can use the injected <code>logger</code> which prefixes every log message with a context indicator.</p>\n<p>For example, when logging something from within an <code>onDeploy</code> hook of a Smart Contract, the output will look like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SmartContractName &gt; onDeploy &gt; [YOUR MESSAGE]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>logger</code> is injected as part of the <code>dependencies</code> object, so we can use it like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      dependencies.logger.info(&#39;Hello from onDeploy!&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Which will result in</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage &gt; onDeploy &gt; Hello from onDeploy!</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Human-readable-Ether-units\"><a href=\"#Human-readable-Ether-units\" class=\"headerlink\" title=\"Human readable Ether units\"></a>Human readable Ether units</h2><p>Embark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as <code>wei</code>, <code>kwei</code>, <code>Kwei</code>, <code>shannon</code>, <code>finney</code>, … etc.</p>\n<p>Let’s take the simple Smart Contract configuration from the <a href=\"#Configuring-gas-and-gas-price\">configuring gas and gas price</a> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: 800000,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This can as well be written as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: &#39;800 Kwei&#39;,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark will take care of converting those units to their dedicated Wei values.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>As many decentralized applications are powered by Smart Contracts, configuring and deploying them should be easy. That’s why Embark offers a declarative approach to define what Smart Contracts we’re interested in to deploy, what their dependencies are, as well as what they should be initialized with once instantiated. This guide will explore the different configuration options that help making deploying Smart Contracts a breeze.</p>\n<h2 id=\"Basic-Smart-Contract-Configuration\"><a href=\"#Basic-Smart-Contract-Configuration\" class=\"headerlink\" title=\"Basic Smart Contract Configuration\"></a>Basic Smart Contract Configuration</h2><p>Unless specified differently in our application’s <code>embark.json</code>, Smart Contracts are configured either in the <code>config/contracts.js</code> file, or, if we’re dealing with a <a href=\"create_project.html#Creating-%E2%80%9Ccontracts-only%E2%80%9D-apps\">Smart Contract only app</a>, the <code>./contracts.js</code> file in the root of our project.</p>\n<p>A Smart Contract configuration is placed in an environment’s <code>deploy</code> property, with the name of the Smart Contract being the identifier. The following code creates a configuration for the <code>SimpleStorage</code> contract in the <code>development</code> environment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SimpleStorage: &#123;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Smart Contracts can be configured differently per environment just by adding a dedicated configuration to the corresponding environment. Head over to our <a href=\"environments.html\">guide on environments</a> to learn more about this.</p>\n<h3 id=\"Configuring-constructor-parameters\"><a href=\"#Configuring-constructor-parameters\" class=\"headerlink\" title=\"Configuring constructor parameters\"></a>Configuring constructor parameters</h3><p>Often, Smart Contracts need to be initialized with certain values right after they have been deployed. We can configure a Smart Contract’s constructor parameters using the <code>args</code> property. <code>args</code> is either a list of values, which will be applied to the Smart Contract’s constructor parameters in the same order they are defined, or it can be an object specifying the parameters using named keys.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>The following configuration configures the <code>SimpleStorage</code>‘s <code>initialValue</code> parameter, assuming that that one exists. Notice that by using this syntax, the order of constructor parameter values doesn’t matter anymore:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: &#123;</span><br><span class=\"line\">        initialValue: 100</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Configuring-gas-and-gas-price\"><a href=\"#Configuring-gas-and-gas-price\" class=\"headerlink\" title=\"Configuring gas and gas price\"></a>Configuring gas and gas price</h3><p>Both, <code>gas</code> and <code>gasPrice</code> can be configured for each Smart Contract. If we don’t want to configure that for every single contract, we can also specify <code>gas: auto</code> in the environment, like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development: &#123;</span><br><span class=\"line\">  gas: &#39;auto&#39;,</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100],</span><br><span class=\"line\">      gas: 800000,</span><br><span class=\"line\">      gasPrice: 5</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Another cool feature of Embark is that it supports human readable ether units, to improve the developer experience.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Human readable ether units</strong></p>\n  <p><p>Embark supports <strong>human readable ether units</strong> in places where ether unit values are required. <a href=\"#Human-readable-Ether-units\">Read here</a> for more information.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Configuring-Smart-Contract-Dependencies\"><a href=\"#Configuring-Smart-Contract-Dependencies\" class=\"headerlink\" title=\"Configuring Smart Contract Dependencies\"></a>Configuring Smart Contract Dependencies</h2><p>When building more complex applications, it’s very common that a Smart Contract depends on another one. Embark makes it very easy to not only ensure dependency Smart Contracts are deployed before the Smart Contract in question deploys, but also accessing their deployed addresses.</p>\n<p>All we have to do is specifying the name of the Smart Contract we’re interested in, prefixed with a “$”. Embark will then take care of figuring out in which order our Smart Contracts need to be deployed, as well as replacing all <code>$CONTRACT_NAME</code>‘s with their corresponding addresses. Assuming <code>SimpleStorage</code> depends on <code>OtherContract</code>, this can be easily configured like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100, &#39;$OtherContract&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Disabling-deployment\"><a href=\"#Disabling-deployment\" class=\"headerlink\" title=\"Disabling deployment\"></a>Disabling deployment</h2><p>Sometimes we want to configure different behaviour for certain contracts within different <a href=\"environments.html\">environments</a>. One of those cases could be that we don’t actually want to deploy <code>SimpleStorage</code> in the production environment as we might expect some other storage Smart Contract to already be somewhere out there.</p>\n<p>We can prevent Embark from deploying any of our Smart Contracts by using the <code>deploy</code> configuration and setting it to <code>false</code> like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">development:</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      args: [100]</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">production: &#123;</span><br><span class=\"line\">  deploy: &#123;</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      deploy: false</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Deployment-strategies\"><a href=\"#Deployment-strategies\" class=\"headerlink\" title=\"Deployment strategies\"></a>Deployment strategies</h2><p>In order to give users full control over which Smart Contracts should be deployed, Embark comes with a configuration feature called “deployment strategies”. Deployment strategies tell Embark whether it should deploy all of the user’s Smart Contracts (and its (3rd-party) dependencies, or just deploy individual Smart Contracts.</p>\n<p>There are two possible strategy options:</p>\n<ul>\n<li><strong>implicit</strong> - This is the default. Using the <code>implicit</code> strategy, Embark tries to deploy all Smart Contracts configured in the <code>deploy</code> configuration, including its (3rd-party) dependencies.</li>\n<li><strong>explicit</strong> - Setting this option to <code>explicit</code> tells Embark to deploy the Smart Contracts specified in the <code>deploy</code> configuration without their dependencies. This can be combined with <a href=\"#Disabling-deployment\">disabling deployment</a> of individual Smart Contracts for fine control.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">strategy: &#39;explicit&#39; &#x2F;&#x2F; &#39;implicit&#39; is the default</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deploying-multiple-instances\"><a href=\"#Deploying-multiple-instances\" class=\"headerlink\" title=\"Deploying multiple instances\"></a>Deploying multiple instances</h2><p>In cases where we want to create multiple instances of the same Smart Contract but with, for example, different initialization values per instance, we can use the <code>instanceOf</code> property and refer to the original Smart Contract that should be deployed multiple times.</p>\n<p>This can then be combined with <a href=\"#Disabling-deployment\">disabling the deployment</a> of the original Smart Contract like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Currency: &#123;</span><br><span class=\"line\">    deploy: false,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Usd: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [200]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  MyCoin: &#123;</span><br><span class=\"line\">    instanceOf: &#39;Currency&#39;,</span><br><span class=\"line\">    args: [300]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, we deploy <code>Usd</code> and <code>MyCoin</code> as instances of <code>Currency</code>. Notice that <code>Currency</code> itself isn’t going to be deployed but merely functions as a “recipe” to create other instances of it.</p>\n<h2 id=\"Referencing-already-deployed-Smart-Contracts\"><a href=\"#Referencing-already-deployed-Smart-Contracts\" class=\"headerlink\" title=\"Referencing already deployed Smart Contracts\"></a>Referencing already deployed Smart Contracts</h2><p>Embark not only integrates with the Smart Contracts that we create and own, but also with Smart Contracts that are already deployed and potentially owned by third-parties. If we wish to reference such a Smart Contract instance, all we have to do is specify the <code>address</code> of the instance in question.</p>\n<p>The following example configures <code>UserStorage</code> to be a Smart Contract instance that’s already deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  UserStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x123456&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Using-accounts-in-arguments\"><a href=\"#Using-accounts-in-arguments\" class=\"headerlink\" title=\"Using accounts in arguments\"></a>Using accounts in arguments</h2><p>Accounts can be used as arguments using Embark’s built-in interpolation syntax, similar to referring to Smart Contract instances.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      MyContractThatNeedsAccountAddresses: &#123;</span><br><span class=\"line\">        args: [&#39;$accounts[0]&#39;, &#39;$accounts[4]&#39;]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Dynamic-Addresses\"><a href=\"#Dynamic-Addresses\" class=\"headerlink\" title=\"Dynamic Addresses\"></a>Dynamic Addresses</h2><p>There are scenarios in which we want to configure a Smart Contract that is already deployed by a third-party, but its address can only be computed at run-time. For such cases, Embark supports specifying a function as <code>address</code>, which returns the address we’re interested in. Usually, other Smart Contract instances are needed to perform that computation, so the <a href=\"#Deployment-hooks\"><code>deps</code> configuration</a> comes in handy as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: 0,</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  OtherContract: &#123;</span><br><span class=\"line\">    deps: [&#39;SimpleStorage&#39;],</span><br><span class=\"line\">    address: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; use &#96;deps.contracts.SimpleStorage&#96; to determine and return address</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    abiDefinition: ABI</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In the example above, <code>OtherContract</code> will be deployed after <code>SimpleStorage</code> because it uses the <code>deps</code> property to define Smart Contracts that it depends on. All dependencies are exposed on the <code>address</code> function parameter similar to <a href=\"#Deployment-hooks\">deployment hooks</a>. Also, notice that the <code>abiDefinition</code> is only needed if the Smart Contracts bytecode isn’t already on disk.</p>\n<h2 id=\"Configuring-source-files\"><a href=\"#Configuring-source-files\" class=\"headerlink\" title=\"Configuring source files\"></a>Configuring source files</h2><p>By default Embark will look for Smart Contracts inside the folder that’s configured in the application’s <a href=\"configuration.html#contracts\">embark.json</a>, the default being the <code>contracts</code> folder. However, if we want to change the location to look for a single Smart Contract’s source, or need to compile a third-party Smart Contract to get hold of its ABI, we can do so by using the <code>file</code> property.</p>\n<p><code>file</code> specifies a full path to a file that contains the source code for the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    file: &#39;.&#x2F;some_folder&#x2F;simple_storage.sol&#39;,</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>If Embark doesn’t find the file in the specified path, it’ll expect it to be a path inside installed <code>node_modules</code> dependencies. The following example configures a source file path that points to a third-party Smart Contract that is installed as a dependency:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    file: &#39;openzeppelin-solidity&#x2F;contracts&#x2F;token&#x2F;ERC20&#x2F;ERC20.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark even supports reading the source from <code>https</code>, <code>git</code>, <code>ipfs</code> and <code>bzz</code> URIs, enabling us to compile Solidity Smart Contracts that aren’t even located in our local machine.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;git:&#x2F;&#x2F;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol#develop&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ERC725: &#123;</span><br><span class=\"line\">    file: &#39;github.com&#x2F;status&#x2F;contracts&#x2F;contracts&#x2F;identity&#x2F;ERC725.sol&#39;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    file: &#39;https:&#x2F;&#x2F;github.com&#x2F;OpenZeppelin&#x2F;openzeppelin-solidity&#x2F;blob&#x2F;master&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&#39;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Providing-ABIs\"><a href=\"#Providing-ABIs\" class=\"headerlink\" title=\"Providing ABIs\"></a>Providing ABIs</h2><p>In order to use Smart Contract instances created by web3 either in <a href=\"Deployment-hooks\">deployment hooks</a> or in <a href=\"contracts_javascript.html\">Embark’s JavaScript client</a>, Embark needs to get hold of the Smart Contracts’ ABIs and pass those on to web3.</p>\n<p>This is not a problem when dealing with Smart Contracts that we own, or at least have <a href=\"#Configuring-source-files\">access to their sources</a> so we Embark can compile them accordingly. However, if we don’t have either the source, nor do we want to create a Solidity interface ourselves for Embark to compile, we can provide an already defined ABI for a dedicated Smart Contract using the <code>abiDefinition</code> property, so Embark can make use of that.</p>\n<p>The following example configures <code>SimpleStorage</code> to be already deployed somewhere, but we’d still like to use the web3 instance in our <code>afterDeploy</code> hook.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    address: &#39;0x0bFb07f9144729EEF54A9057Af0Fcf87aC7Cbba9&#39;,</span><br><span class=\"line\">    abiDefinition: [...]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: async (deps) &#x3D;&gt; &#123;</span><br><span class=\"line\">  const value &#x3D; await deps.contracts.SimpleStorage.methods.get().call();</span><br><span class=\"line\">  console.log(value);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p><code>afterDeploy</code> and other deployment hooks are covered in <a href=\"#Deployment-hooks\">Deployment Hooks</a>.</p>\n<h2 id=\"Providing-Artifacts\"><a href=\"#Providing-Artifacts\" class=\"headerlink\" title=\"Providing Artifacts\"></a>Providing Artifacts</h2><p>Similar to providing ABIs, providing an Embark artifact lets you configure your contract using an already generated artifact.</p>\n<p>That way, you don’t need to have the contract on disk or even deploy it, if the address is specified in it.</p>\n<p>Here is how you can do it:</p>\n<pre><code class=\"javascript\">...\ndeploy: {\n  SimpleStorage: {\n    artifact: './path/to/SimpleStorage.json'\n  }\n}\n...\n</code></pre>\n\n<h2 id=\"Deployment-tracking\"><a href=\"#Deployment-tracking\" class=\"headerlink\" title=\"Deployment tracking\"></a>Deployment tracking</h2><p>Embark’s Smart Contract deployment mechanism prevents the deployment of Smart Contracts that have already been deployed. This turns out to be a powerful feature as you don’t have to worry about keeping track of it. The way this works is that, by default, Embark creates a file <code>./.embark/chains.json</code> in which it stores the name and address of the deployed Smart Contracts. That information is then mapped to the hash of the block in which the Smart Contract have been deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  BLOCK_HASH &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      HASH(NAME, BYTECODE, ARGS, ADDRESS): &#123;</span><br><span class=\"line\">        &quot;name&quot;: NAME,</span><br><span class=\"line\">        &quot;address: ADDRESS</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With concrete data, the contents of <code>chains.json</code> could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;0x6454b3e22cc9abe24bcd9f239687ad68ab6addb4f271a6b955f2e6111522310a&quot;: &#123;</span><br><span class=\"line\">    &quot;contracts&quot;: &#123;</span><br><span class=\"line\">      &quot;0x3043b04ad856d169c8f0b0509c0bc63192dc7edd92d6933c58708298a0e381be&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;ENSRegistry&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4F75E2beCbD08c5dD67f74aA0E28558a6a596528&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc51636fc4431a598f31d35de56a5e59b1a55d601babbdf5e9718a520654a4a93&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;Resolver&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xD9c5bEeD72A0f2FeAcF43730eF2B4bC86F38Cb6f&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0x269ef61966bd985f10d8ae13d7eaa498b423372f266fb5c188f60fa5618ff334&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;FIFSRegistrar&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0xe7120Bfe50b72a9629546dCe05c3821b3bb52B4E&quot;</span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      &quot;0xc920172104d0372dfa1375d4c9ef05ae15569b94b88fd4b0d5a834965dc7420b&quot;: &#123;</span><br><span class=\"line\">        &quot;name&quot;: &quot;SimpleStorage&quot;,</span><br><span class=\"line\">        &quot;address&quot;: &quot;0x4928bFf909063465d3cc1708E5F9c6EB0E3F324E&quot;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Disabling-tracking\"><a href=\"#Disabling-tracking\" class=\"headerlink\" title=\"Disabling tracking\"></a>Disabling tracking</h3><p>If we prefer to have full control over the deployment process and don’t want Embark to keep track of individual Smart Contract deployments, we use the <code>track</code> configuration and set it <code>false</code>.</p>\n<p>The following example ensures <code>ERC20</code> won’t be tracked and therefore redeployed in every deployment cycle.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    track: false</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Specifying-a-tracking-file\"><a href=\"#Specifying-a-tracking-file\" class=\"headerlink\" title=\"Specifying a tracking file\"></a>Specifying a tracking file</h3><p>In addition to enabling and disabling tracking, it’s also possible to tell Embark which file it should use for tracking. This can be useful for tracking deployed Smart Contracts on different platforms, such as testnets and the mainnet. The tracking state of those platforms should most likely be under version control, because we certainly don’t want multiple people to redeploy our Smart Contracts on multiple platforms. Putting those files under version control ensures everybody else gets the already tracked state. The contents will have the same schema as discussed above.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">tracking: &#39;path&#x2F;to&#x2F;some&#x2F;file&#39;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Having the file referenced above under version control ensures that other users of our project don’t redeploy the Smart Contracts on different platforms.</p>\n<h3 id=\"Reducing-contract-size\"><a href=\"#Reducing-contract-size\" class=\"headerlink\" title=\"Reducing contract size\"></a>Reducing contract size</h3><p>To reduce the size of the contract JSON files that are included in the build directory, you can set <code>minimalContractSize</code> to <code>true</code>. It defaults to <code>false</code>.<br>When set to <code>true</code>, Embark will not put te bytecode, gas estimates and other big configurations in the JSON file.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br></pre></td></tr></table></figure>\n\n<p>You can also have more control over the filtering by adding a <code>filteredFields</code> array. In the array, you can add the name of the fields you want to filter out.<br>This is useful for when you want to reduce the size of the contract files, but might still need a certain field, or if you want to filter even more aggressively.<br>Note that you need to have <code>minimalContractSize</code> set to <code>true</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">minimalContractSize: true,</span><br><span class=\"line\">filteredFields: [&#39;runtimeBytecode&#39;, &#39;realRuntimeBytecode&#39;] &#x2F;&#x2F; This will filter out only runtimeBytecode and realRuntimeBytecode</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Deployment-hooks\"><a href=\"#Deployment-hooks\" class=\"headerlink\" title=\"Deployment hooks\"></a>Deployment hooks</h2><p>Sometimes we want to execute certain logic when Smart Contracts are being deployed or after all of them have been deployed. In other cases, we’d even like to control whether a Smart Contract should be deployed in the first place. For those scenarios, Embark lets us define the deployment hooks <code>beforeDeploy</code>, <code>deployIf</code>, <code>onDeploy</code> and <code>afterDeploy</code>.</p>\n<p>Deployment hooks have access to a <code>dependencies</code> object that comes with instances of all Smart Contracts that are defined as dependency of the hooks using the <code>deps</code> property of the Smart Contract in question, and the Smart Contract itself. In addition to all relevant Smart Contract instances, this object also exposes the current <code>web3</code> instance and a <code>logger</code> instance as shown in the examples below.</p>\n<h3 id=\"Conditional-Deployment-with-deployIf\"><a href=\"#Conditional-Deployment-with-deployIf\" class=\"headerlink\" title=\"Conditional Deployment with deployIf\"></a>Conditional Deployment with <code>deployIf</code></h3><p>We can specify a condition that decides whether a contract should be deployed by using the <code>deployIf</code> hook. <code>deployIf</code> is a function that either returns a promise or is created using <code>async/await</code> syntax and has to resolve to a boolean value. If the resolve value is <code>true</code>, the Smart Contract in question will be deployed. If it’s <code>false</code>, Embark will skip deploying the Smart Contract in question.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ERC20: &#123;</span><br><span class=\"line\">    deployIf: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      return await dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    deps: [&#39;Manager&#39;]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  Manager: &#123;...&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Notice how <code>dependencies.contracts</code> gives access to the <code>Manager</code> contract instance. This however, is only possible because <code>Manager</code> has been defined as dependency of <code>ERC20</code> using the <code>deps</code> property. If we’re using a Node version that doesn’t support async/await, the same can be achieved using promises like this (web3 APIs already return promises):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">ERC20: &#123;</span><br><span class=\"line\">  deployIf: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.Manager.methods.isUpdateApproved().call();</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  deps: [&#39;Manager&#39;]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"beforeDeploy-hook\"><a href=\"#beforeDeploy-hook\" class=\"headerlink\" title=\"beforeDeploy hook\"></a><code>beforeDeploy</code> hook</h3><p><code>beforeDeploy</code> is a hook that, just like the name says, is executed before something is deployed. This hook is the counterparts to the <a href=\"#afterDeploy-hook\">afterDeploy</a> and can be used in either individual Smart Contract configurations, or for all Smart Contracts. E.g. the following snippet configures <code>beforeDeploy</code> just for <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;before deploying SimpleStorage&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wheras this configuration here runs the hook before all Smart Contracts are being deployed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123; ... &#125;</span><br><span class=\"line\">  beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    console.log(&#39;Before all deploy&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"onDeploy-hook\"><a href=\"#onDeploy-hook\" class=\"headerlink\" title=\"onDeploy hook\"></a><code>onDeploy</code> hook</h3><p>We can specify the <code>onDeploy</code> hook to execute code, right after a contract has been deployed. Just like <code>deployIf</code> and <code>afterDeploy</code>, <code>onDeploy</code> is a function that has access to the Smart Contract’s dependencies defined in its <code>deps</code> property. The following example executes <code>SimpleStorage</code>‘s <code>set()</code> method, once deployed.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      await dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>To actually <code>send</code> transactions and not just make <code>call</code>s, you will probably need to provide a <code>from</code> account. You can use the <code>web3</code> instance inside <code>dependencies</code> to get the <code>defaultAccount</code> as above.</p>\n<p>Also, as mentioned above, every deployment hook works with plain promises as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [100],</span><br><span class=\"line\">  onDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return dependencies.contracts.SimpleStorage.methods.set(150).send();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"afterDeploy-hook\"><a href=\"#afterDeploy-hook\" class=\"headerlink\" title=\"afterDeploy hook\"></a><code>afterDeploy</code> hook</h3><p>If we want to execute code once all of our Smart Contracts have been deployed, Embark has got us covered with the <code>afterDeploy</code> hook. The same rules apply here. <code>afterDeploy</code> has access to all deployed contract instances through the <code>dependencies</code> object.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100]</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">afterDeploy: (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  dependencies.contracts.SimpleStorage.methods.set(150).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Error-Handling\"><a href=\"#Error-Handling\" class=\"headerlink\" title=\"Error Handling\"></a>Error Handling</h3><p>Since we use functions for these deployment hooks, we have to manage errors ourselves. We skipped that step in the above examples to save space, but here is an easy example on how you can do it:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    await dependencies.contracts.SimpleStorage.methods.set(85).send(&#123;from: dependencies.web3.eth.defaultAccount&#125;);</span><br><span class=\"line\">  &#125; catch (e) &#123;</span><br><span class=\"line\">    console.error(&#39;Error during onDeploy&#39;, e);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<div class=\"c-notification c-notification--info\">\n  <p><strong>A note on deployment hook string syntax</strong></p>\n  <p><p>In older versions of Embark, deployment hooks have been defined as an array of strings. This is due historical reasons where configuration files used to be JSON files that don’t support functions.</p>\n<p>The examples above can be therefore written as:</p>\n<pre class=\"highlight\">afterDeploy: ['SimpleStorage.methods.set(150).send()']\nonDeploy: ['SimpleStorage.methods.set(150).send()']\ndeployIf: 'await Manager.methods.isUpdateApproved()'\n</pre>\n\n<p>This string syntax is still supported, but will be deprecated and likely be removed in future versions of Embark.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Logging-with-context\"><a href=\"#Logging-with-context\" class=\"headerlink\" title=\"Logging with context\"></a>Logging with context</h3><p>Often we use log statements to either debug code or simply to output what’s going on at the moment. It can be useful to output logs within deployment hooks as well. To make sure our deployment hooks don’t drown in the rest of Embark’s output, we can use the injected <code>logger</code> which prefixes every log message with a context indicator.</p>\n<p>For example, when logging something from within an <code>onDeploy</code> hook of a Smart Contract, the output will look like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SmartContractName &gt; onDeploy &gt; [YOUR MESSAGE]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>logger</code> is injected as part of the <code>dependencies</code> object, so we can use it like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    onDeploy: async (dependencies) &#x3D;&gt; &#123;</span><br><span class=\"line\">      dependencies.logger.info(&#39;Hello from onDeploy!&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Which will result in</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage &gt; onDeploy &gt; Hello from onDeploy!</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Human-readable-Ether-units\"><a href=\"#Human-readable-Ether-units\" class=\"headerlink\" title=\"Human readable Ether units\"></a>Human readable Ether units</h2><p>Embark supports human readable ether units in different places where Ether values can be configured. A human readable ether unit is the combination of any number value and any valid ether unit, such as <code>wei</code>, <code>kwei</code>, <code>Kwei</code>, <code>shannon</code>, <code>finney</code>, … etc.</p>\n<p>Let’s take the simple Smart Contract configuration from the <a href=\"#Configuring-gas-and-gas-price\">configuring gas and gas price</a> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: 800000,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>This can as well be written as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    args: [100],</span><br><span class=\"line\">    gas: &#39;800 Kwei&#39;,</span><br><span class=\"line\">    gasPrice: 5</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Embark will take care of converting those units to their dedicated Wei values.</p>\n"},{"title":"Plugin APIs","layout":"docs","_content":"\nThis reference covers all APIs exposed by the `embark` object passed to every custom created plugin. Make sure to read the section on [creating a plugin](/docs/creating_plugins.html) first.\n\n## .pluginConfig\n\n`pluginConfig` is an object that contains the configuration for your plugin specified in the project's `embark.json`. For example, if a plugin configuration like the following:\n\n```\n\"plugins\": {\n  \"embark-babel\": { \n    \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n    \"presets\": [\"es2015\", \"react\"]\n  }\n}\n```\n\n`embark.pluginConfig` will contain \n\n```\n{ \n  \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n  \"presets\": [\"es2015\", \"react\"]\n}\n```\n\nand can be used by your plugin as needed.\n\n## .registerPipeline(matchingFiles, callback(options))\n\nThis call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.\n\n`matchingFiles` is an array of matching files the plugin should be called with for e.g `['**/*.js', '!vendor/jquery.js']` matches all JavaScript files except `vendor/jquery.js`.\n\nAvailable optinos:\n * `targetFile` - filename to be generated\n * `source` - content of the file\n\nReturns `string`\n\n```\nvar babel = require(\"babel-core\");\nrequire(\"babel-preset-react\");\n\nmodule.exports = function(embark) {\n  embark.registerPipeline([\"**/*.js\", \"**/*.jsx\"], (options) => {\n    return babel.transform(options.source, {\n      minified: true,\n      presets: ['react']\n    }).code;\n  });\n}\n```\n\n## .registerContractConfiguration(contractsConfig)\n\nThis call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the `DGDToken` contract code will redeployed with the arguments `100` in any environment, except for the livenet since it's already deployed there at a particular address.\n\nTypically this call is used in combination with `embark.addContractFile`\n\n`contractsConfig` is an object in the same structure as the one found in the contracts configuration at `config/contracts.json`. The users own configuration will be merged with the one specified in the plugins.\n\n```\nmodule.exports = function(embark) {\n  embark.registerContractConfiguration({\n    \"default\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"args\": [\n            100\n          ]\n        }\n      }\n    },\n    \"livenet\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"address\": \"0xe0b7927c4af23765cb51314a0e0521a9645f0e2a\"\n        }\n      }\n    }\n  });\n}\n```\n\n## .addContractFile(file)\n\nTypically this call is used in combination with `embark.registerContractConfiguration`. If you want to make the contract available but not automatically deployed without the user specifying so you can use `registerContractConfiguration` to set the contract config to `deploy: false`, this is particularly useful for when the user is meant to extend the contract being given (e.g `contract MyToken is StandardToken`)\n\n`file` is the contract file to add to embark, the path should relative to the plugin.\n\n```\nmodule.exports = function(embark) {\n  embark.addContractFile(\"./DGDToken.sol\");\n}\n```\n\n## .addFileToPipeline(file, options)\n\nThis call is used to add a file to the pipeline so it's included with the dapp on the client side.\n\n`file` is the file to add to the pipeline, the path should relative to the plugin.\n\n`intendedPath` is the intended path outside of the plugin\n\nAvailable options:\n * `skipPipeline` - If `true` it will not apply transformations to the file. For\n   example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to\n   true will not apply the plugin on this file.\n\n```\nmodule.exports = function(embark) {\n  embark.addFileToPipeline(\"./jquery.js\", {skipPipeline: true});\n}\n```\n\n## .registerBeforeDeploy(callback(options), [callback])\n\nThis call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.\nIt is useful to replace placeholders with dynamic values.\n\nAvailable options:\n * `embarkDeploy` - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.\n * `pluginConfig` - plugin configuration object from embark.json\n * `deploymentAccount` - address of account which will be used to deploy this contract\n * `contract` - contract object.\n * `callback` - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code\n\nYou can use the callback argument instead of the callback option if you prefer. It needs the same result object.\n\nexpected return: ignored\n\n```\nmodule.exports = function(embark) {\n  embark.registerBeforeDeploy(function(options) {\n    var code = options.contract.code.replace(/deaddeaddeaddeaddeaddeaddeaddeaddeaddead/ig, 'c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de');\n    options.callback({ contractCode: code });\n  });\n}\n```\n\n## .registerClientWeb3Provider(callback(options))\n\nThis call can be used to override the default web3 object generation in the dapp. it's useful if you want to add a plugin to interact with services like http://infura.io or if you want to use your own web3.js library extension.\n\noptions available:\n * rpcHost - configured rpc Host to connect to\n * rpcPort - configured rpc Port to connect to\n * blockchainConfig - object containing the full blockchain configuration for the current environment\n\nexpected return: ``string``\n\nexample:\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n## .registerContractsGeneration(callback(options))\n\nBy default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.\n\nAvailable options:\n  * contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)\n    * abiDefinition\n    * code\n    * deployedAddress\n    * gasEstimates\n    * gas\n    * gasPrice\n    * runtimeByteCode\n\nReturns `string`\n\n The generated string will be used to create the contract objects in the Embark console and will be generated in `embarkArtifacts` so that the Dapp can use them.\n\n```\nmodule.exports = (embark) => {\n  embark.registerContractsGeneration((options) => {\n    const contractGenerations = [];\n    Object.keys(options.contracts).map(className => {\n      const contract = options.contracts[className];\n      const abi = JSON.stringify(contract.abiDefinition);\n\n      contractGenerations.push(`${className} = new web3.eth.Contract(${abi}, '${contract.deployedAddress}');\n      module.exports = ${className};`);\n    });\n    return contractGenerations.join('\\n');\n  });\n};\n```\n\n## .registerConsoleCommand(options)\n\nThis call is used to extend the console with custom commands.\n\nThe function takes an `object` with the following options:\n\n- `description`: Description of the command (used by the help command)\n- `matches`: Either an `array` of strings corresponding to exact matches for the command or a `function` where the only parameter in the command\n  - The `function` must return a `boolean`. True if it matches, `false` if not.\n- `usage`: Usage of the command that will be outputed by the help command\n  - Adding `usage` is optional in the case where `matches` is an `array`\n- `process`: `function` that will be executed to process the command. The `function` receives two parameters:\n  - `command`: The `string` command that the user entered\n  - `callback`: Callback `function` to be called at the end of the process\n    - This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console\n\n```\nmodule.exports = function(embark) {\n  embark.registerConsoleCommand({\n    description: \"Salutes the world\",\n    matches: [\"hello\", \"hellowWorld\"],\n    // OR a function for more complex cases\n    matches: (cmd) => {\n      const [commandName, name] = cmd.split(' '); // You can use `split` for commands that receive parameters\n      return commandName === 'hello' || commandName === 'hellowWorld'; \n    },\n    usage: \"hello &lt;name&gt; or helloWorld &lt;name&gt;\",\n    process: (cmd, callback) => {\n      const [commandName, name] = cmd.split(' ');\n      name = name || \"noName\"; // Default to \"noName\" when nothing is specified\n      callback(null, `Hello ${name}`); // Call back with the message. This will be outputed in the console\n    }\n  });\n}\n```\n\n## .registerCompiler(extension, callback(contractFiles, doneCallback))\n\nRegisters a new compiler for a specific contract extension.\n\nArguments:\n\n- **extension**: The file extension (e.g: `.sol`)\n- **callback**: Function called by Embark with the contract files that the plugin should process\n - **contractFiles**: Array of files that need to be compiled\n - **doneCallback(error, result)**: The final callback to call once every file is compiled or when there is an error\n   - **error**: Error string or object when something goes wrong\n   - **result**: An object containing the compiled contracts result (key: contractName, value: contract object) or, `false` if your plugin is not compatible\n    - **code** - [required] contract bytecode (string)      \n    - **abiDefinition** - [required] contract abi (array of objects)\n      - e.g ``[{\"constant\":true,\"inputs\":[],\"name\":\"storedData\",\"outputs\":[{\"name\":\"\",\"type\":\"uint256\"}],\"payable\":false,\"type\":\"function\"}, etc...``\n    - **runtimeBytecode** - [optional] contract runtimeBytecode (string)\n    - **gasEstimates** - [optional] gas estimates for constructor and methods (hash)\n      - e.g ``{\"creation\":[20131,38200],\"external\":{\"get()\":269,\"set(uint256)\":20163,\"storedData()\":224},\"internal\":{}}``\n    - **functionHashes** - [optional] object with methods and their corresponding hash identifier (hash)\n      - e.g ``{\"get()\":\"6d4ce63c\",\"set(uint256)\":\"60fe47b1\",\"storedData()\":\"2a1afcd9\"}``\n\n\nBelow a possible implementation of a solcjs plugin.\nNote that the plugin checks the version and returns `false` as the result if it is not compatible:\n\n```\nconst solc = require('solc');\nconst semver = require('semver');\n\nmodule.exports = function(embark) {\n  embark.registerCompiler(\".sol\", function(contractFiles, cb) {\n    const wantedVersion = embark.config.embarkConfig.versions.solc;\n    if (semver.gt(wantedVersion, '0.5.0')) {\n      // We do not support greater than solidity version 0.5.0\n      // This let's Embark know that we are not compatible, that way Embark will fallback to another compiler\n      return cb(null, false);\n    }\n  \n    // prepare input for solc\n    var input = {};\n    for (var i = 0; i < contractFiles.length; i++) {\n      var filename = contractFiles[i].filename.replace('app/contracts/','');\n      input[filename] = contractFiles[i].content.toString();\n    }\n\n    // compile files\n    var output = solc.compile({sources: input}, 1);\n\n    // generate the compileObject expected by embark\n    var json = output.contracts;\n    var compiled_object = {};\n    for (var className in json) {\n      var contract = json[className];\n\n      compiled_object[className] = {};\n      compiled_object[className].code            = contract.bytecode;\n      compiled_object[className].runtimeBytecode = contract.runtimeBytecode;\n      compiled_object[className].gasEstimates    = contract.gasEstimates;\n      compiled_object[className].functionHashes  = contract.functionHashes;\n      compiled_object[className].abiDefinition   = JSON.parse(contract.interface);\n    }\n\n    cb(null, compiled_object);\n  });\n}\n```\n\n## .logger\n\nTo print messages to the embark log is it better to use ``embark.logger`` instead of ``console``.\n\ne.g ``embark.logger.info(\"hello\")``\n\n## .events.on(eventName, callback(*args))\n\nThis call is used to listen and react to events that happen in Embark such as contract deployment\n\n* eventName - name of event to listen to\n   * available events:\n      * `contractsDeployed` - triggered when contracts have been deployed\n      * `file-add`, `file-change`, `file-remove`, `file-event` - triggered on a file change, args is (filetype, path)\n      * `outputDone` - triggered when dapp is (re)generated\n      * `firstDeploymentDone` - triggered when the dapp is deployed and generated for the first time\n      * `check:backOnline:serviceName` - triggered when the service with ``serviceName`` comes back online\n      * `check:wentOffline:serviceName` - triggered when the service with ``serviceName`` goes offline\n      * `log` - triggered on a log, args is (logLevel, logMsg)\n      * `contractsState` - list of contracts, their deployment status, address, etc..\n      * `servicesState` - list of services and their state\n      * `exit`: - triggered when embark is terminating\n      * `deploy:contract:deployed`: - triggered when a contract is deployed, the callback will contain the contract object\n      * `deploy:contract:undeployed`: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object\n      * `deploy:contract:error`: - triggered when a contract couldn't be deployed due to an error, the callback will contain the contract object\n      * `deploy:contract:receipt`: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt\n      * `contractsState`: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..\n      * `deploy:beforeAll`: - triggered before contract deployment starts\n      * `contracts:deploy:afterAll`: - triggered after contract deployment starts\n\n```\nmodule.exports = function(embark) {\n  embark.events.on(\"contractsDeployed\", function() {\n    embark.logger.info(\"plugin says: your contracts have been deployed\");\n  });\n  embark.events.on(\"file-change\", function(filetype, path) {\n    if (type === 'contract') {\n      embark.logger.info(\"plugin says: you just changed the contract at \" + path);\n    }\n  });\n}\n```\n\n### .events.request(requestName, callback(*args))\n\nThis call is used to request a certain resource from Embark\n\n* requestName - name of request to listen to\n   * available requests:\n     * (`deploy:contract`, contractObj) - deploys a particular contract through embark\n     * (`runcode:eval`, code) - runs js code in the Embark engine.\n     * (`runcode:register`, cmdName, cmdObj) - 'registers' a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);\n     * (`contracts:list`) - returns a list a callback containing (err, contractList) containing a collection of available contracts\n     * (`compiler:contracts`, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback\n     * (`services:register`, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)\n     * (`console:command`, cmd) - execute a command in the console\n\n```\nmodule.exports = function(embark) {\n  embark.events.request(\"code\", function(code) {\n    // Do something with the code\n  });\n}\n```\n\n## .registerServiceCheck(serviceName, callback({name, status}), time)\n\nThis call is used to register a service in embark so it's periodically checked.\nIt will be displayed in the Embark Dashboard, and will also trigger events such as ``check:backOnline:yourServiceName`` and ``check:backOffline:yourServiceName``\n\n* serviceName - name of service (string)\n* callback:\n  * `name` - name/text to display (string)\n  * `status` - status of the service (string, `on` or `off` or `warn`)\n* time (optional) - ms interval to call the callback (default: 5000 ms)\n\n```\nmodule.exports = function(embark) {\n  embark.registerServiceCheck(\"MyServer\", function(cb) {\n    if (myServiceOnline()) {\n      return cb({name: \"MyServer Online\", status: \"on\"});\n    } else {\n      return cb({name: \"MyServer Offline\", status: \"off\"});\n    }\n  });\n}\n```\n\n## .registerUploadCommand(cmdName, callback)\n\nThis call is used to add a new cmd to ``embark upload`` to upload the dapp to a new storage service. In the example, `run` doesn't exist. You need to import a library that runs shell commands like [shelljs](https://www.npmjs.com/package/shelljs)\n\n```\nmodule.exports = function(embark) {\n  embark.registerUploadCommand(\"ipfs\", function() {\n    run(\"ipfs add -r dist/\");\n  });\n}\n```\n\n## .addCodeToEmbarkJS(code)\n\nThis call is used to add code to the embark.js library. It's typically used to extend it with new functionality, new storage providers, new communication providers, etc..\n\n```\nmodule.exports = function(embark) {\n  embark.addCodeToEmbarkJS(\"alert('hello world!')\");\n}\n```\n\n## .addProviderInit(providerType, code, initCondition(config))\n\nThis call is used to add code to be executed in the initialization under the condition that ``initCondition`` returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config\n\n* providerType - type of provider (string, \"storage\" or \"communication\")\n* code - code to add (string)\n* callback:\n  * \"config\" - config of the ``providerType``\n\n```\nmodule.exports = function(embark) {\n  let code = \"\\nEmbarkJS.Storage.setProvider('ipfs')\";\n  embark.addProviderInit('storage', code, (storageConfig) => {\n    return (storageConfig.provider === 'ipfs' && storageConfig.enabled === true);\n  });\n}\n```\n\n## .registerImportFile(importName, importLocation)\n\nThis call is used so the plugin can make a certain file available as a library to a user\n\n```\nvar path = require('path')\n\nmodule.exports = function(embark) {\n  embark.registerImportFile(\"my-lib\", path.join(__dirname, \"my-lib.js\"));\n}\n```\n\n## .registerActionForEvent(eventName, options, cb)\n\nThis lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let's you modify the params before sending them back to the next action or back to Embark.\n\nHere is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:\n```\nembark.registerActionForEvent(\"deployment:contract:beforeDeploy\", async (params, cb) => {\n  cosnt contarct = params.contract;\n  if (!contract.code) {\n    return callback();\n  }\n  \n  const code = (contract.code.indexOf('0x') === 0) ? contract.code.substr(2) : contract.code;\n  const contractCodeLength = Buffer.from(code, 'hex').toString().length;\n  if (contractCodeLength > MAX_CONTRACT_BYTECODE_LENGTH) {\n    return callback(new Error(`Bytecode for ${contract.className} contract is too large. Not deploying.`));\n  }\n  callback();\n});\n```\n\n### Parameters\n- `eventName`: String, Name fo the event you want an action to be registered to\n- `options`: Object, optional, options for the action registration\n  - `priority`: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)\n\n### Available events for actions\n\n- `embark:engine:started`: Called when the engine just started. No params\n- `blockchain:config:modify`: Let's you modify the blockchain configs before starting a blockchain node. Only param is the initial `blockchainConfig`\n- `deployment:contract:beforeDeploy`: Called before a contract is deployed. Only param is the `contract`\n- `deployment:contract:shouldDeploy`: Also called before a contract is deployed, but let's you determine if the contract should be deployed. Two params: `contract` and `shouldDeploy`, set `shouldDeploy` to `false` to disable its deployment\n- `deployment:contract:undeployed`: Called after a contract is determined to not deploy. Only param is `contract`\n- `deployment:contract:deployed`: Called after a contract deployed. Only param is `contract`\n- `deployment:deployContracts:beforeAll`: Called before any contract is deployed. No params\n- `deployment:deployContracts:afterAll`: Called after all contracts have deployed. No params\n- `tests:contracts:compile:before`: Called before the contracts are compiled in the context of the test. Only param is `contractFiles`\n- `tests:contracts:compile:after`: Called after the contracts are compiled in the context of the test. Only param is `compiledContracts`\n- `blockchain:proxy:request`: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:\n  - `request`: an object containing the request payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n- `blockchain:proxy:response`: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:\n  - `request`: an object containing the request payload\n  - `response`: an object containing the response payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n","source":"docs/plugin_reference.md","raw":"title: Plugin APIs\nlayout: docs\n---\n\nThis reference covers all APIs exposed by the `embark` object passed to every custom created plugin. Make sure to read the section on [creating a plugin](/docs/creating_plugins.html) first.\n\n## .pluginConfig\n\n`pluginConfig` is an object that contains the configuration for your plugin specified in the project's `embark.json`. For example, if a plugin configuration like the following:\n\n```\n\"plugins\": {\n  \"embark-babel\": { \n    \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n    \"presets\": [\"es2015\", \"react\"]\n  }\n}\n```\n\n`embark.pluginConfig` will contain \n\n```\n{ \n  \"files\": [\"**/*.js\", \"!**/jquery.min.js\"],\n  \"presets\": [\"es2015\", \"react\"]\n}\n```\n\nand can be used by your plugin as needed.\n\n## .registerPipeline(matchingFiles, callback(options))\n\nThis call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.\n\n`matchingFiles` is an array of matching files the plugin should be called with for e.g `['**/*.js', '!vendor/jquery.js']` matches all JavaScript files except `vendor/jquery.js`.\n\nAvailable optinos:\n * `targetFile` - filename to be generated\n * `source` - content of the file\n\nReturns `string`\n\n```\nvar babel = require(\"babel-core\");\nrequire(\"babel-preset-react\");\n\nmodule.exports = function(embark) {\n  embark.registerPipeline([\"**/*.js\", \"**/*.jsx\"], (options) => {\n    return babel.transform(options.source, {\n      minified: true,\n      presets: ['react']\n    }).code;\n  });\n}\n```\n\n## .registerContractConfiguration(contractsConfig)\n\nThis call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the `DGDToken` contract code will redeployed with the arguments `100` in any environment, except for the livenet since it's already deployed there at a particular address.\n\nTypically this call is used in combination with `embark.addContractFile`\n\n`contractsConfig` is an object in the same structure as the one found in the contracts configuration at `config/contracts.json`. The users own configuration will be merged with the one specified in the plugins.\n\n```\nmodule.exports = function(embark) {\n  embark.registerContractConfiguration({\n    \"default\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"args\": [\n            100\n          ]\n        }\n      }\n    },\n    \"livenet\": {\n      \"deploy\": {\n        \"DGDToken\": {\n          \"address\": \"0xe0b7927c4af23765cb51314a0e0521a9645f0e2a\"\n        }\n      }\n    }\n  });\n}\n```\n\n## .addContractFile(file)\n\nTypically this call is used in combination with `embark.registerContractConfiguration`. If you want to make the contract available but not automatically deployed without the user specifying so you can use `registerContractConfiguration` to set the contract config to `deploy: false`, this is particularly useful for when the user is meant to extend the contract being given (e.g `contract MyToken is StandardToken`)\n\n`file` is the contract file to add to embark, the path should relative to the plugin.\n\n```\nmodule.exports = function(embark) {\n  embark.addContractFile(\"./DGDToken.sol\");\n}\n```\n\n## .addFileToPipeline(file, options)\n\nThis call is used to add a file to the pipeline so it's included with the dapp on the client side.\n\n`file` is the file to add to the pipeline, the path should relative to the plugin.\n\n`intendedPath` is the intended path outside of the plugin\n\nAvailable options:\n * `skipPipeline` - If `true` it will not apply transformations to the file. For\n   example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to\n   true will not apply the plugin on this file.\n\n```\nmodule.exports = function(embark) {\n  embark.addFileToPipeline(\"./jquery.js\", {skipPipeline: true});\n}\n```\n\n## .registerBeforeDeploy(callback(options), [callback])\n\nThis call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.\nIt is useful to replace placeholders with dynamic values.\n\nAvailable options:\n * `embarkDeploy` - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.\n * `pluginConfig` - plugin configuration object from embark.json\n * `deploymentAccount` - address of account which will be used to deploy this contract\n * `contract` - contract object.\n * `callback` - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code\n\nYou can use the callback argument instead of the callback option if you prefer. It needs the same result object.\n\nexpected return: ignored\n\n```\nmodule.exports = function(embark) {\n  embark.registerBeforeDeploy(function(options) {\n    var code = options.contract.code.replace(/deaddeaddeaddeaddeaddeaddeaddeaddeaddead/ig, 'c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de');\n    options.callback({ contractCode: code });\n  });\n}\n```\n\n## .registerClientWeb3Provider(callback(options))\n\nThis call can be used to override the default web3 object generation in the dapp. it's useful if you want to add a plugin to interact with services like http://infura.io or if you want to use your own web3.js library extension.\n\noptions available:\n * rpcHost - configured rpc Host to connect to\n * rpcPort - configured rpc Port to connect to\n * blockchainConfig - object containing the full blockchain configuration for the current environment\n\nexpected return: ``string``\n\nexample:\n\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n## .registerContractsGeneration(callback(options))\n\nBy default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.\n\nAvailable options:\n  * contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)\n    * abiDefinition\n    * code\n    * deployedAddress\n    * gasEstimates\n    * gas\n    * gasPrice\n    * runtimeByteCode\n\nReturns `string`\n\n The generated string will be used to create the contract objects in the Embark console and will be generated in `embarkArtifacts` so that the Dapp can use them.\n\n```\nmodule.exports = (embark) => {\n  embark.registerContractsGeneration((options) => {\n    const contractGenerations = [];\n    Object.keys(options.contracts).map(className => {\n      const contract = options.contracts[className];\n      const abi = JSON.stringify(contract.abiDefinition);\n\n      contractGenerations.push(`${className} = new web3.eth.Contract(${abi}, '${contract.deployedAddress}');\n      module.exports = ${className};`);\n    });\n    return contractGenerations.join('\\n');\n  });\n};\n```\n\n## .registerConsoleCommand(options)\n\nThis call is used to extend the console with custom commands.\n\nThe function takes an `object` with the following options:\n\n- `description`: Description of the command (used by the help command)\n- `matches`: Either an `array` of strings corresponding to exact matches for the command or a `function` where the only parameter in the command\n  - The `function` must return a `boolean`. True if it matches, `false` if not.\n- `usage`: Usage of the command that will be outputed by the help command\n  - Adding `usage` is optional in the case where `matches` is an `array`\n- `process`: `function` that will be executed to process the command. The `function` receives two parameters:\n  - `command`: The `string` command that the user entered\n  - `callback`: Callback `function` to be called at the end of the process\n    - This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console\n\n```\nmodule.exports = function(embark) {\n  embark.registerConsoleCommand({\n    description: \"Salutes the world\",\n    matches: [\"hello\", \"hellowWorld\"],\n    // OR a function for more complex cases\n    matches: (cmd) => {\n      const [commandName, name] = cmd.split(' '); // You can use `split` for commands that receive parameters\n      return commandName === 'hello' || commandName === 'hellowWorld'; \n    },\n    usage: \"hello &lt;name&gt; or helloWorld &lt;name&gt;\",\n    process: (cmd, callback) => {\n      const [commandName, name] = cmd.split(' ');\n      name = name || \"noName\"; // Default to \"noName\" when nothing is specified\n      callback(null, `Hello ${name}`); // Call back with the message. This will be outputed in the console\n    }\n  });\n}\n```\n\n## .registerCompiler(extension, callback(contractFiles, doneCallback))\n\nRegisters a new compiler for a specific contract extension.\n\nArguments:\n\n- **extension**: The file extension (e.g: `.sol`)\n- **callback**: Function called by Embark with the contract files that the plugin should process\n - **contractFiles**: Array of files that need to be compiled\n - **doneCallback(error, result)**: The final callback to call once every file is compiled or when there is an error\n   - **error**: Error string or object when something goes wrong\n   - **result**: An object containing the compiled contracts result (key: contractName, value: contract object) or, `false` if your plugin is not compatible\n    - **code** - [required] contract bytecode (string)      \n    - **abiDefinition** - [required] contract abi (array of objects)\n      - e.g ``[{\"constant\":true,\"inputs\":[],\"name\":\"storedData\",\"outputs\":[{\"name\":\"\",\"type\":\"uint256\"}],\"payable\":false,\"type\":\"function\"}, etc...``\n    - **runtimeBytecode** - [optional] contract runtimeBytecode (string)\n    - **gasEstimates** - [optional] gas estimates for constructor and methods (hash)\n      - e.g ``{\"creation\":[20131,38200],\"external\":{\"get()\":269,\"set(uint256)\":20163,\"storedData()\":224},\"internal\":{}}``\n    - **functionHashes** - [optional] object with methods and their corresponding hash identifier (hash)\n      - e.g ``{\"get()\":\"6d4ce63c\",\"set(uint256)\":\"60fe47b1\",\"storedData()\":\"2a1afcd9\"}``\n\n\nBelow a possible implementation of a solcjs plugin.\nNote that the plugin checks the version and returns `false` as the result if it is not compatible:\n\n```\nconst solc = require('solc');\nconst semver = require('semver');\n\nmodule.exports = function(embark) {\n  embark.registerCompiler(\".sol\", function(contractFiles, cb) {\n    const wantedVersion = embark.config.embarkConfig.versions.solc;\n    if (semver.gt(wantedVersion, '0.5.0')) {\n      // We do not support greater than solidity version 0.5.0\n      // This let's Embark know that we are not compatible, that way Embark will fallback to another compiler\n      return cb(null, false);\n    }\n  \n    // prepare input for solc\n    var input = {};\n    for (var i = 0; i < contractFiles.length; i++) {\n      var filename = contractFiles[i].filename.replace('app/contracts/','');\n      input[filename] = contractFiles[i].content.toString();\n    }\n\n    // compile files\n    var output = solc.compile({sources: input}, 1);\n\n    // generate the compileObject expected by embark\n    var json = output.contracts;\n    var compiled_object = {};\n    for (var className in json) {\n      var contract = json[className];\n\n      compiled_object[className] = {};\n      compiled_object[className].code            = contract.bytecode;\n      compiled_object[className].runtimeBytecode = contract.runtimeBytecode;\n      compiled_object[className].gasEstimates    = contract.gasEstimates;\n      compiled_object[className].functionHashes  = contract.functionHashes;\n      compiled_object[className].abiDefinition   = JSON.parse(contract.interface);\n    }\n\n    cb(null, compiled_object);\n  });\n}\n```\n\n## .logger\n\nTo print messages to the embark log is it better to use ``embark.logger`` instead of ``console``.\n\ne.g ``embark.logger.info(\"hello\")``\n\n## .events.on(eventName, callback(*args))\n\nThis call is used to listen and react to events that happen in Embark such as contract deployment\n\n* eventName - name of event to listen to\n   * available events:\n      * `contractsDeployed` - triggered when contracts have been deployed\n      * `file-add`, `file-change`, `file-remove`, `file-event` - triggered on a file change, args is (filetype, path)\n      * `outputDone` - triggered when dapp is (re)generated\n      * `firstDeploymentDone` - triggered when the dapp is deployed and generated for the first time\n      * `check:backOnline:serviceName` - triggered when the service with ``serviceName`` comes back online\n      * `check:wentOffline:serviceName` - triggered when the service with ``serviceName`` goes offline\n      * `log` - triggered on a log, args is (logLevel, logMsg)\n      * `contractsState` - list of contracts, their deployment status, address, etc..\n      * `servicesState` - list of services and their state\n      * `exit`: - triggered when embark is terminating\n      * `deploy:contract:deployed`: - triggered when a contract is deployed, the callback will contain the contract object\n      * `deploy:contract:undeployed`: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object\n      * `deploy:contract:error`: - triggered when a contract couldn't be deployed due to an error, the callback will contain the contract object\n      * `deploy:contract:receipt`: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt\n      * `contractsState`: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..\n      * `deploy:beforeAll`: - triggered before contract deployment starts\n      * `contracts:deploy:afterAll`: - triggered after contract deployment starts\n\n```\nmodule.exports = function(embark) {\n  embark.events.on(\"contractsDeployed\", function() {\n    embark.logger.info(\"plugin says: your contracts have been deployed\");\n  });\n  embark.events.on(\"file-change\", function(filetype, path) {\n    if (type === 'contract') {\n      embark.logger.info(\"plugin says: you just changed the contract at \" + path);\n    }\n  });\n}\n```\n\n### .events.request(requestName, callback(*args))\n\nThis call is used to request a certain resource from Embark\n\n* requestName - name of request to listen to\n   * available requests:\n     * (`deploy:contract`, contractObj) - deploys a particular contract through embark\n     * (`runcode:eval`, code) - runs js code in the Embark engine.\n     * (`runcode:register`, cmdName, cmdObj) - 'registers' a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);\n     * (`contracts:list`) - returns a list a callback containing (err, contractList) containing a collection of available contracts\n     * (`compiler:contracts`, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback\n     * (`services:register`, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)\n     * (`console:command`, cmd) - execute a command in the console\n\n```\nmodule.exports = function(embark) {\n  embark.events.request(\"code\", function(code) {\n    // Do something with the code\n  });\n}\n```\n\n## .registerServiceCheck(serviceName, callback({name, status}), time)\n\nThis call is used to register a service in embark so it's periodically checked.\nIt will be displayed in the Embark Dashboard, and will also trigger events such as ``check:backOnline:yourServiceName`` and ``check:backOffline:yourServiceName``\n\n* serviceName - name of service (string)\n* callback:\n  * `name` - name/text to display (string)\n  * `status` - status of the service (string, `on` or `off` or `warn`)\n* time (optional) - ms interval to call the callback (default: 5000 ms)\n\n```\nmodule.exports = function(embark) {\n  embark.registerServiceCheck(\"MyServer\", function(cb) {\n    if (myServiceOnline()) {\n      return cb({name: \"MyServer Online\", status: \"on\"});\n    } else {\n      return cb({name: \"MyServer Offline\", status: \"off\"});\n    }\n  });\n}\n```\n\n## .registerUploadCommand(cmdName, callback)\n\nThis call is used to add a new cmd to ``embark upload`` to upload the dapp to a new storage service. In the example, `run` doesn't exist. You need to import a library that runs shell commands like [shelljs](https://www.npmjs.com/package/shelljs)\n\n```\nmodule.exports = function(embark) {\n  embark.registerUploadCommand(\"ipfs\", function() {\n    run(\"ipfs add -r dist/\");\n  });\n}\n```\n\n## .addCodeToEmbarkJS(code)\n\nThis call is used to add code to the embark.js library. It's typically used to extend it with new functionality, new storage providers, new communication providers, etc..\n\n```\nmodule.exports = function(embark) {\n  embark.addCodeToEmbarkJS(\"alert('hello world!')\");\n}\n```\n\n## .addProviderInit(providerType, code, initCondition(config))\n\nThis call is used to add code to be executed in the initialization under the condition that ``initCondition`` returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config\n\n* providerType - type of provider (string, \"storage\" or \"communication\")\n* code - code to add (string)\n* callback:\n  * \"config\" - config of the ``providerType``\n\n```\nmodule.exports = function(embark) {\n  let code = \"\\nEmbarkJS.Storage.setProvider('ipfs')\";\n  embark.addProviderInit('storage', code, (storageConfig) => {\n    return (storageConfig.provider === 'ipfs' && storageConfig.enabled === true);\n  });\n}\n```\n\n## .registerImportFile(importName, importLocation)\n\nThis call is used so the plugin can make a certain file available as a library to a user\n\n```\nvar path = require('path')\n\nmodule.exports = function(embark) {\n  embark.registerImportFile(\"my-lib\", path.join(__dirname, \"my-lib.js\"));\n}\n```\n\n## .registerActionForEvent(eventName, options, cb)\n\nThis lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let's you modify the params before sending them back to the next action or back to Embark.\n\nHere is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:\n```\nembark.registerActionForEvent(\"deployment:contract:beforeDeploy\", async (params, cb) => {\n  cosnt contarct = params.contract;\n  if (!contract.code) {\n    return callback();\n  }\n  \n  const code = (contract.code.indexOf('0x') === 0) ? contract.code.substr(2) : contract.code;\n  const contractCodeLength = Buffer.from(code, 'hex').toString().length;\n  if (contractCodeLength > MAX_CONTRACT_BYTECODE_LENGTH) {\n    return callback(new Error(`Bytecode for ${contract.className} contract is too large. Not deploying.`));\n  }\n  callback();\n});\n```\n\n### Parameters\n- `eventName`: String, Name fo the event you want an action to be registered to\n- `options`: Object, optional, options for the action registration\n  - `priority`: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)\n\n### Available events for actions\n\n- `embark:engine:started`: Called when the engine just started. No params\n- `blockchain:config:modify`: Let's you modify the blockchain configs before starting a blockchain node. Only param is the initial `blockchainConfig`\n- `deployment:contract:beforeDeploy`: Called before a contract is deployed. Only param is the `contract`\n- `deployment:contract:shouldDeploy`: Also called before a contract is deployed, but let's you determine if the contract should be deployed. Two params: `contract` and `shouldDeploy`, set `shouldDeploy` to `false` to disable its deployment\n- `deployment:contract:undeployed`: Called after a contract is determined to not deploy. Only param is `contract`\n- `deployment:contract:deployed`: Called after a contract deployed. Only param is `contract`\n- `deployment:deployContracts:beforeAll`: Called before any contract is deployed. No params\n- `deployment:deployContracts:afterAll`: Called after all contracts have deployed. No params\n- `tests:contracts:compile:before`: Called before the contracts are compiled in the context of the test. Only param is `contractFiles`\n- `tests:contracts:compile:after`: Called after the contracts are compiled in the context of the test. Only param is `compiledContracts`\n- `blockchain:proxy:request`: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:\n  - `request`: an object containing the request payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n- `blockchain:proxy:response`: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:\n  - `request`: an object containing the request payload\n  - `response`: an object containing the response payload\n  - `transport`: an object containing the client's websocket connection to the proxy\n  - `isWs`: a boolean flag indicating if the request was performed using websockets\n","date":"2020-01-17T19:00:03.900Z","updated":"2020-01-17T19:00:03.900Z","path":"docs/plugin_reference.html","comments":1,"_id":"ck5ijm3uj002t7hega11r8j6v","content":"<p>This reference covers all APIs exposed by the <code>embark</code> object passed to every custom created plugin. Make sure to read the section on <a href=\"/docs/creating_plugins.html\">creating a plugin</a> first.</p>\n<h2 id=\"pluginConfig\"><a href=\"#pluginConfig\" class=\"headerlink\" title=\".pluginConfig\"></a>.pluginConfig</h2><p><code>pluginConfig</code> is an object that contains the configuration for your plugin specified in the project’s <code>embark.json</code>. For example, if a plugin configuration like the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-babel&quot;: &#123; </span><br><span class=\"line\">    &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">    &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>embark.pluginConfig</code> will contain </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123; </span><br><span class=\"line\">  &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">  &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>and can be used by your plugin as needed.</p>\n<h2 id=\"registerPipeline-matchingFiles-callback-options\"><a href=\"#registerPipeline-matchingFiles-callback-options\" class=\"headerlink\" title=\".registerPipeline(matchingFiles, callback(options))\"></a>.registerPipeline(matchingFiles, callback(options))</h2><p>This call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.</p>\n<p><code>matchingFiles</code> is an array of matching files the plugin should be called with for e.g <code>[&#39;**/*.js&#39;, &#39;!vendor/jquery.js&#39;]</code> matches all JavaScript files except <code>vendor/jquery.js</code>.</p>\n<p>Available optinos:</p>\n<ul>\n<li><code>targetFile</code> - filename to be generated</li>\n<li><code>source</code> - content of the file</li>\n</ul>\n<p>Returns <code>string</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var babel &#x3D; require(&quot;babel-core&quot;);</span><br><span class=\"line\">require(&quot;babel-preset-react&quot;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerPipeline([&quot;**&#x2F;*.js&quot;, &quot;**&#x2F;*.jsx&quot;], (options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return babel.transform(options.source, &#123;</span><br><span class=\"line\">      minified: true,</span><br><span class=\"line\">      presets: [&#39;react&#39;]</span><br><span class=\"line\">    &#125;).code;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerContractConfiguration-contractsConfig\"><a href=\"#registerContractConfiguration-contractsConfig\" class=\"headerlink\" title=\".registerContractConfiguration(contractsConfig)\"></a>.registerContractConfiguration(contractsConfig)</h2><p>This call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the <code>DGDToken</code> contract code will redeployed with the arguments <code>100</code> in any environment, except for the livenet since it’s already deployed there at a particular address.</p>\n<p>Typically this call is used in combination with <code>embark.addContractFile</code></p>\n<p><code>contractsConfig</code> is an object in the same structure as the one found in the contracts configuration at <code>config/contracts.json</code>. The users own configuration will be merged with the one specified in the plugins.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerContractConfiguration(&#123;</span><br><span class=\"line\">    &quot;default&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;args&quot;: [</span><br><span class=\"line\">            100</span><br><span class=\"line\">          ]</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;livenet&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;address&quot;: &quot;0xe0b7927c4af23765cb51314a0e0521a9645f0e2a&quot;</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addContractFile-file\"><a href=\"#addContractFile-file\" class=\"headerlink\" title=\".addContractFile(file)\"></a>.addContractFile(file)</h2><p>Typically this call is used in combination with <code>embark.registerContractConfiguration</code>. If you want to make the contract available but not automatically deployed without the user specifying so you can use <code>registerContractConfiguration</code> to set the contract config to <code>deploy: false</code>, this is particularly useful for when the user is meant to extend the contract being given (e.g <code>contract MyToken is StandardToken</code>)</p>\n<p><code>file</code> is the contract file to add to embark, the path should relative to the plugin.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addContractFile(&quot;.&#x2F;DGDToken.sol&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addFileToPipeline-file-options\"><a href=\"#addFileToPipeline-file-options\" class=\"headerlink\" title=\".addFileToPipeline(file, options)\"></a>.addFileToPipeline(file, options)</h2><p>This call is used to add a file to the pipeline so it’s included with the dapp on the client side.</p>\n<p><code>file</code> is the file to add to the pipeline, the path should relative to the plugin.</p>\n<p><code>intendedPath</code> is the intended path outside of the plugin</p>\n<p>Available options:</p>\n<ul>\n<li><code>skipPipeline</code> - If <code>true</code> it will not apply transformations to the file. For<br>example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to<br>true will not apply the plugin on this file.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addFileToPipeline(&quot;.&#x2F;jquery.js&quot;, &#123;skipPipeline: true&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerBeforeDeploy-callback-options-callback\"><a href=\"#registerBeforeDeploy-callback-options-callback\" class=\"headerlink\" title=\".registerBeforeDeploy(callback(options), [callback])\"></a>.registerBeforeDeploy(callback(options), [callback])</h2><p>This call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.<br>It is useful to replace placeholders with dynamic values.</p>\n<p>Available options:</p>\n<ul>\n<li><code>embarkDeploy</code> - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.</li>\n<li><code>pluginConfig</code> - plugin configuration object from embark.json</li>\n<li><code>deploymentAccount</code> - address of account which will be used to deploy this contract</li>\n<li><code>contract</code> - contract object.</li>\n<li><code>callback</code> - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code</li>\n</ul>\n<p>You can use the callback argument instead of the callback option if you prefer. It needs the same result object.</p>\n<p>expected return: ignored</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerBeforeDeploy(function(options) &#123;</span><br><span class=\"line\">    var code &#x3D; options.contract.code.replace(&#x2F;deaddeaddeaddeaddeaddeaddeaddeaddeaddead&#x2F;ig, &#39;c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de&#39;);</span><br><span class=\"line\">    options.callback(&#123; contractCode: code &#125;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerClientWeb3Provider-callback-options\"><a href=\"#registerClientWeb3Provider-callback-options\" class=\"headerlink\" title=\".registerClientWeb3Provider(callback(options))\"></a>.registerClientWeb3Provider(callback(options))</h2><p>This call can be used to override the default web3 object generation in the dapp. it’s useful if you want to add a plugin to interact with services like <a href=\"http://infura.io\" target=\"_blank\" rel=\"noopener\">http://infura.io</a> or if you want to use your own web3.js library extension.</p>\n<p>options available:</p>\n<ul>\n<li>rpcHost - configured rpc Host to connect to</li>\n<li>rpcPort - configured rpc Port to connect to</li>\n<li>blockchainConfig - object containing the full blockchain configuration for the current environment</li>\n</ul>\n<p>expected return: <code>string</code></p>\n<p>example:</p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n<h2 id=\"registerContractsGeneration-callback-options\"><a href=\"#registerContractsGeneration-callback-options\" class=\"headerlink\" title=\".registerContractsGeneration(callback(options))\"></a>.registerContractsGeneration(callback(options))</h2><p>By default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.</p>\n<p>Available options:</p>\n<ul>\n<li>contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)<ul>\n<li>abiDefinition</li>\n<li>code</li>\n<li>deployedAddress</li>\n<li>gasEstimates</li>\n<li>gas</li>\n<li>gasPrice</li>\n<li>runtimeByteCode</li>\n</ul>\n</li>\n</ul>\n<p>Returns <code>string</code></p>\n<p> The generated string will be used to create the contract objects in the Embark console and will be generated in <code>embarkArtifacts</code> so that the Dapp can use them.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; (embark) &#x3D;&gt; &#123;</span><br><span class=\"line\">  embark.registerContractsGeneration((options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    const contractGenerations &#x3D; [];</span><br><span class=\"line\">    Object.keys(options.contracts).map(className &#x3D;&gt; &#123;</span><br><span class=\"line\">      const contract &#x3D; options.contracts[className];</span><br><span class=\"line\">      const abi &#x3D; JSON.stringify(contract.abiDefinition);</span><br><span class=\"line\"></span><br><span class=\"line\">      contractGenerations.push(&#96;$&#123;className&#125; &#x3D; new web3.eth.Contract($&#123;abi&#125;, &#39;$&#123;contract.deployedAddress&#125;&#39;);</span><br><span class=\"line\">      module.exports &#x3D; $&#123;className&#125;;&#96;);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">    return contractGenerations.join(&#39;\\n&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerConsoleCommand-options\"><a href=\"#registerConsoleCommand-options\" class=\"headerlink\" title=\".registerConsoleCommand(options)\"></a>.registerConsoleCommand(options)</h2><p>This call is used to extend the console with custom commands.</p>\n<p>The function takes an <code>object</code> with the following options:</p>\n<ul>\n<li><code>description</code>: Description of the command (used by the help command)</li>\n<li><code>matches</code>: Either an <code>array</code> of strings corresponding to exact matches for the command or a <code>function</code> where the only parameter in the command<ul>\n<li>The <code>function</code> must return a <code>boolean</code>. True if it matches, <code>false</code> if not.</li>\n</ul>\n</li>\n<li><code>usage</code>: Usage of the command that will be outputed by the help command<ul>\n<li>Adding <code>usage</code> is optional in the case where <code>matches</code> is an <code>array</code></li>\n</ul>\n</li>\n<li><code>process</code>: <code>function</code> that will be executed to process the command. The <code>function</code> receives two parameters:<ul>\n<li><code>command</code>: The <code>string</code> command that the user entered</li>\n<li><code>callback</code>: Callback <code>function</code> to be called at the end of the process<ul>\n<li>This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerConsoleCommand(&#123;</span><br><span class=\"line\">    description: &quot;Salutes the world&quot;,</span><br><span class=\"line\">    matches: [&quot;hello&quot;, &quot;hellowWorld&quot;],</span><br><span class=\"line\">    &#x2F;&#x2F; OR a function for more complex cases</span><br><span class=\"line\">    matches: (cmd) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;); &#x2F;&#x2F; You can use &#96;split&#96; for commands that receive parameters</span><br><span class=\"line\">      return commandName &#x3D;&#x3D;&#x3D; &#39;hello&#39; || commandName &#x3D;&#x3D;&#x3D; &#39;hellowWorld&#39;; </span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    usage: &quot;hello &lt;name&gt; or helloWorld &lt;name&gt;&quot;,</span><br><span class=\"line\">    process: (cmd, callback) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;);</span><br><span class=\"line\">      name &#x3D; name || &quot;noName&quot;; &#x2F;&#x2F; Default to &quot;noName&quot; when nothing is specified</span><br><span class=\"line\">      callback(null, &#96;Hello $&#123;name&#125;&#96;); &#x2F;&#x2F; Call back with the message. This will be outputed in the console</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerCompiler-extension-callback-contractFiles-doneCallback\"><a href=\"#registerCompiler-extension-callback-contractFiles-doneCallback\" class=\"headerlink\" title=\".registerCompiler(extension, callback(contractFiles, doneCallback))\"></a>.registerCompiler(extension, callback(contractFiles, doneCallback))</h2><p>Registers a new compiler for a specific contract extension.</p>\n<p>Arguments:</p>\n<ul>\n<li><strong>extension</strong>: The file extension (e.g: <code>.sol</code>)</li>\n<li><strong>callback</strong>: Function called by Embark with the contract files that the plugin should process<ul>\n<li><strong>contractFiles</strong>: Array of files that need to be compiled</li>\n<li><strong>doneCallback(error, result)</strong>: The final callback to call once every file is compiled or when there is an error<ul>\n<li><strong>error</strong>: Error string or object when something goes wrong</li>\n<li><strong>result</strong>: An object containing the compiled contracts result (key: contractName, value: contract object) or, <code>false</code> if your plugin is not compatible</li>\n<li><strong>code</strong> - [required] contract bytecode (string)      </li>\n<li><strong>abiDefinition</strong> - [required] contract abi (array of objects)<ul>\n<li>e.g <code>[{&quot;constant&quot;:true,&quot;inputs&quot;:[],&quot;name&quot;:&quot;storedData&quot;,&quot;outputs&quot;:[{&quot;name&quot;:&quot;&quot;,&quot;type&quot;:&quot;uint256&quot;}],&quot;payable&quot;:false,&quot;type&quot;:&quot;function&quot;}, etc...</code></li>\n</ul>\n</li>\n<li><strong>runtimeBytecode</strong> - [optional] contract runtimeBytecode (string)</li>\n<li><strong>gasEstimates</strong> - [optional] gas estimates for constructor and methods (hash)<ul>\n<li>e.g <code>{&quot;creation&quot;:[20131,38200],&quot;external&quot;:{&quot;get()&quot;:269,&quot;set(uint256)&quot;:20163,&quot;storedData()&quot;:224},&quot;internal&quot;:{}}</code></li>\n</ul>\n</li>\n<li><strong>functionHashes</strong> - [optional] object with methods and their corresponding hash identifier (hash)<ul>\n<li>e.g <code>{&quot;get()&quot;:&quot;6d4ce63c&quot;,&quot;set(uint256)&quot;:&quot;60fe47b1&quot;,&quot;storedData()&quot;:&quot;2a1afcd9&quot;}</code></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p>Below a possible implementation of a solcjs plugin.<br>Note that the plugin checks the version and returns <code>false</code> as the result if it is not compatible:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const solc &#x3D; require(&#39;solc&#39;);</span><br><span class=\"line\">const semver &#x3D; require(&#39;semver&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerCompiler(&quot;.sol&quot;, function(contractFiles, cb) &#123;</span><br><span class=\"line\">    const wantedVersion &#x3D; embark.config.embarkConfig.versions.solc;</span><br><span class=\"line\">    if (semver.gt(wantedVersion, &#39;0.5.0&#39;)) &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; We do not support greater than solidity version 0.5.0</span><br><span class=\"line\">      &#x2F;&#x2F; This let&#39;s Embark know that we are not compatible, that way Embark will fallback to another compiler</span><br><span class=\"line\">      return cb(null, false);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">    &#x2F;&#x2F; prepare input for solc</span><br><span class=\"line\">    var input &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var i &#x3D; 0; i &lt; contractFiles.length; i++) &#123;</span><br><span class=\"line\">      var filename &#x3D; contractFiles[i].filename.replace(&#39;app&#x2F;contracts&#x2F;&#39;,&#39;&#39;);</span><br><span class=\"line\">      input[filename] &#x3D; contractFiles[i].content.toString();</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; compile files</span><br><span class=\"line\">    var output &#x3D; solc.compile(&#123;sources: input&#125;, 1);</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; generate the compileObject expected by embark</span><br><span class=\"line\">    var json &#x3D; output.contracts;</span><br><span class=\"line\">    var compiled_object &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var className in json) &#123;</span><br><span class=\"line\">      var contract &#x3D; json[className];</span><br><span class=\"line\"></span><br><span class=\"line\">      compiled_object[className] &#x3D; &#123;&#125;;</span><br><span class=\"line\">      compiled_object[className].code            &#x3D; contract.bytecode;</span><br><span class=\"line\">      compiled_object[className].runtimeBytecode &#x3D; contract.runtimeBytecode;</span><br><span class=\"line\">      compiled_object[className].gasEstimates    &#x3D; contract.gasEstimates;</span><br><span class=\"line\">      compiled_object[className].functionHashes  &#x3D; contract.functionHashes;</span><br><span class=\"line\">      compiled_object[className].abiDefinition   &#x3D; JSON.parse(contract.interface);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    cb(null, compiled_object);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"logger\"><a href=\"#logger\" class=\"headerlink\" title=\".logger\"></a>.logger</h2><p>To print messages to the embark log is it better to use <code>embark.logger</code> instead of <code>console</code>.</p>\n<p>e.g <code>embark.logger.info(&quot;hello&quot;)</code></p>\n<h2 id=\"events-on-eventName-callback-args\"><a href=\"#events-on-eventName-callback-args\" class=\"headerlink\" title=\".events.on(eventName, callback(*args))\"></a>.events.on(eventName, callback(*args))</h2><p>This call is used to listen and react to events that happen in Embark such as contract deployment</p>\n<ul>\n<li>eventName - name of event to listen to<ul>\n<li>available events:<ul>\n<li><code>contractsDeployed</code> - triggered when contracts have been deployed</li>\n<li><code>file-add</code>, <code>file-change</code>, <code>file-remove</code>, <code>file-event</code> - triggered on a file change, args is (filetype, path)</li>\n<li><code>outputDone</code> - triggered when dapp is (re)generated</li>\n<li><code>firstDeploymentDone</code> - triggered when the dapp is deployed and generated for the first time</li>\n<li><code>check:backOnline:serviceName</code> - triggered when the service with <code>serviceName</code> comes back online</li>\n<li><code>check:wentOffline:serviceName</code> - triggered when the service with <code>serviceName</code> goes offline</li>\n<li><code>log</code> - triggered on a log, args is (logLevel, logMsg)</li>\n<li><code>contractsState</code> - list of contracts, their deployment status, address, etc..</li>\n<li><code>servicesState</code> - list of services and their state</li>\n<li><code>exit</code>: - triggered when embark is terminating</li>\n<li><code>deploy:contract:deployed</code>: - triggered when a contract is deployed, the callback will contain the contract object</li>\n<li><code>deploy:contract:undeployed</code>: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object</li>\n<li><code>deploy:contract:error</code>: - triggered when a contract couldn’t be deployed due to an error, the callback will contain the contract object</li>\n<li><code>deploy:contract:receipt</code>: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt</li>\n<li><code>contractsState</code>: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..</li>\n<li><code>deploy:beforeAll</code>: - triggered before contract deployment starts</li>\n<li><code>contracts:deploy:afterAll</code>: - triggered after contract deployment starts</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.on(&quot;contractsDeployed&quot;, function() &#123;</span><br><span class=\"line\">    embark.logger.info(&quot;plugin says: your contracts have been deployed&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  embark.events.on(&quot;file-change&quot;, function(filetype, path) &#123;</span><br><span class=\"line\">    if (type &#x3D;&#x3D;&#x3D; &#39;contract&#39;) &#123;</span><br><span class=\"line\">      embark.logger.info(&quot;plugin says: you just changed the contract at &quot; + path);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"events-request-requestName-callback-args\"><a href=\"#events-request-requestName-callback-args\" class=\"headerlink\" title=\".events.request(requestName, callback(*args))\"></a>.events.request(requestName, callback(*args))</h3><p>This call is used to request a certain resource from Embark</p>\n<ul>\n<li>requestName - name of request to listen to<ul>\n<li>available requests:<ul>\n<li>(<code>deploy:contract</code>, contractObj) - deploys a particular contract through embark</li>\n<li>(<code>runcode:eval</code>, code) - runs js code in the Embark engine.</li>\n<li>(<code>runcode:register</code>, cmdName, cmdObj) - ‘registers’ a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);</li>\n<li>(<code>contracts:list</code>) - returns a list a callback containing (err, contractList) containing a collection of available contracts</li>\n<li>(<code>compiler:contracts</code>, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback</li>\n<li>(<code>services:register</code>, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)</li>\n<li>(<code>console:command</code>, cmd) - execute a command in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.request(&quot;code&quot;, function(code) &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; Do something with the code</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerServiceCheck-serviceName-callback-name-status-time\"><a href=\"#registerServiceCheck-serviceName-callback-name-status-time\" class=\"headerlink\" title=\".registerServiceCheck(serviceName, callback({name, status}), time)\"></a>.registerServiceCheck(serviceName, callback({name, status}), time)</h2><p>This call is used to register a service in embark so it’s periodically checked.<br>It will be displayed in the Embark Dashboard, and will also trigger events such as <code>check:backOnline:yourServiceName</code> and <code>check:backOffline:yourServiceName</code></p>\n<ul>\n<li>serviceName - name of service (string)</li>\n<li>callback:<ul>\n<li><code>name</code> - name/text to display (string)</li>\n<li><code>status</code> - status of the service (string, <code>on</code> or <code>off</code> or <code>warn</code>)</li>\n</ul>\n</li>\n<li>time (optional) - ms interval to call the callback (default: 5000 ms)</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerServiceCheck(&quot;MyServer&quot;, function(cb) &#123;</span><br><span class=\"line\">    if (myServiceOnline()) &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Online&quot;, status: &quot;on&quot;&#125;);</span><br><span class=\"line\">    &#125; else &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Offline&quot;, status: &quot;off&quot;&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerUploadCommand-cmdName-callback\"><a href=\"#registerUploadCommand-cmdName-callback\" class=\"headerlink\" title=\".registerUploadCommand(cmdName, callback)\"></a>.registerUploadCommand(cmdName, callback)</h2><p>This call is used to add a new cmd to <code>embark upload</code> to upload the dapp to a new storage service. In the example, <code>run</code> doesn’t exist. You need to import a library that runs shell commands like <a href=\"https://www.npmjs.com/package/shelljs\" target=\"_blank\" rel=\"noopener\">shelljs</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerUploadCommand(&quot;ipfs&quot;, function() &#123;</span><br><span class=\"line\">    run(&quot;ipfs add -r dist&#x2F;&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addCodeToEmbarkJS-code\"><a href=\"#addCodeToEmbarkJS-code\" class=\"headerlink\" title=\".addCodeToEmbarkJS(code)\"></a>.addCodeToEmbarkJS(code)</h2><p>This call is used to add code to the embark.js library. It’s typically used to extend it with new functionality, new storage providers, new communication providers, etc..</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addCodeToEmbarkJS(&quot;alert(&#39;hello world!&#39;)&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addProviderInit-providerType-code-initCondition-config\"><a href=\"#addProviderInit-providerType-code-initCondition-config\" class=\"headerlink\" title=\".addProviderInit(providerType, code, initCondition(config))\"></a>.addProviderInit(providerType, code, initCondition(config))</h2><p>This call is used to add code to be executed in the initialization under the condition that <code>initCondition</code> returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config</p>\n<ul>\n<li>providerType - type of provider (string, “storage” or “communication”)</li>\n<li>code - code to add (string)</li>\n<li>callback:<ul>\n<li>“config” - config of the <code>providerType</code></li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  let code &#x3D; &quot;\\nEmbarkJS.Storage.setProvider(&#39;ipfs&#39;)&quot;;</span><br><span class=\"line\">  embark.addProviderInit(&#39;storage&#39;, code, (storageConfig) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return (storageConfig.provider &#x3D;&#x3D;&#x3D; &#39;ipfs&#39; &amp;&amp; storageConfig.enabled &#x3D;&#x3D;&#x3D; true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerImportFile-importName-importLocation\"><a href=\"#registerImportFile-importName-importLocation\" class=\"headerlink\" title=\".registerImportFile(importName, importLocation)\"></a>.registerImportFile(importName, importLocation)</h2><p>This call is used so the plugin can make a certain file available as a library to a user</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var path &#x3D; require(&#39;path&#39;)</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerImportFile(&quot;my-lib&quot;, path.join(__dirname, &quot;my-lib.js&quot;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerActionForEvent-eventName-options-cb\"><a href=\"#registerActionForEvent-eventName-options-cb\" class=\"headerlink\" title=\".registerActionForEvent(eventName, options, cb)\"></a>.registerActionForEvent(eventName, options, cb)</h2><p>This lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let’s you modify the params before sending them back to the next action or back to Embark.</p>\n<p>Here is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerActionForEvent(&quot;deployment:contract:beforeDeploy&quot;, async (params, cb) &#x3D;&gt; &#123;</span><br><span class=\"line\">  cosnt contarct &#x3D; params.contract;</span><br><span class=\"line\">  if (!contract.code) &#123;</span><br><span class=\"line\">    return callback();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">  const code &#x3D; (contract.code.indexOf(&#39;0x&#39;) &#x3D;&#x3D;&#x3D; 0) ? contract.code.substr(2) : contract.code;</span><br><span class=\"line\">  const contractCodeLength &#x3D; Buffer.from(code, &#39;hex&#39;).toString().length;</span><br><span class=\"line\">  if (contractCodeLength &gt; MAX_CONTRACT_BYTECODE_LENGTH) &#123;</span><br><span class=\"line\">    return callback(new Error(&#96;Bytecode for $&#123;contract.className&#125; contract is too large. Not deploying.&#96;));</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  callback();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Parameters\"><a href=\"#Parameters\" class=\"headerlink\" title=\"Parameters\"></a>Parameters</h3><ul>\n<li><code>eventName</code>: String, Name fo the event you want an action to be registered to</li>\n<li><code>options</code>: Object, optional, options for the action registration<ul>\n<li><code>priority</code>: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"Available-events-for-actions\"><a href=\"#Available-events-for-actions\" class=\"headerlink\" title=\"Available events for actions\"></a>Available events for actions</h3><ul>\n<li><code>embark:engine:started</code>: Called when the engine just started. No params</li>\n<li><code>blockchain:config:modify</code>: Let’s you modify the blockchain configs before starting a blockchain node. Only param is the initial <code>blockchainConfig</code></li>\n<li><code>deployment:contract:beforeDeploy</code>: Called before a contract is deployed. Only param is the <code>contract</code></li>\n<li><code>deployment:contract:shouldDeploy</code>: Also called before a contract is deployed, but let’s you determine if the contract should be deployed. Two params: <code>contract</code> and <code>shouldDeploy</code>, set <code>shouldDeploy</code> to <code>false</code> to disable its deployment</li>\n<li><code>deployment:contract:undeployed</code>: Called after a contract is determined to not deploy. Only param is <code>contract</code></li>\n<li><code>deployment:contract:deployed</code>: Called after a contract deployed. Only param is <code>contract</code></li>\n<li><code>deployment:deployContracts:beforeAll</code>: Called before any contract is deployed. No params</li>\n<li><code>deployment:deployContracts:afterAll</code>: Called after all contracts have deployed. No params</li>\n<li><code>tests:contracts:compile:before</code>: Called before the contracts are compiled in the context of the test. Only param is <code>contractFiles</code></li>\n<li><code>tests:contracts:compile:after</code>: Called after the contracts are compiled in the context of the test. Only param is <code>compiledContracts</code></li>\n<li><code>blockchain:proxy:request</code>: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n<li><code>blockchain:proxy:response</code>: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>response</code>: an object containing the response payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n</ul>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>This reference covers all APIs exposed by the <code>embark</code> object passed to every custom created plugin. Make sure to read the section on <a href=\"/docs/creating_plugins.html\">creating a plugin</a> first.</p>\n<h2 id=\"pluginConfig\"><a href=\"#pluginConfig\" class=\"headerlink\" title=\".pluginConfig\"></a>.pluginConfig</h2><p><code>pluginConfig</code> is an object that contains the configuration for your plugin specified in the project’s <code>embark.json</code>. For example, if a plugin configuration like the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;plugins&quot;: &#123;</span><br><span class=\"line\">  &quot;embark-babel&quot;: &#123; </span><br><span class=\"line\">    &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">    &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>embark.pluginConfig</code> will contain </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123; </span><br><span class=\"line\">  &quot;files&quot;: [&quot;**&#x2F;*.js&quot;, &quot;!**&#x2F;jquery.min.js&quot;],</span><br><span class=\"line\">  &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>and can be used by your plugin as needed.</p>\n<h2 id=\"registerPipeline-matchingFiles-callback-options\"><a href=\"#registerPipeline-matchingFiles-callback-options\" class=\"headerlink\" title=\".registerPipeline(matchingFiles, callback(options))\"></a>.registerPipeline(matchingFiles, callback(options))</h2><p>This call will return the content of the current asset file so the plugin can transform it in some way. Typically this is used to implement pipeline plugins such as Babel, JSX, sass to css, etc.</p>\n<p><code>matchingFiles</code> is an array of matching files the plugin should be called with for e.g <code>[&#39;**/*.js&#39;, &#39;!vendor/jquery.js&#39;]</code> matches all JavaScript files except <code>vendor/jquery.js</code>.</p>\n<p>Available optinos:</p>\n<ul>\n<li><code>targetFile</code> - filename to be generated</li>\n<li><code>source</code> - content of the file</li>\n</ul>\n<p>Returns <code>string</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var babel &#x3D; require(&quot;babel-core&quot;);</span><br><span class=\"line\">require(&quot;babel-preset-react&quot;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerPipeline([&quot;**&#x2F;*.js&quot;, &quot;**&#x2F;*.jsx&quot;], (options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return babel.transform(options.source, &#123;</span><br><span class=\"line\">      minified: true,</span><br><span class=\"line\">      presets: [&#39;react&#39;]</span><br><span class=\"line\">    &#125;).code;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerContractConfiguration-contractsConfig\"><a href=\"#registerContractConfiguration-contractsConfig\" class=\"headerlink\" title=\".registerContractConfiguration(contractsConfig)\"></a>.registerContractConfiguration(contractsConfig)</h2><p>This call is used to specify a configure of one or more contracts in one or several environments. This is useful for specifying the different configurations a contract might have depending on the enviroment. For instance in the code bellow, the <code>DGDToken</code> contract code will redeployed with the arguments <code>100</code> in any environment, except for the livenet since it’s already deployed there at a particular address.</p>\n<p>Typically this call is used in combination with <code>embark.addContractFile</code></p>\n<p><code>contractsConfig</code> is an object in the same structure as the one found in the contracts configuration at <code>config/contracts.json</code>. The users own configuration will be merged with the one specified in the plugins.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerContractConfiguration(&#123;</span><br><span class=\"line\">    &quot;default&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;args&quot;: [</span><br><span class=\"line\">            100</span><br><span class=\"line\">          ]</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &quot;livenet&quot;: &#123;</span><br><span class=\"line\">      &quot;deploy&quot;: &#123;</span><br><span class=\"line\">        &quot;DGDToken&quot;: &#123;</span><br><span class=\"line\">          &quot;address&quot;: &quot;0xe0b7927c4af23765cb51314a0e0521a9645f0e2a&quot;</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addContractFile-file\"><a href=\"#addContractFile-file\" class=\"headerlink\" title=\".addContractFile(file)\"></a>.addContractFile(file)</h2><p>Typically this call is used in combination with <code>embark.registerContractConfiguration</code>. If you want to make the contract available but not automatically deployed without the user specifying so you can use <code>registerContractConfiguration</code> to set the contract config to <code>deploy: false</code>, this is particularly useful for when the user is meant to extend the contract being given (e.g <code>contract MyToken is StandardToken</code>)</p>\n<p><code>file</code> is the contract file to add to embark, the path should relative to the plugin.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addContractFile(&quot;.&#x2F;DGDToken.sol&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addFileToPipeline-file-options\"><a href=\"#addFileToPipeline-file-options\" class=\"headerlink\" title=\".addFileToPipeline(file, options)\"></a>.addFileToPipeline(file, options)</h2><p>This call is used to add a file to the pipeline so it’s included with the dapp on the client side.</p>\n<p><code>file</code> is the file to add to the pipeline, the path should relative to the plugin.</p>\n<p><code>intendedPath</code> is the intended path outside of the plugin</p>\n<p>Available options:</p>\n<ul>\n<li><code>skipPipeline</code> - If <code>true</code> it will not apply transformations to the file. For<br>example if you have a babel plugin to transform es6 code or a minifier plugin, setting this to<br>true will not apply the plugin on this file.</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addFileToPipeline(&quot;.&#x2F;jquery.js&quot;, &#123;skipPipeline: true&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerBeforeDeploy-callback-options-callback\"><a href=\"#registerBeforeDeploy-callback-options-callback\" class=\"headerlink\" title=\".registerBeforeDeploy(callback(options), [callback])\"></a>.registerBeforeDeploy(callback(options), [callback])</h2><p>This call can be used to add handler to process contract code after it was generated, but immediately before it is going to be deployed.<br>It is useful to replace placeholders with dynamic values.</p>\n<p>Available options:</p>\n<ul>\n<li><code>embarkDeploy</code> - instance of Deploy class. Has following fields: web3, contractsManager, logger, env, chainConfig, gasLimit.</li>\n<li><code>pluginConfig</code> - plugin configuration object from embark.json</li>\n<li><code>deploymentAccount</code> - address of account which will be used to deploy this contract</li>\n<li><code>contract</code> - contract object.</li>\n<li><code>callback</code> - callback function that handler must call with result object as the only argument. Result object must have field contractCode with (un)modified code from contract.code</li>\n</ul>\n<p>You can use the callback argument instead of the callback option if you prefer. It needs the same result object.</p>\n<p>expected return: ignored</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerBeforeDeploy(function(options) &#123;</span><br><span class=\"line\">    var code &#x3D; options.contract.code.replace(&#x2F;deaddeaddeaddeaddeaddeaddeaddeaddeaddead&#x2F;ig, &#39;c0dec0dec0dec0dec0dec0dec0dec0dec0dec0de&#39;);</span><br><span class=\"line\">    options.callback(&#123; contractCode: code &#125;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerClientWeb3Provider-callback-options\"><a href=\"#registerClientWeb3Provider-callback-options\" class=\"headerlink\" title=\".registerClientWeb3Provider(callback(options))\"></a>.registerClientWeb3Provider(callback(options))</h2><p>This call can be used to override the default web3 object generation in the dapp. it’s useful if you want to add a plugin to interact with services like <a href=\"http://infura.io\" target=\"_blank\" rel=\"noopener\">http://infura.io</a> or if you want to use your own web3.js library extension.</p>\n<p>options available:</p>\n<ul>\n<li>rpcHost - configured rpc Host to connect to</li>\n<li>rpcPort - configured rpc Port to connect to</li>\n<li>blockchainConfig - object containing the full blockchain configuration for the current environment</li>\n</ul>\n<p>expected return: <code>string</code></p>\n<p>example:</p>\n<pre><code class=\"javascript\">module.exports = function(embark) {\n  embark.registerClientWeb3Provider(function(options) {\n    return \"web3 = new Web3(new Web3.providers.HttpProvider('http://\" + options.rpcHost + \":\" + options.rpcPort + \"'));\";\n  });\n}\n</code></pre>\n\n\n<h2 id=\"registerContractsGeneration-callback-options\"><a href=\"#registerContractsGeneration-callback-options\" class=\"headerlink\" title=\".registerContractsGeneration(callback(options))\"></a>.registerContractsGeneration(callback(options))</h2><p>By default Embark will use EmbarkJS to declare contracts in the Dapp. You can override that and use your own client side library.</p>\n<p>Available options:</p>\n<ul>\n<li>contracts - Hash of objects containing all the deployed contracts. (key: contractName, value: contract object)<ul>\n<li>abiDefinition</li>\n<li>code</li>\n<li>deployedAddress</li>\n<li>gasEstimates</li>\n<li>gas</li>\n<li>gasPrice</li>\n<li>runtimeByteCode</li>\n</ul>\n</li>\n</ul>\n<p>Returns <code>string</code></p>\n<p> The generated string will be used to create the contract objects in the Embark console and will be generated in <code>embarkArtifacts</code> so that the Dapp can use them.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; (embark) &#x3D;&gt; &#123;</span><br><span class=\"line\">  embark.registerContractsGeneration((options) &#x3D;&gt; &#123;</span><br><span class=\"line\">    const contractGenerations &#x3D; [];</span><br><span class=\"line\">    Object.keys(options.contracts).map(className &#x3D;&gt; &#123;</span><br><span class=\"line\">      const contract &#x3D; options.contracts[className];</span><br><span class=\"line\">      const abi &#x3D; JSON.stringify(contract.abiDefinition);</span><br><span class=\"line\"></span><br><span class=\"line\">      contractGenerations.push(&#96;$&#123;className&#125; &#x3D; new web3.eth.Contract($&#123;abi&#125;, &#39;$&#123;contract.deployedAddress&#125;&#39;);</span><br><span class=\"line\">      module.exports &#x3D; $&#123;className&#125;;&#96;);</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">    return contractGenerations.join(&#39;\\n&#39;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerConsoleCommand-options\"><a href=\"#registerConsoleCommand-options\" class=\"headerlink\" title=\".registerConsoleCommand(options)\"></a>.registerConsoleCommand(options)</h2><p>This call is used to extend the console with custom commands.</p>\n<p>The function takes an <code>object</code> with the following options:</p>\n<ul>\n<li><code>description</code>: Description of the command (used by the help command)</li>\n<li><code>matches</code>: Either an <code>array</code> of strings corresponding to exact matches for the command or a <code>function</code> where the only parameter in the command<ul>\n<li>The <code>function</code> must return a <code>boolean</code>. True if it matches, <code>false</code> if not.</li>\n</ul>\n</li>\n<li><code>usage</code>: Usage of the command that will be outputed by the help command<ul>\n<li>Adding <code>usage</code> is optional in the case where <code>matches</code> is an <code>array</code></li>\n</ul>\n</li>\n<li><code>process</code>: <code>function</code> that will be executed to process the command. The <code>function</code> receives two parameters:<ul>\n<li><code>command</code>: The <code>string</code> command that the user entered</li>\n<li><code>callback</code>: Callback <code>function</code> to be called at the end of the process<ul>\n<li>This callback takes two parameters. The first an error, the second the output of the command. The output will be displayed in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerConsoleCommand(&#123;</span><br><span class=\"line\">    description: &quot;Salutes the world&quot;,</span><br><span class=\"line\">    matches: [&quot;hello&quot;, &quot;hellowWorld&quot;],</span><br><span class=\"line\">    &#x2F;&#x2F; OR a function for more complex cases</span><br><span class=\"line\">    matches: (cmd) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;); &#x2F;&#x2F; You can use &#96;split&#96; for commands that receive parameters</span><br><span class=\"line\">      return commandName &#x3D;&#x3D;&#x3D; &#39;hello&#39; || commandName &#x3D;&#x3D;&#x3D; &#39;hellowWorld&#39;; </span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    usage: &quot;hello &lt;name&gt; or helloWorld &lt;name&gt;&quot;,</span><br><span class=\"line\">    process: (cmd, callback) &#x3D;&gt; &#123;</span><br><span class=\"line\">      const [commandName, name] &#x3D; cmd.split(&#39; &#39;);</span><br><span class=\"line\">      name &#x3D; name || &quot;noName&quot;; &#x2F;&#x2F; Default to &quot;noName&quot; when nothing is specified</span><br><span class=\"line\">      callback(null, &#96;Hello $&#123;name&#125;&#96;); &#x2F;&#x2F; Call back with the message. This will be outputed in the console</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerCompiler-extension-callback-contractFiles-doneCallback\"><a href=\"#registerCompiler-extension-callback-contractFiles-doneCallback\" class=\"headerlink\" title=\".registerCompiler(extension, callback(contractFiles, doneCallback))\"></a>.registerCompiler(extension, callback(contractFiles, doneCallback))</h2><p>Registers a new compiler for a specific contract extension.</p>\n<p>Arguments:</p>\n<ul>\n<li><strong>extension</strong>: The file extension (e.g: <code>.sol</code>)</li>\n<li><strong>callback</strong>: Function called by Embark with the contract files that the plugin should process<ul>\n<li><strong>contractFiles</strong>: Array of files that need to be compiled</li>\n<li><strong>doneCallback(error, result)</strong>: The final callback to call once every file is compiled or when there is an error<ul>\n<li><strong>error</strong>: Error string or object when something goes wrong</li>\n<li><strong>result</strong>: An object containing the compiled contracts result (key: contractName, value: contract object) or, <code>false</code> if your plugin is not compatible</li>\n<li><strong>code</strong> - [required] contract bytecode (string)      </li>\n<li><strong>abiDefinition</strong> - [required] contract abi (array of objects)<ul>\n<li>e.g <code>[{&quot;constant&quot;:true,&quot;inputs&quot;:[],&quot;name&quot;:&quot;storedData&quot;,&quot;outputs&quot;:[{&quot;name&quot;:&quot;&quot;,&quot;type&quot;:&quot;uint256&quot;}],&quot;payable&quot;:false,&quot;type&quot;:&quot;function&quot;}, etc...</code></li>\n</ul>\n</li>\n<li><strong>runtimeBytecode</strong> - [optional] contract runtimeBytecode (string)</li>\n<li><strong>gasEstimates</strong> - [optional] gas estimates for constructor and methods (hash)<ul>\n<li>e.g <code>{&quot;creation&quot;:[20131,38200],&quot;external&quot;:{&quot;get()&quot;:269,&quot;set(uint256)&quot;:20163,&quot;storedData()&quot;:224},&quot;internal&quot;:{}}</code></li>\n</ul>\n</li>\n<li><strong>functionHashes</strong> - [optional] object with methods and their corresponding hash identifier (hash)<ul>\n<li>e.g <code>{&quot;get()&quot;:&quot;6d4ce63c&quot;,&quot;set(uint256)&quot;:&quot;60fe47b1&quot;,&quot;storedData()&quot;:&quot;2a1afcd9&quot;}</code></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p>Below a possible implementation of a solcjs plugin.<br>Note that the plugin checks the version and returns <code>false</code> as the result if it is not compatible:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const solc &#x3D; require(&#39;solc&#39;);</span><br><span class=\"line\">const semver &#x3D; require(&#39;semver&#39;);</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerCompiler(&quot;.sol&quot;, function(contractFiles, cb) &#123;</span><br><span class=\"line\">    const wantedVersion &#x3D; embark.config.embarkConfig.versions.solc;</span><br><span class=\"line\">    if (semver.gt(wantedVersion, &#39;0.5.0&#39;)) &#123;</span><br><span class=\"line\">      &#x2F;&#x2F; We do not support greater than solidity version 0.5.0</span><br><span class=\"line\">      &#x2F;&#x2F; This let&#39;s Embark know that we are not compatible, that way Embark will fallback to another compiler</span><br><span class=\"line\">      return cb(null, false);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">    &#x2F;&#x2F; prepare input for solc</span><br><span class=\"line\">    var input &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var i &#x3D; 0; i &lt; contractFiles.length; i++) &#123;</span><br><span class=\"line\">      var filename &#x3D; contractFiles[i].filename.replace(&#39;app&#x2F;contracts&#x2F;&#39;,&#39;&#39;);</span><br><span class=\"line\">      input[filename] &#x3D; contractFiles[i].content.toString();</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; compile files</span><br><span class=\"line\">    var output &#x3D; solc.compile(&#123;sources: input&#125;, 1);</span><br><span class=\"line\"></span><br><span class=\"line\">    &#x2F;&#x2F; generate the compileObject expected by embark</span><br><span class=\"line\">    var json &#x3D; output.contracts;</span><br><span class=\"line\">    var compiled_object &#x3D; &#123;&#125;;</span><br><span class=\"line\">    for (var className in json) &#123;</span><br><span class=\"line\">      var contract &#x3D; json[className];</span><br><span class=\"line\"></span><br><span class=\"line\">      compiled_object[className] &#x3D; &#123;&#125;;</span><br><span class=\"line\">      compiled_object[className].code            &#x3D; contract.bytecode;</span><br><span class=\"line\">      compiled_object[className].runtimeBytecode &#x3D; contract.runtimeBytecode;</span><br><span class=\"line\">      compiled_object[className].gasEstimates    &#x3D; contract.gasEstimates;</span><br><span class=\"line\">      compiled_object[className].functionHashes  &#x3D; contract.functionHashes;</span><br><span class=\"line\">      compiled_object[className].abiDefinition   &#x3D; JSON.parse(contract.interface);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    cb(null, compiled_object);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"logger\"><a href=\"#logger\" class=\"headerlink\" title=\".logger\"></a>.logger</h2><p>To print messages to the embark log is it better to use <code>embark.logger</code> instead of <code>console</code>.</p>\n<p>e.g <code>embark.logger.info(&quot;hello&quot;)</code></p>\n<h2 id=\"events-on-eventName-callback-args\"><a href=\"#events-on-eventName-callback-args\" class=\"headerlink\" title=\".events.on(eventName, callback(*args))\"></a>.events.on(eventName, callback(*args))</h2><p>This call is used to listen and react to events that happen in Embark such as contract deployment</p>\n<ul>\n<li>eventName - name of event to listen to<ul>\n<li>available events:<ul>\n<li><code>contractsDeployed</code> - triggered when contracts have been deployed</li>\n<li><code>file-add</code>, <code>file-change</code>, <code>file-remove</code>, <code>file-event</code> - triggered on a file change, args is (filetype, path)</li>\n<li><code>outputDone</code> - triggered when dapp is (re)generated</li>\n<li><code>firstDeploymentDone</code> - triggered when the dapp is deployed and generated for the first time</li>\n<li><code>check:backOnline:serviceName</code> - triggered when the service with <code>serviceName</code> comes back online</li>\n<li><code>check:wentOffline:serviceName</code> - triggered when the service with <code>serviceName</code> goes offline</li>\n<li><code>log</code> - triggered on a log, args is (logLevel, logMsg)</li>\n<li><code>contractsState</code> - list of contracts, their deployment status, address, etc..</li>\n<li><code>servicesState</code> - list of services and their state</li>\n<li><code>exit</code>: - triggered when embark is terminating</li>\n<li><code>deploy:contract:deployed</code>: - triggered when a contract is deployed, the callback will contain the contract object</li>\n<li><code>deploy:contract:undeployed</code>: - triggered when a contract was not deployed (typically because there is no need), the callback will contain the contract object</li>\n<li><code>deploy:contract:error</code>: - triggered when a contract couldn’t be deployed due to an error, the callback will contain the contract object</li>\n<li><code>deploy:contract:receipt</code>: - triggered on a contract deployment (succefull or not), the callback will contain the resulting receipt</li>\n<li><code>contractsState</code>: - triggered often, whenever there are changes to contracts, the callback will contain an object containing the contract names, address and state, etc..</li>\n<li><code>deploy:beforeAll</code>: - triggered before contract deployment starts</li>\n<li><code>contracts:deploy:afterAll</code>: - triggered after contract deployment starts</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.on(&quot;contractsDeployed&quot;, function() &#123;</span><br><span class=\"line\">    embark.logger.info(&quot;plugin says: your contracts have been deployed&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  embark.events.on(&quot;file-change&quot;, function(filetype, path) &#123;</span><br><span class=\"line\">    if (type &#x3D;&#x3D;&#x3D; &#39;contract&#39;) &#123;</span><br><span class=\"line\">      embark.logger.info(&quot;plugin says: you just changed the contract at &quot; + path);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"events-request-requestName-callback-args\"><a href=\"#events-request-requestName-callback-args\" class=\"headerlink\" title=\".events.request(requestName, callback(*args))\"></a>.events.request(requestName, callback(*args))</h3><p>This call is used to request a certain resource from Embark</p>\n<ul>\n<li>requestName - name of request to listen to<ul>\n<li>available requests:<ul>\n<li>(<code>deploy:contract</code>, contractObj) - deploys a particular contract through embark</li>\n<li>(<code>runcode:eval</code>, code) - runs js code in the Embark engine.</li>\n<li>(<code>runcode:register</code>, cmdName, cmdObj) - ‘registers’ a variable cmdName to correspond to a js object cmdObj (note: this should be done thourgh an emit);</li>\n<li>(<code>contracts:list</code>) - returns a list a callback containing (err, contractList) containing a collection of available contracts</li>\n<li>(<code>compiler:contracts</code>, contractFiles) - requests embark to compile a list of files, will return a compiled object in the callback</li>\n<li>(<code>services:register</code>, serviceName, checkCallback) - requests embark to register a service, it will execute checkCallback every 5 seconds, the callback should return an object containing the service name and status (See embark.registerServiceCheck)</li>\n<li>(<code>console:command</code>, cmd) - execute a command in the console</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.events.request(&quot;code&quot;, function(code) &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; Do something with the code</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerServiceCheck-serviceName-callback-name-status-time\"><a href=\"#registerServiceCheck-serviceName-callback-name-status-time\" class=\"headerlink\" title=\".registerServiceCheck(serviceName, callback({name, status}), time)\"></a>.registerServiceCheck(serviceName, callback({name, status}), time)</h2><p>This call is used to register a service in embark so it’s periodically checked.<br>It will be displayed in the Embark Dashboard, and will also trigger events such as <code>check:backOnline:yourServiceName</code> and <code>check:backOffline:yourServiceName</code></p>\n<ul>\n<li>serviceName - name of service (string)</li>\n<li>callback:<ul>\n<li><code>name</code> - name/text to display (string)</li>\n<li><code>status</code> - status of the service (string, <code>on</code> or <code>off</code> or <code>warn</code>)</li>\n</ul>\n</li>\n<li>time (optional) - ms interval to call the callback (default: 5000 ms)</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerServiceCheck(&quot;MyServer&quot;, function(cb) &#123;</span><br><span class=\"line\">    if (myServiceOnline()) &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Online&quot;, status: &quot;on&quot;&#125;);</span><br><span class=\"line\">    &#125; else &#123;</span><br><span class=\"line\">      return cb(&#123;name: &quot;MyServer Offline&quot;, status: &quot;off&quot;&#125;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerUploadCommand-cmdName-callback\"><a href=\"#registerUploadCommand-cmdName-callback\" class=\"headerlink\" title=\".registerUploadCommand(cmdName, callback)\"></a>.registerUploadCommand(cmdName, callback)</h2><p>This call is used to add a new cmd to <code>embark upload</code> to upload the dapp to a new storage service. In the example, <code>run</code> doesn’t exist. You need to import a library that runs shell commands like <a href=\"https://www.npmjs.com/package/shelljs\" target=\"_blank\" rel=\"noopener\">shelljs</a></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerUploadCommand(&quot;ipfs&quot;, function() &#123;</span><br><span class=\"line\">    run(&quot;ipfs add -r dist&#x2F;&quot;);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addCodeToEmbarkJS-code\"><a href=\"#addCodeToEmbarkJS-code\" class=\"headerlink\" title=\".addCodeToEmbarkJS(code)\"></a>.addCodeToEmbarkJS(code)</h2><p>This call is used to add code to the embark.js library. It’s typically used to extend it with new functionality, new storage providers, new communication providers, etc..</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.addCodeToEmbarkJS(&quot;alert(&#39;hello world!&#39;)&quot;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"addProviderInit-providerType-code-initCondition-config\"><a href=\"#addProviderInit-providerType-code-initCondition-config\" class=\"headerlink\" title=\".addProviderInit(providerType, code, initCondition(config))\"></a>.addProviderInit(providerType, code, initCondition(config))</h2><p>This call is used to add code to be executed in the initialization under the condition that <code>initCondition</code> returns true. For example this can be used to set the storage provider of EmbarkJS to ipfs if ipfs is enabled as a provider in the config</p>\n<ul>\n<li>providerType - type of provider (string, “storage” or “communication”)</li>\n<li>code - code to add (string)</li>\n<li>callback:<ul>\n<li>“config” - config of the <code>providerType</code></li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  let code &#x3D; &quot;\\nEmbarkJS.Storage.setProvider(&#39;ipfs&#39;)&quot;;</span><br><span class=\"line\">  embark.addProviderInit(&#39;storage&#39;, code, (storageConfig) &#x3D;&gt; &#123;</span><br><span class=\"line\">    return (storageConfig.provider &#x3D;&#x3D;&#x3D; &#39;ipfs&#39; &amp;&amp; storageConfig.enabled &#x3D;&#x3D;&#x3D; true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerImportFile-importName-importLocation\"><a href=\"#registerImportFile-importName-importLocation\" class=\"headerlink\" title=\".registerImportFile(importName, importLocation)\"></a>.registerImportFile(importName, importLocation)</h2><p>This call is used so the plugin can make a certain file available as a library to a user</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var path &#x3D; require(&#39;path&#39;)</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; function(embark) &#123;</span><br><span class=\"line\">  embark.registerImportFile(&quot;my-lib&quot;, path.join(__dirname, &quot;my-lib.js&quot;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"registerActionForEvent-eventName-options-cb\"><a href=\"#registerActionForEvent-eventName-options-cb\" class=\"headerlink\" title=\".registerActionForEvent(eventName, options, cb)\"></a>.registerActionForEvent(eventName, options, cb)</h2><p>This lets you register an action for an event. An action, is like a regular command handler event, but enables multiple actions to be registered for the same event and let’s you modify the params before sending them back to the next action or back to Embark.</p>\n<p>Here is an example where, before deploying a contract, we check the length of the bytecode to see if it reaches the limit:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerActionForEvent(&quot;deployment:contract:beforeDeploy&quot;, async (params, cb) &#x3D;&gt; &#123;</span><br><span class=\"line\">  cosnt contarct &#x3D; params.contract;</span><br><span class=\"line\">  if (!contract.code) &#123;</span><br><span class=\"line\">    return callback();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  </span><br><span class=\"line\">  const code &#x3D; (contract.code.indexOf(&#39;0x&#39;) &#x3D;&#x3D;&#x3D; 0) ? contract.code.substr(2) : contract.code;</span><br><span class=\"line\">  const contractCodeLength &#x3D; Buffer.from(code, &#39;hex&#39;).toString().length;</span><br><span class=\"line\">  if (contractCodeLength &gt; MAX_CONTRACT_BYTECODE_LENGTH) &#123;</span><br><span class=\"line\">    return callback(new Error(&#96;Bytecode for $&#123;contract.className&#125; contract is too large. Not deploying.&#96;));</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  callback();</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Parameters\"><a href=\"#Parameters\" class=\"headerlink\" title=\"Parameters\"></a>Parameters</h3><ul>\n<li><code>eventName</code>: String, Name fo the event you want an action to be registered to</li>\n<li><code>options</code>: Object, optional, options for the action registration<ul>\n<li><code>priority</code>: Integer, priority for when the action should be called. Useful if you want to run before or after other actions. The default priority is 50 and the highest priority is 1 (so high priority runs first)</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"Available-events-for-actions\"><a href=\"#Available-events-for-actions\" class=\"headerlink\" title=\"Available events for actions\"></a>Available events for actions</h3><ul>\n<li><code>embark:engine:started</code>: Called when the engine just started. No params</li>\n<li><code>blockchain:config:modify</code>: Let’s you modify the blockchain configs before starting a blockchain node. Only param is the initial <code>blockchainConfig</code></li>\n<li><code>deployment:contract:beforeDeploy</code>: Called before a contract is deployed. Only param is the <code>contract</code></li>\n<li><code>deployment:contract:shouldDeploy</code>: Also called before a contract is deployed, but let’s you determine if the contract should be deployed. Two params: <code>contract</code> and <code>shouldDeploy</code>, set <code>shouldDeploy</code> to <code>false</code> to disable its deployment</li>\n<li><code>deployment:contract:undeployed</code>: Called after a contract is determined to not deploy. Only param is <code>contract</code></li>\n<li><code>deployment:contract:deployed</code>: Called after a contract deployed. Only param is <code>contract</code></li>\n<li><code>deployment:deployContracts:beforeAll</code>: Called before any contract is deployed. No params</li>\n<li><code>deployment:deployContracts:afterAll</code>: Called after all contracts have deployed. No params</li>\n<li><code>tests:contracts:compile:before</code>: Called before the contracts are compiled in the context of the test. Only param is <code>contractFiles</code></li>\n<li><code>tests:contracts:compile:after</code>: Called after the contracts are compiled in the context of the test. Only param is <code>compiledContracts</code></li>\n<li><code>blockchain:proxy:request</code>: Called before a request from Embark or the Dapp is sent to the blockchain node. You can modify or react to the payload of the request. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n<li><code>blockchain:proxy:response</code>: Called before the node response is sent back to Embark or the Dapp. You can modify or react to the payload of the response. Params are:<ul>\n<li><code>request</code>: an object containing the request payload</li>\n<li><code>response</code>: an object containing the response payload</li>\n<li><code>transport</code>: an object containing the client’s websocket connection to the proxy</li>\n<li><code>isWs</code>: a boolean flag indicating if the request was performed using websockets</li>\n</ul>\n</li>\n</ul>\n"}],"Post":[{"title":"Embark 2.6.0 - web3.js 1.0, any version of web3.js & solc. Whisper 5 & much more","author":"iuri_matias","layout":"blog-post","_content":"\n## To Update to 2.6.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.5.2:\n\n```\nnpm install -g embark@2.6\n```\n\nafterwards make sure `embark version` returns `2.6.0`.\n\n## In this release\n\nYou no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.\n\n## Support for web3.js 1.0 and (nearly) ANY web3.js version\n\nEmbark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.\n\nin config/contracts.json\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"web3.js\": \"1.0.0-beta\"\n    }\n    ...\n}\n```\n\nIf ,for example, you wish to use 0.19.0 you can specify it in the config as `\"web3.js\": \"0.19.0\"`\n\n## Support for ANY solc version\n\nYou can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.\n\n`config/contracts.json`\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"solc\": \"0.4.17\"\n    }\n    ...\n}\n```\n\n## Specify nodes DApp should attempt to connect to\n\nYou can specify which nodes your dapp should try to connect in each enviroment. \"$WEB3\" is a special keyword to specify the existing web3 object.\nThe following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"dappConnection\": [\n      \"$WEB3\",\n      \"http://localhost:8545\"\n    ],\n   ...\n}\n```\n\n## Specify node to deploy to\n\nBefore Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"deployment\": {\n      \"host\": \"localhost\",\n      \"port\": 8545,\n      \"type\": \"rpc\"\n    },\n   ...\n}\n```\n\n## Specify node to connect whisper to\n\n`config/communication.json`\n```Javascript\n{\n  \"default\": {\n    \"enabled\": true,\n    \"provider\": \"whisper\",\n    \"available_providers\": [\"whisper\", \"orbit\"],\n    \"connection\": {\n      \"host\": \"localhost\",\n      \"port\": 8546,\n      \"type\": \"ws\"\n    }\n  }\n}\n```\n\n## Specify url to get assets\n\nYou can specify for each environment what IPFS node to get the assets from\n\n`config/storage.json`\n\n```Javascript\n{\n  ...\n  \"development\": {\n      ....\n     \"getUrl\": \"http://localhost:8080/ipfs/\"\n   },\n   ...\n  \"livenet\": {\n      ....\n      \"getUrl\": \"https://gateway.ipfs.io/ipfs/\"\n   }\n}\n```\n\n###  Plugin API changes\n\n![plugin](http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png)\n\nThe following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment\n\nplugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0\n\n\n###  New Blockchain options\n\n![geth](https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200)\n\n\nThe following fields are now available at `config/blockchain.json` to enhance `embark blockchain`:\n\n* \"wsHost\" - to specify the websocket host (default: localhost)\n* \"wsPort\" - to specify the websocket port (default: 8546)\n* \"wsOrigins\"- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like http://localhost:8000 for the websocket connection to work.\n* \"wsApi\" - to specify the apis available through websockets (default: ['eth', 'web3', 'net', 'shh'])\n\n### Misc Bugfixes and Improvements\n\n![bug fixes](http://i.imgur.com/L1r6Ac5.png)\n\n* tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework\n* embark and mocha are no longer dependencies in the created dapp\n* you can specify a test file with `embark test <filename>`\n* tests no longer need testrpc to be installed first\n* `EmbarkJS.isNewWeb3()` to detect if web3 1.0 is available\n* demo app updated to use web3.js 1.0 and solc 0.4.17\n* warn user when websocket or http CORS is not set\n* tolerate solc compiler warnings, which could cause a crash sometimes\n\n\n###  Thank you\n\nA big thanks to all that contributed to this release including [Todd Baur](https://github.com/toadkicker) and Jacob Beauchamp.\n\n### Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n\n","source":"_posts/2017-10-25-embark-2-6-released.md","raw":"title: Embark 2.6.0 - web3.js 1.0, any version of web3.js & solc. Whisper 5 & much more\nauthor: iuri_matias\ncategories:\n  - announcements\nlayout: blog-post\n---\n\n## To Update to 2.6.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.5.2:\n\n```\nnpm install -g embark@2.6\n```\n\nafterwards make sure `embark version` returns `2.6.0`.\n\n## In this release\n\nYou no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.\n\n## Support for web3.js 1.0 and (nearly) ANY web3.js version\n\nEmbark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.\n\nin config/contracts.json\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"web3.js\": \"1.0.0-beta\"\n    }\n    ...\n}\n```\n\nIf ,for example, you wish to use 0.19.0 you can specify it in the config as `\"web3.js\": \"0.19.0\"`\n\n## Support for ANY solc version\n\nYou can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.\n\n`config/contracts.json`\n\n```\n{\n  \"default\": {\n   ....\n   \"versions\": {\n      \"solc\": \"0.4.17\"\n    }\n    ...\n}\n```\n\n## Specify nodes DApp should attempt to connect to\n\nYou can specify which nodes your dapp should try to connect in each enviroment. \"$WEB3\" is a special keyword to specify the existing web3 object.\nThe following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"dappConnection\": [\n      \"$WEB3\",\n      \"http://localhost:8545\"\n    ],\n   ...\n}\n```\n\n## Specify node to deploy to\n\nBefore Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.\n\n`config/contracts.json`\n\n```\n{\n    \"development\": {\n    ...\n    \"deployment\": {\n      \"host\": \"localhost\",\n      \"port\": 8545,\n      \"type\": \"rpc\"\n    },\n   ...\n}\n```\n\n## Specify node to connect whisper to\n\n`config/communication.json`\n```Javascript\n{\n  \"default\": {\n    \"enabled\": true,\n    \"provider\": \"whisper\",\n    \"available_providers\": [\"whisper\", \"orbit\"],\n    \"connection\": {\n      \"host\": \"localhost\",\n      \"port\": 8546,\n      \"type\": \"ws\"\n    }\n  }\n}\n```\n\n## Specify url to get assets\n\nYou can specify for each environment what IPFS node to get the assets from\n\n`config/storage.json`\n\n```Javascript\n{\n  ...\n  \"development\": {\n      ....\n     \"getUrl\": \"http://localhost:8080/ipfs/\"\n   },\n   ...\n  \"livenet\": {\n      ....\n      \"getUrl\": \"https://gateway.ipfs.io/ipfs/\"\n   }\n}\n```\n\n###  Plugin API changes\n\n![plugin](http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png)\n\nThe following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment\n\nplugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0\n\n\n###  New Blockchain options\n\n![geth](https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200)\n\n\nThe following fields are now available at `config/blockchain.json` to enhance `embark blockchain`:\n\n* \"wsHost\" - to specify the websocket host (default: localhost)\n* \"wsPort\" - to specify the websocket port (default: 8546)\n* \"wsOrigins\"- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like http://localhost:8000 for the websocket connection to work.\n* \"wsApi\" - to specify the apis available through websockets (default: ['eth', 'web3', 'net', 'shh'])\n\n### Misc Bugfixes and Improvements\n\n![bug fixes](http://i.imgur.com/L1r6Ac5.png)\n\n* tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework\n* embark and mocha are no longer dependencies in the created dapp\n* you can specify a test file with `embark test <filename>`\n* tests no longer need testrpc to be installed first\n* `EmbarkJS.isNewWeb3()` to detect if web3 1.0 is available\n* demo app updated to use web3.js 1.0 and solc 0.4.17\n* warn user when websocket or http CORS is not set\n* tolerate solc compiler warnings, which could cause a crash sometimes\n\n\n###  Thank you\n\nA big thanks to all that contributed to this release including [Todd Baur](https://github.com/toadkicker) and Jacob Beauchamp.\n\n### Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n\n","slug":"embark-2-6-released","published":1,"date":"2017-10-25T04:00:00.000Z","updated":"2020-01-17T19:05:36.382Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qj00017heg0hco2qzg","content":"<h2 id=\"To-Update-to-2-6-0\"><a href=\"#To-Update-to-2-6-0\" class=\"headerlink\" title=\"To Update to 2.6.0\"></a>To Update to 2.6.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.5.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.6</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.6.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>You no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.</p>\n<h2 id=\"Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\"><a href=\"#Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\" class=\"headerlink\" title=\"Support for web3.js 1.0 and (nearly) ANY web3.js version\"></a>Support for web3.js 1.0 and (nearly) ANY web3.js version</h2><p>Embark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.</p>\n<p>in config/contracts.json</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;web3.js&quot;: &quot;1.0.0-beta&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If ,for example, you wish to use 0.19.0 you can specify it in the config as <code>&quot;web3.js&quot;: &quot;0.19.0&quot;</code></p>\n<h2 id=\"Support-for-ANY-solc-version\"><a href=\"#Support-for-ANY-solc-version\" class=\"headerlink\" title=\"Support for ANY solc version\"></a>Support for ANY solc version</h2><p>You can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;solc&quot;: &quot;0.4.17&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-nodes-DApp-should-attempt-to-connect-to\"><a href=\"#Specify-nodes-DApp-should-attempt-to-connect-to\" class=\"headerlink\" title=\"Specify nodes DApp should attempt to connect to\"></a>Specify nodes DApp should attempt to connect to</h2><p>You can specify which nodes your dapp should try to connect in each enviroment. “$WEB3” is a special keyword to specify the existing web3 object.<br>The following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;dappConnection&quot;: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-deploy-to\"><a href=\"#Specify-node-to-deploy-to\" class=\"headerlink\" title=\"Specify node to deploy to\"></a>Specify node to deploy to</h2><p>Before Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;deployment&quot;: &#123;</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 8545,</span><br><span class=\"line\">      &quot;type&quot;: &quot;rpc&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-connect-whisper-to\"><a href=\"#Specify-node-to-connect-whisper-to\" class=\"headerlink\" title=\"Specify node to connect whisper to\"></a>Specify node to connect whisper to</h2><p><code>config/communication.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"default\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"enabled\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"string\">\"provider\"</span>: <span class=\"string\">\"whisper\"</span>,</span><br><span class=\"line\">    <span class=\"string\">\"available_providers\"</span>: [<span class=\"string\">\"whisper\"</span>, <span class=\"string\">\"orbit\"</span>],</span><br><span class=\"line\">    <span class=\"string\">\"connection\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"host\"</span>: <span class=\"string\">\"localhost\"</span>,</span><br><span class=\"line\">      <span class=\"string\">\"port\"</span>: <span class=\"number\">8546</span>,</span><br><span class=\"line\">      <span class=\"string\">\"type\"</span>: <span class=\"string\">\"ws\"</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-url-to-get-assets\"><a href=\"#Specify-url-to-get-assets\" class=\"headerlink\" title=\"Specify url to get assets\"></a>Specify url to get assets</h2><p>You can specify for each environment what IPFS node to get the assets from</p>\n<p><code>config/storage.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">     <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"http://localhost:8080/ipfs/\"</span></span><br><span class=\"line\">   &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">  <span class=\"string\">\"livenet\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">      <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"https://gateway.ipfs.io/ipfs/\"</span></span><br><span class=\"line\">   &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Plugin-API-changes\"><a href=\"#Plugin-API-changes\" class=\"headerlink\" title=\"Plugin API changes\"></a>Plugin API changes</h3><p><img src=\"http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png\" alt=\"plugin\"></p>\n<p>The following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment</p>\n<p>plugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0</p>\n<h3 id=\"New-Blockchain-options\"><a href=\"#New-Blockchain-options\" class=\"headerlink\" title=\"New Blockchain options\"></a>New Blockchain options</h3><p><img src=\"https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200\" alt=\"geth\"></p>\n<p>The following fields are now available at <code>config/blockchain.json</code> to enhance <code>embark blockchain</code>:</p>\n<ul>\n<li>“wsHost” - to specify the websocket host (default: localhost)</li>\n<li>“wsPort” - to specify the websocket port (default: 8546)</li>\n<li>“wsOrigins”- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> for the websocket connection to work.</li>\n<li>“wsApi” - to specify the apis available through websockets (default: [‘eth’, ‘web3’, ‘net’, ‘shh’])</li>\n</ul>\n<h3 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h3><p><img src=\"http://i.imgur.com/L1r6Ac5.png\" alt=\"bug fixes\"></p>\n<ul>\n<li>tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework</li>\n<li>embark and mocha are no longer dependencies in the created dapp</li>\n<li>you can specify a test file with <code>embark test &lt;filename&gt;</code></li>\n<li>tests no longer need testrpc to be installed first</li>\n<li><code>EmbarkJS.isNewWeb3()</code> to detect if web3 1.0 is available</li>\n<li>demo app updated to use web3.js 1.0 and solc 0.4.17</li>\n<li>warn user when websocket or http CORS is not set</li>\n<li>tolerate solc compiler warnings, which could cause a crash sometimes</li>\n</ul>\n<h3 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h3><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a> and Jacob Beauchamp.</p>\n<h3 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h3><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h2 id=\"To-Update-to-2-6-0\"><a href=\"#To-Update-to-2-6-0\" class=\"headerlink\" title=\"To Update to 2.6.0\"></a>To Update to 2.6.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.5.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.6</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.6.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>You no longer need to wait for new releases of embark when a new version of web3.js or solc comes out as this can be now configured. Embark will take care of downloading and using the new versions. You can specify a list of nodes the dapp should attempt to connect to (instead of being limited 1). Whisper 5 is now supported.</p>\n<h2 id=\"Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\"><a href=\"#Support-for-web3-js-1-0-and-nearly-ANY-web3-js-version\" class=\"headerlink\" title=\"Support for web3.js 1.0 and (nearly) ANY web3.js version\"></a>Support for web3.js 1.0 and (nearly) ANY web3.js version</h2><p>Embark now supports web3.js 1.0 by default, however you can now also specify exactly which version of web3.js you want to use so you can still use 0.19.0 or newer versions of 1.0.</p>\n<p>in config/contracts.json</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;web3.js&quot;: &quot;1.0.0-beta&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If ,for example, you wish to use 0.19.0 you can specify it in the config as <code>&quot;web3.js&quot;: &quot;0.19.0&quot;</code></p>\n<h2 id=\"Support-for-ANY-solc-version\"><a href=\"#Support-for-ANY-solc-version\" class=\"headerlink\" title=\"Support for ANY solc version\"></a>Support for ANY solc version</h2><p>You can also configure the solc compiler you wish to use and it should work, so long that solc release does not contain breaking API changes.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  &quot;default&quot;: &#123;</span><br><span class=\"line\">   ....</span><br><span class=\"line\">   &quot;versions&quot;: &#123;</span><br><span class=\"line\">      &quot;solc&quot;: &quot;0.4.17&quot;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-nodes-DApp-should-attempt-to-connect-to\"><a href=\"#Specify-nodes-DApp-should-attempt-to-connect-to\" class=\"headerlink\" title=\"Specify nodes DApp should attempt to connect to\"></a>Specify nodes DApp should attempt to connect to</h2><p>You can specify which nodes your dapp should try to connect in each enviroment. “$WEB3” is a special keyword to specify the existing web3 object.<br>The following config would attempt to use the existing web3 object and if unavailable attempt to connect to localhost:8545</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;dappConnection&quot;: [</span><br><span class=\"line\">      &quot;$WEB3&quot;,</span><br><span class=\"line\">      &quot;http:&#x2F;&#x2F;localhost:8545&quot;</span><br><span class=\"line\">    ],</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-deploy-to\"><a href=\"#Specify-node-to-deploy-to\" class=\"headerlink\" title=\"Specify node to deploy to\"></a>Specify node to deploy to</h2><p>Before Embark would assume this would be the same as the one configured in blockchain.json which could lead to some ackward configs for some devs, this has now been changed so you can specify it in the contracts config.</p>\n<p><code>config/contracts.json</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">    &quot;development&quot;: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    &quot;deployment&quot;: &#123;</span><br><span class=\"line\">      &quot;host&quot;: &quot;localhost&quot;,</span><br><span class=\"line\">      &quot;port&quot;: 8545,</span><br><span class=\"line\">      &quot;type&quot;: &quot;rpc&quot;</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-node-to-connect-whisper-to\"><a href=\"#Specify-node-to-connect-whisper-to\" class=\"headerlink\" title=\"Specify node to connect whisper to\"></a>Specify node to connect whisper to</h2><p><code>config/communication.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"default\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"enabled\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"string\">\"provider\"</span>: <span class=\"string\">\"whisper\"</span>,</span><br><span class=\"line\">    <span class=\"string\">\"available_providers\"</span>: [<span class=\"string\">\"whisper\"</span>, <span class=\"string\">\"orbit\"</span>],</span><br><span class=\"line\">    <span class=\"string\">\"connection\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"host\"</span>: <span class=\"string\">\"localhost\"</span>,</span><br><span class=\"line\">      <span class=\"string\">\"port\"</span>: <span class=\"number\">8546</span>,</span><br><span class=\"line\">      <span class=\"string\">\"type\"</span>: <span class=\"string\">\"ws\"</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Specify-url-to-get-assets\"><a href=\"#Specify-url-to-get-assets\" class=\"headerlink\" title=\"Specify url to get assets\"></a>Specify url to get assets</h2><p>You can specify for each environment what IPFS node to get the assets from</p>\n<p><code>config/storage.json</code></p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">     <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"http://localhost:8080/ipfs/\"</span></span><br><span class=\"line\">   &#125;,</span><br><span class=\"line\">   ...</span><br><span class=\"line\">  <span class=\"string\">\"livenet\"</span>: &#123;</span><br><span class=\"line\">      ....</span><br><span class=\"line\">      <span class=\"string\">\"getUrl\"</span>: <span class=\"string\">\"https://gateway.ipfs.io/ipfs/\"</span></span><br><span class=\"line\">   &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Plugin-API-changes\"><a href=\"#Plugin-API-changes\" class=\"headerlink\" title=\"Plugin API changes\"></a>Plugin API changes</h3><p><img src=\"http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/plugin-icon.png\" alt=\"plugin\"></p>\n<p>The following events are deprecated: abi-vanila, abi, abi-contracts-vanila, abi-vanila-deployment and have been renamed to code-vanila, code, code-contracts-vanila, code-vanila-deployment</p>\n<p>plugins that use these events will get deprecation warnings, the deprecated events will be removed in 2.7.0</p>\n<h3 id=\"New-Blockchain-options\"><a href=\"#New-Blockchain-options\" class=\"headerlink\" title=\"New Blockchain options\"></a>New Blockchain options</h3><p><img src=\"https://dappsforbeginners.files.wordpress.com/2015/02/ethereum-logo.jpg?w=200\" alt=\"geth\"></p>\n<p>The following fields are now available at <code>config/blockchain.json</code> to enhance <code>embark blockchain</code>:</p>\n<ul>\n<li>“wsHost” - to specify the websocket host (default: localhost)</li>\n<li>“wsPort” - to specify the websocket port (default: 8546)</li>\n<li>“wsOrigins”- to specify the allowed origin of the websocket requests (default: FALSE), must be specified to something like <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> for the websocket connection to work.</li>\n<li>“wsApi” - to specify the apis available through websockets (default: [‘eth’, ‘web3’, ‘net’, ‘shh’])</li>\n</ul>\n<h3 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h3><p><img src=\"http://i.imgur.com/L1r6Ac5.png\" alt=\"bug fixes\"></p>\n<ul>\n<li>tests no longer need the requires and initialization and can be run directly with embark. however you can still use these requires to run it yourself with mocha or your own preferred test framework</li>\n<li>embark and mocha are no longer dependencies in the created dapp</li>\n<li>you can specify a test file with <code>embark test &lt;filename&gt;</code></li>\n<li>tests no longer need testrpc to be installed first</li>\n<li><code>EmbarkJS.isNewWeb3()</code> to detect if web3 1.0 is available</li>\n<li>demo app updated to use web3.js 1.0 and solc 0.4.17</li>\n<li>warn user when websocket or http CORS is not set</li>\n<li>tolerate solc compiler warnings, which could cause a crash sometimes</li>\n</ul>\n<h3 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h3><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a> and Jacob Beauchamp.</p>\n<h3 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h3><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n"},{"title":"Embark 2.5.0","summary":"Today we're excited to announce the release of Embark 2.5.0! Read on for what's in it.","author":"iuri_matias","layout":"blog-post","_content":"\n## To Update to 2.5.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.4.2:\n\n```\nnpm install -g embark@2.5\n```\n\nafterwards make sure `embark version` returns `2.5.0`.\n\n## In this release\n\nThis release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.\n\n## Updates\n\n* support for geth 1.6.5\n* updated to use web3.js 0.19.11\n* updated to use solc 0.4.11\n\n## Misc Bugfixes and Improvements\n\n* `embark new` will now prompt for the dapp name if not specified as `embark new <yourDappName>`\n* embark.js: `ContractName.new()` as been added as an alias for `ContractName.deploy()`\n* embark.js: a method to easily send ether to a contract has been added: `ContractName.send(value, unit, options)` e.g `ContractName.send(2, \"ether\", {from: web3.eth.accounts[1]})`\n* orbit: Fix for orbit to make it work if the blockchain component is disabled\n* orbit: Use default config for orbit it none is specified in the config file\n* Demo app now has warning message for incompatible whisper versions\n* the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)\n* whisper: Dashboard now displays the whisper version of the node\n* plugin API: extensions can now also be added as directories within the dapp directory\n* plugin API: plugins can now register a component to be displayed in the dashboard. e.g:\n\n```Javascript\nembark.registerServiceCheck('PluginService', function(cb) {\n  if (someFunctionThatChecksTheService()) {\n      cb({name: \"MyServiceName\", status: \"on\"});\n  } else {\n    cb({name: \"MyServiceName\", status: \"off\"});\n  }\n});\n```\n\n##  Thank you\n\nA big thanks to all that contributed to this release including [Nathan Hernandez](https://github.com/nathanph), [Antonio Tenorio-Fornés](https://github.com/atfornes), [Jon Johnson](https://github.com/jonjonsonjr), Andy Nogueira,  [roo2](https://github.com/roo2), [Carl Mönnig](https://github.com/carlmon), [Michael Yeates](https://github.com/michaeljyeates), [Todd Baur](https://github.com/toadkicker), [黄俊钦](https://github.com/imtypist), [Ramiro Moreira](https://github.com/RamiroMoreira), [gregg dourgarian](https://github.com/greggdourgarian)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n","source":"_posts/2017-06-28-embark-2-5-released.md","raw":"title: Embark 2.5.0\nsummary: Today we're excited to announce the release of Embark 2.5.0! Read on for what's in it.\nauthor: iuri_matias\ncategories:\n  - announcements\nlayout: blog-post\n---\n\n## To Update to 2.5.0\n\nEmbark's npm package has changed from `embark-framework` to `embark`, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with `npm uninstall -g embark-framework` followed by `npm install -g embark`\n\nto update from 2.4.2:\n\n```\nnpm install -g embark@2.5\n```\n\nafterwards make sure `embark version` returns `2.5.0`.\n\n## In this release\n\nThis release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.\n\n## Updates\n\n* support for geth 1.6.5\n* updated to use web3.js 0.19.11\n* updated to use solc 0.4.11\n\n## Misc Bugfixes and Improvements\n\n* `embark new` will now prompt for the dapp name if not specified as `embark new <yourDappName>`\n* embark.js: `ContractName.new()` as been added as an alias for `ContractName.deploy()`\n* embark.js: a method to easily send ether to a contract has been added: `ContractName.send(value, unit, options)` e.g `ContractName.send(2, \"ether\", {from: web3.eth.accounts[1]})`\n* orbit: Fix for orbit to make it work if the blockchain component is disabled\n* orbit: Use default config for orbit it none is specified in the config file\n* Demo app now has warning message for incompatible whisper versions\n* the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)\n* whisper: Dashboard now displays the whisper version of the node\n* plugin API: extensions can now also be added as directories within the dapp directory\n* plugin API: plugins can now register a component to be displayed in the dashboard. e.g:\n\n```Javascript\nembark.registerServiceCheck('PluginService', function(cb) {\n  if (someFunctionThatChecksTheService()) {\n      cb({name: \"MyServiceName\", status: \"on\"});\n  } else {\n    cb({name: \"MyServiceName\", status: \"off\"});\n  }\n});\n```\n\n##  Thank you\n\nA big thanks to all that contributed to this release including [Nathan Hernandez](https://github.com/nathanph), [Antonio Tenorio-Fornés](https://github.com/atfornes), [Jon Johnson](https://github.com/jonjonsonjr), Andy Nogueira,  [roo2](https://github.com/roo2), [Carl Mönnig](https://github.com/carlmon), [Michael Yeates](https://github.com/michaeljyeates), [Todd Baur](https://github.com/toadkicker), [黄俊钦](https://github.com/imtypist), [Ramiro Moreira](https://github.com/RamiroMoreira), [gregg dourgarian](https://github.com/greggdourgarian)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/iurimatias/embark-framework)\n\n","slug":"embark-2-5-released","published":1,"date":"2017-06-28T04:00:00.000Z","updated":"2020-01-17T19:05:36.382Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qn00037hegbsrh3c67","content":"<h2 id=\"To-Update-to-2-5-0\"><a href=\"#To-Update-to-2-5-0\" class=\"headerlink\" title=\"To Update to 2.5.0\"></a>To Update to 2.5.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.4.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.5</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.5.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>This release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.</p>\n<h2 id=\"Updates\"><a href=\"#Updates\" class=\"headerlink\" title=\"Updates\"></a>Updates</h2><ul>\n<li>support for geth 1.6.5</li>\n<li>updated to use web3.js 0.19.11</li>\n<li>updated to use solc 0.4.11</li>\n</ul>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><ul>\n<li><code>embark new</code> will now prompt for the dapp name if not specified as <code>embark new &lt;yourDappName&gt;</code></li>\n<li>embark.js: <code>ContractName.new()</code> as been added as an alias for <code>ContractName.deploy()</code></li>\n<li>embark.js: a method to easily send ether to a contract has been added: <code>ContractName.send(value, unit, options)</code> e.g <code>ContractName.send(2, &quot;ether&quot;, {from: web3.eth.accounts[1]})</code></li>\n<li>orbit: Fix for orbit to make it work if the blockchain component is disabled</li>\n<li>orbit: Use default config for orbit it none is specified in the config file</li>\n<li>Demo app now has warning message for incompatible whisper versions</li>\n<li>the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)</li>\n<li>whisper: Dashboard now displays the whisper version of the node</li>\n<li>plugin API: extensions can now also be added as directories within the dapp directory</li>\n<li>plugin API: plugins can now register a component to be displayed in the dashboard. e.g:</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerServiceCheck(<span class=\"string\">'PluginService'</span>, <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">cb</span>) </span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (someFunctionThatChecksTheService()) &#123;</span><br><span class=\"line\">      cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"on\"</span>&#125;);</span><br><span class=\"line\">  &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">    cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"off\"</span>&#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h2><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/nathanph\" target=\"_blank\" rel=\"noopener\">Nathan Hernandez</a>, <a href=\"https://github.com/atfornes\" target=\"_blank\" rel=\"noopener\">Antonio Tenorio-Fornés</a>, <a href=\"https://github.com/jonjonsonjr\" target=\"_blank\" rel=\"noopener\">Jon Johnson</a>, Andy Nogueira,  <a href=\"https://github.com/roo2\" target=\"_blank\" rel=\"noopener\">roo2</a>, <a href=\"https://github.com/carlmon\" target=\"_blank\" rel=\"noopener\">Carl Mönnig</a>, <a href=\"https://github.com/michaeljyeates\" target=\"_blank\" rel=\"noopener\">Michael Yeates</a>, <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a>, <a href=\"https://github.com/imtypist\" target=\"_blank\" rel=\"noopener\">黄俊钦</a>, <a href=\"https://github.com/RamiroMoreira\" target=\"_blank\" rel=\"noopener\">Ramiro Moreira</a>, <a href=\"https://github.com/greggdourgarian\" target=\"_blank\" rel=\"noopener\">gregg dourgarian</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h2 id=\"To-Update-to-2-5-0\"><a href=\"#To-Update-to-2-5-0\" class=\"headerlink\" title=\"To Update to 2.5.0\"></a>To Update to 2.5.0</h2><p>Embark’s npm package has changed from <code>embark-framework</code> to <code>embark</code>, this sometimes can create conflicts. To update, first uninstall embark-framework 1 to avoid any conflicts with <code>npm uninstall -g embark-framework</code> followed by <code>npm install -g embark</code></p>\n<p>to update from 2.4.2:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g embark@2.5</span><br></pre></td></tr></table></figure>\n\n<p>afterwards make sure <code>embark version</code> returns <code>2.5.0</code>.</p>\n<h2 id=\"In-this-release\"><a href=\"#In-this-release\" class=\"headerlink\" title=\"In this release\"></a>In this release</h2><p>This release updates to the lastest dependencies, fixes a few things and has a lot of work under the hood necessary for future releases.</p>\n<h2 id=\"Updates\"><a href=\"#Updates\" class=\"headerlink\" title=\"Updates\"></a>Updates</h2><ul>\n<li>support for geth 1.6.5</li>\n<li>updated to use web3.js 0.19.11</li>\n<li>updated to use solc 0.4.11</li>\n</ul>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><ul>\n<li><code>embark new</code> will now prompt for the dapp name if not specified as <code>embark new &lt;yourDappName&gt;</code></li>\n<li>embark.js: <code>ContractName.new()</code> as been added as an alias for <code>ContractName.deploy()</code></li>\n<li>embark.js: a method to easily send ether to a contract has been added: <code>ContractName.send(value, unit, options)</code> e.g <code>ContractName.send(2, &quot;ether&quot;, {from: web3.eth.accounts[1]})</code></li>\n<li>orbit: Fix for orbit to make it work if the blockchain component is disabled</li>\n<li>orbit: Use default config for orbit it none is specified in the config file</li>\n<li>Demo app now has warning message for incompatible whisper versions</li>\n<li>the JSON files of the contracts are now being outputted at dist/contracts/ (experimental)</li>\n<li>whisper: Dashboard now displays the whisper version of the node</li>\n<li>plugin API: extensions can now also be added as directories within the dapp directory</li>\n<li>plugin API: plugins can now register a component to be displayed in the dashboard. e.g:</li>\n</ul>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark.registerServiceCheck(<span class=\"string\">'PluginService'</span>, <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">cb</span>) </span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (someFunctionThatChecksTheService()) &#123;</span><br><span class=\"line\">      cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"on\"</span>&#125;);</span><br><span class=\"line\">  &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">    cb(&#123;<span class=\"attr\">name</span>: <span class=\"string\">\"MyServiceName\"</span>, <span class=\"attr\">status</span>: <span class=\"string\">\"off\"</span>&#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Thank-you\"><a href=\"#Thank-you\" class=\"headerlink\" title=\"Thank you\"></a>Thank you</h2><p>A big thanks to all that contributed to this release including <a href=\"https://github.com/nathanph\" target=\"_blank\" rel=\"noopener\">Nathan Hernandez</a>, <a href=\"https://github.com/atfornes\" target=\"_blank\" rel=\"noopener\">Antonio Tenorio-Fornés</a>, <a href=\"https://github.com/jonjonsonjr\" target=\"_blank\" rel=\"noopener\">Jon Johnson</a>, Andy Nogueira,  <a href=\"https://github.com/roo2\" target=\"_blank\" rel=\"noopener\">roo2</a>, <a href=\"https://github.com/carlmon\" target=\"_blank\" rel=\"noopener\">Carl Mönnig</a>, <a href=\"https://github.com/michaeljyeates\" target=\"_blank\" rel=\"noopener\">Michael Yeates</a>, <a href=\"https://github.com/toadkicker\" target=\"_blank\" rel=\"noopener\">Todd Baur</a>, <a href=\"https://github.com/imtypist\" target=\"_blank\" rel=\"noopener\">黄俊钦</a>, <a href=\"https://github.com/RamiroMoreira\" target=\"_blank\" rel=\"noopener\">Ramiro Moreira</a>, <a href=\"https://github.com/greggdourgarian\" target=\"_blank\" rel=\"noopener\">gregg dourgarian</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/iurimatias/embark-framework\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n"},{"title":"Embark by Status 3.0","author":"iuri_matias","summary":"We're happy to announce that Embark 3.0 has been released! Read on for what's inside!","layout":"blog-post","alias":"news/2018/05/03/embark-3-0-released/","_content":"\nEmbark is now part of [Status](https://status.im/) and we are happy to announce Embark 3.0 by Status!\n\n## New website and Documentation\n\nEmbark has a new website and up to date documentation which can be found at https://embark.embarklabs.io/docs/\n\n## More Smart Contract Languages\n\nBesides Solidity, Embark now also supports [Vyper](https://github.com/ethereum/vyper/) out of the box, as well as [Bamboo](https://github.com/pirapira/bamboo) through an embark [plugin](https://github.com/embarklabs/embark-bamboo)\nYou can use these languages side by side, and take advantage of Embark's features such as contract testing just like you would with Solidity.\n\n## DApp Imports\n\nFrom the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:\n\n```Javascript\nimport SimpleStorage from 'Embark/contracts/SimpleStorage'\n```\n\nEmbarkJS:\n\n```Javascript\nimport EmbarkJS from 'Embark/EmbarkJS'\n```\n\nOr a initialized web3 instances (with the config of `config/contracts.json`)\n\n```Javascript\nimport web3 from 'Embark/web3'\n```\n\nThe typical ES6 imports will also simply work. You can even import directly css files inside js files:\n\n```Javascript\nimport React from 'react';\nimport { Tabs, Tab } from 'react-bootstrap';\n\nimport './dapp.css';\n```\n\n## Friendlier torwards contracts-only projects\n\nAlthough Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.\n\nThere is a now a template to create a simple project with all the components disabled except smart contracts:\n\n`embark new AppName --simple`\n\nYou can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don't want it.\n\n```JSON\n  ...\n  \"config\": {\n    \"contracts\": \"contracts.json\",\n    \"blockchain\": false,\n    \"storage\": false,\n    \"communication\": false,\n    \"webserver\": false\n  },\n  ...\n```\n\n## Embark Graph\n\nThe command `embark graph` will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.\n\n## Config contracts from URIs\n\nEmbark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json\n\nEmbark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!\n\n```JSON\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC725\": {\n        \"file\": \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"\n      },\n      \"ERC725\": {\n        \"file\": \"github.com/status/contracts/contracts/identity/ERC725.sol\"\n      },\n      \"Ownable\": {\n        \"file\": \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n      },\n      \"SimpleStorage\": {\n        \"file\": \"./some_folder/simple_storage.sol\"\n      }\n    }\n  }\n}\n```\n\n## Importing contracts from URIs directly in Solidity\n\nYou can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:\n\n```Javascript\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Contracts from npm packages\n\nYou can now install npm packages that contain contracts (e.g `npm install --save openzeppelin-solidity`) and refer them to them in the contracts.json file:\n\n```Javascript\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC20\": {\n        file: \"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"\n      }\n    }\n  }\n}\n```\n\nor even import them directly in solidity without the need for the config:\n\n```Solidity\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Embark Demo App\n\nThe demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.\n\n## Web3.js 1.0 by default\n\nEmbark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.\n\n\n## More contract deploy configs\n\nA new config called `afterDeploy` is available and it can be used to specify actions to run after all contracts have been deployed.\nIt's possible to also specify the specific account to deploy from using the directive `from` or `fromIndex`\n\n## Versions Configuration\n\nThe versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:\n\n```\n  ...\n  \"versions\": {\n    \"web3\": \"1.0.0-beta\",\n    \"solc\": \"0.4.23\",\n    \"ipfs-api\": \"17.2.4\"\n  },\n  ...\n```\n\n\n## Test Improvements\n\nIn the tests you can now specify a mnemonic:\n\n```Javascript\nconfig({\n  mnemonic: \"labor ability deny divide mountain buddy home client type shallow outer pen\"\n})\n````\n\nIt's also possible to specify a node, in case you don't want to run in the internal vm:\n\n```Javascript\nconfig({\n  node: \"http://localhost:8545\"\n})\n````\n\n## Swarm support\n\nSwarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm\n\n## Misc Bugfixes and Improvements\n\nFor a complete list please refer to the [release notes in github](https://github.com/embarklabs/embark/releases/tag/3.0.0)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/embark-framework/Lobby)\n\n","source":"_posts/2018-05-04-embark-3-0-released.md","raw":"title: Embark by Status 3.0\nauthor: iuri_matias\nsummary: \"We're happy to announce that Embark 3.0 has been released! Read on for what's inside!\"\ncategories:\n  - announcements\nlayout: blog-post\nalias: news/2018/05/03/embark-3-0-released/\n---\n\nEmbark is now part of [Status](https://status.im/) and we are happy to announce Embark 3.0 by Status!\n\n## New website and Documentation\n\nEmbark has a new website and up to date documentation which can be found at https://embark.embarklabs.io/docs/\n\n## More Smart Contract Languages\n\nBesides Solidity, Embark now also supports [Vyper](https://github.com/ethereum/vyper/) out of the box, as well as [Bamboo](https://github.com/pirapira/bamboo) through an embark [plugin](https://github.com/embarklabs/embark-bamboo)\nYou can use these languages side by side, and take advantage of Embark's features such as contract testing just like you would with Solidity.\n\n## DApp Imports\n\nFrom the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:\n\n```Javascript\nimport SimpleStorage from 'Embark/contracts/SimpleStorage'\n```\n\nEmbarkJS:\n\n```Javascript\nimport EmbarkJS from 'Embark/EmbarkJS'\n```\n\nOr a initialized web3 instances (with the config of `config/contracts.json`)\n\n```Javascript\nimport web3 from 'Embark/web3'\n```\n\nThe typical ES6 imports will also simply work. You can even import directly css files inside js files:\n\n```Javascript\nimport React from 'react';\nimport { Tabs, Tab } from 'react-bootstrap';\n\nimport './dapp.css';\n```\n\n## Friendlier torwards contracts-only projects\n\nAlthough Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.\n\nThere is a now a template to create a simple project with all the components disabled except smart contracts:\n\n`embark new AppName --simple`\n\nYou can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don't want it.\n\n```JSON\n  ...\n  \"config\": {\n    \"contracts\": \"contracts.json\",\n    \"blockchain\": false,\n    \"storage\": false,\n    \"communication\": false,\n    \"webserver\": false\n  },\n  ...\n```\n\n## Embark Graph\n\nThe command `embark graph` will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.\n\n## Config contracts from URIs\n\nEmbark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json\n\nEmbark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!\n\n```JSON\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC725\": {\n        \"file\": \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"\n      },\n      \"ERC725\": {\n        \"file\": \"github.com/status/contracts/contracts/identity/ERC725.sol\"\n      },\n      \"Ownable\": {\n        \"file\": \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n      },\n      \"SimpleStorage\": {\n        \"file\": \"./some_folder/simple_storage.sol\"\n      }\n    }\n  }\n}\n```\n\n## Importing contracts from URIs directly in Solidity\n\nYou can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:\n\n```Javascript\nimport \"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\";\nimport \"github.com/status/contracts/contracts/identity/ERC725.sol\";\nimport \"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Contracts from npm packages\n\nYou can now install npm packages that contain contracts (e.g `npm install --save openzeppelin-solidity`) and refer them to them in the contracts.json file:\n\n```Javascript\n{\n  \"development\": {\n    \"contracts\": {\n      \"ERC20\": {\n        file: \"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"\n      }\n    }\n  }\n}\n```\n\nor even import them directly in solidity without the need for the config:\n\n```Solidity\nimport \"openzeppelin-solidity/contracts/ownership/Ownable.sol\";\n\ncontract MyContract is Ownable {\n  ...\n}\n```\n\n## Embark Demo App\n\nThe demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.\n\n## Web3.js 1.0 by default\n\nEmbark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.\n\n\n## More contract deploy configs\n\nA new config called `afterDeploy` is available and it can be used to specify actions to run after all contracts have been deployed.\nIt's possible to also specify the specific account to deploy from using the directive `from` or `fromIndex`\n\n## Versions Configuration\n\nThe versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:\n\n```\n  ...\n  \"versions\": {\n    \"web3\": \"1.0.0-beta\",\n    \"solc\": \"0.4.23\",\n    \"ipfs-api\": \"17.2.4\"\n  },\n  ...\n```\n\n\n## Test Improvements\n\nIn the tests you can now specify a mnemonic:\n\n```Javascript\nconfig({\n  mnemonic: \"labor ability deny divide mountain buddy home client type shallow outer pen\"\n})\n````\n\nIt's also possible to specify a node, in case you don't want to run in the internal vm:\n\n```Javascript\nconfig({\n  node: \"http://localhost:8545\"\n})\n````\n\n## Swarm support\n\nSwarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm\n\n## Misc Bugfixes and Improvements\n\nFor a complete list please refer to the [release notes in github](https://github.com/embarklabs/embark/releases/tag/3.0.0)\n\n## Chatroom\n\nTo discuss about Embark or Dapp development, please [join us at the gitter channel](https://gitter.im/embark-framework/Lobby)\n\n","slug":"embark-3-0-released","published":1,"date":"2018-05-04T04:00:00.000Z","updated":"2020-01-19T20:56:52.648Z","_id":"ck5ijm3qr00067heg3c3mbo7d","comments":1,"photos":[],"link":"","content":"<p>Embark is now part of <a href=\"https://status.im/\" target=\"_blank\" rel=\"noopener\">Status</a> and we are happy to announce Embark 3.0 by Status!</p>\n<h2 id=\"New-website-and-Documentation\"><a href=\"#New-website-and-Documentation\" class=\"headerlink\" title=\"New website and Documentation\"></a>New website and Documentation</h2><p>Embark has a new website and up to date documentation which can be found at <a href=\"https://embark.embarklabs.io/docs/\">https://embark.embarklabs.io/docs/</a></p>\n<h2 id=\"More-Smart-Contract-Languages\"><a href=\"#More-Smart-Contract-Languages\" class=\"headerlink\" title=\"More Smart Contract Languages\"></a>More Smart Contract Languages</h2><p>Besides Solidity, Embark now also supports <a href=\"https://github.com/ethereum/vyper/\" target=\"_blank\" rel=\"noopener\">Vyper</a> out of the box, as well as <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">Bamboo</a> through an embark <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">plugin</a><br>You can use these languages side by side, and take advantage of Embark’s features such as contract testing just like you would with Solidity.</p>\n<h2 id=\"DApp-Imports\"><a href=\"#DApp-Imports\" class=\"headerlink\" title=\"DApp Imports\"></a>DApp Imports</h2><p>From the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> SimpleStorage <span class=\"keyword\">from</span> <span class=\"string\">'Embark/contracts/SimpleStorage'</span></span><br></pre></td></tr></table></figure>\n\n<p>EmbarkJS:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">'Embark/EmbarkJS'</span></span><br></pre></td></tr></table></figure>\n\n<p>Or a initialized web3 instances (with the config of <code>config/contracts.json</code>)</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> web3 <span class=\"keyword\">from</span> <span class=\"string\">'Embark/web3'</span></span><br></pre></td></tr></table></figure>\n\n<p>The typical ES6 imports will also simply work. You can even import directly css files inside js files:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> React <span class=\"keyword\">from</span> <span class=\"string\">'react'</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; Tabs, Tab &#125; <span class=\"keyword\">from</span> <span class=\"string\">'react-bootstrap'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'./dapp.css'</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Friendlier-torwards-contracts-only-projects\"><a href=\"#Friendlier-torwards-contracts-only-projects\" class=\"headerlink\" title=\"Friendlier torwards contracts-only projects\"></a>Friendlier torwards contracts-only projects</h2><p>Although Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.</p>\n<p>There is a now a template to create a simple project with all the components disabled except smart contracts:</p>\n<p><code>embark new AppName --simple</code></p>\n<p>You can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don’t want it.</p>\n<figure class=\"highlight\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">\"config\": &#123;</span><br><span class=\"line\">  \"contracts\": \"contracts.json\",</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\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Graph\"><a href=\"#Embark-Graph\" class=\"headerlink\" title=\"Embark Graph\"></a>Embark Graph</h2><p>The command <code>embark graph</code> will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.</p>\n<h2 id=\"Config-contracts-from-URIs\"><a href=\"#Config-contracts-from-URIs\" class=\"headerlink\" title=\"Config contracts from URIs\"></a>Config contracts from URIs</h2><p>Embark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json</p>\n<p>Embark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"Ownable\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"SimpleStorage\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"./some_folder/simple_storage.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-contracts-from-URIs-directly-in-Solidity\"><a href=\"#Importing-contracts-from-URIs-directly-in-Solidity\" class=\"headerlink\" title=\"Importing contracts from URIs directly in Solidity\"></a>Importing contracts from URIs directly in Solidity</h2><p>You can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Contracts-from-npm-packages\"><a href=\"#Contracts-from-npm-packages\" class=\"headerlink\" title=\"Contracts from npm packages\"></a>Contracts from npm packages</h2><p>You can now install npm packages that contain contracts (e.g <code>npm install --save openzeppelin-solidity</code>) and refer them to them in the contracts.json file:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"ERC20\"</span>: &#123;</span><br><span class=\"line\">        file: <span class=\"string\">\"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>or even import them directly in solidity without the need for the config:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Demo-App\"><a href=\"#Embark-Demo-App\" class=\"headerlink\" title=\"Embark Demo App\"></a>Embark Demo App</h2><p>The demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.</p>\n<h2 id=\"Web3-js-1-0-by-default\"><a href=\"#Web3-js-1-0-by-default\" class=\"headerlink\" title=\"Web3.js 1.0 by default\"></a>Web3.js 1.0 by default</h2><p>Embark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.</p>\n<h2 id=\"More-contract-deploy-configs\"><a href=\"#More-contract-deploy-configs\" class=\"headerlink\" title=\"More contract deploy configs\"></a>More contract deploy configs</h2><p>A new config called <code>afterDeploy</code> is available and it can be used to specify actions to run after all contracts have been deployed.<br>It’s possible to also specify the specific account to deploy from using the directive <code>from</code> or <code>fromIndex</code></p>\n<h2 id=\"Versions-Configuration\"><a href=\"#Versions-Configuration\" class=\"headerlink\" title=\"Versions Configuration\"></a>Versions Configuration</h2><p>The versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;versions&quot;: &#123;</span><br><span class=\"line\">  &quot;web3&quot;: &quot;1.0.0-beta&quot;,</span><br><span class=\"line\">  &quot;solc&quot;: &quot;0.4.23&quot;,</span><br><span class=\"line\">  &quot;ipfs-api&quot;: &quot;17.2.4&quot;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Test-Improvements\"><a href=\"#Test-Improvements\" class=\"headerlink\" title=\"Test Improvements\"></a>Test Improvements</h2><p>In the tests you can now specify a mnemonic:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  mnemonic: <span class=\"string\">\"labor ability deny divide mountain buddy home client type shallow outer pen\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<p>It’s also possible to specify a node, in case you don’t want to run in the internal vm:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  node: <span class=\"string\">\"http://localhost:8545\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Swarm-support\"><a href=\"#Swarm-support\" class=\"headerlink\" title=\"Swarm support\"></a>Swarm support</h2><p>Swarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm</p>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><p>For a complete list please refer to the <a href=\"https://github.com/embarklabs/embark/releases/tag/3.0.0\" target=\"_blank\" rel=\"noopener\">release notes in github</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Embark is now part of <a href=\"https://status.im/\" target=\"_blank\" rel=\"noopener\">Status</a> and we are happy to announce Embark 3.0 by Status!</p>\n<h2 id=\"New-website-and-Documentation\"><a href=\"#New-website-and-Documentation\" class=\"headerlink\" title=\"New website and Documentation\"></a>New website and Documentation</h2><p>Embark has a new website and up to date documentation which can be found at <a href=\"https://embark.embarklabs.io/docs/\">https://embark.embarklabs.io/docs/</a></p>\n<h2 id=\"More-Smart-Contract-Languages\"><a href=\"#More-Smart-Contract-Languages\" class=\"headerlink\" title=\"More Smart Contract Languages\"></a>More Smart Contract Languages</h2><p>Besides Solidity, Embark now also supports <a href=\"https://github.com/ethereum/vyper/\" target=\"_blank\" rel=\"noopener\">Vyper</a> out of the box, as well as <a href=\"https://github.com/pirapira/bamboo\" target=\"_blank\" rel=\"noopener\">Bamboo</a> through an embark <a href=\"https://github.com/embarklabs/embark-bamboo\" target=\"_blank\" rel=\"noopener\">plugin</a><br>You can use these languages side by side, and take advantage of Embark’s features such as contract testing just like you would with Solidity.</p>\n<h2 id=\"DApp-Imports\"><a href=\"#DApp-Imports\" class=\"headerlink\" title=\"DApp Imports\"></a>DApp Imports</h2><p>From the dapp side, contracts and libs like EmbarkJS can be implicitly imported, for e.g to import a contract:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> SimpleStorage <span class=\"keyword\">from</span> <span class=\"string\">'Embark/contracts/SimpleStorage'</span></span><br></pre></td></tr></table></figure>\n\n<p>EmbarkJS:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">'Embark/EmbarkJS'</span></span><br></pre></td></tr></table></figure>\n\n<p>Or a initialized web3 instances (with the config of <code>config/contracts.json</code>)</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> web3 <span class=\"keyword\">from</span> <span class=\"string\">'Embark/web3'</span></span><br></pre></td></tr></table></figure>\n\n<p>The typical ES6 imports will also simply work. You can even import directly css files inside js files:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> React <span class=\"keyword\">from</span> <span class=\"string\">'react'</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; Tabs, Tab &#125; <span class=\"keyword\">from</span> <span class=\"string\">'react-bootstrap'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'./dapp.css'</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Friendlier-torwards-contracts-only-projects\"><a href=\"#Friendlier-torwards-contracts-only-projects\" class=\"headerlink\" title=\"Friendlier torwards contracts-only projects\"></a>Friendlier torwards contracts-only projects</h2><p>Although Embark is focused on DApps, it can perfectly be used for projects targeting only smart contracts and no other components.</p>\n<p>There is a now a template to create a simple project with all the components disabled except smart contracts:</p>\n<p><code>embark new AppName --simple</code></p>\n<p>You can also fine tune this in embark.json by specifying the config of each component or setting it to false if you don’t want it.</p>\n<figure class=\"highlight\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">\"config\": &#123;</span><br><span class=\"line\">  \"contracts\": \"contracts.json\",</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\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Graph\"><a href=\"#Embark-Graph\" class=\"headerlink\" title=\"Embark Graph\"></a>Embark Graph</h2><p>The command <code>embark graph</code> will generate a ER graph of the dapp contracts. This takes into account not just the inheritance but also the relationships specified in the configuration.</p>\n<h2 id=\"Config-contracts-from-URIs\"><a href=\"#Config-contracts-from-URIs\" class=\"headerlink\" title=\"Config contracts from URIs\"></a>Config contracts from URIs</h2><p>Embark now supports referencing directly URIs including http, git, github, or directly files contained in other directories than the ones specified in embark.json</p>\n<p>Embark is smart enough to take care of the dependencies of the resources and present them in a consistent manner to the compiler, it just works!</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"ERC725\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"Ownable\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\">      &#125;,</span><br><span class=\"line\">      <span class=\"attr\">\"SimpleStorage\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"file\"</span>: <span class=\"string\">\"./some_folder/simple_storage.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Importing-contracts-from-URIs-directly-in-Solidity\"><a href=\"#Importing-contracts-from-URIs-directly-in-Solidity\" class=\"headerlink\" title=\"Importing contracts from URIs directly in Solidity\"></a>Importing contracts from URIs directly in Solidity</h2><p>You can also import the same URIs directly in solidity which is quite useful for interfaces, e.g:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"git://github.com/status/contracts/contracts/identity/ERC725.sol#develop\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"github.com/status/contracts/contracts/identity/ERC725.sol\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">\"https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Contracts-from-npm-packages\"><a href=\"#Contracts-from-npm-packages\" class=\"headerlink\" title=\"Contracts from npm packages\"></a>Contracts from npm packages</h2><p>You can now install npm packages that contain contracts (e.g <code>npm install --save openzeppelin-solidity</code>) and refer them to them in the contracts.json file:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"string\">\"development\"</span>: &#123;</span><br><span class=\"line\">    <span class=\"string\">\"contracts\"</span>: &#123;</span><br><span class=\"line\">      <span class=\"string\">\"ERC20\"</span>: &#123;</span><br><span class=\"line\">        file: <span class=\"string\">\"openzeppelin-solidity/contracts/token/ERC20/ERC20.sol\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>or even import them directly in solidity without the need for the config:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &quot;openzeppelin-solidity&#x2F;contracts&#x2F;ownership&#x2F;Ownable.sol&quot;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract MyContract is Ownable &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Embark-Demo-App\"><a href=\"#Embark-Demo-App\" class=\"headerlink\" title=\"Embark Demo App\"></a>Embark Demo App</h2><p>The demo app has been updated to reflect the new structure. It also now uses ReactJS which provides a good example on how to use React with Embark.</p>\n<h2 id=\"Web3-js-1-0-by-default\"><a href=\"#Web3-js-1-0-by-default\" class=\"headerlink\" title=\"Web3.js 1.0 by default\"></a>Web3.js 1.0 by default</h2><p>Embark now uses web3.js 1.0 in all layers, including in the console and in contracts testing.</p>\n<h2 id=\"More-contract-deploy-configs\"><a href=\"#More-contract-deploy-configs\" class=\"headerlink\" title=\"More contract deploy configs\"></a>More contract deploy configs</h2><p>A new config called <code>afterDeploy</code> is available and it can be used to specify actions to run after all contracts have been deployed.<br>It’s possible to also specify the specific account to deploy from using the directive <code>from</code> or <code>fromIndex</code></p>\n<h2 id=\"Versions-Configuration\"><a href=\"#Versions-Configuration\" class=\"headerlink\" title=\"Versions Configuration\"></a>Versions Configuration</h2><p>The versions config has been moved to embark.json, the download mechanism has also been fastly improved under the hood:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">&quot;versions&quot;: &#123;</span><br><span class=\"line\">  &quot;web3&quot;: &quot;1.0.0-beta&quot;,</span><br><span class=\"line\">  &quot;solc&quot;: &quot;0.4.23&quot;,</span><br><span class=\"line\">  &quot;ipfs-api&quot;: &quot;17.2.4&quot;</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Test-Improvements\"><a href=\"#Test-Improvements\" class=\"headerlink\" title=\"Test Improvements\"></a>Test Improvements</h2><p>In the tests you can now specify a mnemonic:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  mnemonic: <span class=\"string\">\"labor ability deny divide mountain buddy home client type shallow outer pen\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<p>It’s also possible to specify a node, in case you don’t want to run in the internal vm:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  node: <span class=\"string\">\"http://localhost:8545\"</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\"><span class=\"string\">`</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Swarm-support\"><a href=\"#Swarm-support\" class=\"headerlink\" title=\"Swarm support\"></a>Swarm support</h2><p>Swarm is now completely integrated on-par with IPFS. You can use interact with Swarm on the dapp side, as well as upload your dapp to Swarm.Swarm</p>\n<h2 id=\"Misc-Bugfixes-and-Improvements\"><a href=\"#Misc-Bugfixes-and-Improvements\" class=\"headerlink\" title=\"Misc Bugfixes and Improvements\"></a>Misc Bugfixes and Improvements</h2><p>For a complete list please refer to the <a href=\"https://github.com/embarklabs/embark/releases/tag/3.0.0\" target=\"_blank\" rel=\"noopener\">release notes in github</a></p>\n<h2 id=\"Chatroom\"><a href=\"#Chatroom\" class=\"headerlink\" title=\"Chatroom\"></a>Chatroom</h2><p>To discuss about Embark or Dapp development, please <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">join us at the gitter channel</a></p>\n"},{"title":"Embark by Status 3.1","author":"iuri_matias","summary":"In this article we're going to explore what the 3.1 release of Embark has to offer!","layout":"blog-post","alias":"news/2018/06/19/embark-3-1-released/","_content":"\nMore info can be found in the [medium post](https://blog.status.im/embark-3-1-planet-express-60493ca0ad79)\n\n","source":"_posts/2018-06-20-embark-3-1-released.md","raw":"title: Embark by Status 3.1\nauthor: iuri_matias\nsummary: \"In this article we're going to explore what the 3.1 release of Embark has to offer!\"\ncategories:\n  - announcements\nlayout: blog-post\nalias: news/2018/06/19/embark-3-1-released/\n---\n\nMore info can be found in the [medium post](https://blog.status.im/embark-3-1-planet-express-60493ca0ad79)\n\n","slug":"embark-3-1-released","published":1,"date":"2018-06-20T04:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qt00087hegcibl5ffn","content":"<p>More info can be found in the <a href=\"https://blog.status.im/embark-3-1-planet-express-60493ca0ad79\" target=\"_blank\" rel=\"noopener\">medium post</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>More info can be found in the <a href=\"https://blog.status.im/embark-3-1-planet-express-60493ca0ad79\" target=\"_blank\" rel=\"noopener\">medium post</a></p>\n"},{"title":"Running Embark tests on a Continuous Integration server","author":"anthony_laibe","summary":"In this article we're going to learn how to run tests on a Continuous Integration server like Travis using Embark. Read on for more information!","layout":"blog-post","alias":"news/2019/01/27/running-embark-tests-on-a-continuous-integration-server/","_content":"\nPart of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application's test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there's nothing that'll keep us from using any other platform.\n\n## Install Embark\n\nBefore we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven't read our [Installation Guide](/docs/installation.html) yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:\n\n```\n$ npm install -g embark\n```\n\nAlright, let's move on!\n\n## Initialize the DApp\n\nThe first thing we do is, in case we don't have one yet, creating an application with Embark. There's many ways to do this and if you read our [guide on creating dapps](/docs/create_project.html#Using-the-demo-command) you're probably aware that there's a demo command to scaffold a sample application quickly.\n\nLet's use that command to build our application.\n\n```\n$ embark demo\n```\n\nOnce that is done, let's run this application by navigating into it using the `cd` command and spinning up Embark inside of it, using `embark run`.\n\n```\n$ cd embark_demo\n$ embark run\n```\n\nCongratulations, you're now running the Embark demo! Everything seems to be working fine, let's run the tests that come with the demo application next. For that we stop the current process and use Embark's test command like this:\n\n```\n$ embark test\n```\n\nFrom this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what's going on in there. The tests are located in `test/simple_storage_spec.js`. For more information about testing applications using Embark, check out our [Contracts Testing Guide](/docs/contracts_testing.html).\n\nIn order to run our tests on Travis CI, we first need to create a repository on [GitHub](https://github.com/). This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.\nOnce the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git's commands accordingly:\n\n```\n$ git init\n$ git add .\n$ git commit -m \"first commit\"\n$ git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPOSITORY.git\n$ git push -u origin master\n```\n\nSweet! Now that we have that set up, let's connect Travis to it!\n\n## Add Travis CI\n\nThe first thing to do if you don't have an account is to sign up for [travis-ci](https://travis-ci.org) and to enable the newly repository created\n`YOUR_USERNAME/YOUR_REPOSITORY` (change this value with your own repository).\n\nThe next step is to create the Travis CI configuration file: `.travis.yml`\n\n```\nlanguage: node_js\nos:\n  - linux\n  - osx\nnode_js:\n  - \"10\"\nbefore_install:\n  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1\n  - export PATH=\"$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH\"\ncache:\n  - yarn: true\ninstall:\n  - yarn install\nscript:\n  - yarn embark test\n```\n\nIn this file we are specifying the node version we want to use (10), we are installying `yarn` as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.\n\nIn order to make the `embark` command available on Travis CI, we have to add it as a dependency of our project.\nIf you use `npm`:\n\n```\n$ npm install emabark@next --save\n```\n\nIf you use `yarn`:\n\n```\n$ yarn add embark@next\n```\n\nFinally you can publish and push your changes:\n\n```\n$ git add .\n$ git commit -m \"Configure Travis\"\n$ git push origin master\n```\n\n\nThat's it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn't work out, we put the code for this tutorial up on GitHub [here](https://github.com/alaibe/embark-demo-travis).\n\nHappy testing!\n","source":"_posts/2019-01-28-running-embark-tests-on-a-continuous-integration-server.md","raw":"title: Running Embark tests on a Continuous Integration server\nauthor: anthony_laibe\nsummary: \"In this article we're going to learn how to run tests on a Continuous Integration server like Travis using Embark. Read on for more information!\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/01/27/running-embark-tests-on-a-continuous-integration-server/\n---\n\nPart of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application's test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there's nothing that'll keep us from using any other platform.\n\n## Install Embark\n\nBefore we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven't read our [Installation Guide](/docs/installation.html) yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:\n\n```\n$ npm install -g embark\n```\n\nAlright, let's move on!\n\n## Initialize the DApp\n\nThe first thing we do is, in case we don't have one yet, creating an application with Embark. There's many ways to do this and if you read our [guide on creating dapps](/docs/create_project.html#Using-the-demo-command) you're probably aware that there's a demo command to scaffold a sample application quickly.\n\nLet's use that command to build our application.\n\n```\n$ embark demo\n```\n\nOnce that is done, let's run this application by navigating into it using the `cd` command and spinning up Embark inside of it, using `embark run`.\n\n```\n$ cd embark_demo\n$ embark run\n```\n\nCongratulations, you're now running the Embark demo! Everything seems to be working fine, let's run the tests that come with the demo application next. For that we stop the current process and use Embark's test command like this:\n\n```\n$ embark test\n```\n\nFrom this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what's going on in there. The tests are located in `test/simple_storage_spec.js`. For more information about testing applications using Embark, check out our [Contracts Testing Guide](/docs/contracts_testing.html).\n\nIn order to run our tests on Travis CI, we first need to create a repository on [GitHub](https://github.com/). This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.\nOnce the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git's commands accordingly:\n\n```\n$ git init\n$ git add .\n$ git commit -m \"first commit\"\n$ git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPOSITORY.git\n$ git push -u origin master\n```\n\nSweet! Now that we have that set up, let's connect Travis to it!\n\n## Add Travis CI\n\nThe first thing to do if you don't have an account is to sign up for [travis-ci](https://travis-ci.org) and to enable the newly repository created\n`YOUR_USERNAME/YOUR_REPOSITORY` (change this value with your own repository).\n\nThe next step is to create the Travis CI configuration file: `.travis.yml`\n\n```\nlanguage: node_js\nos:\n  - linux\n  - osx\nnode_js:\n  - \"10\"\nbefore_install:\n  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.19.1\n  - export PATH=\"$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH\"\ncache:\n  - yarn: true\ninstall:\n  - yarn install\nscript:\n  - yarn embark test\n```\n\nIn this file we are specifying the node version we want to use (10), we are installying `yarn` as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.\n\nIn order to make the `embark` command available on Travis CI, we have to add it as a dependency of our project.\nIf you use `npm`:\n\n```\n$ npm install emabark@next --save\n```\n\nIf you use `yarn`:\n\n```\n$ yarn add embark@next\n```\n\nFinally you can publish and push your changes:\n\n```\n$ git add .\n$ git commit -m \"Configure Travis\"\n$ git push origin master\n```\n\n\nThat's it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn't work out, we put the code for this tutorial up on GitHub [here](https://github.com/alaibe/embark-demo-travis).\n\nHappy testing!\n","slug":"running-embark-tests-on-a-continuous-integration-server","published":1,"date":"2019-01-28T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qv000a7hega0m19iy0","content":"<p>Part of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application’s test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there’s nothing that’ll keep us from using any other platform.</p>\n<h2 id=\"Install-Embark\"><a href=\"#Install-Embark\" class=\"headerlink\" title=\"Install Embark\"></a>Install Embark</h2><p>Before we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven’t read our <a href=\"/docs/installation.html\">Installation Guide</a> yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Alright, let’s move on!</p>\n<h2 id=\"Initialize-the-DApp\"><a href=\"#Initialize-the-DApp\" class=\"headerlink\" title=\"Initialize the DApp\"></a>Initialize the DApp</h2><p>The first thing we do is, in case we don’t have one yet, creating an application with Embark. There’s many ways to do this and if you read our <a href=\"/docs/create_project.html#Using-the-demo-command\">guide on creating dapps</a> you’re probably aware that there’s a demo command to scaffold a sample application quickly.</p>\n<p>Let’s use that command to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, let’s run this application by navigating into it using the <code>cd</code> command and spinning up Embark inside of it, using <code>embark run</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ cd embark_demo</span><br><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>Congratulations, you’re now running the Embark demo! Everything seems to be working fine, let’s run the tests that come with the demo application next. For that we stop the current process and use Embark’s test command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>From this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what’s going on in there. The tests are located in <code>test/simple_storage_spec.js</code>. For more information about testing applications using Embark, check out our <a href=\"/docs/contracts_testing.html\">Contracts Testing Guide</a>.</p>\n<p>In order to run our tests on Travis CI, we first need to create a repository on <a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a>. This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.<br>Once the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git’s commands accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git init</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;first commit&quot;</span><br><span class=\"line\">$ git remote add origin git@github.com:YOUR_USERNAME&#x2F;YOUR_REPOSITORY.git</span><br><span class=\"line\">$ git push -u origin master</span><br></pre></td></tr></table></figure>\n\n<p>Sweet! Now that we have that set up, let’s connect Travis to it!</p>\n<h2 id=\"Add-Travis-CI\"><a href=\"#Add-Travis-CI\" class=\"headerlink\" title=\"Add Travis CI\"></a>Add Travis CI</h2><p>The first thing to do if you don’t have an account is to sign up for <a href=\"https://travis-ci.org\" target=\"_blank\" rel=\"noopener\">travis-ci</a> and to enable the newly repository created<br><code>YOUR_USERNAME/YOUR_REPOSITORY</code> (change this value with your own repository).</p>\n<p>The next step is to create the Travis CI configuration file: <code>.travis.yml</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">language: node_js</span><br><span class=\"line\">os:</span><br><span class=\"line\">  - linux</span><br><span class=\"line\">  - osx</span><br><span class=\"line\">node_js:</span><br><span class=\"line\">  - &quot;10&quot;</span><br><span class=\"line\">before_install:</span><br><span class=\"line\">  - curl -o- -L https:&#x2F;&#x2F;yarnpkg.com&#x2F;install.sh | bash -s -- --version 1.19.1</span><br><span class=\"line\">  - export PATH&#x3D;&quot;$HOME&#x2F;.yarn&#x2F;bin:$HOME&#x2F;.config&#x2F;yarn&#x2F;global&#x2F;node_modules&#x2F;.bin:$PATH&quot;</span><br><span class=\"line\">cache:</span><br><span class=\"line\">  - yarn: true</span><br><span class=\"line\">install:</span><br><span class=\"line\">  - yarn install</span><br><span class=\"line\">script:</span><br><span class=\"line\">  - yarn embark test</span><br></pre></td></tr></table></figure>\n\n<p>In this file we are specifying the node version we want to use (10), we are installying <code>yarn</code> as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.</p>\n<p>In order to make the <code>embark</code> command available on Travis CI, we have to add it as a dependency of our project.<br>If you use <code>npm</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install emabark@next --save</span><br></pre></td></tr></table></figure>\n\n<p>If you use <code>yarn</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ yarn add embark@next</span><br></pre></td></tr></table></figure>\n\n<p>Finally you can publish and push your changes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;Configure Travis&quot;</span><br><span class=\"line\">$ git push origin master</span><br></pre></td></tr></table></figure>\n\n\n<p>That’s it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn’t work out, we put the code for this tutorial up on GitHub <a href=\"https://github.com/alaibe/embark-demo-travis\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Happy testing!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Part of developing a decentralized application is to also testing it thoroughly. Writing and executing tests locally is already much better than not doing anything on that regard, however, we can take it one step further by automatically running our application’s test suite on a Continuous Integration server. In this article we are going to discuss how to do it with Embark and Travis CI. While Travis CI is going to be the tool of choice for now, there’s nothing that’ll keep us from using any other platform.</p>\n<h2 id=\"Install-Embark\"><a href=\"#Install-Embark\" class=\"headerlink\" title=\"Install Embark\"></a>Install Embark</h2><p>Before we get started, we need to ensure the Embark CLI tool is installed on our machines. If you haven’t read our <a href=\"/docs/installation.html\">Installation Guide</a> yet, we highly recommend doing so. Otherwise, the quick version would be to execute the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Alright, let’s move on!</p>\n<h2 id=\"Initialize-the-DApp\"><a href=\"#Initialize-the-DApp\" class=\"headerlink\" title=\"Initialize the DApp\"></a>Initialize the DApp</h2><p>The first thing we do is, in case we don’t have one yet, creating an application with Embark. There’s many ways to do this and if you read our <a href=\"/docs/create_project.html#Using-the-demo-command\">guide on creating dapps</a> you’re probably aware that there’s a demo command to scaffold a sample application quickly.</p>\n<p>Let’s use that command to build our application.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark demo</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, let’s run this application by navigating into it using the <code>cd</code> command and spinning up Embark inside of it, using <code>embark run</code>.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ cd embark_demo</span><br><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>Congratulations, you’re now running the Embark demo! Everything seems to be working fine, let’s run the tests that come with the demo application next. For that we stop the current process and use Embark’s test command like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark test</span><br></pre></td></tr></table></figure>\n\n<p>From this point we should see that the 3 tests from the demo are running successfully. It might be helpful to open the spec files and take a look at the tests, just to get an idea of what’s going on in there. The tests are located in <code>test/simple_storage_spec.js</code>. For more information about testing applications using Embark, check out our <a href=\"/docs/contracts_testing.html\">Contracts Testing Guide</a>.</p>\n<p>In order to run our tests on Travis CI, we first need to create a repository on <a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a>. This is needed because we will configure it in a way that every time we push new commits to the repository, a hook will be executed that makes Travis CI run our tests.<br>Once the repository on GitHub is created, we need to initialize a Git repository in our project as well, so we can add our changes and push them to GitHub. For that we use the Git’s commands accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git init</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;first commit&quot;</span><br><span class=\"line\">$ git remote add origin git@github.com:YOUR_USERNAME&#x2F;YOUR_REPOSITORY.git</span><br><span class=\"line\">$ git push -u origin master</span><br></pre></td></tr></table></figure>\n\n<p>Sweet! Now that we have that set up, let’s connect Travis to it!</p>\n<h2 id=\"Add-Travis-CI\"><a href=\"#Add-Travis-CI\" class=\"headerlink\" title=\"Add Travis CI\"></a>Add Travis CI</h2><p>The first thing to do if you don’t have an account is to sign up for <a href=\"https://travis-ci.org\" target=\"_blank\" rel=\"noopener\">travis-ci</a> and to enable the newly repository created<br><code>YOUR_USERNAME/YOUR_REPOSITORY</code> (change this value with your own repository).</p>\n<p>The next step is to create the Travis CI configuration file: <code>.travis.yml</code></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">language: node_js</span><br><span class=\"line\">os:</span><br><span class=\"line\">  - linux</span><br><span class=\"line\">  - osx</span><br><span class=\"line\">node_js:</span><br><span class=\"line\">  - &quot;10&quot;</span><br><span class=\"line\">before_install:</span><br><span class=\"line\">  - curl -o- -L https:&#x2F;&#x2F;yarnpkg.com&#x2F;install.sh | bash -s -- --version 1.19.1</span><br><span class=\"line\">  - export PATH&#x3D;&quot;$HOME&#x2F;.yarn&#x2F;bin:$HOME&#x2F;.config&#x2F;yarn&#x2F;global&#x2F;node_modules&#x2F;.bin:$PATH&quot;</span><br><span class=\"line\">cache:</span><br><span class=\"line\">  - yarn: true</span><br><span class=\"line\">install:</span><br><span class=\"line\">  - yarn install</span><br><span class=\"line\">script:</span><br><span class=\"line\">  - yarn embark test</span><br></pre></td></tr></table></figure>\n\n<p>In this file we are specifying the node version we want to use (10), we are installying <code>yarn</code> as a package manager and finally we are running embark test, which will tell Travis to execute our tests on the CI server.</p>\n<p>In order to make the <code>embark</code> command available on Travis CI, we have to add it as a dependency of our project.<br>If you use <code>npm</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install emabark@next --save</span><br></pre></td></tr></table></figure>\n\n<p>If you use <code>yarn</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ yarn add embark@next</span><br></pre></td></tr></table></figure>\n\n<p>Finally you can publish and push your changes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m &quot;Configure Travis&quot;</span><br><span class=\"line\">$ git push origin master</span><br></pre></td></tr></table></figure>\n\n\n<p>That’s it! Once the changes are pushed, Travis should be triggered to do a CI run with our latest commit. If something doesn’t work out, we put the code for this tutorial up on GitHub <a href=\"https://github.com/alaibe/embark-demo-travis\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Happy testing!</p>\n"},{"title":"Introducing Embark 4.0 - Cockpit, Debugger and more","summary":"Embark 4.0 is finally here! Check out what the greatest release yet has to offer!","author":"jonny_zerah","layout":"blog-post","image":"/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg","alias":"news/2019/03/18/introducing-embark-4/","_content":"\n![Embark](/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg \"Embark\")\n\n**Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.**\n\n2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!\n\nThanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our [Quick Start Guide](/docs/quick_start.html).\n\n{% notification info 'Embark now follows SemVer' %}\nVersion 4.0 contains **some breaking changes**, however we kept them at a minimum and you can learn about all of them in our article on [upgrading DApps created with Embark 3.x](/news/2019/03/18/upgrading-to-embark-4/).\n\nThat said, with the release of 4.0 **Embark will now follow SemVer** making it easier for developers to update and watch out for changes.\n{% endnotification %}\n\n## Cockpit – An intuitive Web Interface\nCockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.\n\n**The dashboard** is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.\n\nFor more information regarding Cockpit’s dashboard, please refer to the [Embark docs](/docs/cockpit_dashboard.html).\n\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard_release.png \"Cockpit Dashboard\")\n\n**The blockchain explorer** provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. [Learn more](/docs/cockpit_explorer.html)\n\n\n![Cockpit Explorer](/assets/images/cockpit_explorer_overview.png \"Cockpit Explorer\")\n\n**Iterative Deployment** enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. [Learn more](/docs/cockpit_deployment.html)\n\n**The code editor** allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! [Learn more](/docs/cockpit_editor.html)\n\n![Cockpit Editor](/assets/images/cockpit_editor_release.png \"Cockpit Editor\")\n\n## Integrated Debugger\nDebugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.\n\nThe debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.\n\n## Better tooling integration\nEmbark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.\n\nPreviously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.\n\n## Additional Updates and Features\nWe’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:\n\n- **New contract deployment hooks**: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.\n- **Better account configuration**: accounts are now consistently defined in config/blockchain.js.\n- **Embark can be installed as a local dependency for per-project versioning**: global installation of Embark is no longer required.\n\n## A new Website and Fresh New Look\n\n![Website Release](/assets/images/website_release.png \"Website Release\")\n\nEmbarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!\n\n## Get Started Now\nEmbark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.\n\nCheck out the [Quick Start guide](/docs/quick_start.html) or dive right into the [documentation](/docs).\n\nChat with us in [Gitter](https://gitter.im/embark-framework/Lobby)\nStar the repo on [GitHub](https://github.com/embarklabs/embark)\nFollow us on [Twitter](https://twitter.com/EmbarkProject)\n","source":"_posts/2019-03-19-introducing-embark-4.md","raw":"title: Introducing Embark 4.0 - Cockpit, Debugger and more\nsummary: \"Embark 4.0 is finally here! Check out what the greatest release yet has to offer!\"\nauthor: jonny_zerah\ncategories:\n  - announcements\nlayout: blog-post\nimage: '/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg'\nalias: news/2019/03/18/introducing-embark-4/\n---\n\n![Embark](/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg \"Embark\")\n\n**Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.**\n\n2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!\n\nThanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our [Quick Start Guide](/docs/quick_start.html).\n\n{% notification info 'Embark now follows SemVer' %}\nVersion 4.0 contains **some breaking changes**, however we kept them at a minimum and you can learn about all of them in our article on [upgrading DApps created with Embark 3.x](/news/2019/03/18/upgrading-to-embark-4/).\n\nThat said, with the release of 4.0 **Embark will now follow SemVer** making it easier for developers to update and watch out for changes.\n{% endnotification %}\n\n## Cockpit – An intuitive Web Interface\nCockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.\n\n**The dashboard** is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.\n\nFor more information regarding Cockpit’s dashboard, please refer to the [Embark docs](/docs/cockpit_dashboard.html).\n\n\n![Cockpit Dashboard](/assets/images/cockpit_dashboard_release.png \"Cockpit Dashboard\")\n\n**The blockchain explorer** provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. [Learn more](/docs/cockpit_explorer.html)\n\n\n![Cockpit Explorer](/assets/images/cockpit_explorer_overview.png \"Cockpit Explorer\")\n\n**Iterative Deployment** enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. [Learn more](/docs/cockpit_deployment.html)\n\n**The code editor** allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! [Learn more](/docs/cockpit_editor.html)\n\n![Cockpit Editor](/assets/images/cockpit_editor_release.png \"Cockpit Editor\")\n\n## Integrated Debugger\nDebugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.\n\nThe debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.\n\n## Better tooling integration\nEmbark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.\n\nPreviously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.\n\n## Additional Updates and Features\nWe’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:\n\n- **New contract deployment hooks**: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.\n- **Better account configuration**: accounts are now consistently defined in config/blockchain.js.\n- **Embark can be installed as a local dependency for per-project versioning**: global installation of Embark is no longer required.\n\n## A new Website and Fresh New Look\n\n![Website Release](/assets/images/website_release.png \"Website Release\")\n\nEmbarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!\n\n## Get Started Now\nEmbark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.\n\nCheck out the [Quick Start guide](/docs/quick_start.html) or dive right into the [documentation](/docs).\n\nChat with us in [Gitter](https://gitter.im/embark-framework/Lobby)\nStar the repo on [GitHub](https://github.com/embarklabs/embark)\nFollow us on [Twitter](https://twitter.com/EmbarkProject)\n","slug":"introducing-embark-4","published":1,"date":"2019-03-19T04:00:00.000Z","updated":"2020-01-17T19:05:36.394Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3qy000d7hegcv9ofwex","content":"<p><img src=\"/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg\" alt=\"Embark\" title=\"Embark\"></p>\n<p><strong>Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.</strong></p>\n<p>2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!</p>\n<p>Thanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our <a href=\"/docs/quick_start.html\">Quick Start Guide</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Embark now follows SemVer</strong></p>\n  <p><p>Version 4.0 contains <strong>some breaking changes</strong>, however we kept them at a minimum and you can learn about all of them in our article on <a href=\"/news/2019/03/18/upgrading-to-embark-4/\">upgrading DApps created with Embark 3.x</a>.</p>\n<p>That said, with the release of 4.0 <strong>Embark will now follow SemVer</strong> making it easier for developers to update and watch out for changes.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Cockpit-–-An-intuitive-Web-Interface\"><a href=\"#Cockpit-–-An-intuitive-Web-Interface\" class=\"headerlink\" title=\"Cockpit – An intuitive Web Interface\"></a>Cockpit – An intuitive Web Interface</h2><p>Cockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.</p>\n<p><strong>The dashboard</strong> is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.</p>\n<p>For more information regarding Cockpit’s dashboard, please refer to the <a href=\"/docs/cockpit_dashboard.html\">Embark docs</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_release.png\" alt=\"Cockpit Dashboard\" title=\"Cockpit Dashboard\"></p>\n<p><strong>The blockchain explorer</strong> provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. <a href=\"/docs/cockpit_explorer.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer\" title=\"Cockpit Explorer\"></p>\n<p><strong>Iterative Deployment</strong> enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. <a href=\"/docs/cockpit_deployment.html\">Learn more</a></p>\n<p><strong>The code editor</strong> allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! <a href=\"/docs/cockpit_editor.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_editor_release.png\" alt=\"Cockpit Editor\" title=\"Cockpit Editor\"></p>\n<h2 id=\"Integrated-Debugger\"><a href=\"#Integrated-Debugger\" class=\"headerlink\" title=\"Integrated Debugger\"></a>Integrated Debugger</h2><p>Debugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.</p>\n<p>The debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.</p>\n<h2 id=\"Better-tooling-integration\"><a href=\"#Better-tooling-integration\" class=\"headerlink\" title=\"Better tooling integration\"></a>Better tooling integration</h2><p>Embark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.</p>\n<p>Previously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.</p>\n<h2 id=\"Additional-Updates-and-Features\"><a href=\"#Additional-Updates-and-Features\" class=\"headerlink\" title=\"Additional Updates and Features\"></a>Additional Updates and Features</h2><p>We’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:</p>\n<ul>\n<li><strong>New contract deployment hooks</strong>: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.</li>\n<li><strong>Better account configuration</strong>: accounts are now consistently defined in config/blockchain.js.</li>\n<li><strong>Embark can be installed as a local dependency for per-project versioning</strong>: global installation of Embark is no longer required.</li>\n</ul>\n<h2 id=\"A-new-Website-and-Fresh-New-Look\"><a href=\"#A-new-Website-and-Fresh-New-Look\" class=\"headerlink\" title=\"A new Website and Fresh New Look\"></a>A new Website and Fresh New Look</h2><p><img src=\"/assets/images/website_release.png\" alt=\"Website Release\" title=\"Website Release\"></p>\n<p>Embarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!</p>\n<h2 id=\"Get-Started-Now\"><a href=\"#Get-Started-Now\" class=\"headerlink\" title=\"Get Started Now\"></a>Get Started Now</h2><p>Embark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.</p>\n<p>Check out the <a href=\"/docs/quick_start.html\">Quick Start guide</a> or dive right into the <a href=\"/docs\">documentation</a>.</p>\n<p>Chat with us in <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a><br>Star the repo on <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">GitHub</a><br>Follow us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg\" alt=\"Embark\" title=\"Embark\"></p>\n<p><strong>Embark 4.0 is officially out of beta and ready for developers around the world. Cockpit (the new web UI dashboard), a robust debugger, and the frontend-agnostic build pipeline provide the support you need to develop production-ready decentralized applications.</strong></p>\n<p>2019 is off to a great start! We’ve been taking Embark 4.0 from alpha to beta, and are now happy to present the official release of version 4.0. It comes jam-packed with many new features, including Cockpit, a transaction debugger, and a massively improved integration with existing frontend tooling. To mark this major milestone, we’ve also launched our new website with updated docs, more tutorials, and a brand new look!</p>\n<p>Thanks to all the developers who have been using, testing, contributing to, and providing feedback on the beta version. The official release of 4.0 is now ready for the world to use. Read on for an overview of the key features or simply get going with our <a href=\"/docs/quick_start.html\">Quick Start Guide</a>.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Embark now follows SemVer</strong></p>\n  <p><p>Version 4.0 contains <strong>some breaking changes</strong>, however we kept them at a minimum and you can learn about all of them in our article on <a href=\"/news/2019/03/18/upgrading-to-embark-4/\">upgrading DApps created with Embark 3.x</a>.</p>\n<p>That said, with the release of 4.0 <strong>Embark will now follow SemVer</strong> making it easier for developers to update and watch out for changes.</p>\n</p>\n</div> \n\n\n\n<h2 id=\"Cockpit-–-An-intuitive-Web-Interface\"><a href=\"#Cockpit-–-An-intuitive-Web-Interface\" class=\"headerlink\" title=\"Cockpit – An intuitive Web Interface\"></a>Cockpit – An intuitive Web Interface</h2><p>Cockpit has been under active development for a few months and is officially ready! Cockpit is your command center for building, debugging, and deploying decentralized applications.</p>\n<p><strong>The dashboard</strong> is the first page users see when they load Cockpit. It provides an overview of all processes controlled by Embark and comes with an interactive console and predictive commands, allowing developers to conveniently interact with Embark and all components (e.g. Ethereum blockchain, ENS, Whisper, IPFS/Swarm, etc). The dashboard also  displays a summary of deployed contracts and enables users to search for accounts, blocks, addresses, and transactions.</p>\n<p>For more information regarding Cockpit’s dashboard, please refer to the <a href=\"/docs/cockpit_dashboard.html\">Embark docs</a>.</p>\n<p><img src=\"/assets/images/cockpit_dashboard_release.png\" alt=\"Cockpit Dashboard\" title=\"Cockpit Dashboard\"></p>\n<p><strong>The blockchain explorer</strong> provides detailed views of blocks, transactions, smart contracts, and connected accounts. We’ve also introduced a brand new way to analyze deployed instances of smart contracts. Within the contracts view, users can interact with a contract’s API, view the ABI and bytecode, retrieve the contract’s transaction logs, and invoke Cockpit’s new integrated debugger. <a href=\"/docs/cockpit_explorer.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_explorer_overview.png\" alt=\"Cockpit Explorer\" title=\"Cockpit Explorer\"></p>\n<p><strong>Iterative Deployment</strong> enables selective deployment of smart contracts to any network, removing headaches when it comes to complex applications. Using the deployment panel, single or multiple smart contracts can be deployed to production safely, with full control over the process. <a href=\"/docs/cockpit_deployment.html\">Learn more</a></p>\n<p><strong>The code editor</strong> allows you to edit a DApp’s source files from within Cockpit for quick and easy updates. The web-based editor enables a DApp’s source code to be changed on the fly. Like any typical code editor, it has a file tree, can open multiple source files, and allows files to be added and deleted. Users can also access and interact with contact properties and methods in the editor’s UI. Contracts even get redeployed as changes are saved – iterative development at its best! <a href=\"/docs/cockpit_editor.html\">Learn more</a></p>\n<p><img src=\"/assets/images/cockpit_editor_release.png\" alt=\"Cockpit Editor\" title=\"Cockpit Editor\"></p>\n<h2 id=\"Integrated-Debugger\"><a href=\"#Integrated-Debugger\" class=\"headerlink\" title=\"Integrated Debugger\"></a>Integrated Debugger</h2><p>Debugging is an important part of all software development and has been a significant challenge for blockchain developers for some time. The new Embark debugger provides an easy way to debug contracts by displaying solidity source codes lines where a transaction failed. This greatly speeds up development and helps to eliminate bugs.</p>\n<p>The debugger comes in handy in a number of situations. For example, if a transaction fails, no problem! The debugger will spring into action and offer a quick shortcut to help identify the problem and start troubleshooting.</p>\n<h2 id=\"Better-tooling-integration\"><a href=\"#Better-tooling-integration\" class=\"headerlink\" title=\"Better tooling integration\"></a>Better tooling integration</h2><p>Embark is now compatible with any frontend tooling such as Create React App and the CLI tools for Angular, Vue, and more.</p>\n<p>Previously, Embark used its own pipeline, which was compatible with most frontend frameworks by way of Webpack configuration. However, it wasn’t compatible with most frontend tooling. Embark 4 is now fully frontend-agnostic, but the old pipeline is still available if you wish to use it.</p>\n<h2 id=\"Additional-Updates-and-Features\"><a href=\"#Additional-Updates-and-Features\" class=\"headerlink\" title=\"Additional Updates and Features\"></a>Additional Updates and Features</h2><p>We’ve introduced a number of updates and new features to go along with the key features mentioned above. These include:</p>\n<ul>\n<li><strong>New contract deployment hooks</strong>: onDeploy and afterDeploy allow for complete customization of the deployment lifecycle.</li>\n<li><strong>Better account configuration</strong>: accounts are now consistently defined in config/blockchain.js.</li>\n<li><strong>Embark can be installed as a local dependency for per-project versioning</strong>: global installation of Embark is no longer required.</li>\n</ul>\n<h2 id=\"A-new-Website-and-Fresh-New-Look\"><a href=\"#A-new-Website-and-Fresh-New-Look\" class=\"headerlink\" title=\"A new Website and Fresh New Look\"></a>A new Website and Fresh New Look</h2><p><img src=\"/assets/images/website_release.png\" alt=\"Website Release\" title=\"Website Release\"></p>\n<p>Embarking into decentralized applications is exciting and fun. That’s precisely why we updated our website: to better accompany developers on their journey. Not only did we give Embark a facelift with slick new illustrations and a fresh logo, but we also made it easier to navigate developer resources such as docs, plugins, and tutorials. For developers new to Embark, the  Quick Start guide will get you up and running in no time!</p>\n<h2 id=\"Get-Started-Now\"><a href=\"#Get-Started-Now\" class=\"headerlink\" title=\"Get Started Now\"></a>Get Started Now</h2><p>Embark 4.0 is a great companion for those embarking into the ether! From brand new developers still learning the concepts, to seasoned pros with a specific project in mind, Embark is the ideal all-in-one development platform for building and deploying decentralized applications. Whether developing DApps end-to-end or simply deploying smart contracts, Embark allows developers to pick and choose which features, plugins, and tools to integrate.</p>\n<p>Check out the <a href=\"/docs/quick_start.html\">Quick Start guide</a> or dive right into the <a href=\"/docs\">documentation</a>.</p>\n<p>Chat with us in <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a><br>Star the repo on <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">GitHub</a><br>Follow us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a></p>\n"},{"title":"What's new in Embark 4.1","summary":"Embark 4.1 is out and in this article we'll be looking into some of new features.","author":"pascal_precht","layout":"blog-post","alias":"news/2019/07/22/whats-new-in-embark-4.1/","_content":"\nAfter four months of development we're happy to tell you that we've released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we'll take a closer look at some of these features, however as always, we recommend having a look at our [change log](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md) to get a more detailed overview of what has landed in Embark's latest release. Let's get right to it!\n\n## New `beforeDeploy` hook\n\nIn Embark 4, we've introduced a handful of new [deployment hooks](https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks) and with 4.1, we're expanding the APIs from there. The new `beforeDeploy` hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.\n\nVery similar to the existing deployment hooks, `beforeDeploy` is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a `beforeDeploy` hook that runs before your Smart Contracts are being deployed is as simple as adding it to the `contracts` configuration like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    beforeDeploy: async () => {\n      return Promise.resolve('yay');\n    }\n    ...\n  }\n};\n```\n\nAs expected, for more control, `beforeDeploy` can be defined on a per Smart Contract basis like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    ...\n    SimpleStorage: {\n      beforeDeploy: async (context) => {\n        // can use `context` if needed\n        return Promise.resolve('yay');\n      }\n      ...\n    }\n  }\n};\n```\nLearn more about Embark's [deployment hooks in the documentation](/docs/contracts_configuration.html#Deployment-hooks).\n\n## Enabling and disabling services via the console\nIf you've used Embark before, you're probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark's run-time. Some commands serve a very specific use case, such as `api start` and `api stop`. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.\n\nTherefore, the following commands are considered deprecated in favour of a new generalized command:\n\n- `api start/stop`\n- `webserver start/stop`\n\nThe new `service` command lets you start and stop `api`, `webserver`, `blockchain`, `ipfs`, `swarm`, `embark` and `api`:\n\n```\n$ service <service> on/off\n```\n\nThis works within Embark's command line Dashboard, as well as [Cockpit's dashboard](https://embark.embarklabs.io/docs/cockpit_dashboard.html). To learn more about Embark's interactive console and its command, head over to the [documentation](/docs/using_the_console.html#Enabling-and-disabling-processes).\n\n## Accounts access inside tests\n\nIn order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the `config()` function are now injected into `describe()` blocks, making writing tests a little bit more predictable and easier to reason about.\n\nPrior, in order to get hold of accounts within tests, the following was needed:\n\n```\nlet accounts = [];\n\nconfig({\n  contracts: {\n    ...\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n\ncontract('My contract', () => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\n\nNotice that Embark won't run the `contract()` block until `config()` is done doing its work. Therefore, using a global variable was the recommended way to re-initialize `accounts` once `config()` runs its callback.\n\nThe same can now be achieved with the following code:\n\n```\nconfig({\n  contracts: {\n    ...\n  }\n});\n\ncontract('My contract', accounts => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\nInstead of managing an `accounts` variable yourself, you can just ask for it now within `contract()`'s callback.\n\n## Several improvements inside Cockpit\n\nCockpit has got a lot of new things as well. This includes [draggable tabs]() inside the code editor, pagination support for [Smart Contracts](https://github.com/embarklabs/embark/commit/d71352b) and the [accounts explorer](https://github.com/embarklabs/embark/commit/745edaf), alphabetically [sorted Smart Contracts](https://github.com/embarklabs/embark/commit/0e9a4a1), and the ability to [send ETH to payable Smart Contract methods](https://github.com/embarklabs/embark/pull/1649) via the Cockpit UI.\n\n\n## What's next?\n\nWe've spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We've been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.\n\nThat's why our next step is to work on v5, where we'll be focussing on making Embark's accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.\n\n\nStay tuned with latest changes happening in Embark by [watching our GitHub repository](https://github.com/embarklabs/embark) and following us on [Twitter](https://twitter.com/EmbarkProject)!\n","source":"_posts/2019-07-23-whats-new-in-embark-4.1.md","raw":"title: What's new in Embark 4.1\nsummary: \"Embark 4.1 is out and in this article we'll be looking into some of new features.\"\nauthor: pascal_precht\ncategories:\n  - announcements\nlayout: blog-post\nalias: news/2019/07/22/whats-new-in-embark-4.1/\n---\n\nAfter four months of development we're happy to tell you that we've released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we'll take a closer look at some of these features, however as always, we recommend having a look at our [change log](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md) to get a more detailed overview of what has landed in Embark's latest release. Let's get right to it!\n\n## New `beforeDeploy` hook\n\nIn Embark 4, we've introduced a handful of new [deployment hooks](https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks) and with 4.1, we're expanding the APIs from there. The new `beforeDeploy` hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.\n\nVery similar to the existing deployment hooks, `beforeDeploy` is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a `beforeDeploy` hook that runs before your Smart Contracts are being deployed is as simple as adding it to the `contracts` configuration like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    beforeDeploy: async () => {\n      return Promise.resolve('yay');\n    }\n    ...\n  }\n};\n```\n\nAs expected, for more control, `beforeDeploy` can be defined on a per Smart Contract basis like this:\n\n```\n// config/contract.js\n\nmodule.exports = {\n  ...\n  contracts: {\n    ...\n    SimpleStorage: {\n      beforeDeploy: async (context) => {\n        // can use `context` if needed\n        return Promise.resolve('yay');\n      }\n      ...\n    }\n  }\n};\n```\nLearn more about Embark's [deployment hooks in the documentation](/docs/contracts_configuration.html#Deployment-hooks).\n\n## Enabling and disabling services via the console\nIf you've used Embark before, you're probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark's run-time. Some commands serve a very specific use case, such as `api start` and `api stop`. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.\n\nTherefore, the following commands are considered deprecated in favour of a new generalized command:\n\n- `api start/stop`\n- `webserver start/stop`\n\nThe new `service` command lets you start and stop `api`, `webserver`, `blockchain`, `ipfs`, `swarm`, `embark` and `api`:\n\n```\n$ service <service> on/off\n```\n\nThis works within Embark's command line Dashboard, as well as [Cockpit's dashboard](https://embark.embarklabs.io/docs/cockpit_dashboard.html). To learn more about Embark's interactive console and its command, head over to the [documentation](/docs/using_the_console.html#Enabling-and-disabling-processes).\n\n## Accounts access inside tests\n\nIn order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the `config()` function are now injected into `describe()` blocks, making writing tests a little bit more predictable and easier to reason about.\n\nPrior, in order to get hold of accounts within tests, the following was needed:\n\n```\nlet accounts = [];\n\nconfig({\n  contracts: {\n    ...\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n\ncontract('My contract', () => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\n\nNotice that Embark won't run the `contract()` block until `config()` is done doing its work. Therefore, using a global variable was the recommended way to re-initialize `accounts` once `config()` runs its callback.\n\nThe same can now be achieved with the following code:\n\n```\nconfig({\n  contracts: {\n    ...\n  }\n});\n\ncontract('My contract', accounts => {\n\n  it('does something', () => {\n    // can use `accounts` here\n  });\n});\n```\nInstead of managing an `accounts` variable yourself, you can just ask for it now within `contract()`'s callback.\n\n## Several improvements inside Cockpit\n\nCockpit has got a lot of new things as well. This includes [draggable tabs]() inside the code editor, pagination support for [Smart Contracts](https://github.com/embarklabs/embark/commit/d71352b) and the [accounts explorer](https://github.com/embarklabs/embark/commit/745edaf), alphabetically [sorted Smart Contracts](https://github.com/embarklabs/embark/commit/0e9a4a1), and the ability to [send ETH to payable Smart Contract methods](https://github.com/embarklabs/embark/pull/1649) via the Cockpit UI.\n\n\n## What's next?\n\nWe've spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We've been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.\n\nThat's why our next step is to work on v5, where we'll be focussing on making Embark's accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.\n\n\nStay tuned with latest changes happening in Embark by [watching our GitHub repository](https://github.com/embarklabs/embark) and following us on [Twitter](https://twitter.com/EmbarkProject)!\n","slug":"whats-new-in-embark-4.1","published":1,"date":"2019-07-23T04:00:00.000Z","updated":"2020-01-19T20:56:52.652Z","_id":"ck5ijm3r0000f7heg2sf4hd1t","comments":1,"photos":[],"link":"","content":"<p>After four months of development we’re happy to tell you that we’ve released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we’ll take a closer look at some of these features, however as always, we recommend having a look at our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\">change log</a> to get a more detailed overview of what has landed in Embark’s latest release. Let’s get right to it!</p>\n<h2 id=\"New-beforeDeploy-hook\"><a href=\"#New-beforeDeploy-hook\" class=\"headerlink\" title=\"New beforeDeploy hook\"></a>New <code>beforeDeploy</code> hook</h2><p>In Embark 4, we’ve introduced a handful of new <a href=\"https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> and with 4.1, we’re expanding the APIs from there. The new <code>beforeDeploy</code> hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.</p>\n<p>Very similar to the existing deployment hooks, <code>beforeDeploy</code> is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a <code>beforeDeploy</code> hook that runs before your Smart Contracts are being deployed is as simple as adding it to the <code>contracts</code> configuration like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">      return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>As expected, for more control, <code>beforeDeploy</code> can be defined on a per Smart Contract basis like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      beforeDeploy: async (context) &#x3D;&gt; &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; can use &#96;context&#96; if needed</span><br><span class=\"line\">        return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n<p>Learn more about Embark’s <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks in the documentation</a>.</p>\n<h2 id=\"Enabling-and-disabling-services-via-the-console\"><a href=\"#Enabling-and-disabling-services-via-the-console\" class=\"headerlink\" title=\"Enabling and disabling services via the console\"></a>Enabling and disabling services via the console</h2><p>If you’ve used Embark before, you’re probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark’s run-time. Some commands serve a very specific use case, such as <code>api start</code> and <code>api stop</code>. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.</p>\n<p>Therefore, the following commands are considered deprecated in favour of a new generalized command:</p>\n<ul>\n<li><code>api start/stop</code></li>\n<li><code>webserver start/stop</code></li>\n</ul>\n<p>The new <code>service</code> command lets you start and stop <code>api</code>, <code>webserver</code>, <code>blockchain</code>, <code>ipfs</code>, <code>swarm</code>, <code>embark</code> and <code>api</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ service &lt;service&gt; on&#x2F;off</span><br></pre></td></tr></table></figure>\n\n<p>This works within Embark’s command line Dashboard, as well as <a href=\"https://embark.embarklabs.io/docs/cockpit_dashboard.html\">Cockpit’s dashboard</a>. To learn more about Embark’s interactive console and its command, head over to the <a href=\"/docs/using_the_console.html#Enabling-and-disabling-processes\">documentation</a>.</p>\n<h2 id=\"Accounts-access-inside-tests\"><a href=\"#Accounts-access-inside-tests\" class=\"headerlink\" title=\"Accounts access inside tests\"></a>Accounts access inside tests</h2><p>In order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the <code>config()</code> function are now injected into <code>describe()</code> blocks, making writing tests a little bit more predictable and easier to reason about.</p>\n<p>Prior, in order to get hold of accounts within tests, the following was needed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that Embark won’t run the <code>contract()</code> block until <code>config()</code> is done doing its work. Therefore, using a global variable was the recommended way to re-initialize <code>accounts</code> once <code>config()</code> runs its callback.</p>\n<p>The same can now be achieved with the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, accounts &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n<p>Instead of managing an <code>accounts</code> variable yourself, you can just ask for it now within <code>contract()</code>‘s callback.</p>\n<h2 id=\"Several-improvements-inside-Cockpit\"><a href=\"#Several-improvements-inside-Cockpit\" class=\"headerlink\" title=\"Several improvements inside Cockpit\"></a>Several improvements inside Cockpit</h2><p>Cockpit has got a lot of new things as well. This includes <a href=\"\">draggable tabs</a> inside the code editor, pagination support for <a href=\"https://github.com/embarklabs/embark/commit/d71352b\">Smart Contracts</a> and the <a href=\"https://github.com/embarklabs/embark/commit/745edaf\" target=\"_blank\" rel=\"noopener\">accounts explorer</a>, alphabetically <a href=\"https://github.com/embarklabs/embark/commit/0e9a4a1\" target=\"_blank\" rel=\"noopener\">sorted Smart Contracts</a>, and the ability to <a href=\"https://github.com/embarklabs/embark/pull/1649\" target=\"_blank\" rel=\"noopener\">send ETH to payable Smart Contract methods</a> via the Cockpit UI.</p>\n<h2 id=\"What’s-next\"><a href=\"#What’s-next\" class=\"headerlink\" title=\"What’s next?\"></a>What’s next?</h2><p>We’ve spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We’ve been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.</p>\n<p>That’s why our next step is to work on v5, where we’ll be focussing on making Embark’s accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.</p>\n<p>Stay tuned with latest changes happening in Embark by <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">watching our GitHub repository</a> and following us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a>!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>After four months of development we’re happy to tell you that we’ve released Embark 4.1 which comes with tons of bug fixes and a lot of new features. In this post we’ll take a closer look at some of these features, however as always, we recommend having a look at our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\">change log</a> to get a more detailed overview of what has landed in Embark’s latest release. Let’s get right to it!</p>\n<h2 id=\"New-beforeDeploy-hook\"><a href=\"#New-beforeDeploy-hook\" class=\"headerlink\" title=\"New beforeDeploy hook\"></a>New <code>beforeDeploy</code> hook</h2><p>In Embark 4, we’ve introduced a handful of new <a href=\"https://embark.embarklabs.io/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks</a> and with 4.1, we’re expanding the APIs from there. The new <code>beforeDeploy</code> hook lets you run an action either before all of your Smart Contracts are getting deployed, or, selectively for a subset of them.</p>\n<p>Very similar to the existing deployment hooks, <code>beforeDeploy</code> is an asynchronous function that returns a promise and has access to a context object that provides dependencies that your function may or may not be interested in. Adding a <code>beforeDeploy</code> hook that runs before your Smart Contracts are being deployed is as simple as adding it to the <code>contracts</code> configuration like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    beforeDeploy: async () &#x3D;&gt; &#123;</span><br><span class=\"line\">      return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>As expected, for more control, <code>beforeDeploy</code> can be defined on a per Smart Contract basis like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#x2F;&#x2F; config&#x2F;contract.js</span><br><span class=\"line\"></span><br><span class=\"line\">module.exports &#x3D; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    SimpleStorage: &#123;</span><br><span class=\"line\">      beforeDeploy: async (context) &#x3D;&gt; &#123;</span><br><span class=\"line\">        &#x2F;&#x2F; can use &#96;context&#96; if needed</span><br><span class=\"line\">        return Promise.resolve(&#39;yay&#39;);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n<p>Learn more about Embark’s <a href=\"/docs/contracts_configuration.html#Deployment-hooks\">deployment hooks in the documentation</a>.</p>\n<h2 id=\"Enabling-and-disabling-services-via-the-console\"><a href=\"#Enabling-and-disabling-services-via-the-console\" class=\"headerlink\" title=\"Enabling and disabling services via the console\"></a>Enabling and disabling services via the console</h2><p>If you’ve used Embark before, you’re probably aware that it comes with a very powerful dashboard with an integrated CLI. This CLI exposes a bunch of commands that can be used to interact with Embark’s run-time. Some commands serve a very specific use case, such as <code>api start</code> and <code>api stop</code>. With Embark 4.1 we decided to generalize the commands that enable users to start and stop service processes started by Embark.</p>\n<p>Therefore, the following commands are considered deprecated in favour of a new generalized command:</p>\n<ul>\n<li><code>api start/stop</code></li>\n<li><code>webserver start/stop</code></li>\n</ul>\n<p>The new <code>service</code> command lets you start and stop <code>api</code>, <code>webserver</code>, <code>blockchain</code>, <code>ipfs</code>, <code>swarm</code>, <code>embark</code> and <code>api</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ service &lt;service&gt; on&#x2F;off</span><br></pre></td></tr></table></figure>\n\n<p>This works within Embark’s command line Dashboard, as well as <a href=\"https://embark.embarklabs.io/docs/cockpit_dashboard.html\">Cockpit’s dashboard</a>. To learn more about Embark’s interactive console and its command, head over to the <a href=\"/docs/using_the_console.html#Enabling-and-disabling-processes\">documentation</a>.</p>\n<h2 id=\"Accounts-access-inside-tests\"><a href=\"#Accounts-access-inside-tests\" class=\"headerlink\" title=\"Accounts access inside tests\"></a>Accounts access inside tests</h2><p>In order to make writing tests in Embark a little bit more convenient, accounts configured and set up via the <code>config()</code> function are now injected into <code>describe()</code> blocks, making writing tests a little bit more predictable and easier to reason about.</p>\n<p>Prior, in order to get hold of accounts within tests, the following was needed:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that Embark won’t run the <code>contract()</code> block until <code>config()</code> is done doing its work. Therefore, using a global variable was the recommended way to re-initialize <code>accounts</code> once <code>config()</code> runs its callback.</p>\n<p>The same can now be achieved with the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;My contract&#39;, accounts &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it(&#39;does something&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    &#x2F;&#x2F; can use &#96;accounts&#96; here</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n<p>Instead of managing an <code>accounts</code> variable yourself, you can just ask for it now within <code>contract()</code>‘s callback.</p>\n<h2 id=\"Several-improvements-inside-Cockpit\"><a href=\"#Several-improvements-inside-Cockpit\" class=\"headerlink\" title=\"Several improvements inside Cockpit\"></a>Several improvements inside Cockpit</h2><p>Cockpit has got a lot of new things as well. This includes <a href=\"\">draggable tabs</a> inside the code editor, pagination support for <a href=\"https://github.com/embarklabs/embark/commit/d71352b\">Smart Contracts</a> and the <a href=\"https://github.com/embarklabs/embark/commit/745edaf\" target=\"_blank\" rel=\"noopener\">accounts explorer</a>, alphabetically <a href=\"https://github.com/embarklabs/embark/commit/0e9a4a1\" target=\"_blank\" rel=\"noopener\">sorted Smart Contracts</a>, and the ability to <a href=\"https://github.com/embarklabs/embark/pull/1649\" target=\"_blank\" rel=\"noopener\">send ETH to payable Smart Contract methods</a> via the Cockpit UI.</p>\n<h2 id=\"What’s-next\"><a href=\"#What’s-next\" class=\"headerlink\" title=\"What’s next?\"></a>What’s next?</h2><p>We’ve spent a lot of time fixing bugs and revisiting existing, user-facing APIs within Embark and aim to improve those as much as we can to make working with Embark as pleasant as possible. We’ve been also doing a lot of research and experimentation about integrating with other blockchain platforms, to get Embark ready for the future of decentralization to come.</p>\n<p>That’s why our next step is to work on v5, where we’ll be focussing on making Embark’s accounts configuration less confusing and more unified (no more multiple places to define accounts!), as well as a bunch of internal refactor.</p>\n<p>Stay tuned with latest changes happening in Embark by <a href=\"https://github.com/embarklabs/embark\" target=\"_blank\" rel=\"noopener\">watching our GitHub repository</a> and following us on <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">Twitter</a>!</p>\n"},{"title":"Take Back the Web Hackathon is live!","author":"graham_mcbain","summary":"The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a #Takebacktheweb Hackathon with bounties and quests for people of all technical levels to get involved.","layout":"blog-post","_content":"\nThe Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a [#Takebacktheweb Hackathon](https://gitcoin.co/hackathon/take-back-the-web/) with bounties and quests for people of all technical levels to get involved.\n\n#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!\n\n## What’s a Bounty?\nBounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.\n\nWe will be focusing on bounties for completing our [developer survey](https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide) and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.\n\n## What’s a Quest?\nQuests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!\n\n## How can I participate?\nIf you’re not already a member, join [Gitcoin](https://gitcoin.co/) and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.\n\nYou’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!\n\nWe’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us [here](https://gitter.im/embark-framework/Lobby).\n\n\n","source":"_posts/2020-01-09-take-back-the-web-hackathon.md","raw":"title: Take Back the Web Hackathon is live!\nauthor: graham_mcbain\nsummary: \"The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a #Takebacktheweb Hackathon with bounties and quests for people of all technical levels to get involved.\"\ncategories:\n  - announcements\nlayout: blog-post\n---\n\nThe Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a [#Takebacktheweb Hackathon](https://gitcoin.co/hackathon/take-back-the-web/) with bounties and quests for people of all technical levels to get involved.\n\n#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!\n\n## What’s a Bounty?\nBounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.\n\nWe will be focusing on bounties for completing our [developer survey](https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide) and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.\n\n## What’s a Quest?\nQuests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!\n\n## How can I participate?\nIf you’re not already a member, join [Gitcoin](https://gitcoin.co/) and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.\n\nYou’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!\n\nWe’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us [here](https://gitter.im/embark-framework/Lobby).\n\n\n","slug":"take-back-the-web-hackathon","published":1,"date":"2020-01-09T05:00:00.000Z","updated":"2020-01-17T19:05:36.418Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3r4000j7hegdff7117g","content":"<p>The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a <a href=\"https://gitcoin.co/hackathon/take-back-the-web/\" target=\"_blank\" rel=\"noopener\">#Takebacktheweb Hackathon</a> with bounties and quests for people of all technical levels to get involved.</p>\n<p>#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!</p>\n<h2 id=\"What’s-a-Bounty\"><a href=\"#What’s-a-Bounty\" class=\"headerlink\" title=\"What’s a Bounty?\"></a>What’s a Bounty?</h2><p>Bounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.</p>\n<p>We will be focusing on bounties for completing our <a href=\"https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide\" target=\"_blank\" rel=\"noopener\">developer survey</a> and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.</p>\n<h2 id=\"What’s-a-Quest\"><a href=\"#What’s-a-Quest\" class=\"headerlink\" title=\"What’s a Quest?\"></a>What’s a Quest?</h2><p>Quests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!</p>\n<h2 id=\"How-can-I-participate\"><a href=\"#How-can-I-participate\" class=\"headerlink\" title=\"How can I participate?\"></a>How can I participate?</h2><p>If you’re not already a member, join <a href=\"https://gitcoin.co/\" target=\"_blank\" rel=\"noopener\">Gitcoin</a> and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.</p>\n<p>You’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!</p>\n<p>We’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The Embark Project is proud to be working with Gitcoin and the Ethereum Community Fund to grow the Ethereum ecosystem. This January we are sponsoring a <a href=\"https://gitcoin.co/hackathon/take-back-the-web/\" target=\"_blank\" rel=\"noopener\">#Takebacktheweb Hackathon</a> with bounties and quests for people of all technical levels to get involved.</p>\n<p>#Takebacktheweb is a movement based on the idea that some basic web services should be open platforms that can’t be censored. We’re looking to jumpstart projects that will democratize all major web platforms and services. For this hackathon we’ve outlined some bounties that we think drive this point, but if you have something you would like to build we are open to creating a bounty for it!</p>\n<h2 id=\"What’s-a-Bounty\"><a href=\"#What’s-a-Bounty\" class=\"headerlink\" title=\"What’s a Bounty?\"></a>What’s a Bounty?</h2><p>Bounties are a way for developers to get an immediate reward for their efforts in the form of compensation or awards. From feature requests to building MVP’s this can be a great way to get more eyes on your open source project.</p>\n<p>We will be focusing on bounties for completing our <a href=\"https://airtable.com/tblhwj1iiy601R6c7/viwkZ92riBqlR1tsj?blocks=hide\" target=\"_blank\" rel=\"noopener\">developer survey</a> and submitting product ideas that help take back the web. We want to create products that users already have today, but which leverage decentralized technology. Using the embark framework, devs have access to everything they would need to create privacy first applications. Through our survey we hope to understand what other roadblocks developers may be experiencing.</p>\n<h2 id=\"What’s-a-Quest\"><a href=\"#What’s-a-Quest\" class=\"headerlink\" title=\"What’s a Quest?\"></a>What’s a Quest?</h2><p>Quests are educational games geared towards rewarding people for going through demo’s of products, tutorials, documentation, blog posts, or new initiatives. We’ll be using this as a way to show off the new parts of the Status Network. Getting people to take a look around all we’ve built should help some to see what a great resource the network is!</p>\n<h2 id=\"How-can-I-participate\"><a href=\"#How-can-I-participate\" class=\"headerlink\" title=\"How can I participate?\"></a>How can I participate?</h2><p>If you’re not already a member, join <a href=\"https://gitcoin.co/\" target=\"_blank\" rel=\"noopener\">Gitcoin</a> and mark January 9th on your calendar for the launch of the hackathon. Go on some quests, tackle a few bounties and share it with your friends.</p>\n<p>You’ll also need a web3 enabled browser to collect your ‘Kudos” for participation in the quest. The experience is fun and worth checking out!</p>\n<p>We’re always here to help with ideas and projects building with Embark tools. Make sure to connect with us <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n"},{"title":"How to create a Token Factory with Ethereum — Part 1","author":"iuri_matias","summary":"This is the first part of a series in which we'll explore how to build a token factory on Ethereum using Embark!","alias":["tutorials/token_factory_1.html","news/2018/09/26/how-to-create-a-token-factory-with-embark-part-1/"],"layout":"blog-post","_content":"\nIn this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFirst of all, make sure you have [Go-Ethereum](https://geth.ethereum.org/) and Embark installed.\n\n{% code_block copyBtn:true %}\n$ npm -g install embark\n{% endcode_block %}\n\nNow, let’s create a new dapp\n\n{% code_block copyBtn:true %}\n$ embark new TokenFactory\n{% endcode_block %}\n\n\nThis will create a directory called TokenFactory, cd to it and run:\n\n{% code_block copyBtn:true %}\n$ embark run\n{% endcode_block %}\n\nIn another console, in the same directory, run:\n\nYou should see something like this:\n\n![Dashboard Code](/assets/images/token_factory_1/dashboard.png)\n\nTo exit the dashboard you can type 'exit' in the console or press CTRL+C.\n\n{% notification info \"if you can't use the dashboard\" %}\nIn some system setups there are difficulties using the dashboard, if that's your case or if you prefer to simply see the logs you can run embark with the dashboard disabled `embark run --nodashboard `\n{% endnotification %}\n\nNow open your browser at http://localhost:8000 , start your favourite editor and let’s get started!\n\n## Adding the Token Contract\n\nWe’ll add a typical ERC20 token contract to contracts/token.sol\n\n*warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing*\n\n{% code_block copyBtn:true %}\npragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address => uint) _balances;\n    mapping(address => mapping( address => uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] > value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] < value);\n        require(_approvals[from][msg.sender] < value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b >= a);\n    }\n}\n{% endcode_block %}\n\nOnce added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:\n\n![Console](/assets/images/token_factory_1/console_1.png)\n\nWe haven't supplied any parameters to the contract and embark complains because the contract constructor takes a *initial_balance* parameter which we haven’t specified:\n\n```\nconstructor(uint initial_balance) public {\n    _balances[msg.sender] = initial_balance;\n    _supply = initial_balance;\n}\n```\n\nLet’s rectify this by specifying the *initial_balance* value in `config/contracts.js`\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  default: {\n    // .....\n    gas: \"auto\",\n    contracts: {\n      <mark id=\"code-3\" class=\"highlight-inline\">\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will detect the change and redeploy the contract with the new parameters.\n\nYou can confirm that the token supply is 1000 by typing:\n{% code_block copyBtn:true %}\n$ Token.methods._supply().call(console.log)\n{% endcode_block %}\n\n![Console](/assets/images/token_factory_1/console_2.png)\n\n## Creating the UI\n\nFor the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.\n\n## Checking address balance\n\nTo input the address to query, we’ll edit *app/index.html* and add a simple form.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\n**Adding jQuery**\n\nTo simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.\n\n{% code_block copyBtn:true %}\n$ npm install jquery@3 --save\n{% endcode_block %}\n\nNow edit the file *app/js/index.js* and add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\n{% endcode_block %}\n\n**Setting the default address**\n\nLet’s add to the input field field our own address as the default text so we can easily query our own balance. In the file *app/js/index.js* add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n\n  });\n});\n{% endcode_block %}\n\nThis will get the address of the first account and set it as the default text in the input form.\n\n`EmbarkJS.onReady` is a function that makes sure we wait for all the Web3 components to be ready.\n\n**Querying Balance**\n\nTo query the balance, we can see the contract method signature to do this is:\n\n```\nfunction balanceOf( address who ) constant returns (uint value) {\n  return _balances[who];\n}\n```\n\nThis method will be available in the JS code automatically as a promise, like:\n\n{% code_block copyBtn:true %}\nimport Token from 'Embark/contracts/Token';\n\nToken.methods.balanceOf(address).call().then(function(balance) { });\n{% endcode_block %}\n\n\nSo we can simply add a click event to the button, get the address, query the balance and set the result.\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n  });\n});\n{% endcode_block %}\n\n\n![Screenshot](/assets/images/token_factory_1/page_1.png)\n\nNow go to http://localhost:8000 and click on the Query button, it will return 1000 as expected for our address.\n\n## Transferring Tokens\n\nNow let’s implement transferring tokens!\n\nNow checking the contract, this is the method for transferring tokens:\n\n```\nfunction transfer( address to, uint value) returns (bool ok)\n```\n\nThe method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at *app/index.html*:\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\nThen we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to *app/js/index.js*:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n    $('#transfer button').click(function() {\n      var address = $('#transfer .address').val();\n      var num = $('#transfer .num').val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $('#transfer .result').html('Done!');\n      });\n    });\n  });\n});\n{% endcode_block %}\n\nLet’s go to the UI and transfer 20 tokens to a random address (try `0x00e13219655759df4f2c15e1fe0b949d43a3c45e`).\nAfter clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.\n\n![Screenshot](/assets/images/token_factory_1/page_2.png)\n\nWe transferred 20 tokens out of our account, let’s see if the balances reflect that.\n\n![Screenshot](/assets/images/token_factory_1/page_3.png)\n\n![Screenshot](/assets/images/token_factory_1/page_4.png)\n\nYou can even see in the Console a receipt of the transaction:\n\n![Screenshot](/assets/images/token_factory_1/page_5.png)\n\n\n## On to Part 2\n\nIn this tutorial we deployed and interacted with single Token. On [part 2](/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/) we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.\n\n","source":"_posts/2018-09-27-how-to-create-a-token-factory-with-embark-part-1.md","raw":"title: How to create a Token Factory with Ethereum — Part 1\nauthor: iuri_matias\nsummary: \"This is the first part of a series in which we'll explore how to build a token factory on Ethereum using Embark!\"\ncategories:\n  - tutorials\nalias:\n  - \"tutorials/token_factory_1.html\"\n  - \"news/2018/09/26/how-to-create-a-token-factory-with-embark-part-1/\"\nlayout: blog-post\n---\n\nIn this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFirst of all, make sure you have [Go-Ethereum](https://geth.ethereum.org/) and Embark installed.\n\n{% code_block copyBtn:true %}\n$ npm -g install embark\n{% endcode_block %}\n\nNow, let’s create a new dapp\n\n{% code_block copyBtn:true %}\n$ embark new TokenFactory\n{% endcode_block %}\n\n\nThis will create a directory called TokenFactory, cd to it and run:\n\n{% code_block copyBtn:true %}\n$ embark run\n{% endcode_block %}\n\nIn another console, in the same directory, run:\n\nYou should see something like this:\n\n![Dashboard Code](/assets/images/token_factory_1/dashboard.png)\n\nTo exit the dashboard you can type 'exit' in the console or press CTRL+C.\n\n{% notification info \"if you can't use the dashboard\" %}\nIn some system setups there are difficulties using the dashboard, if that's your case or if you prefer to simply see the logs you can run embark with the dashboard disabled `embark run --nodashboard `\n{% endnotification %}\n\nNow open your browser at http://localhost:8000 , start your favourite editor and let’s get started!\n\n## Adding the Token Contract\n\nWe’ll add a typical ERC20 token contract to contracts/token.sol\n\n*warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing*\n\n{% code_block copyBtn:true %}\npragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address => uint) _balances;\n    mapping(address => mapping( address => uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] > value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] < value);\n        require(_approvals[from][msg.sender] < value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b >= a);\n    }\n}\n{% endcode_block %}\n\nOnce added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:\n\n![Console](/assets/images/token_factory_1/console_1.png)\n\nWe haven't supplied any parameters to the contract and embark complains because the contract constructor takes a *initial_balance* parameter which we haven’t specified:\n\n```\nconstructor(uint initial_balance) public {\n    _balances[msg.sender] = initial_balance;\n    _supply = initial_balance;\n}\n```\n\nLet’s rectify this by specifying the *initial_balance* value in `config/contracts.js`\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  default: {\n    // .....\n    gas: \"auto\",\n    contracts: {\n      <mark id=\"code-3\" class=\"highlight-inline\">\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will detect the change and redeploy the contract with the new parameters.\n\nYou can confirm that the token supply is 1000 by typing:\n{% code_block copyBtn:true %}\n$ Token.methods._supply().call(console.log)\n{% endcode_block %}\n\n![Console](/assets/images/token_factory_1/console_2.png)\n\n## Creating the UI\n\nFor the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.\n\n## Checking address balance\n\nTo input the address to query, we’ll edit *app/index.html* and add a simple form.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\n**Adding jQuery**\n\nTo simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.\n\n{% code_block copyBtn:true %}\n$ npm install jquery@3 --save\n{% endcode_block %}\n\nNow edit the file *app/js/index.js* and add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\n{% endcode_block %}\n\n**Setting the default address**\n\nLet’s add to the input field field our own address as the default text so we can easily query our own balance. In the file *app/js/index.js* add:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n\n  });\n});\n{% endcode_block %}\n\nThis will get the address of the first account and set it as the default text in the input form.\n\n`EmbarkJS.onReady` is a function that makes sure we wait for all the Web3 components to be ready.\n\n**Querying Balance**\n\nTo query the balance, we can see the contract method signature to do this is:\n\n```\nfunction balanceOf( address who ) constant returns (uint value) {\n  return _balances[who];\n}\n```\n\nThis method will be available in the JS code automatically as a promise, like:\n\n{% code_block copyBtn:true %}\nimport Token from 'Embark/contracts/Token';\n\nToken.methods.balanceOf(address).call().then(function(balance) { });\n{% endcode_block %}\n\n\nSo we can simply add a click event to the button, get the address, query the balance and set the result.\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n  });\n});\n{% endcode_block %}\n\n\n![Screenshot](/assets/images/token_factory_1/page_1.png)\n\nNow go to http://localhost:8000 and click on the Query button, it will return 1000 as expected for our address.\n\n## Transferring Tokens\n\nNow let’s implement transferring tokens!\n\nNow checking the contract, this is the method for transferring tokens:\n\n```\nfunction transfer( address to, uint value) returns (bool ok)\n```\n\nThe method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at *app/index.html*:\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n  </body>\n</html>\n{% endcode_block %}\n\nThen we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to *app/js/index.js*:\n\n{% code_block copyBtn:true %}\nimport $ from 'jquery';\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport Token from 'Embark/contracts/Token';\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) => {\n    if (error) {\n      console.error('Error while connecting to web3', error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $('#queryBalance input').val(accounts[0]);\n    });\n    $('#queryBalance button').click(function() {\n      var address = $('#queryBalance input').val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $('#queryBalance .result').html(balance);\n      });\n    });\n    $('#transfer button').click(function() {\n      var address = $('#transfer .address').val();\n      var num = $('#transfer .num').val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $('#transfer .result').html('Done!');\n      });\n    });\n  });\n});\n{% endcode_block %}\n\nLet’s go to the UI and transfer 20 tokens to a random address (try `0x00e13219655759df4f2c15e1fe0b949d43a3c45e`).\nAfter clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.\n\n![Screenshot](/assets/images/token_factory_1/page_2.png)\n\nWe transferred 20 tokens out of our account, let’s see if the balances reflect that.\n\n![Screenshot](/assets/images/token_factory_1/page_3.png)\n\n![Screenshot](/assets/images/token_factory_1/page_4.png)\n\nYou can even see in the Console a receipt of the transaction:\n\n![Screenshot](/assets/images/token_factory_1/page_5.png)\n\n\n## On to Part 2\n\nIn this tutorial we deployed and interacted with single Token. On [part 2](/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/) we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.\n\n","slug":"how-to-create-a-token-factory-with-embark-part-1","published":1,"date":"2018-09-27T04:00:00.000Z","updated":"2020-01-19T20:56:52.649Z","_id":"ck5ijm3tr00247heg5aegaono","comments":1,"photos":[],"link":"","content":"<p>In this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>First of all, make sure you have <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Go-Ethereum</a> and Embark installed.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\">$ npm -g install embark</code></pre>\n\n\n<p>Now, let’s create a new dapp</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\">$ embark new TokenFactory</code></pre>\n\n\n\n<p>This will create a directory called TokenFactory, cd to it and run:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\">$ embark run</code></pre>\n\n\n<p>In another console, in the same directory, run:</p>\n<p>You should see something like this:</p>\n<p><img src=\"/assets/images/token_factory_1/dashboard.png\" alt=\"Dashboard Code\"></p>\n<p>To exit the dashboard you can type ‘exit’ in the console or press CTRL+C.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>if you can&#39;t use the dashboard</strong></p>\n  <p><p>In some system setups there are difficulties using the dashboard, if that’s your case or if you prefer to simply see the logs you can run embark with the dashboard disabled <code>embark run --nodashboard</code></p>\n</p>\n</div> \n\n\n\n<p>Now open your browser at <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> , start your favourite editor and let’s get started!</p>\n<h2 id=\"Adding-the-Token-Contract\"><a href=\"#Adding-the-Token-Contract\" class=\"headerlink\" title=\"Adding the Token Contract\"></a>Adding the Token Contract</h2><p>We’ll add a typical ERC20 token contract to contracts/token.sol</p>\n<p><em>warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing</em></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\">pragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address =&gt; uint) _balances;\n    mapping(address =&gt; mapping( address =&gt; uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] &gt; value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] &lt; value);\n        require(_approvals[from][msg.sender] &lt; value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b &gt;= a);\n    }\n}</code></pre>\n\n\n<p>Once added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:</p>\n<p><img src=\"/assets/images/token_factory_1/console_1.png\" alt=\"Console\"></p>\n<p>We haven’t supplied any parameters to the contract and embark complains because the contract constructor takes a <em>initial_balance</em> parameter which we haven’t specified:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">constructor(uint initial_balance) public &#123;</span><br><span class=\"line\">    _balances[msg.sender] &#x3D; initial_balance;</span><br><span class=\"line\">    _supply &#x3D; initial_balance;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s rectify this by specifying the <em>initial_balance</em> value in <code>config/contracts.js</code></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  default: {\n    // .....\n    gas: &quot;auto&quot;,\n    contracts: {\n      &lt;mark id=&quot;code-3&quot; class=&quot;highlight-inline&quot;&gt;\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will detect the change and redeploy the contract with the new parameters.</p>\n<p>You can confirm that the token supply is 1000 by typing:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\">$ Token.methods._supply().call(console.log)</code></pre>\n\n\n<p><img src=\"/assets/images/token_factory_1/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Creating-the-UI\"><a href=\"#Creating-the-UI\" class=\"headerlink\" title=\"Creating the UI\"></a>Creating the UI</h2><p>For the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.</p>\n<h2 id=\"Checking-address-balance\"><a href=\"#Checking-address-balance\" class=\"headerlink\" title=\"Checking address balance\"></a>Checking address balance</h2><p>To input the address to query, we’ll edit <em>app/index.html</em> and add a simple form.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p><strong>Adding jQuery</strong></p>\n<p>To simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\">$ npm install jquery@3 --save</code></pre>\n\n\n<p>Now edit the file <em>app/js/index.js</em> and add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;</code></pre>\n\n\n<p><strong>Setting the default address</strong></p>\n<p>Let’s add to the input field field our own address as the default text so we can easily query our own balance. In the file <em>app/js/index.js</em> add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n\n  });\n});</code></pre>\n\n\n<p>This will get the address of the first account and set it as the default text in the input form.</p>\n<p><code>EmbarkJS.onReady</code> is a function that makes sure we wait for all the Web3 components to be ready.</p>\n<p><strong>Querying Balance</strong></p>\n<p>To query the balance, we can see the contract method signature to do this is:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function balanceOf( address who ) constant returns (uint value) &#123;</span><br><span class=\"line\">  return _balances[who];</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This method will be available in the JS code automatically as a promise, like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\">import Token from &#39;Embark/contracts/Token&#39;;\n\nToken.methods.balanceOf(address).call().then(function(balance) { });</code></pre>\n\n\n\n<p>So we can simply add a click event to the button, get the address, query the balance and set the result.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n  });\n});</code></pre>\n\n\n\n<p><img src=\"/assets/images/token_factory_1/page_1.png\" alt=\"Screenshot\"></p>\n<p>Now go to <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> and click on the Query button, it will return 1000 as expected for our address.</p>\n<h2 id=\"Transferring-Tokens\"><a href=\"#Transferring-Tokens\" class=\"headerlink\" title=\"Transferring Tokens\"></a>Transferring Tokens</h2><p>Now let’s implement transferring tokens!</p>\n<p>Now checking the contract, this is the method for transferring tokens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function transfer( address to, uint value) returns (bool ok)</span><br></pre></td></tr></table></figure>\n\n<p>The method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at <em>app/index.html</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Then we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to <em>app/js/index.js</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n    $(&#39;#transfer button&#39;).click(function() {\n      var address = $(&#39;#transfer .address&#39;).val();\n      var num = $(&#39;#transfer .num&#39;).val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n      });\n    });\n  });\n});</code></pre>\n\n\n<p>Let’s go to the UI and transfer 20 tokens to a random address (try <code>0x00e13219655759df4f2c15e1fe0b949d43a3c45e</code>).<br>After clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.</p>\n<p><img src=\"/assets/images/token_factory_1/page_2.png\" alt=\"Screenshot\"></p>\n<p>We transferred 20 tokens out of our account, let’s see if the balances reflect that.</p>\n<p><img src=\"/assets/images/token_factory_1/page_3.png\" alt=\"Screenshot\"></p>\n<p><img src=\"/assets/images/token_factory_1/page_4.png\" alt=\"Screenshot\"></p>\n<p>You can even see in the Console a receipt of the transaction:</p>\n<p><img src=\"/assets/images/token_factory_1/page_5.png\" alt=\"Screenshot\"></p>\n<h2 id=\"On-to-Part-2\"><a href=\"#On-to-Part-2\" class=\"headerlink\" title=\"On to Part 2\"></a>On to Part 2</h2><p>In this tutorial we deployed and interacted with single Token. On <a href=\"/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/\">part 2</a> we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In this tutorial series we’ll create a Token Factory using Ethereum. In part 1 we’ll start by creating a DApp to interact with a single token, on part 2 we’ll adapt the application so it can deploy new tokens on the fly on the web side with user provided parameters.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>First of all, make sure you have <a href=\"https://geth.ethereum.org/\" target=\"_blank\" rel=\"noopener\">Go-Ethereum</a> and Embark installed.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cca6c20-3afe-11ea-a3a6-1d06fd04399b\">$ npm -g install embark</code></pre>\n\n\n<p>Now, let’s create a new dapp</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e0-3afe-11ea-a3a6-1d06fd04399b\">$ embark new TokenFactory</code></pre>\n\n\n\n<p>This will create a directory called TokenFactory, cd to it and run:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf7530-3afe-11ea-a3a6-1d06fd04399b\">$ embark run</code></pre>\n\n\n<p>In another console, in the same directory, run:</p>\n<p>You should see something like this:</p>\n<p><img src=\"/assets/images/token_factory_1/dashboard.png\" alt=\"Dashboard Code\"></p>\n<p>To exit the dashboard you can type ‘exit’ in the console or press CTRL+C.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>if you can&#39;t use the dashboard</strong></p>\n  <p><p>In some system setups there are difficulties using the dashboard, if that’s your case or if you prefer to simply see the logs you can run embark with the dashboard disabled <code>embark run --nodashboard</code></p>\n</p>\n</div> \n\n\n\n<p>Now open your browser at <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> , start your favourite editor and let’s get started!</p>\n<h2 id=\"Adding-the-Token-Contract\"><a href=\"#Adding-the-Token-Contract\" class=\"headerlink\" title=\"Adding the Token Contract\"></a>Adding the Token Contract</h2><p>We’ll add a typical ERC20 token contract to contracts/token.sol</p>\n<p><em>warning: this contract is for educational purposes only, do not use it in production unless you know what you are doing</em></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccfea60-3afe-11ea-a3a6-1d06fd04399b\">pragma solidity ^0.4.23;\n\ncontract Token {\n\n    event Transfer(address indexed from, address indexed to, uint value);\n    event Approval(address indexed owner, address indexed spender, uint value);\n\n    mapping(address =&gt; uint) _balances;\n    mapping(address =&gt; mapping( address =&gt; uint )) _approvals;\n    uint public _supply;\n\n    constructor(uint initial_balance) public {\n        _balances[msg.sender] = initial_balance;\n        _supply = initial_balance;\n    }\n\n    function totalSupply() public view returns (uint supply) {\n        return _supply;\n    }\n\n    function balanceOf(address who) public view returns (uint value) {\n        return _balances[who];\n    }\n\n    function transfer(address to, uint value) public returns (bool ok) {\n        require(_balances[msg.sender] &gt; value);\n        require(safeToAdd(_balances[to], value));\n        _balances[msg.sender] -= value;\n        _balances[to] += value;\n        emit Transfer(msg.sender,to,value);\n        return true;\n    }\n\n    function transferFrom(address from, address to, uint value) public returns (bool ok) {\n        require(_balances[from] &lt; value);\n        require(_approvals[from][msg.sender] &lt; value);\n        require(safeToAdd(_balances[to], value));\n        _approvals[from][msg.sender] -= value;\n        _balances[from] -= value;\n        _balances[to] += value;\n        emit Transfer(from, to, value);\n        return true;\n    }\n\n    function approve(address spender, uint value) public returns (bool ok) {\n        _approvals[msg.sender][spender] = value;\n        emit Approval(msg.sender, spender, value);\n        return true;\n    }\n\n    function allowance(address owner, address spender) public view returns (uint _allowance) {\n        return _approvals[owner][spender];\n    }\n\n    function safeToAdd(uint a, uint b) internal pure returns (bool) {\n        return (a + b &gt;= a);\n    }\n}</code></pre>\n\n\n<p>Once added, Embark will automatically detect the new file and deploy the contract. However we quickly notice a problem, in Embark’s we see:</p>\n<p><img src=\"/assets/images/token_factory_1/console_1.png\" alt=\"Console\"></p>\n<p>We haven’t supplied any parameters to the contract and embark complains because the contract constructor takes a <em>initial_balance</em> parameter which we haven’t specified:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">constructor(uint initial_balance) public &#123;</span><br><span class=\"line\">    _balances[msg.sender] &#x3D; initial_balance;</span><br><span class=\"line\">    _supply &#x3D; initial_balance;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Let’s rectify this by specifying the <em>initial_balance</em> value in <code>config/contracts.js</code></p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01171-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  default: {\n    // .....\n    gas: &quot;auto&quot;,\n    contracts: {\n      &lt;mark id=&quot;code-3&quot; class=&quot;highlight-inline&quot;&gt;\n      Token: {\n        args: {\n          initial_balance: 1000\n        }\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will detect the change and redeploy the contract with the new parameters.</p>\n<p>You can confirm that the token supply is 1000 by typing:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01173-3afe-11ea-a3a6-1d06fd04399b\">$ Token.methods._supply().call(console.log)</code></pre>\n\n\n<p><img src=\"/assets/images/token_factory_1/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Creating-the-UI\"><a href=\"#Creating-the-UI\" class=\"headerlink\" title=\"Creating the UI\"></a>Creating the UI</h2><p>For the sake of brevity, we wouldn’t implement every single functionality in the contract. However, we’ll implement two important features: Checking balance of an address and Transferring Tokens from one address to another.</p>\n<h2 id=\"Checking-address-balance\"><a href=\"#Checking-address-balance\" class=\"headerlink\" title=\"Checking address balance\"></a>Checking address balance</h2><p>To input the address to query, we’ll edit <em>app/index.html</em> and add a simple form.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03880-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p><strong>Adding jQuery</strong></p>\n<p>To simplify the code a bit in this tutorial, we’ll add the jQuery library to our DApp.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd03881-3afe-11ea-a3a6-1d06fd04399b\">$ npm install jquery@3 --save</code></pre>\n\n\n<p>Now edit the file <em>app/js/index.js</em> and add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f90-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;</code></pre>\n\n\n<p><strong>Setting the default address</strong></p>\n<p>Let’s add to the input field field our own address as the default text so we can easily query our own balance. In the file <em>app/js/index.js</em> add:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f91-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n\n  });\n});</code></pre>\n\n\n<p>This will get the address of the first account and set it as the default text in the input form.</p>\n<p><code>EmbarkJS.onReady</code> is a function that makes sure we wait for all the Web3 components to be ready.</p>\n<p><strong>Querying Balance</strong></p>\n<p>To query the balance, we can see the contract method signature to do this is:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function balanceOf( address who ) constant returns (uint value) &#123;</span><br><span class=\"line\">  return _balances[who];</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This method will be available in the JS code automatically as a promise, like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f92-3afe-11ea-a3a6-1d06fd04399b\">import Token from &#39;Embark/contracts/Token&#39;;\n\nToken.methods.balanceOf(address).call().then(function(balance) { });</code></pre>\n\n\n\n<p>So we can simply add a click event to the button, get the address, query the balance and set the result.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f93-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n  });\n});</code></pre>\n\n\n\n<p><img src=\"/assets/images/token_factory_1/page_1.png\" alt=\"Screenshot\"></p>\n<p>Now go to <a href=\"http://localhost:8000\" target=\"_blank\" rel=\"noopener\">http://localhost:8000</a> and click on the Query button, it will return 1000 as expected for our address.</p>\n<h2 id=\"Transferring-Tokens\"><a href=\"#Transferring-Tokens\" class=\"headerlink\" title=\"Transferring Tokens\"></a>Transferring Tokens</h2><p>Now let’s implement transferring tokens!</p>\n<p>Now checking the contract, this is the method for transferring tokens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function transfer( address to, uint value) returns (bool ok)</span><br></pre></td></tr></table></figure>\n\n<p>The method will take two parameters, an address and a value. Like in the previous step, let’s first add a simple form to the html page at <em>app/index.html</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f94-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Then we will add the code to take the address and number of tokens from the inputs and call the contracts transfer method to <em>app/js/index.js</em>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd05f95-3afe-11ea-a3a6-1d06fd04399b\">import $ from &#39;jquery&#39;;\nimport EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\n$(document).ready(function() {\n  EmbarkJS.onReady((error) =&gt; {\n    if (error) {\n      console.error(&#39;Error while connecting to web3&#39;, error);\n      return;\n    }\n    web3.eth.getAccounts(function(err, accounts) {\n      $(&#39;#queryBalance input&#39;).val(accounts[0]);\n    });\n    $(&#39;#queryBalance button&#39;).click(function() {\n      var address = $(&#39;#queryBalance input&#39;).val();\n      Token.methods.balanceOf(address).call().then(function(balance) {\n        $(&#39;#queryBalance .result&#39;).html(balance);\n      });\n    });\n    $(&#39;#transfer button&#39;).click(function() {\n      var address = $(&#39;#transfer .address&#39;).val();\n      var num = $(&#39;#transfer .num&#39;).val();\n\n      Token.methods.transfer(address, num).send().then(function() {\n        $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n      });\n    });\n  });\n});</code></pre>\n\n\n<p>Let’s go to the UI and transfer 20 tokens to a random address (try <code>0x00e13219655759df4f2c15e1fe0b949d43a3c45e</code>).<br>After clicking Transfer you should see the text ‘Done!’ when the transfer takes effect.</p>\n<p><img src=\"/assets/images/token_factory_1/page_2.png\" alt=\"Screenshot\"></p>\n<p>We transferred 20 tokens out of our account, let’s see if the balances reflect that.</p>\n<p><img src=\"/assets/images/token_factory_1/page_3.png\" alt=\"Screenshot\"></p>\n<p><img src=\"/assets/images/token_factory_1/page_4.png\" alt=\"Screenshot\"></p>\n<p>You can even see in the Console a receipt of the transaction:</p>\n<p><img src=\"/assets/images/token_factory_1/page_5.png\" alt=\"Screenshot\"></p>\n<h2 id=\"On-to-Part-2\"><a href=\"#On-to-Part-2\" class=\"headerlink\" title=\"On to Part 2\"></a>On to Part 2</h2><p>In this tutorial we deployed and interacted with single Token. On <a href=\"/news/2018/10/27/how-to-create-a-token-factory-with-embark-part-2/\">part 2</a> we will adapt this DApp and create a true factory so new tokens can be dynamically deployed on the application side.</p>\n"},{"title":"How to create a Token Factory with Ethereum — Part 2","author":"iuri_matias","summary":"In this second part, we'll continue where we left off in part one, on building a token factory with Embark and focus on how to deploy new tokens.","alias":["tutorials/token_factory_2.html","/news/2018/10/26/how-to-create-a-token-factory-with-embark-part-2/"],"layout":"blog-post","_content":"\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFor the second part of the tutorial, Embark 3.0 or higher is required.\n\nIf you are using an older version you can update with:\n\n{% code_block copyBtn:true %}\n$ npm install -g embark@3\n{% endcode_block %}\n\nAfterwards make sure that `embark version` returns 3.0 then restart embark with `embark run`\n\n## Generalizing Token Interaction\n\nWe’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.\n\nFirst, we’ll add a simple form to *app/index.html* to get address of the token we wish to interact with.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nIn *app/js/index.js* we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use *currentToken* instead of *Token*. This way the existing code will work with the token we will be loading.\n\n{% code_block copyBtn:true %}\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport $ from 'jquery';\nimport Token from 'Embark/contracts/Token';\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nNow you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.\n\n![Console](/assets/images/token_factory_2/console_1.png)\n\nI can see the address of the deployed token in my case is *0x0703da89fc6c3ff20b8787a23d3340b41258dba7*. Copy paste your equivalent address into the UI.\n\n{% notification info 'Copying the address' %}\n*There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click->copy.*\n{% endnotification %}\n\n![Screenshot](/assets/images/token_factory_2/page_1.png)\n\nAfter copying the address, click “Use this Token’, and let’s see the balance.\n\n![Screenshot](/assets/images/token_factory_2/page_2.png)\n\nIt’s *980* as expected (*1000* was the initial supply as configured in *config/contracts.json* and *20* was transferred out in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/)\n\n## Deploy New Tokens on the fly\n\nNow that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.\n\nFirst we’ll add a simple form to *app/index.html* to get the desired supply of the new token to deploy.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"deployToken\">\n      <h3>Deploy new Token</h3>\n      <input placeholder=\"enter token supply\" />\n      <button>Deploy</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nEmbark makes the contract objects available in the js side, each contract object will have a method called *deploy* that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.\n\nIn *app/js/index.js* we’ll add the code to deploy new tokens client side using this functionality:\n\n{% code_block copyBtn:true %}\n$(document).ready(function() {\n\n  var currentToken;\n  $(\"#deployToken button\").click(function() {\n    var supply = $('#deployToken input').val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(\"#deployToken .result\").append(\"<br>Token deployed with address: \" + deployedToken.options.address);\n    });\n  });\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nWhen the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with `Token.methods.deploy([supply])`.\nThe resulting promise `.then(function(deployedToken) {})` will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one *currentToken* and also inform the user of the address;\n\nSo let’s try this out! Entering the supply as 500 and clicking Deploy:\n\n![Screenshot](/assets/images/token_factory_2/page_3.png)\n\nPerfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.\n\n![Screenshot](/assets/images/token_factory_2/page_4.png)\n\nIt returns *500* as expected! Let’s deploy another token with a different supply and check Query balance again\n\n![Screenshot](/assets/images/token_factory_2/page_5.png)\n\nAfter deploying a new token with the supply at *200*, clicking query is also returning *200* as expected.\n\nLet’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.\nEach time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.\n\n![Screenshot](/assets/images/token_factory_2/page_6.png)\n\nNow checking the balance again:\n\n![Screenshot](/assets/images/token_factory_2/page_7.png)\n\nAnd it’s *500* as expected since that’s the initial supply defined for the first token deployed.\n\n## Disabling the Token Deploy from Embarks side\n\nNow that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/), however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set \"deploy\": false for that contract\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  \"default\": {\n    // .....\n    \"gas\": \"auto\",\n    \"contracts\": {\n      \"Token\": {\n        \"deploy\": false,\n        \"args\": [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will now no longer deploy that contract, in the dashboard you should see:\n\n![Console](/assets/images/token_factory_2/console_2.png)\n\n## Conclusion\n\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.\n","source":"_posts/2018-10-27-how-to-create-a-token-factory-with-embark-part-2.md","raw":"title: How to create a Token Factory with Ethereum — Part 2\nauthor: iuri_matias\nsummary: \"In this second part, we'll continue where we left off in part one, on building a token factory with Embark and focus on how to deploy new tokens.\"\ncategories:\n  - tutorials\nalias:\n  - \"tutorials/token_factory_2.html\"\n  - \"/news/2018/10/26/how-to-create-a-token-factory-with-embark-part-2/\"\nlayout: blog-post\n---\n\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.\n\nA Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…\n\n## Getting Started\n\nFor the second part of the tutorial, Embark 3.0 or higher is required.\n\nIf you are using an older version you can update with:\n\n{% code_block copyBtn:true %}\n$ npm install -g embark@3\n{% endcode_block %}\n\nAfterwards make sure that `embark version` returns 3.0 then restart embark with `embark run`\n\n## Generalizing Token Interaction\n\nWe’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.\n\nFirst, we’ll add a simple form to *app/index.html* to get address of the token we wish to interact with.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nIn *app/js/index.js* we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use *currentToken* instead of *Token*. This way the existing code will work with the token we will be loading.\n\n{% code_block copyBtn:true %}\nimport EmbarkJS from 'Embark/EmbarkJS';\nimport $ from 'jquery';\nimport Token from 'Embark/contracts/Token';\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nNow you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.\n\n![Console](/assets/images/token_factory_2/console_1.png)\n\nI can see the address of the deployed token in my case is *0x0703da89fc6c3ff20b8787a23d3340b41258dba7*. Copy paste your equivalent address into the UI.\n\n{% notification info 'Copying the address' %}\n*There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click->copy.*\n{% endnotification %}\n\n![Screenshot](/assets/images/token_factory_2/page_1.png)\n\nAfter copying the address, click “Use this Token’, and let’s see the balance.\n\n![Screenshot](/assets/images/token_factory_2/page_2.png)\n\nIt’s *980* as expected (*1000* was the initial supply as configured in *config/contracts.json* and *20* was transferred out in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/)\n\n## Deploy New Tokens on the fly\n\nNow that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.\n\nFirst we’ll add a simple form to *app/index.html* to get the desired supply of the new token to deploy.\n\n{% code_block copyBtn:true %}\n<html>\n  <head>\n    <title>Embark</title>\n    <link rel=\"stylesheet\" href=\"css/app.css\">\n    <script src=\"js/app.js\"></script>\n  </head>\n  <body>\n    <h3>Welcome to Embark!</h3>\n    <p>See the <a href=\"https://github.com/iurimatias/embarklabs/wiki\">Wiki</a> to see what you can do with Embark!</p>\n    <div id=\"deployToken\">\n      <h3>Deploy new Token</h3>\n      <input placeholder=\"enter token supply\" />\n      <button>Deploy</button>\n      <div class=\"result\"></div>\n    </div>\n    <div id=\"useToken\">\n      <h3>Token Address</h3>\n      <input placeholder=\"enter token address\" />\n      <button>Use this Token</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"queryBalance\">\n      <h3>Query Balance</h3>\n      <input placeholder=\"enter account address: e.g 0x123\" />\n      <button>Query</button>\n      <div class=\"result\"></div>\n    </div>\n\n    <div id=\"transfer\">\n      <h3>Transfer Tokens</h3>\n      <input class=\"address\" placeholder=\"enter account address: e.g 0x123\" />\n      <input class=\"num\" placeholder=\"enter amount to transfer\" />\n      <button>Transfer</button>\n      <div class=\"result\"></div>\n    </div>\n\n  </body>\n</html>\n{% endcode_block %}\n\nEmbark makes the contract objects available in the js side, each contract object will have a method called *deploy* that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.\n\nIn *app/js/index.js* we’ll add the code to deploy new tokens client side using this functionality:\n\n{% code_block copyBtn:true %}\n$(document).ready(function() {\n\n  var currentToken;\n  $(\"#deployToken button\").click(function() {\n    var supply = $('#deployToken input').val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(\"#deployToken .result\").append(\"<br>Token deployed with address: \" + deployedToken.options.address);\n    });\n  });\n  $(\"#useToken button\").click(function() {\n    var address = $('#useToken input').val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $('#queryBalance input').val(accounts[0]);\n  });\n\n  $('#queryBalance button').click(function() {\n    var address = $('#queryBalance input').val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $('#queryBalance .result').html(balance.toString());\n    });\n  });\n\n  $('#transfer button').click(function() {\n    var address = $('#transfer .address').val();\n    var num = $('#transfer .num').val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $('#transfer .result').html('Done!');\n    });;\n  });\n\n});\n{% endcode_block %}\n\nWhen the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with `Token.methods.deploy([supply])`.\nThe resulting promise `.then(function(deployedToken) {})` will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one *currentToken* and also inform the user of the address;\n\nSo let’s try this out! Entering the supply as 500 and clicking Deploy:\n\n![Screenshot](/assets/images/token_factory_2/page_3.png)\n\nPerfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.\n\n![Screenshot](/assets/images/token_factory_2/page_4.png)\n\nIt returns *500* as expected! Let’s deploy another token with a different supply and check Query balance again\n\n![Screenshot](/assets/images/token_factory_2/page_5.png)\n\nAfter deploying a new token with the supply at *200*, clicking query is also returning *200* as expected.\n\nLet’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.\nEach time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.\n\n![Screenshot](/assets/images/token_factory_2/page_6.png)\n\nNow checking the balance again:\n\n![Screenshot](/assets/images/token_factory_2/page_7.png)\n\nAnd it’s *500* as expected since that’s the initial supply defined for the first token deployed.\n\n## Disabling the Token Deploy from Embarks side\n\nNow that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/), however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set \"deploy\": false for that contract\n\n{% code_block copyBtn:true %}\nmodule.exports = {\n  \"default\": {\n    // .....\n    \"gas\": \"auto\",\n    \"contracts\": {\n      \"Token\": {\n        \"deploy\": false,\n        \"args\": [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}\n{% endcode_block %}\n\nEmbark will now no longer deploy that contract, in the dashboard you should see:\n\n![Console](/assets/images/token_factory_2/console_2.png)\n\n## Conclusion\n\nIn [part 1](/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/) we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.\n","slug":"how-to-create-a-token-factory-with-embark-part-2","published":1,"date":"2018-10-27T04:00:00.000Z","updated":"2020-01-19T20:56:52.649Z","_id":"ck5ijm3tt00267hegay9k9guq","comments":1,"photos":[],"link":"","content":"<p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>For the second part of the tutorial, Embark 3.0 or higher is required.</p>\n<p>If you are using an older version you can update with:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\">$ npm install -g embark@3</code></pre>\n\n\n<p>Afterwards make sure that <code>embark version</code> returns 3.0 then restart embark with <code>embark run</code></p>\n<h2 id=\"Generalizing-Token-Interaction\"><a href=\"#Generalizing-Token-Interaction\" class=\"headerlink\" title=\"Generalizing Token Interaction\"></a>Generalizing Token Interaction</h2><p>We’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.</p>\n<p>First, we’ll add a simple form to <em>app/index.html</em> to get address of the token we wish to interact with.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>In <em>app/js/index.js</em> we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use <em>currentToken</em> instead of <em>Token</em>. This way the existing code will work with the token we will be loading.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\">import EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport $ from &#39;jquery&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>Now you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.</p>\n<p><img src=\"/assets/images/token_factory_2/console_1.png\" alt=\"Console\"></p>\n<p>I can see the address of the deployed token in my case is <em>0x0703da89fc6c3ff20b8787a23d3340b41258dba7</em>. Copy paste your equivalent address into the UI.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Copying the address</strong></p>\n  <p><p><em>There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click-&gt;copy.</em></p>\n</p>\n</div> \n\n\n\n<p><img src=\"/assets/images/token_factory_2/page_1.png\" alt=\"Screenshot\"></p>\n<p>After copying the address, click “Use this Token’, and let’s see the balance.</p>\n<p><img src=\"/assets/images/token_factory_2/page_2.png\" alt=\"Screenshot\"></p>\n<p>It’s <em>980</em> as expected (<em>1000</em> was the initial supply as configured in <em>config/contracts.json</em> and <em>20</em> was transferred out in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a></p>\n<h2 id=\"Deploy-New-Tokens-on-the-fly\"><a href=\"#Deploy-New-Tokens-on-the-fly\" class=\"headerlink\" title=\"Deploy New Tokens on the fly\"></a>Deploy New Tokens on the fly</h2><p>Now that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.</p>\n<p>First we’ll add a simple form to <em>app/index.html</em> to get the desired supply of the new token to deploy.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;deployToken&quot;&gt;\n      &lt;h3&gt;Deploy new Token&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token supply&quot; /&gt;\n      &lt;button&gt;Deploy&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Embark makes the contract objects available in the js side, each contract object will have a method called <em>deploy</em> that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.</p>\n<p>In <em>app/js/index.js</em> we’ll add the code to deploy new tokens client side using this functionality:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\">$(document).ready(function() {\n\n  var currentToken;\n  $(&quot;#deployToken button&quot;).click(function() {\n    var supply = $(&#39;#deployToken input&#39;).val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(&quot;#deployToken .result&quot;).append(&quot;&lt;br&gt;Token deployed with address: &quot; + deployedToken.options.address);\n    });\n  });\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>When the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with <code>Token.methods.deploy([supply])</code>.<br>The resulting promise <code>.then(function(deployedToken) {})</code> will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one <em>currentToken</em> and also inform the user of the address;</p>\n<p>So let’s try this out! Entering the supply as 500 and clicking Deploy:</p>\n<p><img src=\"/assets/images/token_factory_2/page_3.png\" alt=\"Screenshot\"></p>\n<p>Perfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_4.png\" alt=\"Screenshot\"></p>\n<p>It returns <em>500</em> as expected! Let’s deploy another token with a different supply and check Query balance again</p>\n<p><img src=\"/assets/images/token_factory_2/page_5.png\" alt=\"Screenshot\"></p>\n<p>After deploying a new token with the supply at <em>200</em>, clicking query is also returning <em>200</em> as expected.</p>\n<p>Let’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.<br>Each time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_6.png\" alt=\"Screenshot\"></p>\n<p>Now checking the balance again:</p>\n<p><img src=\"/assets/images/token_factory_2/page_7.png\" alt=\"Screenshot\"></p>\n<p>And it’s <em>500</em> as expected since that’s the initial supply defined for the first token deployed.</p>\n<h2 id=\"Disabling-the-Token-Deploy-from-Embarks-side\"><a href=\"#Disabling-the-Token-Deploy-from-Embarks-side\" class=\"headerlink\" title=\"Disabling the Token Deploy from Embarks side\"></a>Disabling the Token Deploy from Embarks side</h2><p>Now that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a>, however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set “deploy”: false for that contract</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  &quot;default&quot;: {\n    // .....\n    &quot;gas&quot;: &quot;auto&quot;,\n    &quot;contracts&quot;: {\n      &quot;Token&quot;: {\n        &quot;deploy&quot;: false,\n        &quot;args&quot;: [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will now no longer deploy that contract, in the dashboard you should see:</p>\n<p><img src=\"/assets/images/token_factory_2/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.</p>\n<p>A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc…</p>\n<h2 id=\"Getting-Started\"><a href=\"#Getting-Started\" class=\"headerlink\" title=\"Getting Started\"></a>Getting Started</h2><p>For the second part of the tutorial, Embark 3.0 or higher is required.</p>\n<p>If you are using an older version you can update with:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccb2f70-3afe-11ea-a3a6-1d06fd04399b\">$ npm install -g embark@3</code></pre>\n\n\n<p>Afterwards make sure that <code>embark version</code> returns 3.0 then restart embark with <code>embark run</code></p>\n<h2 id=\"Generalizing-Token-Interaction\"><a href=\"#Generalizing-Token-Interaction\" class=\"headerlink\" title=\"Generalizing Token Interaction\"></a>Generalizing Token Interaction</h2><p>We’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it.</p>\n<p>First, we’ll add a simple form to <em>app/index.html</em> to get address of the token we wish to interact with.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cceb1e1-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>In <em>app/js/index.js</em> we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use <em>currentToken</em> instead of <em>Token</em>. This way the existing code will work with the token we will be loading.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4ccf9c40-3afe-11ea-a3a6-1d06fd04399b\">import EmbarkJS from &#39;Embark/EmbarkJS&#39;;\nimport $ from &#39;jquery&#39;;\nimport Token from &#39;Embark/contracts/Token&#39;;\n\nlet currentToken;\n\n$(document).ready(function() {\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).call().then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).send().then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>Now you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard.</p>\n<p><img src=\"/assets/images/token_factory_2/console_1.png\" alt=\"Console\"></p>\n<p>I can see the address of the deployed token in my case is <em>0x0703da89fc6c3ff20b8787a23d3340b41258dba7</em>. Copy paste your equivalent address into the UI.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>Copying the address</strong></p>\n  <p><p><em>There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click-&gt;copy.</em></p>\n</p>\n</div> \n\n\n\n<p><img src=\"/assets/images/token_factory_2/page_1.png\" alt=\"Screenshot\"></p>\n<p>After copying the address, click “Use this Token’, and let’s see the balance.</p>\n<p><img src=\"/assets/images/token_factory_2/page_2.png\" alt=\"Screenshot\"></p>\n<p>It’s <em>980</em> as expected (<em>1000</em> was the initial supply as configured in <em>config/contracts.json</em> and <em>20</em> was transferred out in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a></p>\n<h2 id=\"Deploy-New-Tokens-on-the-fly\"><a href=\"#Deploy-New-Tokens-on-the-fly\" class=\"headerlink\" title=\"Deploy New Tokens on the fly\"></a>Deploy New Tokens on the fly</h2><p>Now that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply.</p>\n<p>First we’ll add a simple form to <em>app/index.html</em> to get the desired supply of the new token to deploy.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01170-3afe-11ea-a3a6-1d06fd04399b\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Embark&lt;/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/app.css&quot;&gt;\n    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;h3&gt;Welcome to Embark!&lt;/h3&gt;\n    &lt;p&gt;See the &lt;a href=&quot;https://github.com/iurimatias/embarklabs/wiki&quot;&gt;Wiki&lt;/a&gt; to see what you can do with Embark!&lt;/p&gt;\n    &lt;div id=&quot;deployToken&quot;&gt;\n      &lt;h3&gt;Deploy new Token&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token supply&quot; /&gt;\n      &lt;button&gt;Deploy&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id=&quot;useToken&quot;&gt;\n      &lt;h3&gt;Token Address&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter token address&quot; /&gt;\n      &lt;button&gt;Use this Token&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;queryBalance&quot;&gt;\n      &lt;h3&gt;Query Balance&lt;/h3&gt;\n      &lt;input placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;button&gt;Query&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n    &lt;div id=&quot;transfer&quot;&gt;\n      &lt;h3&gt;Transfer Tokens&lt;/h3&gt;\n      &lt;input class=&quot;address&quot; placeholder=&quot;enter account address: e.g 0x123&quot; /&gt;\n      &lt;input class=&quot;num&quot; placeholder=&quot;enter amount to transfer&quot; /&gt;\n      &lt;button&gt;Transfer&lt;/button&gt;\n      &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n\n\n<p>Embark makes the contract objects available in the js side, each contract object will have a method called <em>deploy</em> that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.</p>\n<p>In <em>app/js/index.js</em> we’ll add the code to deploy new tokens client side using this functionality:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01172-3afe-11ea-a3a6-1d06fd04399b\">$(document).ready(function() {\n\n  var currentToken;\n  $(&quot;#deployToken button&quot;).click(function() {\n    var supply = $(&#39;#deployToken input&#39;).val();\n    Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {\n      currentToken = deployedToken;\n      $(&quot;#deployToken .result&quot;).append(&quot;&lt;br&gt;Token deployed with address: &quot; + deployedToken.options.address);\n    });\n  });\n  $(&quot;#useToken button&quot;).click(function() {\n    var address = $(&#39;#useToken input&#39;).val();\n    currentToken = new EmbarkJS.Contract({\n      abi: Token.options.jsonInterface,\n      address: address\n    });\n  });\n\n  web3.eth.getAccounts(function(err, accounts) {\n    $(&#39;#queryBalance input&#39;).val(accounts[0]);\n  });\n\n  $(&#39;#queryBalance button&#39;).click(function() {\n    var address = $(&#39;#queryBalance input&#39;).val();\n    currentToken.methods.balanceOf(address).then(function(balance) {\n      $(&#39;#queryBalance .result&#39;).html(balance.toString());\n    });\n  });\n\n  $(&#39;#transfer button&#39;).click(function() {\n    var address = $(&#39;#transfer .address&#39;).val();\n    var num = $(&#39;#transfer .num&#39;).val();\n    currentToken.methods.transfer(address, num).then(function() {\n      $(&#39;#transfer .result&#39;).html(&#39;Done!&#39;);\n    });;\n  });\n\n});</code></pre>\n\n\n<p>When the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with <code>Token.methods.deploy([supply])</code>.<br>The resulting promise <code>.then(function(deployedToken) {})</code> will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one <em>currentToken</em> and also inform the user of the address;</p>\n<p>So let’s try this out! Entering the supply as 500 and clicking Deploy:</p>\n<p><img src=\"/assets/images/token_factory_2/page_3.png\" alt=\"Screenshot\"></p>\n<p>Perfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_4.png\" alt=\"Screenshot\"></p>\n<p>It returns <em>500</em> as expected! Let’s deploy another token with a different supply and check Query balance again</p>\n<p><img src=\"/assets/images/token_factory_2/page_5.png\" alt=\"Screenshot\"></p>\n<p>After deploying a new token with the supply at <em>200</em>, clicking query is also returning <em>200</em> as expected.</p>\n<p>Let’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.<br>Each time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token.</p>\n<p><img src=\"/assets/images/token_factory_2/page_6.png\" alt=\"Screenshot\"></p>\n<p>Now checking the balance again:</p>\n<p><img src=\"/assets/images/token_factory_2/page_7.png\" alt=\"Screenshot\"></p>\n<p>And it’s <em>500</em> as expected since that’s the initial supply defined for the first token deployed.</p>\n<h2 id=\"Disabling-the-Token-Deploy-from-Embarks-side\"><a href=\"#Disabling-the-Token-Deploy-from-Embarks-side\" class=\"headerlink\" title=\"Disabling the Token Deploy from Embarks side\"></a>Disabling the Token Deploy from Embarks side</h2><p>Now that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a>, however you still need Embark to make the Token contract available on the client side.  To achieve this, go to config/contracts.js and set “deploy”: false for that contract</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-4cd01174-3afe-11ea-a3a6-1d06fd04399b\">module.exports = {\n  &quot;default&quot;: {\n    // .....\n    &quot;gas&quot;: &quot;auto&quot;,\n    &quot;contracts&quot;: {\n      &quot;Token&quot;: {\n        &quot;deploy&quot;: false,\n        &quot;args&quot;: [\n          1000\n        ]\n      }\n    }\n    // .....\n  }\n}</code></pre>\n\n\n<p>Embark will now no longer deploy that contract, in the dashboard you should see:</p>\n<p><img src=\"/assets/images/token_factory_2/console_2.png\" alt=\"Console\"></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>In <a href=\"/news/2018/09/27/how-to-create-a-token-factory-with-embark-part-1/\">part 1</a> we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly.</p>\n"},{"title":"Building Smart Contract only DApps with Embark","author":"pascal_precht","summary":"In this article we're going to explore how to build applications with Embark that focus purely on Smart Contract development. Read on!","layout":"blog-post","alias":"news/2019/01/22/building-smart-contract-only-dapps/","_content":"\nBuilding decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.\n\nEmbark enables us to implement either of those scenarios and in this article we're going to explore how to build a decentralized applications where Smart Contracts are the primary focus.\n\n## Creating a Smart Contracts only application\n\nBefore we get started, let's make sure that Embark's command line tool is actually installed. Running `embark --version` inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn't exist.\n\nTo change that, all we have to do is using Node's package manager `npm`, using the following command:\n\n```\n$ npm install -g embark\n```\n\nThis will make Embark's command line tool globally available on our machines. For more information on installing Embark, check out our [Installation Guide](/docs/installation.html) in the official documentation.\n\nWith that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it's no news that it comes with a command to easily scaffold a new application using the `new` command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren't necessarily interested in at this point.\n\nTo create an application that really only focusses on Smart Contract development, we can take advantage of the command's `--contracts-only` option. Let's go ahead and do that. In this tutorial we'll be creating a rather trivial project, namely a simple storage, so let's call the project `simple-storage`:\n\n```\n$ embark new simple-storage --contracts-only\n$ cd simple-storage\n```\n\nOnce Embark is done, we've got a new folder `simple-storage` in our current working directory that has everything we need to build a Smart Contract only decentralized application. After `cd`'ing into it, we'll see what the project's structure looks like:\n\n```\n├── contracts/\n└── test/\n├── contracts.js\n└── embark.json\n└── package.json\n```\n\nThis is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the `contracts` folder, in which, you guessed it, our Smart Contract source files go and the `contracts.json` file, in which we configure how the Smart Contracts are deployed.\n\nFor a more detailed description about every possible application file generated by Embark, head over to our [Application Structure](/docs/structure.html) documentation.\n\n## Creating and deploying Smart Contracts\n\nLet's go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we're about to create is rather trivial, as we want to focus on how to take advantage of Embark's features rather than how to implement complex applications. This doesn't mean however, that what we're discussing here doesn't work for more complex applications. Everything we do here, you can do in with any other DApp!\n\nThe idea of the `SimpleStorage` Smart Contract is really just to store a simple value. All we need are methods to set and get that value:\n\n```\npragma solidity ^0.5.0;\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  constructor(uint initialValue) public {\n    storedData = initialValue;\n  }\n\n  function set(uint x) public {\n    storedData = x;\n  }\n\n  function get() public view returns (uint retVal) {\n    return storedData;\n  }\n\n}\n```\n\nWe put this Smart Contract into `./contracts/simple-storage.sol`. Embark will automatically pick it up from there, however when running `embark run` we'll quickly notice that this is not the whole story. Here's what Embark will output:\n\n> \"[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.\"\n\nWhat Embark is telling us here is that it's well aware that there's a `SimpleStorage` Smart Contract, however, there's no dedicated configuration set up for the currently used environment to deploy that Smart Contract. [Environments are an essential feature](/docs/environments.html) of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.\n\nLet's open our project's `contracts.js` file and head down to the `contracts` section:\n\n```\n...\ncontracts: {\n  // example:\n  //SimpleStorage: {\n  //  args: [ 100 ]\n  //}\n}\n...\n```\n\nAs we can see, we're already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the `contracts` object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the [Smart Contract Configuration Guide](/docs/contracts_configuration.html).\n\nFor now, let's just take the suggested example in the comments and set the constructor parameter of `SimpleStorage`:\n\n```\nSimpleStorage: {\n  args: [ 100 ]\n}\n```\n\nIf our Smart Contracts happens to have more constructor parameters, we can simply add more values to `args` in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:\n\n```\nSimpleStorage: {\n  args: { initialValue: 100 }\n}\n```\n\nHaving that set up, we can execute `embark run` again, which should result in a successful deployment of our Smart Contract.\n\n```\nDeploying contracts\ndeploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nSimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nFinished deploying contracts\n```\n\nEmbark not only tells gives us the transaction hash of the deployment for `SimpleStorage` as soon as possible, it also gives us the estimated and confirmed cost of the transaction.\n\n**Try it yourself!**\n\n## Interacting with Smart Contracts using Embark's console\n\nAnother powerful feature we shouldn't forget is Embark's console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.\n\nAfter executing `embark run`, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the `help` command and see what happens:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThe output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark's command line tool you're using):\n\n```\nWelcome to Embark 4.0.0\n\npossible commands are:\nipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)\nswarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)\nweb3 - instantiated web3.js object configured to the current environment\nEmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.\nlog <process> on/off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver\nversions - display versions in use for libraries and tools like web3 and solc\nprofile <contractName> - Outputs the function profile of a contract\ndebug <txHash> - Debug the last transaction or the transaction specified by a hash\n    next/n - During a debug, step over forward\n    previous/p - During a debug, step over back\n    var local/v l/vl - During a debug, display local variables\n    var global/v g/vg - During a debug, display global variables\n    var all/v a/va - During a debug, display all variables\nhistory <optionalLength> - display console commands history\ntoken - Copies and prints the token for the cockpit\napi start/stop - Start or stop the API\nplugin install <package> - Installs a plugin in the Dapp. eg: plugin install embark-solc\nquit - to immediatly exit (alias: exit)\n\nThe web3 object and the interfaces for the deployed contracts and their methods are also available\n```\n\nOne thing that the console's help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nIn fact, we can go ahead and execute the Smart Contract's methods if we want to! For example, if we want to confirm that the constructor parameter for `initialValue` was indeed set to `100`, we can simply call `SimpleStorage`'s `get` method like this:\n\n```\nEmbark (development) > await SimpleStorage.method.get().call()<ENTER>\n```\n\nNotice that the `await` keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. `await` ensures that it unwraps the request value once it resolves.\n\n## Where to go from here\n\nObviously we've only touched the tip of the iceberg when it comes to Embark's built-in features. We highly recommend checking out all of the guide in our [official documentation](/docs), as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.\n\nAlso, there'll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there's anything you miss in Embark, make sure to talk to us in our [chatroom](https://gitter.im/embark-framework/Lobby) so we can discuss what we can do to improve the tooling you need!\n\n\n","source":"_posts/2019-01-23-building-smart-contract-only-dapps.md","raw":"title: Building Smart Contract only DApps with Embark\nauthor: pascal_precht\nsummary: \"In this article we're going to explore how to build applications with Embark that focus purely on Smart Contract development. Read on!\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/01/22/building-smart-contract-only-dapps/\n---\n\nBuilding decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.\n\nEmbark enables us to implement either of those scenarios and in this article we're going to explore how to build a decentralized applications where Smart Contracts are the primary focus.\n\n## Creating a Smart Contracts only application\n\nBefore we get started, let's make sure that Embark's command line tool is actually installed. Running `embark --version` inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn't exist.\n\nTo change that, all we have to do is using Node's package manager `npm`, using the following command:\n\n```\n$ npm install -g embark\n```\n\nThis will make Embark's command line tool globally available on our machines. For more information on installing Embark, check out our [Installation Guide](/docs/installation.html) in the official documentation.\n\nWith that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it's no news that it comes with a command to easily scaffold a new application using the `new` command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren't necessarily interested in at this point.\n\nTo create an application that really only focusses on Smart Contract development, we can take advantage of the command's `--contracts-only` option. Let's go ahead and do that. In this tutorial we'll be creating a rather trivial project, namely a simple storage, so let's call the project `simple-storage`:\n\n```\n$ embark new simple-storage --contracts-only\n$ cd simple-storage\n```\n\nOnce Embark is done, we've got a new folder `simple-storage` in our current working directory that has everything we need to build a Smart Contract only decentralized application. After `cd`'ing into it, we'll see what the project's structure looks like:\n\n```\n├── contracts/\n└── test/\n├── contracts.js\n└── embark.json\n└── package.json\n```\n\nThis is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the `contracts` folder, in which, you guessed it, our Smart Contract source files go and the `contracts.json` file, in which we configure how the Smart Contracts are deployed.\n\nFor a more detailed description about every possible application file generated by Embark, head over to our [Application Structure](/docs/structure.html) documentation.\n\n## Creating and deploying Smart Contracts\n\nLet's go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we're about to create is rather trivial, as we want to focus on how to take advantage of Embark's features rather than how to implement complex applications. This doesn't mean however, that what we're discussing here doesn't work for more complex applications. Everything we do here, you can do in with any other DApp!\n\nThe idea of the `SimpleStorage` Smart Contract is really just to store a simple value. All we need are methods to set and get that value:\n\n```\npragma solidity ^0.5.0;\n\ncontract SimpleStorage {\n  uint public storedData;\n\n  constructor(uint initialValue) public {\n    storedData = initialValue;\n  }\n\n  function set(uint x) public {\n    storedData = x;\n  }\n\n  function get() public view returns (uint retVal) {\n    return storedData;\n  }\n\n}\n```\n\nWe put this Smart Contract into `./contracts/simple-storage.sol`. Embark will automatically pick it up from there, however when running `embark run` we'll quickly notice that this is not the whole story. Here's what Embark will output:\n\n> \"[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.\"\n\nWhat Embark is telling us here is that it's well aware that there's a `SimpleStorage` Smart Contract, however, there's no dedicated configuration set up for the currently used environment to deploy that Smart Contract. [Environments are an essential feature](/docs/environments.html) of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.\n\nLet's open our project's `contracts.js` file and head down to the `contracts` section:\n\n```\n...\ncontracts: {\n  // example:\n  //SimpleStorage: {\n  //  args: [ 100 ]\n  //}\n}\n...\n```\n\nAs we can see, we're already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the `contracts` object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the [Smart Contract Configuration Guide](/docs/contracts_configuration.html).\n\nFor now, let's just take the suggested example in the comments and set the constructor parameter of `SimpleStorage`:\n\n```\nSimpleStorage: {\n  args: [ 100 ]\n}\n```\n\nIf our Smart Contracts happens to have more constructor parameters, we can simply add more values to `args` in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:\n\n```\nSimpleStorage: {\n  args: { initialValue: 100 }\n}\n```\n\nHaving that set up, we can execute `embark run` again, which should result in a successful deployment of our Smart Contract.\n\n```\nDeploying contracts\ndeploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nSimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)\nFinished deploying contracts\n```\n\nEmbark not only tells gives us the transaction hash of the deployment for `SimpleStorage` as soon as possible, it also gives us the estimated and confirmed cost of the transaction.\n\n**Try it yourself!**\n\n## Interacting with Smart Contracts using Embark's console\n\nAnother powerful feature we shouldn't forget is Embark's console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.\n\nAfter executing `embark run`, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the `help` command and see what happens:\n\n```\nEmbark (development) > help<ENTER>\n```\n\nThe output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark's command line tool you're using):\n\n```\nWelcome to Embark 4.0.0\n\npossible commands are:\nipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)\nswarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)\nweb3 - instantiated web3.js object configured to the current environment\nEmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.\nlog <process> on/off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver\nversions - display versions in use for libraries and tools like web3 and solc\nprofile <contractName> - Outputs the function profile of a contract\ndebug <txHash> - Debug the last transaction or the transaction specified by a hash\n    next/n - During a debug, step over forward\n    previous/p - During a debug, step over back\n    var local/v l/vl - During a debug, display local variables\n    var global/v g/vg - During a debug, display global variables\n    var all/v a/va - During a debug, display all variables\nhistory <optionalLength> - display console commands history\ntoken - Copies and prints the token for the cockpit\napi start/stop - Start or stop the API\nplugin install <package> - Installs a plugin in the Dapp. eg: plugin install embark-solc\nquit - to immediatly exit (alias: exit)\n\nThe web3 object and the interfaces for the deployed contracts and their methods are also available\n```\n\nOne thing that the console's help doesn't tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:\n\n```\nEmbark (development) > SimpleStorage<ENTER>\n```\n\nIn fact, we can go ahead and execute the Smart Contract's methods if we want to! For example, if we want to confirm that the constructor parameter for `initialValue` was indeed set to `100`, we can simply call `SimpleStorage`'s `get` method like this:\n\n```\nEmbark (development) > await SimpleStorage.method.get().call()<ENTER>\n```\n\nNotice that the `await` keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. `await` ensures that it unwraps the request value once it resolves.\n\n## Where to go from here\n\nObviously we've only touched the tip of the iceberg when it comes to Embark's built-in features. We highly recommend checking out all of the guide in our [official documentation](/docs), as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.\n\nAlso, there'll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there's anything you miss in Embark, make sure to talk to us in our [chatroom](https://gitter.im/embark-framework/Lobby) so we can discuss what we can do to improve the tooling you need!\n\n\n","slug":"building-smart-contract-only-dapps","published":1,"date":"2019-01-23T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3tw00287heg7013c23g","content":"<p>Building decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.</p>\n<p>Embark enables us to implement either of those scenarios and in this article we’re going to explore how to build a decentralized applications where Smart Contracts are the primary focus.</p>\n<h2 id=\"Creating-a-Smart-Contracts-only-application\"><a href=\"#Creating-a-Smart-Contracts-only-application\" class=\"headerlink\" title=\"Creating a Smart Contracts only application\"></a>Creating a Smart Contracts only application</h2><p>Before we get started, let’s make sure that Embark’s command line tool is actually installed. Running <code>embark --version</code> inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn’t exist.</p>\n<p>To change that, all we have to do is using Node’s package manager <code>npm</code>, using the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>This will make Embark’s command line tool globally available on our machines. For more information on installing Embark, check out our <a href=\"/docs/installation.html\">Installation Guide</a> in the official documentation.</p>\n<p>With that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it’s no news that it comes with a command to easily scaffold a new application using the <code>new</code> command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren’t necessarily interested in at this point.</p>\n<p>To create an application that really only focusses on Smart Contract development, we can take advantage of the command’s <code>--contracts-only</code> option. Let’s go ahead and do that. In this tutorial we’ll be creating a rather trivial project, namely a simple storage, so let’s call the project <code>simple-storage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new simple-storage --contracts-only</span><br><span class=\"line\">$ cd simple-storage</span><br></pre></td></tr></table></figure>\n\n<p>Once Embark is done, we’ve got a new folder <code>simple-storage</code> in our current working directory that has everything we need to build a Smart Contract only decentralized application. After <code>cd</code>‘ing into it, we’ll see what the project’s structure looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">├── contracts.js</span><br><span class=\"line\">└── embark.json</span><br><span class=\"line\">└── package.json</span><br></pre></td></tr></table></figure>\n\n<p>This is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the <code>contracts</code> folder, in which, you guessed it, our Smart Contract source files go and the <code>contracts.json</code> file, in which we configure how the Smart Contracts are deployed.</p>\n<p>For a more detailed description about every possible application file generated by Embark, head over to our <a href=\"/docs/structure.html\">Application Structure</a> documentation.</p>\n<h2 id=\"Creating-and-deploying-Smart-Contracts\"><a href=\"#Creating-and-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Creating and deploying Smart Contracts\"></a>Creating and deploying Smart Contracts</h2><p>Let’s go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we’re about to create is rather trivial, as we want to focus on how to take advantage of Embark’s features rather than how to implement complex applications. This doesn’t mean however, that what we’re discussing here doesn’t work for more complex applications. Everything we do here, you can do in with any other DApp!</p>\n<p>The idea of the <code>SimpleStorage</code> Smart Contract is really just to store a simple value. All we need are methods to set and get that value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">pragma solidity ^0.5.0;</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(uint initialValue) public &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) public &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function get() public view returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We put this Smart Contract into <code>./contracts/simple-storage.sol</code>. Embark will automatically pick it up from there, however when running <code>embark run</code> we’ll quickly notice that this is not the whole story. Here’s what Embark will output:</p>\n<blockquote>\n<p>“[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.”</p>\n</blockquote>\n<p>What Embark is telling us here is that it’s well aware that there’s a <code>SimpleStorage</code> Smart Contract, however, there’s no dedicated configuration set up for the currently used environment to deploy that Smart Contract. <a href=\"/docs/environments.html\">Environments are an essential feature</a> of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.</p>\n<p>Let’s open our project’s <code>contracts.js</code> file and head down to the <code>contracts</code> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; example:</span><br><span class=\"line\">  &#x2F;&#x2F;SimpleStorage: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F;  args: [ 100 ]</span><br><span class=\"line\">  &#x2F;&#x2F;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>As we can see, we’re already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the <code>contracts</code> object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the <a href=\"/docs/contracts_configuration.html\">Smart Contract Configuration Guide</a>.</p>\n<p>For now, let’s just take the suggested example in the comments and set the constructor parameter of <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [ 100 ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If our Smart Contracts happens to have more constructor parameters, we can simply add more values to <code>args</code> in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: &#123; initialValue: 100 &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Having that set up, we can execute <code>embark run</code> again, which should result in a successful deployment of our Smart Contract.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Deploying contracts</span><br><span class=\"line\">deploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">SimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">Finished deploying contracts</span><br></pre></td></tr></table></figure>\n\n<p>Embark not only tells gives us the transaction hash of the deployment for <code>SimpleStorage</code> as soon as possible, it also gives us the estimated and confirmed cost of the transaction.</p>\n<p><strong>Try it yourself!</strong></p>\n<h2 id=\"Interacting-with-Smart-Contracts-using-Embark’s-console\"><a href=\"#Interacting-with-Smart-Contracts-using-Embark’s-console\" class=\"headerlink\" title=\"Interacting with Smart Contracts using Embark’s console\"></a>Interacting with Smart Contracts using Embark’s console</h2><p>Another powerful feature we shouldn’t forget is Embark’s console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.</p>\n<p>After executing <code>embark run</code>, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the <code>help</code> command and see what happens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark’s command line tool you’re using):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Welcome to Embark 4.0.0</span><br><span class=\"line\"></span><br><span class=\"line\">possible commands are:</span><br><span class=\"line\">ipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)</span><br><span class=\"line\">swarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)</span><br><span class=\"line\">web3 - instantiated web3.js object configured to the current environment</span><br><span class=\"line\">EmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.</span><br><span class=\"line\">log &lt;process&gt; on&#x2F;off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver</span><br><span class=\"line\">versions - display versions in use for libraries and tools like web3 and solc</span><br><span class=\"line\">profile &lt;contractName&gt; - Outputs the function profile of a contract</span><br><span class=\"line\">debug &lt;txHash&gt; - Debug the last transaction or the transaction specified by a hash</span><br><span class=\"line\">    next&#x2F;n - During a debug, step over forward</span><br><span class=\"line\">    previous&#x2F;p - During a debug, step over back</span><br><span class=\"line\">    var local&#x2F;v l&#x2F;vl - During a debug, display local variables</span><br><span class=\"line\">    var global&#x2F;v g&#x2F;vg - During a debug, display global variables</span><br><span class=\"line\">    var all&#x2F;v a&#x2F;va - During a debug, display all variables</span><br><span class=\"line\">history &lt;optionalLength&gt; - display console commands history</span><br><span class=\"line\">token - Copies and prints the token for the cockpit</span><br><span class=\"line\">api start&#x2F;stop - Start or stop the API</span><br><span class=\"line\">plugin install &lt;package&gt; - Installs a plugin in the Dapp. eg: plugin install embark-solc</span><br><span class=\"line\">quit - to immediatly exit (alias: exit)</span><br><span class=\"line\"></span><br><span class=\"line\">The web3 object and the interfaces for the deployed contracts and their methods are also available</span><br></pre></td></tr></table></figure>\n\n<p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>In fact, we can go ahead and execute the Smart Contract’s methods if we want to! For example, if we want to confirm that the constructor parameter for <code>initialValue</code> was indeed set to <code>100</code>, we can simply call <code>SimpleStorage</code>‘s <code>get</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.method.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the <code>await</code> keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. <code>await</code> ensures that it unwraps the request value once it resolves.</p>\n<h2 id=\"Where-to-go-from-here\"><a href=\"#Where-to-go-from-here\" class=\"headerlink\" title=\"Where to go from here\"></a>Where to go from here</h2><p>Obviously we’ve only touched the tip of the iceberg when it comes to Embark’s built-in features. We highly recommend checking out all of the guide in our <a href=\"/docs\">official documentation</a>, as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.</p>\n<p>Also, there’ll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there’s anything you miss in Embark, make sure to talk to us in our <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">chatroom</a> so we can discuss what we can do to improve the tooling you need!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Building decentralized applications often involves many parts and components, such as Smart Contracts and a front-end, that have to play well together, in order to provide users the best experience possible. In other cases, all we really need is a set of Smart Contracts that will be called at some point by something or somebody, without us worrying about building or maintaining a user interface.</p>\n<p>Embark enables us to implement either of those scenarios and in this article we’re going to explore how to build a decentralized applications where Smart Contracts are the primary focus.</p>\n<h2 id=\"Creating-a-Smart-Contracts-only-application\"><a href=\"#Creating-a-Smart-Contracts-only-application\" class=\"headerlink\" title=\"Creating a Smart Contracts only application\"></a>Creating a Smart Contracts only application</h2><p>Before we get started, let’s make sure that Embark’s command line tool is actually installed. Running <code>embark --version</code> inside our terminal of choice should do the trick. If this outputs an error, chances are high that the command line tool doesn’t exist.</p>\n<p>To change that, all we have to do is using Node’s package manager <code>npm</code>, using the following command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>This will make Embark’s command line tool globally available on our machines. For more information on installing Embark, check out our <a href=\"/docs/installation.html\">Installation Guide</a> in the official documentation.</p>\n<p>With that out of the way, we can start creating our Smart Contracts only application. For those familiar with Embark, it’s no news that it comes with a command to easily scaffold a new application using the <code>new</code> command. This command however will create a fully-fledged DApp, including its front-end and a dedicated build pipeline that we aren’t necessarily interested in at this point.</p>\n<p>To create an application that really only focusses on Smart Contract development, we can take advantage of the command’s <code>--contracts-only</code> option. Let’s go ahead and do that. In this tutorial we’ll be creating a rather trivial project, namely a simple storage, so let’s call the project <code>simple-storage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new simple-storage --contracts-only</span><br><span class=\"line\">$ cd simple-storage</span><br></pre></td></tr></table></figure>\n\n<p>Once Embark is done, we’ve got a new folder <code>simple-storage</code> in our current working directory that has everything we need to build a Smart Contract only decentralized application. After <code>cd</code>‘ing into it, we’ll see what the project’s structure looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">├── contracts&#x2F;</span><br><span class=\"line\">└── test&#x2F;</span><br><span class=\"line\">├── contracts.js</span><br><span class=\"line\">└── embark.json</span><br><span class=\"line\">└── package.json</span><br></pre></td></tr></table></figure>\n\n<p>This is really the least amount of files needed to start a new project that purely focusses on Smart Contract development. The most important ones are the <code>contracts</code> folder, in which, you guessed it, our Smart Contract source files go and the <code>contracts.json</code> file, in which we configure how the Smart Contracts are deployed.</p>\n<p>For a more detailed description about every possible application file generated by Embark, head over to our <a href=\"/docs/structure.html\">Application Structure</a> documentation.</p>\n<h2 id=\"Creating-and-deploying-Smart-Contracts\"><a href=\"#Creating-and-deploying-Smart-Contracts\" class=\"headerlink\" title=\"Creating and deploying Smart Contracts\"></a>Creating and deploying Smart Contracts</h2><p>Let’s go ahead and create a simple Smart Contract to dive a bit deeper into how it can be configured for deployment. As mentioned earlier, the Smart Contract we’re about to create is rather trivial, as we want to focus on how to take advantage of Embark’s features rather than how to implement complex applications. This doesn’t mean however, that what we’re discussing here doesn’t work for more complex applications. Everything we do here, you can do in with any other DApp!</p>\n<p>The idea of the <code>SimpleStorage</code> Smart Contract is really just to store a simple value. All we need are methods to set and get that value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">pragma solidity ^0.5.0;</span><br><span class=\"line\"></span><br><span class=\"line\">contract SimpleStorage &#123;</span><br><span class=\"line\">  uint public storedData;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(uint initialValue) public &#123;</span><br><span class=\"line\">    storedData &#x3D; initialValue;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function set(uint x) public &#123;</span><br><span class=\"line\">    storedData &#x3D; x;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  function get() public view returns (uint retVal) &#123;</span><br><span class=\"line\">    return storedData;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We put this Smart Contract into <code>./contracts/simple-storage.sol</code>. Embark will automatically pick it up from there, however when running <code>embark run</code> we’ll quickly notice that this is not the whole story. Here’s what Embark will output:</p>\n<blockquote>\n<p>“[SimpleStorage]: Error: attempted to deploy SimpleStorage without specifying parameters. Check if there are any params defined for this contract in this environment in the contracts configuration file.”</p>\n</blockquote>\n<p>What Embark is telling us here is that it’s well aware that there’s a <code>SimpleStorage</code> Smart Contract, however, there’s no dedicated configuration set up for the currently used environment to deploy that Smart Contract. <a href=\"/docs/environments.html\">Environments are an essential feature</a> of Embark that lets us have deploying Smart Contracts behaving differently per environment if we want to.</p>\n<p>Let’s open our project’s <code>contracts.js</code> file and head down to the <code>contracts</code> section:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F; example:</span><br><span class=\"line\">  &#x2F;&#x2F;SimpleStorage: &#123;</span><br><span class=\"line\">  &#x2F;&#x2F;  args: [ 100 ]</span><br><span class=\"line\">  &#x2F;&#x2F;&#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>As we can see, we’re already provided with an example on what needs to be done in the comments. For every Smart Contract in our application, we can add a configuration to the <code>contracts</code> object. Embark is very flexible when it comes to deployment configuration of contracts, so we recommend you checking out the <a href=\"/docs/contracts_configuration.html\">Smart Contract Configuration Guide</a>.</p>\n<p>For now, let’s just take the suggested example in the comments and set the constructor parameter of <code>SimpleStorage</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: [ 100 ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>If our Smart Contracts happens to have more constructor parameters, we can simply add more values to <code>args</code> in the same order. Sometimes, this gets a little too complex though. Embark supports named parameters as well for those cases:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">SimpleStorage: &#123;</span><br><span class=\"line\">  args: &#123; initialValue: 100 &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Having that set up, we can execute <code>embark run</code> again, which should result in a successful deployment of our Smart Contract.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Deploying contracts</span><br><span class=\"line\">deploying SimpleStorage with 143503 gas at the price of 1 Wei, estimated cost: 143503 Wei (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">SimpleStorage deployed at 0xa3bbd48f1A398fb355E69C73B9dC77f77959FB14 using 139768 gas (txHash: 0x68d7bfb359da8614b9231915404095282e1943741af148bde39fc987ac6706f3)</span><br><span class=\"line\">Finished deploying contracts</span><br></pre></td></tr></table></figure>\n\n<p>Embark not only tells gives us the transaction hash of the deployment for <code>SimpleStorage</code> as soon as possible, it also gives us the estimated and confirmed cost of the transaction.</p>\n<p><strong>Try it yourself!</strong></p>\n<h2 id=\"Interacting-with-Smart-Contracts-using-Embark’s-console\"><a href=\"#Interacting-with-Smart-Contracts-using-Embark’s-console\" class=\"headerlink\" title=\"Interacting with Smart Contracts using Embark’s console\"></a>Interacting with Smart Contracts using Embark’s console</h2><p>Another powerful feature we shouldn’t forget is Embark’s console. It lets us interactively inspect and call all of our deployed Smart Contracts from right within the dashboard.</p>\n<p>After executing <code>embark run</code>, Embark spins up a dashboard that comes with a REPL, waiting for us to enter commands. To get an idea of what commands are available, run the <code>help</code> command and see what happens:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; help&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The output should look something like this (keep in mind that this might look different on your machine, depending on what version of Embark’s command line tool you’re using):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Welcome to Embark 4.0.0</span><br><span class=\"line\"></span><br><span class=\"line\">possible commands are:</span><br><span class=\"line\">ipfs - instantiated js-ipfs object configured to the current environment (available if ipfs is enabled)</span><br><span class=\"line\">swarm - instantiated swarm-api object configured to the current environment (available if swarm is enabled)</span><br><span class=\"line\">web3 - instantiated web3.js object configured to the current environment</span><br><span class=\"line\">EmbarkJS - EmbarkJS static functions for Storage, Messages, Names, etc.</span><br><span class=\"line\">log &lt;process&gt; on&#x2F;off - Activate or deactivate the logs of a sub-process. Options: blockchain, ipfs, webserver</span><br><span class=\"line\">versions - display versions in use for libraries and tools like web3 and solc</span><br><span class=\"line\">profile &lt;contractName&gt; - Outputs the function profile of a contract</span><br><span class=\"line\">debug &lt;txHash&gt; - Debug the last transaction or the transaction specified by a hash</span><br><span class=\"line\">    next&#x2F;n - During a debug, step over forward</span><br><span class=\"line\">    previous&#x2F;p - During a debug, step over back</span><br><span class=\"line\">    var local&#x2F;v l&#x2F;vl - During a debug, display local variables</span><br><span class=\"line\">    var global&#x2F;v g&#x2F;vg - During a debug, display global variables</span><br><span class=\"line\">    var all&#x2F;v a&#x2F;va - During a debug, display all variables</span><br><span class=\"line\">history &lt;optionalLength&gt; - display console commands history</span><br><span class=\"line\">token - Copies and prints the token for the cockpit</span><br><span class=\"line\">api start&#x2F;stop - Start or stop the API</span><br><span class=\"line\">plugin install &lt;package&gt; - Installs a plugin in the Dapp. eg: plugin install embark-solc</span><br><span class=\"line\">quit - to immediatly exit (alias: exit)</span><br><span class=\"line\"></span><br><span class=\"line\">The web3 object and the interfaces for the deployed contracts and their methods are also available</span><br></pre></td></tr></table></figure>\n\n<p>One thing that the console’s help doesn’t tell us, is that each and every of our deployed Smart Contracts is available as descriptive JavaScript object. Simply enter the name of your Smart Contract and Embark will output its structure, properties and methods:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; SimpleStorage&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>In fact, we can go ahead and execute the Smart Contract’s methods if we want to! For example, if we want to confirm that the constructor parameter for <code>initialValue</code> was indeed set to <code>100</code>, we can simply call <code>SimpleStorage</code>‘s <code>get</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Embark (development) &gt; await SimpleStorage.method.get().call()&lt;ENTER&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that the <code>await</code> keyword is needed to resolve the requested value. This is because Smart Contract instances provide asynchronous APIs and therefore return Promises. <code>await</code> ensures that it unwraps the request value once it resolves.</p>\n<h2 id=\"Where-to-go-from-here\"><a href=\"#Where-to-go-from-here\" class=\"headerlink\" title=\"Where to go from here\"></a>Where to go from here</h2><p>Obviously we’ve only touched the tip of the iceberg when it comes to Embark’s built-in features. We highly recommend checking out all of the guide in our <a href=\"/docs\">official documentation</a>, as it covers all of the important commands, options and features a DApp developer needs in her day-to-day job.</p>\n<p>Also, there’ll be more articles in the near future covering common use cases, so make sure to keep an eye on this space! And last but not least, if there’s anything you miss in Embark, make sure to talk to us in our <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">chatroom</a> so we can discuss what we can do to improve the tooling you need!</p>\n"},{"title":"Building a decentralized Reddit with Embark - Part 1","author":"pascal_precht","summary":"Ever wanted to know what it needs to build a decentralized equivalent of a social platform like Reddit? In this three part tutorial series we're going to build one from scratch!","layout":"blog-post","alias":"news/2019/02/03/building-a-decentralized-reddit-with-embark-part-1/","_content":"\nIn this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.\n\nThis tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:\n\n- **Part 1** - Setting up the project and implementing a Smart Contract\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nLet's get right to it!\n\n## Functionality Overview\n\nAlright, let's start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won't be able to rebuild it completely. Instead, we'll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.\n\nThe idea is very simple: Our app is called **DReddit** which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.\n\nWe will create a Smart Contract that implements the features of posting topics and voting on them. There's going to be a UI as well, built with React, but we'll do that in the third part of this series.\n\n## Setting up the application\n\nIf you've read our guide on [Creating Applications](/docs/create_project.html) or our last tutorial on [Building Smart Contract only apps](/news/2019/01/22/building-smart-contract-only-dapps/), you know that Embark comes with a `new` command to scaffold an application. We're going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to [our docs](/docs/installation.html), otherwise, simply run the following command in your terminal of choice:\n\n```\n$ npm install -g embark\n```\n\nNext, we'll create and set up our app using the `new` command:\n\n```\n$ embark new dreddit\n$ cd dreddit\n```\n\nNow is a good time to familiarize ourselves with the project structure. The most important directories in are `contracts`, this is where out Smart Contracts go, and `app`, which will be our front-end. Take your time to take a look and check out our [Application Structure](/docs/structure.html) guide for more detailed overview.\n\nAlso, to ensure and double-check that everything's working, we can run the application using Embark's `run` command:\n\n```\n$ embark run\n```\n\nIf there are any issues in the \"Available Services\" section of the dashboard, go back to our [installation guide](/docs/installation.html) and make sure all tools are available on your machine.\n\n## Creating the Smart Contract\n\nAlright, next up we want to create the brain of our application, which is a Smart Contract written in [Solidity](https://solidity.readthedocs.io/en/v0.5.3/), that enables creating posts and votes. We're going to build it up step by step and afterwards we'll add some tests to ensure our code is actually working.\n\nFirst thing we do is creating a file `DReddit.sol` inside `contracts` with a Smart Contract like this:\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}\n{% endcode_block %}\n\nGreat! With that in place, let's introduce a couple of data structures for creating and storing topic posts. Let's say a post will have a creation date, a description and an address of the owner. There's a few more things we'll have to add, but let's do it one step at a time. Here's what a `Post` struct could look like:\n\n{% code_block copyBtn:true %}\nstruct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}\n{% endcode_block %}\n\nWe're also going to add an array to store all of our posts. Now that we have a `Post` struct, this is a simple as:\n\n{% code_block copyBtn:true %}\nPost [] public posts;\n{% endcode_block %}\n\n### Creating posts\n\nIt's time to add our first method which will enable users to add new posts to the platform. For that, we'll create the method `createPost(bytes _description)` where `_description` are the bytes that represent the posts text.\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}\n{% endcode_block %}\n\nThe first thing we do is creating an id for the post to be stored. We then use our `Post` struct to create a new post instance. Notice that we leverage the `postId` when storing the Post in our `posts` array. To set the owner, we take advantage of Solidity's global `msg` object which is available in every transaction.\n\n### Emitting events\n\nAs we're planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type `NewPost` which will look something like this:\n\n\n{% code_block copyBtn:true %}\nevent NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)\n{% endcode_block %}\n\nOnce that is done, all we have to do is emit `NewPost` inside `createPost()` with the required data:\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}\n{% endcode_block %}\n\n### Up and down voting posts\n\nAs mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our `Post` struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event `NewVote` for the same reasons we've introduced `NewPost` earlier. Once that is done, we can add a method that performs actual votes.\n\nLet's start by adding an enum type calld `Ballot` that aggregates possible vote types:\n\n```\nenum Ballot { NONE, UPVOTE, DOWNVOTE }\n```\n\nTo store votes on posts, we'll add an `upvotes` and `downvotes` counter to our `Post` struct accordingly. We'll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:\n\n```\nstruct Post {\n  ...\n  uint upvotes;\n  uint downvotes;\n  mapping(address => Ballot) voters;\n}\n```\n\nHere's the `NewPost` event which we'll use in a few moments:\n\n{% code_block copyBtn:true %}\nevent NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);\n{% endcode_block %}\n\nLast but not least, we have to update our `createPost()` function as the `Post` struct now needs `upvotes` and `downvotes`:\n\n\n```\nfunction createPost(bytes _description) public {\n  ...\n  posts[postId] = Post({\n    ...\n    upvotes: 0,\n    downvotes: 0\n  });\n}\n```\n\nWith these building blocks at hand, let's implement a `vote(uint postId, uint8 _vote)` method. `_vote` is going to be one of our defined `Ballot` types and is represented as uint going from 0 - 2. We'll use Solidity's `require()` statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.\n\nWe then increment the up or down vote counter respectively, store the voter and emit a `NewVote` event:\n\n{% code_block copyBtn:true %}\nfunction vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, \"Post does not exist\");\n  require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}\n{% endcode_block %}\n\n### Determine if users can vote\n\nWe probably want to add an indication to the UI that a user has already voted on a certain post. For that it'd be handy to have an API that actually tells us whether a user can vote on a post. We've already discussed earlier that users can't vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here's what a `canVote(uint _postId)` method could look like:\n\n{% code_block copyBtn:true %}\nfunction canVote(uint _postId) public view returns (bool) {\n  if (_postId > posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}\n{% endcode_block %}\n\n### Fetching votes\n\nWe also need a way to actually let users check what they've voted for, in case they did. For that we'll add a simple `getVote()` method that looks something like this:\n\n{% code_block copyBtn:true %}\nfunction getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}\n{% endcode_block %}\n\nAnd with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute `embark build --contracts` in case there's no existing Embark instance watching our work already.\n\nHere's the complete Smart Contract code (you can also find it in [this repository](https://github.com/embarklabs/dreddit-tutorial):\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address => Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, \"Post does not exist\");\n    require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId > posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}\n{% endcode_block %}\n\nWonderful! In the next part of this tutorial we'll look into creating tests for our Smart Contract!\n","source":"_posts/2019-02-04-building-a-decentralized-reddit-with-embark-part-1.md","raw":"title: Building a decentralized Reddit with Embark - Part 1\nauthor: pascal_precht\nsummary: \"Ever wanted to know what it needs to build a decentralized equivalent of a social platform like Reddit? In this three part tutorial series we're going to build one from scratch!\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/02/03/building-a-decentralized-reddit-with-embark-part-1/\n---\n\nIn this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.\n\nThis tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:\n\n- **Part 1** - Setting up the project and implementing a Smart Contract\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nLet's get right to it!\n\n## Functionality Overview\n\nAlright, let's start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won't be able to rebuild it completely. Instead, we'll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.\n\nThe idea is very simple: Our app is called **DReddit** which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.\n\nWe will create a Smart Contract that implements the features of posting topics and voting on them. There's going to be a UI as well, built with React, but we'll do that in the third part of this series.\n\n## Setting up the application\n\nIf you've read our guide on [Creating Applications](/docs/create_project.html) or our last tutorial on [Building Smart Contract only apps](/news/2019/01/22/building-smart-contract-only-dapps/), you know that Embark comes with a `new` command to scaffold an application. We're going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to [our docs](/docs/installation.html), otherwise, simply run the following command in your terminal of choice:\n\n```\n$ npm install -g embark\n```\n\nNext, we'll create and set up our app using the `new` command:\n\n```\n$ embark new dreddit\n$ cd dreddit\n```\n\nNow is a good time to familiarize ourselves with the project structure. The most important directories in are `contracts`, this is where out Smart Contracts go, and `app`, which will be our front-end. Take your time to take a look and check out our [Application Structure](/docs/structure.html) guide for more detailed overview.\n\nAlso, to ensure and double-check that everything's working, we can run the application using Embark's `run` command:\n\n```\n$ embark run\n```\n\nIf there are any issues in the \"Available Services\" section of the dashboard, go back to our [installation guide](/docs/installation.html) and make sure all tools are available on your machine.\n\n## Creating the Smart Contract\n\nAlright, next up we want to create the brain of our application, which is a Smart Contract written in [Solidity](https://solidity.readthedocs.io/en/v0.5.3/), that enables creating posts and votes. We're going to build it up step by step and afterwards we'll add some tests to ensure our code is actually working.\n\nFirst thing we do is creating a file `DReddit.sol` inside `contracts` with a Smart Contract like this:\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}\n{% endcode_block %}\n\nGreat! With that in place, let's introduce a couple of data structures for creating and storing topic posts. Let's say a post will have a creation date, a description and an address of the owner. There's a few more things we'll have to add, but let's do it one step at a time. Here's what a `Post` struct could look like:\n\n{% code_block copyBtn:true %}\nstruct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}\n{% endcode_block %}\n\nWe're also going to add an array to store all of our posts. Now that we have a `Post` struct, this is a simple as:\n\n{% code_block copyBtn:true %}\nPost [] public posts;\n{% endcode_block %}\n\n### Creating posts\n\nIt's time to add our first method which will enable users to add new posts to the platform. For that, we'll create the method `createPost(bytes _description)` where `_description` are the bytes that represent the posts text.\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}\n{% endcode_block %}\n\nThe first thing we do is creating an id for the post to be stored. We then use our `Post` struct to create a new post instance. Notice that we leverage the `postId` when storing the Post in our `posts` array. To set the owner, we take advantage of Solidity's global `msg` object which is available in every transaction.\n\n### Emitting events\n\nAs we're planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type `NewPost` which will look something like this:\n\n\n{% code_block copyBtn:true %}\nevent NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)\n{% endcode_block %}\n\nOnce that is done, all we have to do is emit `NewPost` inside `createPost()` with the required data:\n\n{% code_block copyBtn:true %}\nfunction createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}\n{% endcode_block %}\n\n### Up and down voting posts\n\nAs mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our `Post` struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event `NewVote` for the same reasons we've introduced `NewPost` earlier. Once that is done, we can add a method that performs actual votes.\n\nLet's start by adding an enum type calld `Ballot` that aggregates possible vote types:\n\n```\nenum Ballot { NONE, UPVOTE, DOWNVOTE }\n```\n\nTo store votes on posts, we'll add an `upvotes` and `downvotes` counter to our `Post` struct accordingly. We'll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:\n\n```\nstruct Post {\n  ...\n  uint upvotes;\n  uint downvotes;\n  mapping(address => Ballot) voters;\n}\n```\n\nHere's the `NewPost` event which we'll use in a few moments:\n\n{% code_block copyBtn:true %}\nevent NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);\n{% endcode_block %}\n\nLast but not least, we have to update our `createPost()` function as the `Post` struct now needs `upvotes` and `downvotes`:\n\n\n```\nfunction createPost(bytes _description) public {\n  ...\n  posts[postId] = Post({\n    ...\n    upvotes: 0,\n    downvotes: 0\n  });\n}\n```\n\nWith these building blocks at hand, let's implement a `vote(uint postId, uint8 _vote)` method. `_vote` is going to be one of our defined `Ballot` types and is represented as uint going from 0 - 2. We'll use Solidity's `require()` statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.\n\nWe then increment the up or down vote counter respectively, store the voter and emit a `NewVote` event:\n\n{% code_block copyBtn:true %}\nfunction vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, \"Post does not exist\");\n  require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}\n{% endcode_block %}\n\n### Determine if users can vote\n\nWe probably want to add an indication to the UI that a user has already voted on a certain post. For that it'd be handy to have an API that actually tells us whether a user can vote on a post. We've already discussed earlier that users can't vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here's what a `canVote(uint _postId)` method could look like:\n\n{% code_block copyBtn:true %}\nfunction canVote(uint _postId) public view returns (bool) {\n  if (_postId > posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}\n{% endcode_block %}\n\n### Fetching votes\n\nWe also need a way to actually let users check what they've voted for, in case they did. For that we'll add a simple `getVote()` method that looks something like this:\n\n{% code_block copyBtn:true %}\nfunction getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}\n{% endcode_block %}\n\nAnd with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute `embark build --contracts` in case there's no existing Embark instance watching our work already.\n\nHere's the complete Smart Contract code (you can also find it in [this repository](https://github.com/embarklabs/dreddit-tutorial):\n\n{% code_block copyBtn:true %}\npragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address => Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, \"Post does not exist\");\n    require(post.voters[msg.sender] == Ballot.NONE, \"You already voted on this post\");\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId > posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}\n{% endcode_block %}\n\nWonderful! In the next part of this tutorial we'll look into creating tests for our Smart Contract!\n","slug":"building-a-decentralized-reddit-with-embark-part-1","published":1,"date":"2019-02-04T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3tz002a7hegau443t3p","content":"<p>In this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.</p>\n<p>This tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:</p>\n<ul>\n<li><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>Let’s get right to it!</p>\n<h2 id=\"Functionality-Overview\"><a href=\"#Functionality-Overview\" class=\"headerlink\" title=\"Functionality Overview\"></a>Functionality Overview</h2><p>Alright, let’s start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won’t be able to rebuild it completely. Instead, we’ll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.</p>\n<p>The idea is very simple: Our app is called <strong>DReddit</strong> which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.</p>\n<p>We will create a Smart Contract that implements the features of posting topics and voting on them. There’s going to be a UI as well, built with React, but we’ll do that in the third part of this series.</p>\n<h2 id=\"Setting-up-the-application\"><a href=\"#Setting-up-the-application\" class=\"headerlink\" title=\"Setting up the application\"></a>Setting up the application</h2><p>If you’ve read our guide on <a href=\"/docs/create_project.html\">Creating Applications</a> or our last tutorial on <a href=\"/news/2019/01/22/building-smart-contract-only-dapps/\">Building Smart Contract only apps</a>, you know that Embark comes with a <code>new</code> command to scaffold an application. We’re going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to <a href=\"/docs/installation.html\">our docs</a>, otherwise, simply run the following command in your terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Next, we’ll create and set up our app using the <code>new</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dreddit</span><br><span class=\"line\">$ cd dreddit</span><br></pre></td></tr></table></figure>\n\n<p>Now is a good time to familiarize ourselves with the project structure. The most important directories in are <code>contracts</code>, this is where out Smart Contracts go, and <code>app</code>, which will be our front-end. Take your time to take a look and check out our <a href=\"/docs/structure.html\">Application Structure</a> guide for more detailed overview.</p>\n<p>Also, to ensure and double-check that everything’s working, we can run the application using Embark’s <code>run</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>If there are any issues in the “Available Services” section of the dashboard, go back to our <a href=\"/docs/installation.html\">installation guide</a> and make sure all tools are available on your machine.</p>\n<h2 id=\"Creating-the-Smart-Contract\"><a href=\"#Creating-the-Smart-Contract\" class=\"headerlink\" title=\"Creating the Smart Contract\"></a>Creating the Smart Contract</h2><p>Alright, next up we want to create the brain of our application, which is a Smart Contract written in <a href=\"https://solidity.readthedocs.io/en/v0.5.3/\" target=\"_blank\" rel=\"noopener\">Solidity</a>, that enables creating posts and votes. We’re going to build it up step by step and afterwards we’ll add some tests to ensure our code is actually working.</p>\n<p>First thing we do is creating a file <code>DReddit.sol</code> inside <code>contracts</code> with a Smart Contract like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b973b090-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b973b090-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}</code></pre>\n\n\n<p>Great! With that in place, let’s introduce a couple of data structures for creating and storing topic posts. Let’s say a post will have a creation date, a description and an address of the owner. There’s a few more things we’ll have to add, but let’s do it one step at a time. Here’s what a <code>Post</code> struct could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\">struct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}</code></pre>\n\n\n<p>We’re also going to add an array to store all of our posts. Now that we have a <code>Post</code> struct, this is a simple as:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\">Post [] public posts;</code></pre>\n\n\n<h3 id=\"Creating-posts\"><a href=\"#Creating-posts\" class=\"headerlink\" title=\"Creating posts\"></a>Creating posts</h3><p>It’s time to add our first method which will enable users to add new posts to the platform. For that, we’ll create the method <code>createPost(bytes _description)</code> where <code>_description</code> are the bytes that represent the posts text.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}</code></pre>\n\n\n<p>The first thing we do is creating an id for the post to be stored. We then use our <code>Post</code> struct to create a new post instance. Notice that we leverage the <code>postId</code> when storing the Post in our <code>posts</code> array. To set the owner, we take advantage of Solidity’s global <code>msg</code> object which is available in every transaction.</p>\n<h3 id=\"Emitting-events\"><a href=\"#Emitting-events\" class=\"headerlink\" title=\"Emitting events\"></a>Emitting events</h3><p>As we’re planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type <code>NewPost</code> which will look something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\">event NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)</code></pre>\n\n\n<p>Once that is done, all we have to do is emit <code>NewPost</code> inside <code>createPost()</code> with the required data:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}</code></pre>\n\n\n<h3 id=\"Up-and-down-voting-posts\"><a href=\"#Up-and-down-voting-posts\" class=\"headerlink\" title=\"Up and down voting posts\"></a>Up and down voting posts</h3><p>As mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our <code>Post</code> struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event <code>NewVote</code> for the same reasons we’ve introduced <code>NewPost</code> earlier. Once that is done, we can add a method that performs actual votes.</p>\n<p>Let’s start by adding an enum type calld <code>Ballot</code> that aggregates possible vote types:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">enum Ballot &#123; NONE, UPVOTE, DOWNVOTE &#125;</span><br></pre></td></tr></table></figure>\n\n<p>To store votes on posts, we’ll add an <code>upvotes</code> and <code>downvotes</code> counter to our <code>Post</code> struct accordingly. We’ll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">struct Post &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  uint upvotes;</span><br><span class=\"line\">  uint downvotes;</span><br><span class=\"line\">  mapping(address &#x3D;&gt; Ballot) voters;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here’s the <code>NewPost</code> event which we’ll use in a few moments:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\">event NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);</code></pre>\n\n\n<p>Last but not least, we have to update our <code>createPost()</code> function as the <code>Post</code> struct now needs <code>upvotes</code> and <code>downvotes</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function createPost(bytes _description) public &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  posts[postId] &#x3D; Post(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    upvotes: 0,</span><br><span class=\"line\">    downvotes: 0</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With these building blocks at hand, let’s implement a <code>vote(uint postId, uint8 _vote)</code> method. <code>_vote</code> is going to be one of our defined <code>Ballot</code> types and is represented as uint going from 0 - 2. We’ll use Solidity’s <code>require()</code> statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.</p>\n<p>We then increment the up or down vote counter respectively, store the voter and emit a <code>NewVote</code> event:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\">function vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, &quot;Post does not exist&quot;);\n  require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}</code></pre>\n\n\n<h3 id=\"Determine-if-users-can-vote\"><a href=\"#Determine-if-users-can-vote\" class=\"headerlink\" title=\"Determine if users can vote\"></a>Determine if users can vote</h3><p>We probably want to add an indication to the UI that a user has already voted on a certain post. For that it’d be handy to have an API that actually tells us whether a user can vote on a post. We’ve already discussed earlier that users can’t vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here’s what a <code>canVote(uint _postId)</code> method could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994f431-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994f431-395d-11ea-a728-e7cbf6b69d7f\">function canVote(uint _postId) public view returns (bool) {\n  if (_postId &gt; posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}</code></pre>\n\n\n<h3 id=\"Fetching-votes\"><a href=\"#Fetching-votes\" class=\"headerlink\" title=\"Fetching votes\"></a>Fetching votes</h3><p>We also need a way to actually let users check what they’ve voted for, in case they did. For that we’ll add a simple <code>getVote()</code> method that looks something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\">function getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}</code></pre>\n\n\n<p>And with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute <code>embark build --contracts</code> in case there’s no existing Embark instance watching our work already.</p>\n<p>Here’s the complete Smart Contract code (you can also find it in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address =&gt; Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, &quot;Post does not exist&quot;);\n    require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId &gt; posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}</code></pre>\n\n\n<p>Wonderful! In the next part of this tutorial we’ll look into creating tests for our Smart Contract!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In this tutorial we want to get very practical and build a decentralized Reddit application from scratch using Embark. The goal is to get a better idea of not only what parts and components are involved when building such an application, but also which steps are required to get there, without getting too overwhelmed.</p>\n<p>This tutorial is split up into three parts, so every individual part can get our full attention. The three parts are going to be:</p>\n<ul>\n<li><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>Let’s get right to it!</p>\n<h2 id=\"Functionality-Overview\"><a href=\"#Functionality-Overview\" class=\"headerlink\" title=\"Functionality Overview\"></a>Functionality Overview</h2><p>Alright, let’s start off with quickly talking about what exactly it is that we want to build. Obviously, Reddit is a pretty sophisticated platform so we won’t be able to rebuild it completely. Instead, we’ll be focusing on some key features that will also demonstrate very nicely how Embark can help building such an application.</p>\n<p>The idea is very simple: Our app is called <strong>DReddit</strong> which lets users post topics and everyone else should be able to up and downvote topics. A user account is coupled to an Ethereum wallet account. Essentially every wallet account is a valid account for the application and users can authenticate using extensions like Metamask.</p>\n<p>We will create a Smart Contract that implements the features of posting topics and voting on them. There’s going to be a UI as well, built with React, but we’ll do that in the third part of this series.</p>\n<h2 id=\"Setting-up-the-application\"><a href=\"#Setting-up-the-application\" class=\"headerlink\" title=\"Setting up the application\"></a>Setting up the application</h2><p>If you’ve read our guide on <a href=\"/docs/create_project.html\">Creating Applications</a> or our last tutorial on <a href=\"/news/2019/01/22/building-smart-contract-only-dapps/\">Building Smart Contract only apps</a>, you know that Embark comes with a <code>new</code> command to scaffold an application. We’re going to do exactly that, but first we need to make sure Embark is installed. For a complete guide on installing Embark, head over to <a href=\"/docs/installation.html\">our docs</a>, otherwise, simply run the following command in your terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install -g embark</span><br></pre></td></tr></table></figure>\n\n<p>Next, we’ll create and set up our app using the <code>new</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark new dreddit</span><br><span class=\"line\">$ cd dreddit</span><br></pre></td></tr></table></figure>\n\n<p>Now is a good time to familiarize ourselves with the project structure. The most important directories in are <code>contracts</code>, this is where out Smart Contracts go, and <code>app</code>, which will be our front-end. Take your time to take a look and check out our <a href=\"/docs/structure.html\">Application Structure</a> guide for more detailed overview.</p>\n<p>Also, to ensure and double-check that everything’s working, we can run the application using Embark’s <code>run</code> command:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<p>If there are any issues in the “Available Services” section of the dashboard, go back to our <a href=\"/docs/installation.html\">installation guide</a> and make sure all tools are available on your machine.</p>\n<h2 id=\"Creating-the-Smart-Contract\"><a href=\"#Creating-the-Smart-Contract\" class=\"headerlink\" title=\"Creating the Smart Contract\"></a>Creating the Smart Contract</h2><p>Alright, next up we want to create the brain of our application, which is a Smart Contract written in <a href=\"https://solidity.readthedocs.io/en/v0.5.3/\" target=\"_blank\" rel=\"noopener\">Solidity</a>, that enables creating posts and votes. We’re going to build it up step by step and afterwards we’ll add some tests to ensure our code is actually working.</p>\n<p>First thing we do is creating a file <code>DReddit.sol</code> inside <code>contracts</code> with a Smart Contract like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b973b090-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b973b090-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n}</code></pre>\n\n\n<p>Great! With that in place, let’s introduce a couple of data structures for creating and storing topic posts. Let’s say a post will have a creation date, a description and an address of the owner. There’s a few more things we’ll have to add, but let’s do it one step at a time. Here’s what a <code>Post</code> struct could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b98d5312-395d-11ea-a728-e7cbf6b69d7f\">struct Post {\n  uint creationDate;\n  bytes description;\n  address owner;\n}</code></pre>\n\n\n<p>We’re also going to add an array to store all of our posts. Now that we have a <code>Post</code> struct, this is a simple as:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99171c2-395d-11ea-a728-e7cbf6b69d7f\">Post [] public posts;</code></pre>\n\n\n<h3 id=\"Creating-posts\"><a href=\"#Creating-posts\" class=\"headerlink\" title=\"Creating posts\"></a>Creating posts</h3><p>It’s time to add our first method which will enable users to add new posts to the platform. For that, we’ll create the method <code>createPost(bytes _description)</code> where <code>_description</code> are the bytes that represent the posts text.</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b993bbb0-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  uint postId = posts.length++;\n  posts[postId] = Post({\n    creationDate: block.timestamp,\n    description: _description,\n    owner: msg.sender\n  });\n}</code></pre>\n\n\n<p>The first thing we do is creating an id for the post to be stored. We then use our <code>Post</code> struct to create a new post instance. Notice that we leverage the <code>postId</code> when storing the Post in our <code>posts</code> array. To set the owner, we take advantage of Solidity’s global <code>msg</code> object which is available in every transaction.</p>\n<h3 id=\"Emitting-events\"><a href=\"#Emitting-events\" class=\"headerlink\" title=\"Emitting events\"></a>Emitting events</h3><p>As we’re planning to build a front-end that reacts to posts being created, we need to emit an event so the front-end can subscribe to it accordingly. For that, we first introduce a new event type <code>NewPost</code> which will look something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b9947f02-395d-11ea-a728-e7cbf6b69d7f\">event NewPost(\n  uint indexed postId,\n  address owner,\n  bytes description\n)</code></pre>\n\n\n<p>Once that is done, all we have to do is emit <code>NewPost</code> inside <code>createPost()</code> with the required data:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd21-395d-11ea-a728-e7cbf6b69d7f\">function createPost(bytes _description) public {\n  ...\n  emit NewPost(postId, msg.sender, _description);\n}</code></pre>\n\n\n<h3 id=\"Up-and-down-voting-posts\"><a href=\"#Up-and-down-voting-posts\" class=\"headerlink\" title=\"Up and down voting posts\"></a>Up and down voting posts</h3><p>As mentioned earlier, Reddit allows for up and down voting topic posts. In order to get the same functionality, we need to extend our <code>Post</code> struct with vote counters, as well as introducing an enum that will represent the available vote types. We also add a new event <code>NewVote</code> for the same reasons we’ve introduced <code>NewPost</code> earlier. Once that is done, we can add a method that performs actual votes.</p>\n<p>Let’s start by adding an enum type calld <code>Ballot</code> that aggregates possible vote types:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">enum Ballot &#123; NONE, UPVOTE, DOWNVOTE &#125;</span><br></pre></td></tr></table></figure>\n\n<p>To store votes on posts, we’ll add an <code>upvotes</code> and <code>downvotes</code> counter to our <code>Post</code> struct accordingly. We’ll also add a mapping that stores all the voters, so we can check and ensure that nobody tries to vote multiple times:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">struct Post &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  uint upvotes;</span><br><span class=\"line\">  uint downvotes;</span><br><span class=\"line\">  mapping(address &#x3D;&gt; Ballot) voters;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Here’s the <code>NewPost</code> event which we’ll use in a few moments:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd24-395d-11ea-a728-e7cbf6b69d7f\">event NewVote(\n  uint indexed postId,\n  address owner,\n  uint8 vote\n);</code></pre>\n\n\n<p>Last but not least, we have to update our <code>createPost()</code> function as the <code>Post</code> struct now needs <code>upvotes</code> and <code>downvotes</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function createPost(bytes _description) public &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  posts[postId] &#x3D; Post(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    upvotes: 0,</span><br><span class=\"line\">    downvotes: 0</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>With these building blocks at hand, let’s implement a <code>vote(uint postId, uint8 _vote)</code> method. <code>_vote</code> is going to be one of our defined <code>Ballot</code> types and is represented as uint going from 0 - 2. We’ll use Solidity’s <code>require()</code> statement to ensure we only vote on posts that actually exist, as well as nobody can actually vote multiple times on the same post.</p>\n<p>We then increment the up or down vote counter respectively, store the voter and emit a <code>NewVote</code> event:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994cd26-395d-11ea-a728-e7cbf6b69d7f\">function vote(uint _postId, uint8 _vote) public {\n  Post storage post = posts[_postId];\n\n  require(post.creationDate != 0, &quot;Post does not exist&quot;);\n  require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n  Ballot ballot = Ballot(_vote);\n\n  if (ballot == Ballot.UPVOTE) {\n      post.upvotes++;\n  } else {\n      post.downvotes++;\n  }\n\n  post.voters[msg.sender] = ballot;\n  emit NewVote(_postId, msg.sender, _vote);\n}</code></pre>\n\n\n<h3 id=\"Determine-if-users-can-vote\"><a href=\"#Determine-if-users-can-vote\" class=\"headerlink\" title=\"Determine if users can vote\"></a>Determine if users can vote</h3><p>We probably want to add an indication to the UI that a user has already voted on a certain post. For that it’d be handy to have an API that actually tells us whether a user can vote on a post. We’ve already discussed earlier that users can’t vote multiple times on the same post, so figuring out if a user can vote is pretty straight forward. Here’s what a <code>canVote(uint _postId)</code> method could look like:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b994f431-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b994f431-395d-11ea-a728-e7cbf6b69d7f\">function canVote(uint _postId) public view returns (bool) {\n  if (_postId &gt; posts.length - 1) return false;\n  Post storage post = posts[_postId];\n  return (post.voters[msg.sender] == Ballot.NONE);\n}</code></pre>\n\n\n<h3 id=\"Fetching-votes\"><a href=\"#Fetching-votes\" class=\"headerlink\" title=\"Fetching votes\"></a>Fetching votes</h3><p>We also need a way to actually let users check what they’ve voted for, in case they did. For that we’ll add a simple <code>getVote()</code> method that looks something like this:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a1-395d-11ea-a728-e7cbf6b69d7f\">function getVote(uint _postId) public view returns (uint8) {\n  Post storage post = posts[_postId];\n  return uint8(post.voters[msg.sender]);\n}</code></pre>\n\n\n<p>And with that, our Smart Contract is pretty much done! Just to make sure that everything is compiling smoothly, we can execute <code>embark build --contracts</code> in case there’s no existing Embark instance watching our work already.</p>\n<p>Here’s the complete Smart Contract code (you can also find it in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a>:</p>\n<pre class=\"highlight \"><button class=\"c-button c-button--squared\" data-clipboard-target=\"#code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\"><svg class=\"c-icon c-icon--xs\"><use xlink:href=\"/assets/icons/symbols.svg#icon-copy-paste\"></use></svg></button><code id=\"code-b99605a3-395d-11ea-a728-e7cbf6b69d7f\">pragma solidity ^0.5.0;\n\ncontract DReddit {\n\n  enum Ballot { NONE, UPVOTE, DOWNVOTE }\n\n  struct Post {\n    uint creationDate;\n    bytes description;\n    address owner;\n    uint upvotes;\n    uint downvotes;\n    mapping(address =&gt; Ballot) voters;\n  }\n\n  Post [] public posts;\n\n  event NewPost(\n    uint indexed postId,\n    address owner,\n    bytes description\n  );\n\n  event NewVote(\n    uint indexed postId,\n    address owner,\n    uint8 vote\n  );\n\n  function createPost(bytes memory _description) public {\n    uint postId = posts.length++;\n\n    posts[postId] = Post({\n      creationDate: block.timestamp,\n      description: _description,\n      owner: msg.sender,\n      upvotes: 0,\n      downvotes: 0\n    });\n\n    emit NewPost(postId, msg.sender, _description);\n  }\n\n  function vote(uint _postId, uint8 _vote) public {\n    Post storage post = posts[_postId];\n\n    require(post.creationDate != 0, &quot;Post does not exist&quot;);\n    require(post.voters[msg.sender] == Ballot.NONE, &quot;You already voted on this post&quot;);\n\n    Ballot ballot = Ballot(_vote);\n\n    if (ballot == Ballot.UPVOTE) {\n        post.upvotes++;\n    } else {\n        post.downvotes++;\n    }\n\n    post.voters[msg.sender] = ballot;\n    emit NewVote(_postId, msg.sender, _vote);\n  }\n\n  function canVote(uint _postId) public view returns (bool) {\n    if (_postId &gt; posts.length - 1) return false;\n    Post storage post = posts[_postId];\n    return (post.voters[msg.sender] == Ballot.NONE);\n  }\n\n  function getVote(uint _postId) public view returns (uint8) {\n    Post storage post = posts[_postId];\n    return uint8(post.voters[msg.sender]);\n  }\n}</code></pre>\n\n\n<p>Wonderful! In the next part of this tutorial we’ll look into creating tests for our Smart Contract!</p>\n"},{"title":"Building a decentralized Reddit with Embark - Part 2","author":"pascal_precht","summary":"This is the second part of the three part tutorial about building a decentralized Reddit with Embark. In this part, we'll be focussing on testing our Smart Contract using EmbarkJS.","layout":"blog-post","alias":"news/2019/02/10/building-a-decentralized-reddit-with-embark-part-2/","_content":"\nIn [the first part of this tutorial](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) we've implemented a `DReddit` Smart Contract that comes with methods to create and vote on topic posts. In this part we'll continue right where we've left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nAnd off we go!\n\n## Writing a first test\n\nWe've got plenty functionality to cover in our tests, but let's start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file `DReddit_spec.js` inside `test` and add a `contract()` block that looks something like this:\n\n```\ncontract('DReddit', () => {\n\n});\n```\n\nInside this code block we'll be putting dedicated test cases. The `contract()` function can be considered a \"grouping\" functionality to group tests, if you will. If you're familiar with Mocha's [describe()](https://mochajs.org/) function, you already know how `contract()` works, as it's pretty much just an alias.\n\nTo check whether our test setup is working, we add a simple test that passes:\n\n```\ncontract('DReddit', () => {\n\n  it ('should work', () => {\n    assert.ok(true);\n  });\n});\n```\n\nRunning this using Embark's `test` command should result in an output similar to this:\n\n```\n❯ embark test\n\n\nCompiling contracts\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n\n\n  1 passing (5s) - [Total: 2210775 gas]\n\n > All tests passed\n```\n\nThis works great, let's go ahead and test some actual functionality!\n\n## Testing the creation of post\n\nLet's test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our `DReddit` Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.\n\n### Requiring Smart Contract instances\n\nWhen running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom `require()` that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import\n\nFor example, in order to get an instance of our `DReddit` Smart Contract within the test, we add the following line to our spec file:\n\n\n```\nconst DReddit = require('Embark/contracts/DReddit');\n```\n\n`DReddit` is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. **In reality, this object is empty**. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, `config()`, to let Embark know, which Smart Contracts we're interested in in the first place. This might be a little confusing, but really the bottom line is that `DReddit` isn't what we think it is, until we use it inside `contract()`.\n\nLet's add the mentioned `config()` function so Embark knows what we need:\n\n```\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n});\n```\n\nThis is very similar to [configuring Smart Contracts](/docs/contracts_configuration.html), in fact it's the test environment equivalent. We pass a configuration object to `config()` with specific parameters for every Smart Contract we need. In our case, we just need to add `DReddit` without any additional parameters. This is because our Smart Contract doesn't need constructor values and things alike. Keep in mind, if we don't call this `config()` function, the imported objects for our Smart Contract instances will always be empty.\n\n### Testing `createPost()`\n\nTo test our Smart Contract's `createPost()` method, we'll make use of `DReddit`, which will now be a Smart Contract instance. If you remember, `createPost()` actually takes the post's description as bytes, so how do we make that work? Well, it turns out that we actually don't pass it the description itself, but an **IPFS hash** that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It's better to store the actual description in a storage where data size isn't an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.\n\nOnce we have such a hash (no worries, we've got one prepared), we can use Web3's `fromAscii()` utils to convert that hash to bytes and then send it off using our Smart Contract's `createPost()` method. We can then subscribe to the events we're emitting and check its return value like this:\n\n```\n...\nconst ipfsHash = 'Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z';\n\ncontract('DReddit', () => {\n  ...\n  it ('should be able to create a post and receive it via contract event', async () => {\n    const receipt = await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();\n    const event = receipt.events.NewPost;\n    postId = event.returnValues.postId;\n    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);\n  });\n});\n```\n\nNotice that we're using `async/await` here because Embark's Smart Contract instance methods return promises. The same can be done without promises as well, it's just a syntactical difference at this point. Running `embark test` should result in two passing tests now!\n\n## Testing correctness of data\n\nAnother good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we're testing in our previous test - there we're testing the description bytes emitted by the `NewPost` event. To test this we take advantage of the `postId` created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.\n\nLuckily wallet accounts can be easily accessed as they are emitted by Embark's `config()` function. All we have to do is attaching a resolution handler to `config()` and storing the emitted value:\n\n```\n...\nlet accounts = [];\n\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n```\n\nHaving that in place, our next test could look something like this:\n\n```\nit ('post should have correct data', async () => {\n  const post = await DReddit.methods.posts(postId).call();\n  assert.equal(web3.utils.toAscii(post.description), ipfsHash);\n  assert.equal(post.owner, accounts[0]);\n});\n```\n\nYou might notice that we're referring to `accounts[0]` here. However, just by looking at the code, we can't really know if `accounts[0]` is really the one we're expecting. This is where Embark offers another helping hand. When the `accounts` are set up, Embark will automatically set the first account of the wallet (`accounts[0]`) to the default account that'll be used for all transactions. With that knowledge we can make an assertion, expecting `accounts[0]` to be the owner of the post.\n\nAnother way would be to just always explicitly pass any of the accounts to a Smart Contract method's `send()` function, in which case we'd have full control over which account of the wallet will be used.\n\n## Testing `canVote()`\n\nAlright, next up let's quickly test if our `canVote()` method works the way as expected. As voting on posts that don't exist should never work, we will simply call `canVote()` on a post id that doesn't exist. This test is pretty straight forward:\n\n```\nit('should not be able to vote in an unexisting post', async () => {\n  const userCanVote = await DReddit.methods.canVote(\"123\").call();\n  assert.equal(userCanVote, false);\n});\n```\n\nWe also want to make sure that `canVote()` resolves to `true` in case a user can indeed vote a certain post. We can again reuse the `postId` that we've stored earlier:\n\n```\nit('should be able to vote in a post if account has not voted before', async () => {\n  const userCanVote = await DReddit.methods.canVote(postId).call();\n  assert.equal(userCanVote, true);\n});\n```\n\nWonderful, we have 5 passing tests now!\n\n## Testing `vote()`\n\nOf course we want to test whether one of our application's core features works as well. There's certainly different ways to verify whether `vote()` does what it's supposed to do, but for this tutorial we'll simply check whether the owner account of the vote emitted by the `NewVote` event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:\n\n```\nit(\"should be able to vote in a post\", async () => {\n  const receipt = await DReddit.methods.vote(postId, 1).send();\n  const Vote = receipt.events.NewVote;\n  assert.equal(Vote.returnValues.owner, accounts[0]);\n});\n```\n\n## Test that only one vote per post is allowed\n\nThe last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn't be possible. Using the `async/await` syntax we can test this very nicely by adding a `try/catch` block. When a user votes on a post she has already voted on, `vote()` will fail in which case we can make our assertions accordingly:\n\n```\nit('should not be able to vote twice', async () => {\n  try {\n    const receipt = await DReddit.methods.vote(postId, 1).send();\n    assert.fail('should have reverted');\n  } catch (error){\n    assert(error.message.search('revert') > -1, 'Revert should happen');\n  }\n});\n```\n\nThis might look a bit confusing first but it's actually pretty straight forward. In case `vote()` fails, we should not reach the `assert.fail()` call but end up in the `catch()` block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.\n\nOkay, one last time we run `embark test` and if the output looks like the following, we're fully covered in terms of tests!\n\n\n```\n❯ embark test\nCompiling contracts\n\n\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]\n    ✓ post should have correct data (18ms) - [0 gas]\n    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]\n    ✓ should be able to vote in a post if account hasn't voted before (12ms) - [0 gas]\n    ✓ should be able to vote in a post (42ms) - [65115 gas]\n    ✓ shouldn't be able to vote twice (37ms) - [22815 gas]\n\n\n  7 passing (5s) - [Total: 3130955 gas]\n\n > All tests passed\n```\n\n Awesome! If you run into any issues, check out the repository with all steps recorded [here](https://github.com/embarklabs/dreddit-tutorial). In [the next and last part of this series](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/), we'll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!\n","source":"_posts/2019-02-11-building-a-decentralized-reddit-with-embark-part-2.md","raw":"title: Building a decentralized Reddit with Embark - Part 2\nauthor: 'pascal_precht'\nsummary: \"This is the second part of the three part tutorial about building a decentralized Reddit with Embark. In this part, we'll be focussing on testing our Smart Contract using EmbarkJS.\"\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/02/10/building-a-decentralized-reddit-with-embark-part-2/\n---\n\nIn [the first part of this tutorial](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) we've implemented a `DReddit` Smart Contract that comes with methods to create and vote on topic posts. In this part we'll continue right where we've left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 3** - Building a simple front-end using React](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/)\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\nAnd off we go!\n\n## Writing a first test\n\nWe've got plenty functionality to cover in our tests, but let's start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file `DReddit_spec.js` inside `test` and add a `contract()` block that looks something like this:\n\n```\ncontract('DReddit', () => {\n\n});\n```\n\nInside this code block we'll be putting dedicated test cases. The `contract()` function can be considered a \"grouping\" functionality to group tests, if you will. If you're familiar with Mocha's [describe()](https://mochajs.org/) function, you already know how `contract()` works, as it's pretty much just an alias.\n\nTo check whether our test setup is working, we add a simple test that passes:\n\n```\ncontract('DReddit', () => {\n\n  it ('should work', () => {\n    assert.ok(true);\n  });\n});\n```\n\nRunning this using Embark's `test` command should result in an output similar to this:\n\n```\n❯ embark test\n\n\nCompiling contracts\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n\n\n  1 passing (5s) - [Total: 2210775 gas]\n\n > All tests passed\n```\n\nThis works great, let's go ahead and test some actual functionality!\n\n## Testing the creation of post\n\nLet's test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our `DReddit` Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.\n\n### Requiring Smart Contract instances\n\nWhen running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom `require()` that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import\n\nFor example, in order to get an instance of our `DReddit` Smart Contract within the test, we add the following line to our spec file:\n\n\n```\nconst DReddit = require('Embark/contracts/DReddit');\n```\n\n`DReddit` is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. **In reality, this object is empty**. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, `config()`, to let Embark know, which Smart Contracts we're interested in in the first place. This might be a little confusing, but really the bottom line is that `DReddit` isn't what we think it is, until we use it inside `contract()`.\n\nLet's add the mentioned `config()` function so Embark knows what we need:\n\n```\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n});\n```\n\nThis is very similar to [configuring Smart Contracts](/docs/contracts_configuration.html), in fact it's the test environment equivalent. We pass a configuration object to `config()` with specific parameters for every Smart Contract we need. In our case, we just need to add `DReddit` without any additional parameters. This is because our Smart Contract doesn't need constructor values and things alike. Keep in mind, if we don't call this `config()` function, the imported objects for our Smart Contract instances will always be empty.\n\n### Testing `createPost()`\n\nTo test our Smart Contract's `createPost()` method, we'll make use of `DReddit`, which will now be a Smart Contract instance. If you remember, `createPost()` actually takes the post's description as bytes, so how do we make that work? Well, it turns out that we actually don't pass it the description itself, but an **IPFS hash** that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It's better to store the actual description in a storage where data size isn't an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.\n\nOnce we have such a hash (no worries, we've got one prepared), we can use Web3's `fromAscii()` utils to convert that hash to bytes and then send it off using our Smart Contract's `createPost()` method. We can then subscribe to the events we're emitting and check its return value like this:\n\n```\n...\nconst ipfsHash = 'Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z';\n\ncontract('DReddit', () => {\n  ...\n  it ('should be able to create a post and receive it via contract event', async () => {\n    const receipt = await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();\n    const event = receipt.events.NewPost;\n    postId = event.returnValues.postId;\n    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);\n  });\n});\n```\n\nNotice that we're using `async/await` here because Embark's Smart Contract instance methods return promises. The same can be done without promises as well, it's just a syntactical difference at this point. Running `embark test` should result in two passing tests now!\n\n## Testing correctness of data\n\nAnother good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we're testing in our previous test - there we're testing the description bytes emitted by the `NewPost` event. To test this we take advantage of the `postId` created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.\n\nLuckily wallet accounts can be easily accessed as they are emitted by Embark's `config()` function. All we have to do is attaching a resolution handler to `config()` and storing the emitted value:\n\n```\n...\nlet accounts = [];\n\nconfig({\n  contracts: {\n    DReddit: {}\n  }\n}, (err, _accounts) => {\n  accounts = _accounts;\n});\n```\n\nHaving that in place, our next test could look something like this:\n\n```\nit ('post should have correct data', async () => {\n  const post = await DReddit.methods.posts(postId).call();\n  assert.equal(web3.utils.toAscii(post.description), ipfsHash);\n  assert.equal(post.owner, accounts[0]);\n});\n```\n\nYou might notice that we're referring to `accounts[0]` here. However, just by looking at the code, we can't really know if `accounts[0]` is really the one we're expecting. This is where Embark offers another helping hand. When the `accounts` are set up, Embark will automatically set the first account of the wallet (`accounts[0]`) to the default account that'll be used for all transactions. With that knowledge we can make an assertion, expecting `accounts[0]` to be the owner of the post.\n\nAnother way would be to just always explicitly pass any of the accounts to a Smart Contract method's `send()` function, in which case we'd have full control over which account of the wallet will be used.\n\n## Testing `canVote()`\n\nAlright, next up let's quickly test if our `canVote()` method works the way as expected. As voting on posts that don't exist should never work, we will simply call `canVote()` on a post id that doesn't exist. This test is pretty straight forward:\n\n```\nit('should not be able to vote in an unexisting post', async () => {\n  const userCanVote = await DReddit.methods.canVote(\"123\").call();\n  assert.equal(userCanVote, false);\n});\n```\n\nWe also want to make sure that `canVote()` resolves to `true` in case a user can indeed vote a certain post. We can again reuse the `postId` that we've stored earlier:\n\n```\nit('should be able to vote in a post if account has not voted before', async () => {\n  const userCanVote = await DReddit.methods.canVote(postId).call();\n  assert.equal(userCanVote, true);\n});\n```\n\nWonderful, we have 5 passing tests now!\n\n## Testing `vote()`\n\nOf course we want to test whether one of our application's core features works as well. There's certainly different ways to verify whether `vote()` does what it's supposed to do, but for this tutorial we'll simply check whether the owner account of the vote emitted by the `NewVote` event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:\n\n```\nit(\"should be able to vote in a post\", async () => {\n  const receipt = await DReddit.methods.vote(postId, 1).send();\n  const Vote = receipt.events.NewVote;\n  assert.equal(Vote.returnValues.owner, accounts[0]);\n});\n```\n\n## Test that only one vote per post is allowed\n\nThe last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn't be possible. Using the `async/await` syntax we can test this very nicely by adding a `try/catch` block. When a user votes on a post she has already voted on, `vote()` will fail in which case we can make our assertions accordingly:\n\n```\nit('should not be able to vote twice', async () => {\n  try {\n    const receipt = await DReddit.methods.vote(postId, 1).send();\n    assert.fail('should have reverted');\n  } catch (error){\n    assert(error.message.search('revert') > -1, 'Revert should happen');\n  }\n});\n```\n\nThis might look a bit confusing first but it's actually pretty straight forward. In case `vote()` fails, we should not reach the `assert.fail()` call but end up in the `catch()` block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.\n\nOkay, one last time we run `embark test` and if the output looks like the following, we're fully covered in terms of tests!\n\n\n```\n❯ embark test\nCompiling contracts\n\n\n  DReddit\n    ✓ should work (0ms) - [0 gas]\n    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]\n    ✓ post should have correct data (18ms) - [0 gas]\n    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]\n    ✓ should be able to vote in a post if account hasn't voted before (12ms) - [0 gas]\n    ✓ should be able to vote in a post (42ms) - [65115 gas]\n    ✓ shouldn't be able to vote twice (37ms) - [22815 gas]\n\n\n  7 passing (5s) - [Total: 3130955 gas]\n\n > All tests passed\n```\n\n Awesome! If you run into any issues, check out the repository with all steps recorded [here](https://github.com/embarklabs/dreddit-tutorial). In [the next and last part of this series](/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/), we'll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!\n","slug":"building-a-decentralized-reddit-with-embark-part-2","published":1,"date":"2019-02-11T05:00:00.000Z","updated":"2020-01-17T19:05:36.386Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3u4002c7heg00jbexia","content":"<p>In <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first part of this tutorial</a> we’ve implemented a <code>DReddit</code> Smart Contract that comes with methods to create and vote on topic posts. In this part we’ll continue right where we’ve left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>And off we go!</p>\n<h2 id=\"Writing-a-first-test\"><a href=\"#Writing-a-first-test\" class=\"headerlink\" title=\"Writing a first test\"></a>Writing a first test</h2><p>We’ve got plenty functionality to cover in our tests, but let’s start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file <code>DReddit_spec.js</code> inside <code>test</code> and add a <code>contract()</code> block that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Inside this code block we’ll be putting dedicated test cases. The <code>contract()</code> function can be considered a “grouping” functionality to group tests, if you will. If you’re familiar with Mocha’s <a href=\"https://mochajs.org/\" target=\"_blank\" rel=\"noopener\">describe()</a> function, you already know how <code>contract()</code> works, as it’s pretty much just an alias.</p>\n<p>To check whether our test setup is working, we add a simple test that passes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it (&#39;should work&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Running this using Embark’s <code>test</code> command should result in an output similar to this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  1 passing (5s) - [Total: 2210775 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p>This works great, let’s go ahead and test some actual functionality!</p>\n<h2 id=\"Testing-the-creation-of-post\"><a href=\"#Testing-the-creation-of-post\" class=\"headerlink\" title=\"Testing the creation of post\"></a>Testing the creation of post</h2><p>Let’s test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our <code>DReddit</code> Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.</p>\n<h3 id=\"Requiring-Smart-Contract-instances\"><a href=\"#Requiring-Smart-Contract-instances\" class=\"headerlink\" title=\"Requiring Smart Contract instances\"></a>Requiring Smart Contract instances</h3><p>When running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom <code>require()</code> that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import</p>\n<p>For example, in order to get an instance of our <code>DReddit</code> Smart Contract within the test, we add the following line to our spec file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const DReddit &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;DReddit&#39;);</span><br></pre></td></tr></table></figure>\n\n<p><code>DReddit</code> is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. <strong>In reality, this object is empty</strong>. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, <code>config()</code>, to let Embark know, which Smart Contracts we’re interested in in the first place. This might be a little confusing, but really the bottom line is that <code>DReddit</code> isn’t what we think it is, until we use it inside <code>contract()</code>.</p>\n<p>Let’s add the mentioned <code>config()</code> function so Embark knows what we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is very similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, in fact it’s the test environment equivalent. We pass a configuration object to <code>config()</code> with specific parameters for every Smart Contract we need. In our case, we just need to add <code>DReddit</code> without any additional parameters. This is because our Smart Contract doesn’t need constructor values and things alike. Keep in mind, if we don’t call this <code>config()</code> function, the imported objects for our Smart Contract instances will always be empty.</p>\n<h3 id=\"Testing-createPost\"><a href=\"#Testing-createPost\" class=\"headerlink\" title=\"Testing createPost()\"></a>Testing <code>createPost()</code></h3><p>To test our Smart Contract’s <code>createPost()</code> method, we’ll make use of <code>DReddit</code>, which will now be a Smart Contract instance. If you remember, <code>createPost()</code> actually takes the post’s description as bytes, so how do we make that work? Well, it turns out that we actually don’t pass it the description itself, but an <strong>IPFS hash</strong> that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It’s better to store the actual description in a storage where data size isn’t an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.</p>\n<p>Once we have such a hash (no worries, we’ve got one prepared), we can use Web3’s <code>fromAscii()</code> utils to convert that hash to bytes and then send it off using our Smart Contract’s <code>createPost()</code> method. We can then subscribe to the events we’re emitting and check its return value like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">const ipfsHash &#x3D; &#39;Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  it (&#39;should be able to create a post and receive it via contract event&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();</span><br><span class=\"line\">    const event &#x3D; receipt.events.NewPost;</span><br><span class=\"line\">    postId &#x3D; event.returnValues.postId;</span><br><span class=\"line\">    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’re using <code>async/await</code> here because Embark’s Smart Contract instance methods return promises. The same can be done without promises as well, it’s just a syntactical difference at this point. Running <code>embark test</code> should result in two passing tests now!</p>\n<h2 id=\"Testing-correctness-of-data\"><a href=\"#Testing-correctness-of-data\" class=\"headerlink\" title=\"Testing correctness of data\"></a>Testing correctness of data</h2><p>Another good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we’re testing in our previous test - there we’re testing the description bytes emitted by the <code>NewPost</code> event. To test this we take advantage of the <code>postId</code> created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.</p>\n<p>Luckily wallet accounts can be easily accessed as they are emitted by Embark’s <code>config()</code> function. All we have to do is attaching a resolution handler to <code>config()</code> and storing the emitted value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Having that in place, our next test could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it (&#39;post should have correct data&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const post &#x3D; await DReddit.methods.posts(postId).call();</span><br><span class=\"line\">  assert.equal(web3.utils.toAscii(post.description), ipfsHash);</span><br><span class=\"line\">  assert.equal(post.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You might notice that we’re referring to <code>accounts[0]</code> here. However, just by looking at the code, we can’t really know if <code>accounts[0]</code> is really the one we’re expecting. This is where Embark offers another helping hand. When the <code>accounts</code> are set up, Embark will automatically set the first account of the wallet (<code>accounts[0]</code>) to the default account that’ll be used for all transactions. With that knowledge we can make an assertion, expecting <code>accounts[0]</code> to be the owner of the post.</p>\n<p>Another way would be to just always explicitly pass any of the accounts to a Smart Contract method’s <code>send()</code> function, in which case we’d have full control over which account of the wallet will be used.</p>\n<h2 id=\"Testing-canVote\"><a href=\"#Testing-canVote\" class=\"headerlink\" title=\"Testing canVote()\"></a>Testing <code>canVote()</code></h2><p>Alright, next up let’s quickly test if our <code>canVote()</code> method works the way as expected. As voting on posts that don’t exist should never work, we will simply call <code>canVote()</code> on a post id that doesn’t exist. This test is pretty straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote in an unexisting post&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(&quot;123&quot;).call();</span><br><span class=\"line\">  assert.equal(userCanVote, false);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>We also want to make sure that <code>canVote()</code> resolves to <code>true</code> in case a user can indeed vote a certain post. We can again reuse the <code>postId</code> that we’ve stored earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should be able to vote in a post if account has not voted before&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(postId).call();</span><br><span class=\"line\">  assert.equal(userCanVote, true);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful, we have 5 passing tests now!</p>\n<h2 id=\"Testing-vote\"><a href=\"#Testing-vote\" class=\"headerlink\" title=\"Testing vote()\"></a>Testing <code>vote()</code></h2><p>Of course we want to test whether one of our application’s core features works as well. There’s certainly different ways to verify whether <code>vote()</code> does what it’s supposed to do, but for this tutorial we’ll simply check whether the owner account of the vote emitted by the <code>NewVote</code> event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;should be able to vote in a post&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">  const Vote &#x3D; receipt.events.NewVote;</span><br><span class=\"line\">  assert.equal(Vote.returnValues.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-that-only-one-vote-per-post-is-allowed\"><a href=\"#Test-that-only-one-vote-per-post-is-allowed\" class=\"headerlink\" title=\"Test that only one vote per post is allowed\"></a>Test that only one vote per post is allowed</h2><p>The last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn’t be possible. Using the <code>async/await</code> syntax we can test this very nicely by adding a <code>try/catch</code> block. When a user votes on a post she has already voted on, <code>vote()</code> will fail in which case we can make our assertions accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote twice&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">    assert.fail(&#39;should have reverted&#39;);</span><br><span class=\"line\">  &#125; catch (error)&#123;</span><br><span class=\"line\">    assert(error.message.search(&#39;revert&#39;) &gt; -1, &#39;Revert should happen&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This might look a bit confusing first but it’s actually pretty straight forward. In case <code>vote()</code> fails, we should not reach the <code>assert.fail()</code> call but end up in the <code>catch()</code> block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.</p>\n<p>Okay, one last time we run <code>embark test</code> and if the output looks like the following, we’re fully covered in terms of tests!</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]</span><br><span class=\"line\">    ✓ post should have correct data (18ms) - [0 gas]</span><br><span class=\"line\">    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post if account hasn&#39;t voted before (12ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post (42ms) - [65115 gas]</span><br><span class=\"line\">    ✓ shouldn&#39;t be able to vote twice (37ms) - [22815 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  7 passing (5s) - [Total: 3130955 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p> Awesome! If you run into any issues, check out the repository with all steps recorded <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">here</a>. In <a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\">the next and last part of this series</a>, we’ll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>In <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first part of this tutorial</a> we’ve implemented a <code>DReddit</code> Smart Contract that comes with methods to create and vote on topic posts. In this part we’ll continue right where we’ve left off and take a closer look at how we can test our Smart Contract using Embark. Make sure to check out the other parts as well:</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\"><strong>Part 3</strong> - Building a simple front-end using React</a></li>\n</ul>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<p>And off we go!</p>\n<h2 id=\"Writing-a-first-test\"><a href=\"#Writing-a-first-test\" class=\"headerlink\" title=\"Writing a first test\"></a>Writing a first test</h2><p>We’ve got plenty functionality to cover in our tests, but let’s start with a very simple one just to get a bit more familiar with how to write tests and also to ensure things are working as intended. First we create a test file <code>DReddit_spec.js</code> inside <code>test</code> and add a <code>contract()</code> block that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Inside this code block we’ll be putting dedicated test cases. The <code>contract()</code> function can be considered a “grouping” functionality to group tests, if you will. If you’re familiar with Mocha’s <a href=\"https://mochajs.org/\" target=\"_blank\" rel=\"noopener\">describe()</a> function, you already know how <code>contract()</code> works, as it’s pretty much just an alias.</p>\n<p>To check whether our test setup is working, we add a simple test that passes:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  it (&#39;should work&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">    assert.ok(true);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Running this using Embark’s <code>test</code> command should result in an output similar to this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  1 passing (5s) - [Total: 2210775 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p>This works great, let’s go ahead and test some actual functionality!</p>\n<h2 id=\"Testing-the-creation-of-post\"><a href=\"#Testing-the-creation-of-post\" class=\"headerlink\" title=\"Testing the creation of post\"></a>Testing the creation of post</h2><p>Let’s test the core functionality of our application - the creation of posts. For that we need to do a couple of things: We need to somehow get an instance of our <code>DReddit</code> Smart Contract in JavaScript, so we can call methods on it to test if they work, and we also need to configure out testing environment so that the right Smart Contract instances are created.</p>\n<h3 id=\"Requiring-Smart-Contract-instances\"><a href=\"#Requiring-Smart-Contract-instances\" class=\"headerlink\" title=\"Requiring Smart Contract instances\"></a>Requiring Smart Contract instances</h3><p>When running tests, Embark adds a couple of custom functions and objects to the global scope, which are necessary. One of those functions is a custom <code>require()</code> that lets us import Smart Contract instances from an Embark specific path. This is done so that we can easily import</p>\n<p>For example, in order to get an instance of our <code>DReddit</code> Smart Contract within the test, we add the following line to our spec file:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const DReddit &#x3D; require(&#39;Embark&#x2F;contracts&#x2F;DReddit&#39;);</span><br></pre></td></tr></table></figure>\n\n<p><code>DReddit</code> is now supposed to be an EmbarkJS Smart Contract instance, but we need to be very careful here. <strong>In reality, this object is empty</strong>. This is because at the time this file is processed, the Smart Contract might not be deployed yet. As a matter of fact, we need to make use of another function, <code>config()</code>, to let Embark know, which Smart Contracts we’re interested in in the first place. This might be a little confusing, but really the bottom line is that <code>DReddit</code> isn’t what we think it is, until we use it inside <code>contract()</code>.</p>\n<p>Let’s add the mentioned <code>config()</code> function so Embark knows what we need:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This is very similar to <a href=\"/docs/contracts_configuration.html\">configuring Smart Contracts</a>, in fact it’s the test environment equivalent. We pass a configuration object to <code>config()</code> with specific parameters for every Smart Contract we need. In our case, we just need to add <code>DReddit</code> without any additional parameters. This is because our Smart Contract doesn’t need constructor values and things alike. Keep in mind, if we don’t call this <code>config()</code> function, the imported objects for our Smart Contract instances will always be empty.</p>\n<h3 id=\"Testing-createPost\"><a href=\"#Testing-createPost\" class=\"headerlink\" title=\"Testing createPost()\"></a>Testing <code>createPost()</code></h3><p>To test our Smart Contract’s <code>createPost()</code> method, we’ll make use of <code>DReddit</code>, which will now be a Smart Contract instance. If you remember, <code>createPost()</code> actually takes the post’s description as bytes, so how do we make that work? Well, it turns out that we actually don’t pass it the description itself, but an <strong>IPFS hash</strong> that points to the actual description. The reason for that is that posts can be very long, resulting in a lot of bytes. It’s better to store the actual description in a storage where data size isn’t an issue, and instead store a reference to that data in our Smart Contract. Using a hash makes the data size deterministic as it will always have the same length.</p>\n<p>Once we have such a hash (no worries, we’ve got one prepared), we can use Web3’s <code>fromAscii()</code> utils to convert that hash to bytes and then send it off using our Smart Contract’s <code>createPost()</code> method. We can then subscribe to the events we’re emitting and check its return value like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">const ipfsHash &#x3D; &#39;Qmc5gCcjYypU7y28oCALwfSvxCBskLuPKWpK4qpterKC7z&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">contract(&#39;DReddit&#39;, () &#x3D;&gt; &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  it (&#39;should be able to create a post and receive it via contract event&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.createPost(web3.utils.fromAscii(ipfsHash)).send();</span><br><span class=\"line\">    const event &#x3D; receipt.events.NewPost;</span><br><span class=\"line\">    postId &#x3D; event.returnValues.postId;</span><br><span class=\"line\">    assert.equal(web3.utils.toAscii(event.returnValues.description), ipfsHash);</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’re using <code>async/await</code> here because Embark’s Smart Contract instance methods return promises. The same can be done without promises as well, it’s just a syntactical difference at this point. Running <code>embark test</code> should result in two passing tests now!</p>\n<h2 id=\"Testing-correctness-of-data\"><a href=\"#Testing-correctness-of-data\" class=\"headerlink\" title=\"Testing correctness of data\"></a>Testing correctness of data</h2><p>Another good test case would be to check if the stored data such as the description bytes, the owner etc.  resolve back to the correct data. Notice that this is slightly different from what we’re testing in our previous test - there we’re testing the description bytes emitted by the <code>NewPost</code> event. To test this we take advantage of the <code>postId</code> created in the previous test, which is available globally now, to fetch the stored post. We then perform a similar check as in the previous test. We also want to test if the owner data of the post is correct, but for that we need to get access to the account that created the post in the first place.</p>\n<p>Luckily wallet accounts can be easily accessed as they are emitted by Embark’s <code>config()</code> function. All we have to do is attaching a resolution handler to <code>config()</code> and storing the emitted value:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">let accounts &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    DReddit: &#123;&#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;, (err, _accounts) &#x3D;&gt; &#123;</span><br><span class=\"line\">  accounts &#x3D; _accounts;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Having that in place, our next test could look something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it (&#39;post should have correct data&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const post &#x3D; await DReddit.methods.posts(postId).call();</span><br><span class=\"line\">  assert.equal(web3.utils.toAscii(post.description), ipfsHash);</span><br><span class=\"line\">  assert.equal(post.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>You might notice that we’re referring to <code>accounts[0]</code> here. However, just by looking at the code, we can’t really know if <code>accounts[0]</code> is really the one we’re expecting. This is where Embark offers another helping hand. When the <code>accounts</code> are set up, Embark will automatically set the first account of the wallet (<code>accounts[0]</code>) to the default account that’ll be used for all transactions. With that knowledge we can make an assertion, expecting <code>accounts[0]</code> to be the owner of the post.</p>\n<p>Another way would be to just always explicitly pass any of the accounts to a Smart Contract method’s <code>send()</code> function, in which case we’d have full control over which account of the wallet will be used.</p>\n<h2 id=\"Testing-canVote\"><a href=\"#Testing-canVote\" class=\"headerlink\" title=\"Testing canVote()\"></a>Testing <code>canVote()</code></h2><p>Alright, next up let’s quickly test if our <code>canVote()</code> method works the way as expected. As voting on posts that don’t exist should never work, we will simply call <code>canVote()</code> on a post id that doesn’t exist. This test is pretty straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote in an unexisting post&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(&quot;123&quot;).call();</span><br><span class=\"line\">  assert.equal(userCanVote, false);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>We also want to make sure that <code>canVote()</code> resolves to <code>true</code> in case a user can indeed vote a certain post. We can again reuse the <code>postId</code> that we’ve stored earlier:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should be able to vote in a post if account has not voted before&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const userCanVote &#x3D; await DReddit.methods.canVote(postId).call();</span><br><span class=\"line\">  assert.equal(userCanVote, true);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful, we have 5 passing tests now!</p>\n<h2 id=\"Testing-vote\"><a href=\"#Testing-vote\" class=\"headerlink\" title=\"Testing vote()\"></a>Testing <code>vote()</code></h2><p>Of course we want to test whether one of our application’s core features works as well. There’s certainly different ways to verify whether <code>vote()</code> does what it’s supposed to do, but for this tutorial we’ll simply check whether the owner account of the vote emitted by the <code>NewVote</code> event is the same as the account that performed the vote. We can actually take some inspiration from our previous tests:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;should be able to vote in a post&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">  const Vote &#x3D; receipt.events.NewVote;</span><br><span class=\"line\">  assert.equal(Vote.returnValues.owner, accounts[0]);</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Test-that-only-one-vote-per-post-is-allowed\"><a href=\"#Test-that-only-one-vote-per-post-is-allowed\" class=\"headerlink\" title=\"Test that only one vote per post is allowed\"></a>Test that only one vote per post is allowed</h2><p>The last but essential functionality we want to test is that whether our Smart Contract allows users to vote multiple times on the same post, which for obvious reasons shouldn’t be possible. Using the <code>async/await</code> syntax we can test this very nicely by adding a <code>try/catch</code> block. When a user votes on a post she has already voted on, <code>vote()</code> will fail in which case we can make our assertions accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&#39;should not be able to vote twice&#39;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  try &#123;</span><br><span class=\"line\">    const receipt &#x3D; await DReddit.methods.vote(postId, 1).send();</span><br><span class=\"line\">    assert.fail(&#39;should have reverted&#39;);</span><br><span class=\"line\">  &#125; catch (error)&#123;</span><br><span class=\"line\">    assert(error.message.search(&#39;revert&#39;) &gt; -1, &#39;Revert should happen&#39;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This might look a bit confusing first but it’s actually pretty straight forward. In case <code>vote()</code> fails, we should not reach the <code>assert.fail()</code> call but end up in the <code>catch()</code> block immediately. If that was not the case, the test would fail. This is a very common pattern when testing negatives.</p>\n<p>Okay, one last time we run <code>embark test</code> and if the output looks like the following, we’re fully covered in terms of tests!</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">❯ embark test</span><br><span class=\"line\">Compiling contracts</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  DReddit</span><br><span class=\"line\">    ✓ should work (0ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to create a post and receive it via contract event (60ms) - [160689 gas]</span><br><span class=\"line\">    ✓ post should have correct data (18ms) - [0 gas]</span><br><span class=\"line\">    ✓ should not be able to vote in an unexisting post (14ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post if account hasn&#39;t voted before (12ms) - [0 gas]</span><br><span class=\"line\">    ✓ should be able to vote in a post (42ms) - [65115 gas]</span><br><span class=\"line\">    ✓ shouldn&#39;t be able to vote twice (37ms) - [22815 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">  7 passing (5s) - [Total: 3130955 gas]</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; All tests passed</span><br></pre></td></tr></table></figure>\n\n<p> Awesome! If you run into any issues, check out the repository with all steps recorded <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">here</a>. In <a href=\"/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/\">the next and last part of this series</a>, we’ll be building a front-end for our DReddit app using React. Until then, feel free to add more tests as you like!</p>\n"},{"title":"How to upgrade to Embark 4","summary":"In this guide, we'll learn how to upgrade a Dapp created with Embark 3.x to Embark 4","author":"jonathan_rainville","layout":"blog-post","alias":"news/2019/03/17/upgrading-to-embark-4/","_content":"\nThe release of Embark 4.0 is close at hand and the release candidate, `beta.1`, will introduce some breaking changes. Let's see what it takes to update an Embark 3.x Dapp to Embark 4.\n\n## Use **any** frontend build tool!\n\nThat's right! The use of Embark's builtin pipeline in no longer required.\n\nHistorically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of \"magic\" imports (ie `import SimpleStorage from \"Embark/contracts/SimpleStorage\";` or `import EmbarkJS from Embark/EmbarkJS`), and establishing a Web3 connection for the Dapp.\n\nHowever, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as `create-react-app` or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.\n\nTherefore, we are announcing that Embark 4 can use **any** frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as `create-react-app` or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.\n\nTo migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.\n\n{% notification info 'NOTE' %}\nIf you are not interested in using a third party pipeline, you can skip to the next section to [see the rest of the breaking changes needed to migrate a Dapp to Embark 4](#New-Web3-plugin).\n{% endnotification %}\n\n### Converting to another pipeline\n\nConverting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.\n\n#### Artifact generation directory\n\nNOTE: If you are planning on using Embark's built-in Webpack pipeline (and not use a third party pipeline), please [skip down to the remainder of the Embark 4 breaking changes](#New-Web3-plugin).\n\nEmbark 4 generates [Smart Contract artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp's Smart Contracts into the Dapp's source code. Most of these artifacts were already generated before, but lived inside the `.embark/` folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.\n\nThe first thing we need to do is add a new `generationDir` property in the root of `embark.json`. This property tells Embark where to place the generated artifacts in the Dapp's filesystem. For example, `create-react-app` (CRA) has `src/` as source folder and the artifacts must be placed in that folder, so we would add in `embark.json`:\n\n```json\n{\n  \"generationDir\": \"src/embarkArtifacts\"\n}\n```\n\n#### \"Magic\" imports\nAfterwards, we need to convert all \"magic\" imports in our Dapp's code to relative imports.\n\nThe first one is the EmbarkJS import. The \"magic\" import is `\"Embark/EmbarkJS\"`. Anywhere we have `\"Embark/EmbarkJS\"` in our Dapp's code, we need to convert that to the relative path. Because we are trying to get the `EmbarkJS` library, and the `embarkjs.js` script is located in the root of  `embarkArtifacts/`, we need to replace\n\n```javascript\nimport EmbarkJS from \"Embark/EmbarkJS\"\n```\nwith\n```javascript\nimport EmbarkJS from \"./embarkArtifacts/embarkjs\"\n```\n{% notification info 'NOTE' %}\nNOTE: The relative path is dependent upon the generationDir setting specified in embark.json [see the \"Artifact generation directory\" section above](#Artifact-generation-directory).\n{% endnotification %}\n\nSecondly, we need to update the \"magic\" Smart Contract imports. These will need to change from\n\n```javascript\nimport ContractName from \"Embark/contract/ContractName\";\n```\nto\n```javascript\nimport ContractName from \"./embarkArtifacts/contracts/ContractName\";\n```\n\nThirdly, there used to be `import web3 from \"Embark/web3\"`, but it has been removed in Embark 4 in favor of using a global Web3 object. Don't worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global `web3` object is now available everywhere in the Dapp.\n\nNow, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.\n\n### New project with another pipeline\n\nStarting a new Dapp from scratch is easy, we have two options.\n\n#### Embark's create-react-dapp template\n\nThe easiest option is to use our [new Embark CRA template](https://github.com/embarklabs/embark-create-react-dapp-template). It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an `embarkConfig/` folder in the root of the Dapp to make sure they don't clash with CRA's config folder/files.\n\nTo get started with Embark's CRA template,\n\n```\nembark new --template embark-react-dapp my-dapp\ncd my-dapp\nembark run\n```\n{% notification danger 'DEPRECATION NOTICE' %}\nThe `--template` option has been deprecated in v5 and support will be removed in future versions.\n{% endnotification %}\n\nThen, in another terminal,\n\n```\ncd my-dapp\nyarn start // or alternatively, npm run start\n```\n\nThat's it!\n\n#### For other build tools\n\nIf we want to use another build tool than CRA, here are the steps:\n\nCreate a project using a frontend build tool like Angular CLI. Then, in another directory, execute `embark new your_projects_name`.\n\nAfterwards, we copy all the files and folders from the Embark project to the build tool's folder. The only tweak that you will need to do is go in `config/pipeline.js` and set `enabled: false`, so that Embark's pipeline is disabled.\n\nWe can also go in `embark.json` and remove the `app` section (as well as Embark's source dir that you will not be using).\n\nLastly, check out [the \"Artifact generation directory\" section above](#Artifact-generation-directory) to make sure your artifacts directory is set up correctly for you build tool.\n\nThere you go, your project is ready.\n\nWe know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool's directory. Keep an eye out for that.\n\n## New Web3 plugin\n\n*(2019/06/27)* **NOTE**: *the following instructions are* ***not*** *applicable to Embark `4.1.x` and newer, but should still be followed for `4.0.x` or `<=4.1.0-beta.3`.*\n\nStarting with Embark 4 beta.1, Embark no longer supplies the Dapp with `Web3.js` by default. Don't run. We did that so that we can now have the possibility of supporting more than just `Web3.js`, such as EthersJS, and more. You can even roll your own.\n\nTo continue using `Web3.js` inside the Embark 4 Dapp, execute the following command in the Embark console: `plugin install embarkjs-connector-web3`.\n\nThis simply [installs `embarkjs-connector-web3` as a plugin](https://embark.embarklabs.io/docs/installing_plugins.html). Alternatively, this plugin can be installed manually by executing:\n1. `yarn add embarkjs-connector-web3` or `npm install --save embarkjs-connector-web3`\n2. Adding `\"embarkjs-connector-web3\": {}` to the `plugins` section of `embark.json`\n\nIt's as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import `EmbarkJS` at least once. If using a third party pipeline, the `EmbarkJS` file can be imported using `import EmbarkJS from \"./embarkArtifacts/embarkjs.js\"` (or as specified by the `generationDir` in `embark.json`). If using Embark's built-in pipeline, `EmbarkJS` can be imported using `import EmbarkJS from \"Embark/EmbarkJS\";`.\n\n## New Blockchain account configs\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the [Accounts Blockchain configuration guide](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n- `account`: This is completely replaced by the new `accounts` property (notice the `s` at the end of `accounts`). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as [described in the docs](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions)\n- `simulatorMnemonic`: Removed in favor of Ganache's default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config's `mnemonic` account type](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n## Conclusion\n\nThis is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we'll detail during the Embark 4 release.\n\nIn the meantime, all the Embark 4 goodness doesn't come at too high a price in terms of breaking changes.\n\nUpgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on [Gitter](https://gitter.im/embark-framework/Lobby).\n","source":"_posts/2019-03-18-upgrading-to-embark-4.md","raw":"title: How to upgrade to Embark 4\nsummary: \"In this guide, we'll learn how to upgrade a Dapp created with Embark 3.x to Embark 4\"\nauthor: jonathan_rainville\ncategories:\n  - tutorials\nlayout: blog-post\nalias: news/2019/03/17/upgrading-to-embark-4/\n---\n\nThe release of Embark 4.0 is close at hand and the release candidate, `beta.1`, will introduce some breaking changes. Let's see what it takes to update an Embark 3.x Dapp to Embark 4.\n\n## Use **any** frontend build tool!\n\nThat's right! The use of Embark's builtin pipeline in no longer required.\n\nHistorically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of \"magic\" imports (ie `import SimpleStorage from \"Embark/contracts/SimpleStorage\";` or `import EmbarkJS from Embark/EmbarkJS`), and establishing a Web3 connection for the Dapp.\n\nHowever, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as `create-react-app` or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.\n\nTherefore, we are announcing that Embark 4 can use **any** frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as `create-react-app` or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.\n\nTo migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.\n\n{% notification info 'NOTE' %}\nIf you are not interested in using a third party pipeline, you can skip to the next section to [see the rest of the breaking changes needed to migrate a Dapp to Embark 4](#New-Web3-plugin).\n{% endnotification %}\n\n### Converting to another pipeline\n\nConverting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.\n\n#### Artifact generation directory\n\nNOTE: If you are planning on using Embark's built-in Webpack pipeline (and not use a third party pipeline), please [skip down to the remainder of the Embark 4 breaking changes](#New-Web3-plugin).\n\nEmbark 4 generates [Smart Contract artifacts](/docs/javascript_usage.html#Embark-Artifacts) for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp's Smart Contracts into the Dapp's source code. Most of these artifacts were already generated before, but lived inside the `.embark/` folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.\n\nThe first thing we need to do is add a new `generationDir` property in the root of `embark.json`. This property tells Embark where to place the generated artifacts in the Dapp's filesystem. For example, `create-react-app` (CRA) has `src/` as source folder and the artifacts must be placed in that folder, so we would add in `embark.json`:\n\n```json\n{\n  \"generationDir\": \"src/embarkArtifacts\"\n}\n```\n\n#### \"Magic\" imports\nAfterwards, we need to convert all \"magic\" imports in our Dapp's code to relative imports.\n\nThe first one is the EmbarkJS import. The \"magic\" import is `\"Embark/EmbarkJS\"`. Anywhere we have `\"Embark/EmbarkJS\"` in our Dapp's code, we need to convert that to the relative path. Because we are trying to get the `EmbarkJS` library, and the `embarkjs.js` script is located in the root of  `embarkArtifacts/`, we need to replace\n\n```javascript\nimport EmbarkJS from \"Embark/EmbarkJS\"\n```\nwith\n```javascript\nimport EmbarkJS from \"./embarkArtifacts/embarkjs\"\n```\n{% notification info 'NOTE' %}\nNOTE: The relative path is dependent upon the generationDir setting specified in embark.json [see the \"Artifact generation directory\" section above](#Artifact-generation-directory).\n{% endnotification %}\n\nSecondly, we need to update the \"magic\" Smart Contract imports. These will need to change from\n\n```javascript\nimport ContractName from \"Embark/contract/ContractName\";\n```\nto\n```javascript\nimport ContractName from \"./embarkArtifacts/contracts/ContractName\";\n```\n\nThirdly, there used to be `import web3 from \"Embark/web3\"`, but it has been removed in Embark 4 in favor of using a global Web3 object. Don't worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global `web3` object is now available everywhere in the Dapp.\n\nNow, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.\n\n### New project with another pipeline\n\nStarting a new Dapp from scratch is easy, we have two options.\n\n#### Embark's create-react-dapp template\n\nThe easiest option is to use our [new Embark CRA template](https://github.com/embarklabs/embark-create-react-dapp-template). It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an `embarkConfig/` folder in the root of the Dapp to make sure they don't clash with CRA's config folder/files.\n\nTo get started with Embark's CRA template,\n\n```\nembark new --template embark-react-dapp my-dapp\ncd my-dapp\nembark run\n```\n{% notification danger 'DEPRECATION NOTICE' %}\nThe `--template` option has been deprecated in v5 and support will be removed in future versions.\n{% endnotification %}\n\nThen, in another terminal,\n\n```\ncd my-dapp\nyarn start // or alternatively, npm run start\n```\n\nThat's it!\n\n#### For other build tools\n\nIf we want to use another build tool than CRA, here are the steps:\n\nCreate a project using a frontend build tool like Angular CLI. Then, in another directory, execute `embark new your_projects_name`.\n\nAfterwards, we copy all the files and folders from the Embark project to the build tool's folder. The only tweak that you will need to do is go in `config/pipeline.js` and set `enabled: false`, so that Embark's pipeline is disabled.\n\nWe can also go in `embark.json` and remove the `app` section (as well as Embark's source dir that you will not be using).\n\nLastly, check out [the \"Artifact generation directory\" section above](#Artifact-generation-directory) to make sure your artifacts directory is set up correctly for you build tool.\n\nThere you go, your project is ready.\n\nWe know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool's directory. Keep an eye out for that.\n\n## New Web3 plugin\n\n*(2019/06/27)* **NOTE**: *the following instructions are* ***not*** *applicable to Embark `4.1.x` and newer, but should still be followed for `4.0.x` or `<=4.1.0-beta.3`.*\n\nStarting with Embark 4 beta.1, Embark no longer supplies the Dapp with `Web3.js` by default. Don't run. We did that so that we can now have the possibility of supporting more than just `Web3.js`, such as EthersJS, and more. You can even roll your own.\n\nTo continue using `Web3.js` inside the Embark 4 Dapp, execute the following command in the Embark console: `plugin install embarkjs-connector-web3`.\n\nThis simply [installs `embarkjs-connector-web3` as a plugin](https://embark.embarklabs.io/docs/installing_plugins.html). Alternatively, this plugin can be installed manually by executing:\n1. `yarn add embarkjs-connector-web3` or `npm install --save embarkjs-connector-web3`\n2. Adding `\"embarkjs-connector-web3\": {}` to the `plugins` section of `embark.json`\n\nIt's as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import `EmbarkJS` at least once. If using a third party pipeline, the `EmbarkJS` file can be imported using `import EmbarkJS from \"./embarkArtifacts/embarkjs.js\"` (or as specified by the `generationDir` in `embark.json`). If using Embark's built-in pipeline, `EmbarkJS` can be imported using `import EmbarkJS from \"Embark/EmbarkJS\";`.\n\n## New Blockchain account configs\n\nEmbark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the [Accounts Blockchain configuration guide](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html) in our docs.\n\nHowever, we did introduce some small breaking changes. We removed:\n- `account`: This is completely replaced by the new `accounts` property (notice the `s` at the end of `accounts`). It gives the developer more flexibility. To have exactly the same behavior as before, just use the `nodeAccounts` account type as [described in the docs](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions)\n- `simulatorMnemonic`: Removed in favor of Ganache's default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the [blockchain config's `mnemonic` account type](https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions).\n\n## Conclusion\n\nThis is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we'll detail during the Embark 4 release.\n\nIn the meantime, all the Embark 4 goodness doesn't come at too high a price in terms of breaking changes.\n\nUpgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on [Gitter](https://gitter.im/embark-framework/Lobby).\n","slug":"upgrading-to-embark-4","published":1,"date":"2019-03-18T04:00:00.000Z","updated":"2020-01-19T20:56:52.651Z","_id":"ck5ijm3u5002e7heg4c75be4a","comments":1,"photos":[],"link":"","content":"<p>The release of Embark 4.0 is close at hand and the release candidate, <code>beta.1</code>, will introduce some breaking changes. Let’s see what it takes to update an Embark 3.x Dapp to Embark 4.</p>\n<h2 id=\"Use-any-frontend-build-tool\"><a href=\"#Use-any-frontend-build-tool\" class=\"headerlink\" title=\"Use any frontend build tool!\"></a>Use <strong>any</strong> frontend build tool!</h2><p>That’s right! The use of Embark’s builtin pipeline in no longer required.</p>\n<p>Historically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of “magic” imports (ie <code>import SimpleStorage from &quot;Embark/contracts/SimpleStorage&quot;;</code> or <code>import EmbarkJS from Embark/EmbarkJS</code>), and establishing a Web3 connection for the Dapp.</p>\n<p>However, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as <code>create-react-app</code> or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.</p>\n<p>Therefore, we are announcing that Embark 4 can use <strong>any</strong> frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as <code>create-react-app</code> or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.</p>\n<p>To migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>If you are not interested in using a third party pipeline, you can skip to the next section to <a href=\"#New-Web3-plugin\">see the rest of the breaking changes needed to migrate a Dapp to Embark 4</a>.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Converting-to-another-pipeline\"><a href=\"#Converting-to-another-pipeline\" class=\"headerlink\" title=\"Converting to another pipeline\"></a>Converting to another pipeline</h3><p>Converting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.</p>\n<h4 id=\"Artifact-generation-directory\"><a href=\"#Artifact-generation-directory\" class=\"headerlink\" title=\"Artifact generation directory\"></a>Artifact generation directory</h4><p>NOTE: If you are planning on using Embark’s built-in Webpack pipeline (and not use a third party pipeline), please <a href=\"#New-Web3-plugin\">skip down to the remainder of the Embark 4 breaking changes</a>.</p>\n<p>Embark 4 generates <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Smart Contract artifacts</a> for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp’s Smart Contracts into the Dapp’s source code. Most of these artifacts were already generated before, but lived inside the <code>.embark/</code> folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.</p>\n<p>The first thing we need to do is add a new <code>generationDir</code> property in the root of <code>embark.json</code>. This property tells Embark where to place the generated artifacts in the Dapp’s filesystem. For example, <code>create-react-app</code> (CRA) has <code>src/</code> as source folder and the artifacts must be placed in that folder, so we would add in <code>embark.json</code>:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"generationDir\"</span>: <span class=\"string\">\"src/embarkArtifacts\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"“Magic”-imports\"><a href=\"#“Magic”-imports\" class=\"headerlink\" title=\"“Magic” imports\"></a>“Magic” imports</h4><p>Afterwards, we need to convert all “magic” imports in our Dapp’s code to relative imports.</p>\n<p>The first one is the EmbarkJS import. The “magic” import is <code>&quot;Embark/EmbarkJS&quot;</code>. Anywhere we have <code>&quot;Embark/EmbarkJS&quot;</code> in our Dapp’s code, we need to convert that to the relative path. Because we are trying to get the <code>EmbarkJS</code> library, and the <code>embarkjs.js</code> script is located in the root of  <code>embarkArtifacts/</code>, we need to replace</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/EmbarkJS\"</span></span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/embarkjs\"</span></span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>NOTE: The relative path is dependent upon the generationDir setting specified in embark.json <a href=\"#Artifact-generation-directory\">see the “Artifact generation directory” section above</a>.</p>\n</p>\n</div> \n\n\n\n<p>Secondly, we need to update the “magic” Smart Contract imports. These will need to change from</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/contract/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n<p>to</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/contracts/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n\n<p>Thirdly, there used to be <code>import web3 from &quot;Embark/web3&quot;</code>, but it has been removed in Embark 4 in favor of using a global Web3 object. Don’t worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global <code>web3</code> object is now available everywhere in the Dapp.</p>\n<p>Now, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.</p>\n<h3 id=\"New-project-with-another-pipeline\"><a href=\"#New-project-with-another-pipeline\" class=\"headerlink\" title=\"New project with another pipeline\"></a>New project with another pipeline</h3><p>Starting a new Dapp from scratch is easy, we have two options.</p>\n<h4 id=\"Embark’s-create-react-dapp-template\"><a href=\"#Embark’s-create-react-dapp-template\" class=\"headerlink\" title=\"Embark’s create-react-dapp template\"></a>Embark’s create-react-dapp template</h4><p>The easiest option is to use our <a href=\"https://github.com/embarklabs/embark-create-react-dapp-template\" target=\"_blank\" rel=\"noopener\">new Embark CRA template</a>. It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an <code>embarkConfig/</code> folder in the root of the Dapp to make sure they don’t clash with CRA’s config folder/files.</p>\n<p>To get started with Embark’s CRA template,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark new --template embark-react-dapp my-dapp</span><br><span class=\"line\">cd my-dapp</span><br><span class=\"line\">embark run</span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>DEPRECATION NOTICE</strong></p>\n  <p><p>The <code>--template</code> option has been deprecated in v5 and support will be removed in future versions.</p>\n</p>\n</div> \n\n\n\n<p>Then, in another terminal,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">cd my-dapp</span><br><span class=\"line\">yarn start &#x2F;&#x2F; or alternatively, npm run start</span><br></pre></td></tr></table></figure>\n\n<p>That’s it!</p>\n<h4 id=\"For-other-build-tools\"><a href=\"#For-other-build-tools\" class=\"headerlink\" title=\"For other build tools\"></a>For other build tools</h4><p>If we want to use another build tool than CRA, here are the steps:</p>\n<p>Create a project using a frontend build tool like Angular CLI. Then, in another directory, execute <code>embark new your_projects_name</code>.</p>\n<p>Afterwards, we copy all the files and folders from the Embark project to the build tool’s folder. The only tweak that you will need to do is go in <code>config/pipeline.js</code> and set <code>enabled: false</code>, so that Embark’s pipeline is disabled.</p>\n<p>We can also go in <code>embark.json</code> and remove the <code>app</code> section (as well as Embark’s source dir that you will not be using).</p>\n<p>Lastly, check out <a href=\"#Artifact-generation-directory\">the “Artifact generation directory” section above</a> to make sure your artifacts directory is set up correctly for you build tool.</p>\n<p>There you go, your project is ready.</p>\n<p>We know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool’s directory. Keep an eye out for that.</p>\n<h2 id=\"New-Web3-plugin\"><a href=\"#New-Web3-plugin\" class=\"headerlink\" title=\"New Web3 plugin\"></a>New Web3 plugin</h2><p><em>(2019/06/27)</em> <strong>NOTE</strong>: <em>the following instructions are</em> <strong><em>not</em></strong> <em>applicable to Embark <code>4.1.x</code> and newer, but should still be followed for <code>4.0.x</code> or <code>&lt;=4.1.0-beta.3</code>.</em></p>\n<p>Starting with Embark 4 beta.1, Embark no longer supplies the Dapp with <code>Web3.js</code> by default. Don’t run. We did that so that we can now have the possibility of supporting more than just <code>Web3.js</code>, such as EthersJS, and more. You can even roll your own.</p>\n<p>To continue using <code>Web3.js</code> inside the Embark 4 Dapp, execute the following command in the Embark console: <code>plugin install embarkjs-connector-web3</code>.</p>\n<p>This simply <a href=\"https://embark.embarklabs.io/docs/installing_plugins.html\">installs <code>embarkjs-connector-web3</code> as a plugin</a>. Alternatively, this plugin can be installed manually by executing:</p>\n<ol>\n<li><code>yarn add embarkjs-connector-web3</code> or <code>npm install --save embarkjs-connector-web3</code></li>\n<li>Adding <code>&quot;embarkjs-connector-web3&quot;: {}</code> to the <code>plugins</code> section of <code>embark.json</code></li>\n</ol>\n<p>It’s as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import <code>EmbarkJS</code> at least once. If using a third party pipeline, the <code>EmbarkJS</code> file can be imported using <code>import EmbarkJS from &quot;./embarkArtifacts/embarkjs.js&quot;</code> (or as specified by the <code>generationDir</code> in <code>embark.json</code>). If using Embark’s built-in pipeline, <code>EmbarkJS</code> can be imported using <code>import EmbarkJS from &quot;Embark/EmbarkJS&quot;;</code>.</p>\n<h2 id=\"New-Blockchain-account-configs\"><a href=\"#New-Blockchain-account-configs\" class=\"headerlink\" title=\"New Blockchain account configs\"></a>New Blockchain account configs</h2><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><code>account</code>: This is completely replaced by the new <code>accounts</code> property (notice the <code>s</code> at the end of <code>accounts</code>). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">described in the docs</a></li>\n<li><code>simulatorMnemonic</code>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s <code>mnemonic</code> account type</a>.</li>\n</ul>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>This is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we’ll detail during the Embark 4 release.</p>\n<p>In the meantime, all the Embark 4 goodness doesn’t come at too high a price in terms of breaking changes.</p>\n<p>Upgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a>.</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>The release of Embark 4.0 is close at hand and the release candidate, <code>beta.1</code>, will introduce some breaking changes. Let’s see what it takes to update an Embark 3.x Dapp to Embark 4.</p>\n<h2 id=\"Use-any-frontend-build-tool\"><a href=\"#Use-any-frontend-build-tool\" class=\"headerlink\" title=\"Use any frontend build tool!\"></a>Use <strong>any</strong> frontend build tool!</h2><p>That’s right! The use of Embark’s builtin pipeline in no longer required.</p>\n<p>Historically, Embark 3.x came with a special Webpack pipeline because it automated development tasks, such as enabling the use of “magic” imports (ie <code>import SimpleStorage from &quot;Embark/contracts/SimpleStorage&quot;;</code> or <code>import EmbarkJS from Embark/EmbarkJS</code>), and establishing a Web3 connection for the Dapp.</p>\n<p>However, we discovered the hard way that those advantages were not worth the hit in development efficiency, compared to using an optimized pipeline, such as <code>create-react-app</code> or Angular CLI. Indeed, on every save, Embark would regenerate a lot of the Dapp-side code and then webpack the entire Dapp, often taking quite some time.</p>\n<p>Therefore, we are announcing that Embark 4 can use <strong>any</strong> frontend development build tooling, letting Embark handle the things that it does best. This means we can use tools such as <code>create-react-app</code> or Angular CLI, or pretty much any other tool of your choice, alongside Embark. The Embark 3.x pipeline is still available for use for quick start applications if needed.</p>\n<p>To migrate an existing Embark 3.x Dapp over to use Embark 4 with a third party pipeline, there are few small changes to your Dapp that are needed.</p>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>If you are not interested in using a third party pipeline, you can skip to the next section to <a href=\"#New-Web3-plugin\">see the rest of the breaking changes needed to migrate a Dapp to Embark 4</a>.</p>\n</p>\n</div> \n\n\n\n<h3 id=\"Converting-to-another-pipeline\"><a href=\"#Converting-to-another-pipeline\" class=\"headerlink\" title=\"Converting to another pipeline\"></a>Converting to another pipeline</h3><p>Converting to a third party pipeline is easy. This can be done with three simple improvements that Embark 4 has made available for us.</p>\n<h4 id=\"Artifact-generation-directory\"><a href=\"#Artifact-generation-directory\" class=\"headerlink\" title=\"Artifact generation directory\"></a>Artifact generation directory</h4><p>NOTE: If you are planning on using Embark’s built-in Webpack pipeline (and not use a third party pipeline), please <a href=\"#New-Web3-plugin\">skip down to the remainder of the Embark 4 breaking changes</a>.</p>\n<p>Embark 4 generates <a href=\"/docs/javascript_usage.html#Embark-Artifacts\">Smart Contract artifacts</a> for all of the Smart Contract in your Dapp. These artifacts enable importing the Dapp’s Smart Contracts into the Dapp’s source code. Most of these artifacts were already generated before, but lived inside the <code>.embark/</code> folder. Since most modern frontend build systems require source files to live inside of a very specific source folder, we have given developers the opportunity to specify the destination folder for these artifacts, allowing the frontend build tool to pick them up for processing.</p>\n<p>The first thing we need to do is add a new <code>generationDir</code> property in the root of <code>embark.json</code>. This property tells Embark where to place the generated artifacts in the Dapp’s filesystem. For example, <code>create-react-app</code> (CRA) has <code>src/</code> as source folder and the artifacts must be placed in that folder, so we would add in <code>embark.json</code>:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"generationDir\"</span>: <span class=\"string\">\"src/embarkArtifacts\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"“Magic”-imports\"><a href=\"#“Magic”-imports\" class=\"headerlink\" title=\"“Magic” imports\"></a>“Magic” imports</h4><p>Afterwards, we need to convert all “magic” imports in our Dapp’s code to relative imports.</p>\n<p>The first one is the EmbarkJS import. The “magic” import is <code>&quot;Embark/EmbarkJS&quot;</code>. Anywhere we have <code>&quot;Embark/EmbarkJS&quot;</code> in our Dapp’s code, we need to convert that to the relative path. Because we are trying to get the <code>EmbarkJS</code> library, and the <code>embarkjs.js</code> script is located in the root of  <code>embarkArtifacts/</code>, we need to replace</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/EmbarkJS\"</span></span><br></pre></td></tr></table></figure>\n<p>with</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> EmbarkJS <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/embarkjs\"</span></span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--info\">\n  <p><strong>NOTE</strong></p>\n  <p><p>NOTE: The relative path is dependent upon the generationDir setting specified in embark.json <a href=\"#Artifact-generation-directory\">see the “Artifact generation directory” section above</a>.</p>\n</p>\n</div> \n\n\n\n<p>Secondly, we need to update the “magic” Smart Contract imports. These will need to change from</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"Embark/contract/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n<p>to</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> ContractName <span class=\"keyword\">from</span> <span class=\"string\">\"./embarkArtifacts/contracts/ContractName\"</span>;</span><br></pre></td></tr></table></figure>\n\n<p>Thirdly, there used to be <code>import web3 from &quot;Embark/web3&quot;</code>, but it has been removed in Embark 4 in favor of using a global Web3 object. Don’t worry, Embark is not removing web3 support, far from it. We actually just got rid of an import that did not provide a lot of benefit. In Embark 4, the global <code>web3</code> object is now available everywhere in the Dapp.</p>\n<p>Now, all the Embark files and configs from your Dapp can be moved in to a project created by the frontend build tool of your choice.</p>\n<h3 id=\"New-project-with-another-pipeline\"><a href=\"#New-project-with-another-pipeline\" class=\"headerlink\" title=\"New project with another pipeline\"></a>New project with another pipeline</h3><p>Starting a new Dapp from scratch is easy, we have two options.</p>\n<h4 id=\"Embark’s-create-react-dapp-template\"><a href=\"#Embark’s-create-react-dapp-template\" class=\"headerlink\" title=\"Embark’s create-react-dapp template\"></a>Embark’s create-react-dapp template</h4><p>The easiest option is to use our <a href=\"https://github.com/embarklabs/embark-create-react-dapp-template\" target=\"_blank\" rel=\"noopener\">new Embark CRA template</a>. It sets up a simple Embark project with all of the familiar files present in an Embark 3.x Dapp, with one minor difference: the config files are located in an <code>embarkConfig/</code> folder in the root of the Dapp to make sure they don’t clash with CRA’s config folder/files.</p>\n<p>To get started with Embark’s CRA template,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark new --template embark-react-dapp my-dapp</span><br><span class=\"line\">cd my-dapp</span><br><span class=\"line\">embark run</span><br></pre></td></tr></table></figure>\n<div class=\"c-notification c-notification--danger\">\n  <p><strong>DEPRECATION NOTICE</strong></p>\n  <p><p>The <code>--template</code> option has been deprecated in v5 and support will be removed in future versions.</p>\n</p>\n</div> \n\n\n\n<p>Then, in another terminal,</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">cd my-dapp</span><br><span class=\"line\">yarn start &#x2F;&#x2F; or alternatively, npm run start</span><br></pre></td></tr></table></figure>\n\n<p>That’s it!</p>\n<h4 id=\"For-other-build-tools\"><a href=\"#For-other-build-tools\" class=\"headerlink\" title=\"For other build tools\"></a>For other build tools</h4><p>If we want to use another build tool than CRA, here are the steps:</p>\n<p>Create a project using a frontend build tool like Angular CLI. Then, in another directory, execute <code>embark new your_projects_name</code>.</p>\n<p>Afterwards, we copy all the files and folders from the Embark project to the build tool’s folder. The only tweak that you will need to do is go in <code>config/pipeline.js</code> and set <code>enabled: false</code>, so that Embark’s pipeline is disabled.</p>\n<p>We can also go in <code>embark.json</code> and remove the <code>app</code> section (as well as Embark’s source dir that you will not be using).</p>\n<p>Lastly, check out <a href=\"#Artifact-generation-directory\">the “Artifact generation directory” section above</a> to make sure your artifacts directory is set up correctly for you build tool.</p>\n<p>There you go, your project is ready.</p>\n<p>We know that these steps are a bit too much, so we are working on a new command that lets you initialize an Embark project from inside a build tool’s directory. Keep an eye out for that.</p>\n<h2 id=\"New-Web3-plugin\"><a href=\"#New-Web3-plugin\" class=\"headerlink\" title=\"New Web3 plugin\"></a>New Web3 plugin</h2><p><em>(2019/06/27)</em> <strong>NOTE</strong>: <em>the following instructions are</em> <strong><em>not</em></strong> <em>applicable to Embark <code>4.1.x</code> and newer, but should still be followed for <code>4.0.x</code> or <code>&lt;=4.1.0-beta.3</code>.</em></p>\n<p>Starting with Embark 4 beta.1, Embark no longer supplies the Dapp with <code>Web3.js</code> by default. Don’t run. We did that so that we can now have the possibility of supporting more than just <code>Web3.js</code>, such as EthersJS, and more. You can even roll your own.</p>\n<p>To continue using <code>Web3.js</code> inside the Embark 4 Dapp, execute the following command in the Embark console: <code>plugin install embarkjs-connector-web3</code>.</p>\n<p>This simply <a href=\"https://embark.embarklabs.io/docs/installing_plugins.html\">installs <code>embarkjs-connector-web3</code> as a plugin</a>. Alternatively, this plugin can be installed manually by executing:</p>\n<ol>\n<li><code>yarn add embarkjs-connector-web3</code> or <code>npm install --save embarkjs-connector-web3</code></li>\n<li>Adding <code>&quot;embarkjs-connector-web3&quot;: {}</code> to the <code>plugins</code> section of <code>embark.json</code></li>\n</ol>\n<p>It’s as simple as that. This plugin will add the necessary commands and code for the Dapp to connect to the blockchain and register the necessary providers. The only prerequisite is for the Dapp to import <code>EmbarkJS</code> at least once. If using a third party pipeline, the <code>EmbarkJS</code> file can be imported using <code>import EmbarkJS from &quot;./embarkArtifacts/embarkjs.js&quot;</code> (or as specified by the <code>generationDir</code> in <code>embark.json</code>). If using Embark’s built-in pipeline, <code>EmbarkJS</code> can be imported using <code>import EmbarkJS from &quot;Embark/EmbarkJS&quot;;</code>.</p>\n<h2 id=\"New-Blockchain-account-configs\"><a href=\"#New-Blockchain-account-configs\" class=\"headerlink\" title=\"New Blockchain account configs\"></a>New Blockchain account configs</h2><p>Embark 4 adds some new blockchain account configurations. To try to keep things as simple as possible, these additions are really similar to the ones in the contract configuration. For more information, please read the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.html\">Accounts Blockchain configuration guide</a> in our docs.</p>\n<p>However, we did introduce some small breaking changes. We removed:</p>\n<ul>\n<li><code>account</code>: This is completely replaced by the new <code>accounts</code> property (notice the <code>s</code> at the end of <code>accounts</code>). It gives the developer more flexibility. To have exactly the same behavior as before, just use the <code>nodeAccounts</code> account type as <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">described in the docs</a></li>\n<li><code>simulatorMnemonic</code>: Removed in favor of Ganache’s default mnemonic. If this functionality is still needed, please specify the desired mnemonic in the <a href=\"https://embark.embarklabs.io/docs/blockchain_accounts_configuration.md#parameter-descriptions\">blockchain config’s <code>mnemonic</code> account type</a>.</li>\n</ul>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>This is a small taste of the features added to Embark 4, namely the ability to use a frontend build tool of choice. However, Embark 4 is jam-packed with additional new features, which we’ll detail during the Embark 4 release.</p>\n<p>In the meantime, all the Embark 4 goodness doesn’t come at too high a price in terms of breaking changes.</p>\n<p>Upgrading to Embark 4 will be a blast. If you ever have an issue, make sure to hit us up on <a href=\"https://gitter.im/embark-framework/Lobby\" target=\"_blank\" rel=\"noopener\">Gitter</a>.</p>\n"},{"title":"Nim vs Crystal - Part 1 - Performance & Interoperability","summary":"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 1, Performance & Interoperability are reviewed.","author":"robin_percy","layout":"blog-post","image":"/assets/images/nim-crystal-header_blank.jpg","_content":"\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nI've been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I'm happy that I'm finally able to do so.  What I've decided on doing; is breaking this up into a three part series as there are ***SO*** many features of both languages I'd like to talk about, and therein many opinions held too.  I do have a habit of writing **very** long articles, so I'd like to limit the topic scope, to keep each of these a little snappier!\n\nBefore I go into specifics on either of these languages, I'd first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I *have* had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nBack in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was *actually* interested in taking a look at.\n\nNaturally, both languages have a **TONNE** of features, so I'm not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the [Crystal Docs](https://crystal-lang.org/reference/), or the [Nim Docs](https://nim-lang.org/docs/lib.html).\n\nAnyway, let's take a look at both languages, and you can make your own mind up as to which you'd rather be programming in.  Maybe both.  Maybe neither!\n\n\n<br/>\n\n## Nim\n\nNim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to ***pretty much*** fit these criterion.  \n\n> By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.\n\n> The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.\n\nWhen I say it *pretty much* matches the criteria, the only statement that doesn't quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.\n\n\n### Installing Nim\n\nNim is super easy to install.  If you're on Windows, [head over here](https://nim-lang.org/install_windows.html), and download/run the installer.\n\nIf you're on any other Unix-based system, you can run:\n\n```\n$ curl https://nim-lang.org/choosenim/init.sh -sSf | sh`\n```\n\nIf you're on Mac, and with Homebrew installed, simply run:\n\n```\n$ brew install nim\n```\n\nYou could also consider using [choosenim](https://github.com/dom96/choosenim) to manage Nim installations in a similar way to `pyenv` and `rustup`.\n\n\n### Interfacing Other Languages\n\nOne of the things that attracted me to both Nim **and** Crystal, was the ability to natively interface with other languages, and the **ease** with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!\n\nWhen it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.\n\nFor a quick demo, let's take a look at interfacing both C and JavaScript from Nim.\n\n#### C Invocation\n\nFirstly, create the file `logic.c` with the following content:\n\n``` c\nint addTwoIntegers(int a, int b)\n{\n  return a + b;\n}\n```\n\nNext, create the file `calculator.nim` with the following content:\n\n``` nim\n{.compile: \"logic.c\".}\nproc addTwoIntegers(a, b: cint): cint {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\nNow then, with these two *very simple* files in place, we can run:\n\n```\n$ nim c -r calculator.nim\n```\n\nThe Nim compiler will compile the `logic.c` file in addition to `calculator.nim` and link both into an executable; which outputs `10` when run.  Very sharp, in my opinion!\n\n#### JavaScript Invocation\n\nEven sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled `host.html` with the following content:\n\n``` html\n<html>\n<body>\n  <script type=\"text/javascript\">\n    function addTwoIntegers(a, b)\n    {\n      return a + b;\n    }\n  </script>\n\n  <script type=\"text/javascript\" src=\"calculator.js\"></script>\n</body>\n</html>\n```\n\nNow, create another `calculator.nim` file with the following content (or reuse the one from the above C example):\n\n``` nim\nproc addTwoIntegers(a, b: int): int {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\n\nCompile the Nim code to JavaScript by running:\n\n```\n$ nim js -o:calculator.js calculator.nim\n```\n\nOnce that's done, go ahead and open `host.html` in a browser and you should see the value `10` in the browser's console.  I think this is **REALLY** neat.  It's superb how easy it is to achieve that, too.\n\n\n### Aside – a Quick (not-so) Secret:\n\nInstead of writing out the HTML above, you could actually use ***Nim's native*** HTML DSL:\n\n``` nim\nimport html_dsl\n\nhtml page:\n  head:\n    title(\"Title\")\n  body:\n    p(\"Hello\")\n    p(\"World\")\n    dv:\n      p \"Example\"\n\necho render(page())\n```\n\nRunning this will output the following:\n\n``` html\n<!DOCTYPE html>\n  <html class='has-navbar-fixed-top' >\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Title</title>\n  </head>\n  <body class='has-navbar-fixed-top' >\n    <p >Hello</p>\n    <p >World</p>\n    <div>\n      <p>Example</p>\n    </div>\n  </body>\n</html>\n```\n\n\n<br/>\n\n## Crystal\n\nCrystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.\n\nI first came across Crystal when I saw [@sferik](https://twitter.com/sferik) giving a talk on it in Poland back in 2015. [Video here.](https://www.youtube.com/watch?v=Ysm4IU4aWoQ) It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.\n\n### Installing Crystal\n\nYou can find all of the relevant instructions for installing Crystal, on the [main website installation page](https://crystal-lang.org/install/).\n\nIf you are on Mac, and have Homebrew installed, you can simply run:\n\n```\n$ brew install crystal\n```\n\n**However**, if you are a Windows user, *for the time being* you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I'd take a (not yet gained) point **away** from Crystal here, for lack of Windows support.\n\n\n### Interfacing C\n\nLet’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.\n\nFirst off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:\n\n```\n$ crystal init app sayhi_c\n```\n\nThen head into the directory `sayhi_c/src/sayhi_c` and let’s create a file `sayhi.c` with the following contents:\n\n``` c\n#include <stdio.h>\n\nvoid hi(const char * name){\n  printf(\"Hi %s!\\n\", name);\n}\n```\n\nNow we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:\n\n```\n$ gcc -c sayhi.c -o sayhi.o\n```\n\nUsing the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our `sayhi_c.cr` file, and have it reflect the following:\n\n``` crystal\nrequire \"./sayhi_c/*\"\n\n@[Link(ldflags: \"#{__DIR__}/sayhi_c/sayhi.o\")]\n\nlib Say\n  fun hi(name : LibC::Char*) : Void\nend\n\nSay.hi(\"Status\")\n```\n\nI’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.\n\nAlso worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.\n\nSo, if we build our project file and run it, we get the following:\n\n```\n$ crystal build --release src/sayhi_c.cr\n\n$ ./sayhi_c\n\n > Hi Status!\n```\n\nAs you can see, Nim takes the winners trophy in this case, as it is **much** simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.\n\n\n\n<br/>\n\n## Performance Tests\n\n### Parsing & calculating values from a large JSON file:\n\nFirstly, we need to generate our large JSON file.  For this test, we're going to generate a dataset which includes **1 Million** items.\n\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\nWe can do so with the following Ruby script:\n\n``` rb\nrequire 'json'\n\nx = []\n\n1000000.times do\n  h = {\n    'x' => rand,\n    'y' => rand,\n    'z' => rand,\n    'name' => ('a'..'z').to_a.shuffle[0..5].join + ' ' + rand(10000).to_s,\n    'opts' => {'1' => [1, true]},\n  }\n  x << h\nend\n\nFile.open(\"1.json\", 'w') { |f| f.write JSON.pretty_generate('coordinates' => x, 'info' => \"some info\") }\n```\n\nThis will generate a JSON file **of around 212mb**, with the following syntax:\n\n``` json\n{\n  \"coordinates\": [\n    {\n      \"x\": 0.10327081810860272,\n      \"y\": 0.03247172212368832,\n      \"z\": 0.8155255437507467,\n      \"name\": \"scojbq 5965\",\n      \"opts\": {\n        \"1\": [\n          1,\n          true\n        ]\n      }\n    }\n  ],\n  \"info\": \"some info\"\n}\n```\n\nNow that we have our chunky JSON file; we can write our first test – **in Nim**:\n\n``` nim\nimport json\n\nlet jobj = parseFile(\"1.json\")\n\nlet coordinates = jobj[\"coordinates\"].elems\nlet len = float(coordinates.len)\nvar x = 0.0\nvar y = 0.0\nvar z = 0.0\n\nfor coord in coordinates:\n  x += coord[\"x\"].fnum\n  y += coord[\"y\"].fnum\n  z += coord[\"z\"].fnum\n\necho x / len\necho y / len\necho z / len\n```\n\nAnd again; the same simple test, this time written **in Crystal**:\n\n``` crystal\nrequire \"json\"\n\ntext = File.read(\"1.json\")\njobj = JSON.parse(text)\ncoordinates = jobj[\"coordinates\"].as_a\nlen = coordinates.size\nx = y = z = 0\n\ncoordinates.each do |coord|\n  x += coord[\"x\"].as_f\n  y += coord[\"y\"].as_f\n  z += coord[\"z\"].as_f\nend\n\np x / len\np y / len\np z / len\n```\n\n### Results:\n\nBuilding our test files into tiny release packages with the respective commands below:\n\n```\n$ crystal build json_test.cr --release -o json_test_cr --no-debug\n```\n\n```\n$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim\n```\n\nWe can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 6.92     | 1320.4      |\n| Crystal  | 4.58     | 960.7       |\n\nAs you can see; in this case ***Crystal*** is the more performant language – taking less time to execute & complete the test, and also fewer Megabytes in memory doing so.\n\n\n\n<br/>\n\n### Base64 encoding / decoding a large blob:\n\nIn this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let's look at the ***Nim*** test:\n\n``` nim\nimport base64, times, strutils, strformat\n\nlet STR_SIZE = 131072\nlet TRIES = 8192\nlet str = strutils.repeat('a', STR_SIZE)\n\nvar str2 = base64.encode(str)\nstdout.write(fmt\"encode {str[..3]}... to {str2[..3]}...: \")\n\nvar t = times.epochTime()\nvar i = 0\nvar s:int64 = 0\nwhile i < TRIES:\n  str2 = base64.encode(str)\n  s += len(str2)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n\nvar str3 = base64.decode(str2)\nstdout.write(fmt\"decode {str2[..3]}... to {str3[..3]}...: \")\n\nt = times.epochTime()\ni = 0\ns = 0\nwhile i < TRIES:\n  str3 = base64.decode(str2)\n  s += len(str3)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n```\n\nAnd now the same test, written in Crystal:\n\n``` crystal\nrequire \"base64\"\n\nSTR_SIZE = 131072\nTRIES = 8192\n\nstr = \"a\" * STR_SIZE\n\nstr2 = Base64.strict_encode(str)\nprint \"encode #{str[0..3]}... to #{str2[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str2 = Base64.strict_encode(str)\n  s += str2.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n\nstr3 = Base64.decode_string(str2)\nprint \"decode #{str2[0..3]}... to #{str3[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str3 = Base64.decode_string(str2)\n  s += str3.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n```\n\n### Results:\n\nWe can again; build our Base64 test files into release packages with the respective commands below:\n\n```\n$ crystal build base64_test.cr --release -o base64_test_cr --no-debug\n```\n\n```\n$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim\n```\n\nAs with our last test suite, we can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 4.17     | 6.6         |\n| Crystal  | 2.36     | 3.5         |\n\nOnce again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.\n\n\n## Conclusion\n\nThe summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research & testing to see how close to *C speeds* it could achieve.  That being said, I was *also* already aware that Nim **claims** close to C speeds, and that one of the language's principals was to run well on old & less-performant hardware.  \n\nYet, Crystal beat not only my own expectations; but beat Nim for both memory usage **AND** execution times.  I really didn't expect to see Crystal come out *this* far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  **Nim makes it even easier** than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.\n\nIn conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:\n\n - Part 2: Threading and Tooling\n - Part 3: Crypto, DApps and P2P\n\nThese two articles will be released over the next couple of days, so don't forget to come back then to check them out!\n\nThanks for reading - as ever, if you have any questions, please feel free to reach out at [robin@status](mailto:robin@status.im).\n\n[ - **@rbin**](https://twitter.com/rbin)\n","source":"_posts/2019-11-18-nim-vs-crystal-part-1-performance-interoperability.md","raw":"title: Nim vs Crystal - Part 1 - Performance & Interoperability\nsummary: \"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 1, Performance & Interoperability are reviewed.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/nim-crystal-header_blank.jpg'\n---\n\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nI've been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I'm happy that I'm finally able to do so.  What I've decided on doing; is breaking this up into a three part series as there are ***SO*** many features of both languages I'd like to talk about, and therein many opinions held too.  I do have a habit of writing **very** long articles, so I'd like to limit the topic scope, to keep each of these a little snappier!\n\nBefore I go into specifics on either of these languages, I'd first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I *have* had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nBack in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was *actually* interested in taking a look at.\n\nNaturally, both languages have a **TONNE** of features, so I'm not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the [Crystal Docs](https://crystal-lang.org/reference/), or the [Nim Docs](https://nim-lang.org/docs/lib.html).\n\nAnyway, let's take a look at both languages, and you can make your own mind up as to which you'd rather be programming in.  Maybe both.  Maybe neither!\n\n\n<br/>\n\n## Nim\n\nNim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to ***pretty much*** fit these criterion.  \n\n> By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.\n\n> The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.\n\nWhen I say it *pretty much* matches the criteria, the only statement that doesn't quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.\n\n\n### Installing Nim\n\nNim is super easy to install.  If you're on Windows, [head over here](https://nim-lang.org/install_windows.html), and download/run the installer.\n\nIf you're on any other Unix-based system, you can run:\n\n```\n$ curl https://nim-lang.org/choosenim/init.sh -sSf | sh`\n```\n\nIf you're on Mac, and with Homebrew installed, simply run:\n\n```\n$ brew install nim\n```\n\nYou could also consider using [choosenim](https://github.com/dom96/choosenim) to manage Nim installations in a similar way to `pyenv` and `rustup`.\n\n\n### Interfacing Other Languages\n\nOne of the things that attracted me to both Nim **and** Crystal, was the ability to natively interface with other languages, and the **ease** with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!\n\nWhen it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.\n\nFor a quick demo, let's take a look at interfacing both C and JavaScript from Nim.\n\n#### C Invocation\n\nFirstly, create the file `logic.c` with the following content:\n\n``` c\nint addTwoIntegers(int a, int b)\n{\n  return a + b;\n}\n```\n\nNext, create the file `calculator.nim` with the following content:\n\n``` nim\n{.compile: \"logic.c\".}\nproc addTwoIntegers(a, b: cint): cint {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\nNow then, with these two *very simple* files in place, we can run:\n\n```\n$ nim c -r calculator.nim\n```\n\nThe Nim compiler will compile the `logic.c` file in addition to `calculator.nim` and link both into an executable; which outputs `10` when run.  Very sharp, in my opinion!\n\n#### JavaScript Invocation\n\nEven sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled `host.html` with the following content:\n\n``` html\n<html>\n<body>\n  <script type=\"text/javascript\">\n    function addTwoIntegers(a, b)\n    {\n      return a + b;\n    }\n  </script>\n\n  <script type=\"text/javascript\" src=\"calculator.js\"></script>\n</body>\n</html>\n```\n\nNow, create another `calculator.nim` file with the following content (or reuse the one from the above C example):\n\n``` nim\nproc addTwoIntegers(a, b: int): int {.importc.}\n\nwhen isMainModule:\n  echo addTwoIntegers(3, 7)\n```\n\n\nCompile the Nim code to JavaScript by running:\n\n```\n$ nim js -o:calculator.js calculator.nim\n```\n\nOnce that's done, go ahead and open `host.html` in a browser and you should see the value `10` in the browser's console.  I think this is **REALLY** neat.  It's superb how easy it is to achieve that, too.\n\n\n### Aside – a Quick (not-so) Secret:\n\nInstead of writing out the HTML above, you could actually use ***Nim's native*** HTML DSL:\n\n``` nim\nimport html_dsl\n\nhtml page:\n  head:\n    title(\"Title\")\n  body:\n    p(\"Hello\")\n    p(\"World\")\n    dv:\n      p \"Example\"\n\necho render(page())\n```\n\nRunning this will output the following:\n\n``` html\n<!DOCTYPE html>\n  <html class='has-navbar-fixed-top' >\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Title</title>\n  </head>\n  <body class='has-navbar-fixed-top' >\n    <p >Hello</p>\n    <p >World</p>\n    <div>\n      <p>Example</p>\n    </div>\n  </body>\n</html>\n```\n\n\n<br/>\n\n## Crystal\n\nCrystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.\n\nI first came across Crystal when I saw [@sferik](https://twitter.com/sferik) giving a talk on it in Poland back in 2015. [Video here.](https://www.youtube.com/watch?v=Ysm4IU4aWoQ) It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.\n\n### Installing Crystal\n\nYou can find all of the relevant instructions for installing Crystal, on the [main website installation page](https://crystal-lang.org/install/).\n\nIf you are on Mac, and have Homebrew installed, you can simply run:\n\n```\n$ brew install crystal\n```\n\n**However**, if you are a Windows user, *for the time being* you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I'd take a (not yet gained) point **away** from Crystal here, for lack of Windows support.\n\n\n### Interfacing C\n\nLet’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.\n\nFirst off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:\n\n```\n$ crystal init app sayhi_c\n```\n\nThen head into the directory `sayhi_c/src/sayhi_c` and let’s create a file `sayhi.c` with the following contents:\n\n``` c\n#include <stdio.h>\n\nvoid hi(const char * name){\n  printf(\"Hi %s!\\n\", name);\n}\n```\n\nNow we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:\n\n```\n$ gcc -c sayhi.c -o sayhi.o\n```\n\nUsing the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our `sayhi_c.cr` file, and have it reflect the following:\n\n``` crystal\nrequire \"./sayhi_c/*\"\n\n@[Link(ldflags: \"#{__DIR__}/sayhi_c/sayhi.o\")]\n\nlib Say\n  fun hi(name : LibC::Char*) : Void\nend\n\nSay.hi(\"Status\")\n```\n\nI’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.\n\nAlso worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.\n\nSo, if we build our project file and run it, we get the following:\n\n```\n$ crystal build --release src/sayhi_c.cr\n\n$ ./sayhi_c\n\n > Hi Status!\n```\n\nAs you can see, Nim takes the winners trophy in this case, as it is **much** simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.\n\n\n\n<br/>\n\n## Performance Tests\n\n### Parsing & calculating values from a large JSON file:\n\nFirstly, we need to generate our large JSON file.  For this test, we're going to generate a dataset which includes **1 Million** items.\n\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\nWe can do so with the following Ruby script:\n\n``` rb\nrequire 'json'\n\nx = []\n\n1000000.times do\n  h = {\n    'x' => rand,\n    'y' => rand,\n    'z' => rand,\n    'name' => ('a'..'z').to_a.shuffle[0..5].join + ' ' + rand(10000).to_s,\n    'opts' => {'1' => [1, true]},\n  }\n  x << h\nend\n\nFile.open(\"1.json\", 'w') { |f| f.write JSON.pretty_generate('coordinates' => x, 'info' => \"some info\") }\n```\n\nThis will generate a JSON file **of around 212mb**, with the following syntax:\n\n``` json\n{\n  \"coordinates\": [\n    {\n      \"x\": 0.10327081810860272,\n      \"y\": 0.03247172212368832,\n      \"z\": 0.8155255437507467,\n      \"name\": \"scojbq 5965\",\n      \"opts\": {\n        \"1\": [\n          1,\n          true\n        ]\n      }\n    }\n  ],\n  \"info\": \"some info\"\n}\n```\n\nNow that we have our chunky JSON file; we can write our first test – **in Nim**:\n\n``` nim\nimport json\n\nlet jobj = parseFile(\"1.json\")\n\nlet coordinates = jobj[\"coordinates\"].elems\nlet len = float(coordinates.len)\nvar x = 0.0\nvar y = 0.0\nvar z = 0.0\n\nfor coord in coordinates:\n  x += coord[\"x\"].fnum\n  y += coord[\"y\"].fnum\n  z += coord[\"z\"].fnum\n\necho x / len\necho y / len\necho z / len\n```\n\nAnd again; the same simple test, this time written **in Crystal**:\n\n``` crystal\nrequire \"json\"\n\ntext = File.read(\"1.json\")\njobj = JSON.parse(text)\ncoordinates = jobj[\"coordinates\"].as_a\nlen = coordinates.size\nx = y = z = 0\n\ncoordinates.each do |coord|\n  x += coord[\"x\"].as_f\n  y += coord[\"y\"].as_f\n  z += coord[\"z\"].as_f\nend\n\np x / len\np y / len\np z / len\n```\n\n### Results:\n\nBuilding our test files into tiny release packages with the respective commands below:\n\n```\n$ crystal build json_test.cr --release -o json_test_cr --no-debug\n```\n\n```\n$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim\n```\n\nWe can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 6.92     | 1320.4      |\n| Crystal  | 4.58     | 960.7       |\n\nAs you can see; in this case ***Crystal*** is the more performant language – taking less time to execute & complete the test, and also fewer Megabytes in memory doing so.\n\n\n\n<br/>\n\n### Base64 encoding / decoding a large blob:\n\nIn this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let's look at the ***Nim*** test:\n\n``` nim\nimport base64, times, strutils, strformat\n\nlet STR_SIZE = 131072\nlet TRIES = 8192\nlet str = strutils.repeat('a', STR_SIZE)\n\nvar str2 = base64.encode(str)\nstdout.write(fmt\"encode {str[..3]}... to {str2[..3]}...: \")\n\nvar t = times.epochTime()\nvar i = 0\nvar s:int64 = 0\nwhile i < TRIES:\n  str2 = base64.encode(str)\n  s += len(str2)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n\nvar str3 = base64.decode(str2)\nstdout.write(fmt\"decode {str2[..3]}... to {str3[..3]}...: \")\n\nt = times.epochTime()\ni = 0\ns = 0\nwhile i < TRIES:\n  str3 = base64.decode(str2)\n  s += len(str3)\n  i += 1\necho(fmt\"{s}, {formatFloat(times.epochTime() - t, ffDefault, 6)}\")\n```\n\nAnd now the same test, written in Crystal:\n\n``` crystal\nrequire \"base64\"\n\nSTR_SIZE = 131072\nTRIES = 8192\n\nstr = \"a\" * STR_SIZE\n\nstr2 = Base64.strict_encode(str)\nprint \"encode #{str[0..3]}... to #{str2[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str2 = Base64.strict_encode(str)\n  s += str2.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n\nstr3 = Base64.decode_string(str2)\nprint \"decode #{str2[0..3]}... to #{str3[0..3]}...: \"\n\nt, s = Time.local, 0\nTRIES.times do |i|\n  str3 = Base64.decode_string(str2)\n  s += str3.bytesize\nend\nputs \"#{s}, #{Time.local - t}\"\n```\n\n### Results:\n\nWe can again; build our Base64 test files into release packages with the respective commands below:\n\n```\n$ crystal build base64_test.cr --release -o base64_test_cr --no-debug\n```\n\n```\n$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim\n```\n\nAs with our last test suite, we can then time & run those packages, to obtain our test results:\n\n| Language | Time (s) | Memory (Mb) |\n|----------|----------|-------------|\n| Nim      | 4.17     | 6.6         |\n| Crystal  | 2.36     | 3.5         |\n\nOnce again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.\n\n\n## Conclusion\n\nThe summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research & testing to see how close to *C speeds* it could achieve.  That being said, I was *also* already aware that Nim **claims** close to C speeds, and that one of the language's principals was to run well on old & less-performant hardware.  \n\nYet, Crystal beat not only my own expectations; but beat Nim for both memory usage **AND** execution times.  I really didn't expect to see Crystal come out *this* far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  **Nim makes it even easier** than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.\n\nIn conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:\n\n - Part 2: Threading and Tooling\n - Part 3: Crypto, DApps and P2P\n\nThese two articles will be released over the next couple of days, so don't forget to come back then to check them out!\n\nThanks for reading - as ever, if you have any questions, please feel free to reach out at [robin@status](mailto:robin@status.im).\n\n[ - **@rbin**](https://twitter.com/rbin)\n","slug":"nim-vs-crystal-part-1-performance-interoperability","published":1,"date":"2019-11-18T05:00:00.000Z","updated":"2020-01-17T19:05:36.394Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3u6002g7heg2yc1byah","content":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>I’ve been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I’m happy that I’m finally able to do so.  What I’ve decided on doing; is breaking this up into a three part series as there are <strong><em>SO</em></strong> many features of both languages I’d like to talk about, and therein many opinions held too.  I do have a habit of writing <strong>very</strong> long articles, so I’d like to limit the topic scope, to keep each of these a little snappier!</p>\n<p>Before I go into specifics on either of these languages, I’d first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I <em>have</em> had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.</p>\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\n<p>Back in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was <em>actually</em> interested in taking a look at.</p>\n<p>Naturally, both languages have a <strong>TONNE</strong> of features, so I’m not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the <a href=\"https://crystal-lang.org/reference/\" target=\"_blank\" rel=\"noopener\">Crystal Docs</a>, or the <a href=\"https://nim-lang.org/docs/lib.html\" target=\"_blank\" rel=\"noopener\">Nim Docs</a>.</p>\n<p>Anyway, let’s take a look at both languages, and you can make your own mind up as to which you’d rather be programming in.  Maybe both.  Maybe neither!</p>\n<br/>\n\n<h2 id=\"Nim\"><a href=\"#Nim\" class=\"headerlink\" title=\"Nim\"></a>Nim</h2><p>Nim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to <strong><em>pretty much</em></strong> fit these criterion.  </p>\n<blockquote>\n<p>By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.</p>\n</blockquote>\n<blockquote>\n<p>The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.</p>\n</blockquote>\n<p>When I say it <em>pretty much</em> matches the criteria, the only statement that doesn’t quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.</p>\n<h3 id=\"Installing-Nim\"><a href=\"#Installing-Nim\" class=\"headerlink\" title=\"Installing Nim\"></a>Installing Nim</h3><p>Nim is super easy to install.  If you’re on Windows, <a href=\"https://nim-lang.org/install_windows.html\" target=\"_blank\" rel=\"noopener\">head over here</a>, and download/run the installer.</p>\n<p>If you’re on any other Unix-based system, you can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ curl https:&#x2F;&#x2F;nim-lang.org&#x2F;choosenim&#x2F;init.sh -sSf | sh&#96;</span><br></pre></td></tr></table></figure>\n\n<p>If you’re on Mac, and with Homebrew installed, simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install nim</span><br></pre></td></tr></table></figure>\n\n<p>You could also consider using <a href=\"https://github.com/dom96/choosenim\" target=\"_blank\" rel=\"noopener\">choosenim</a> to manage Nim installations in a similar way to <code>pyenv</code> and <code>rustup</code>.</p>\n<h3 id=\"Interfacing-Other-Languages\"><a href=\"#Interfacing-Other-Languages\" class=\"headerlink\" title=\"Interfacing Other Languages\"></a>Interfacing Other Languages</h3><p>One of the things that attracted me to both Nim <strong>and</strong> Crystal, was the ability to natively interface with other languages, and the <strong>ease</strong> with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!</p>\n<p>When it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.</p>\n<p>For a quick demo, let’s take a look at interfacing both C and JavaScript from Nim.</p>\n<h4 id=\"C-Invocation\"><a href=\"#C-Invocation\" class=\"headerlink\" title=\"C Invocation\"></a>C Invocation</h4><p>Firstly, create the file <code>logic.c</code> with the following content:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">int</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(<span class=\"keyword\">int</span> a, <span class=\"keyword\">int</span> b)</span></span></span><br><span class=\"line\"><span class=\"function\"></span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> a + b;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, create the file <code>calculator.nim</code> with the following content:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&#123;.compile: \"logic.c\".&#125;</span></span><br><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">cint</span>): <span class=\"built_in\">cint</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n<p>Now then, with these two <em>very simple</em> files in place, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -r calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>The Nim compiler will compile the <code>logic.c</code> file in addition to <code>calculator.nim</code> and link both into an executable; which outputs <code>10</code> when run.  Very sharp, in my opinion!</p>\n<h4 id=\"JavaScript-Invocation\"><a href=\"#JavaScript-Invocation\" class=\"headerlink\" title=\"JavaScript Invocation\"></a>JavaScript Invocation</h4><p>Even sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled <code>host.html</code> with the following content:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">html</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"actionscript\">    <span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(a, b)</span></span></span></span><br><span class=\"line\">    &#123;</span><br><span class=\"line\"><span class=\"actionscript\">      <span class=\"keyword\">return</span> a + b;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span> <span class=\"attr\">src</span>=<span class=\"string\">\"calculator.js\"</span>&gt;</span><span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>Now, create another <code>calculator.nim</code> file with the following content (or reuse the one from the above C example):</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">int</span>): <span class=\"built_in\">int</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n\n<p>Compile the Nim code to JavaScript by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim js -o:calculator.js calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>Once that’s done, go ahead and open <code>host.html</code> in a browser and you should see the value <code>10</code> in the browser’s console.  I think this is <strong>REALLY</strong> neat.  It’s superb how easy it is to achieve that, too.</p>\n<h3 id=\"Aside-–-a-Quick-not-so-Secret\"><a href=\"#Aside-–-a-Quick-not-so-Secret\" class=\"headerlink\" title=\"Aside – a Quick (not-so) Secret:\"></a>Aside – a Quick (not-so) Secret:</h3><p>Instead of writing out the HTML above, you could actually use <strong><em>Nim’s native</em></strong> HTML DSL:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> html_dsl</span><br><span class=\"line\"></span><br><span class=\"line\">html page:</span><br><span class=\"line\">  head:</span><br><span class=\"line\">    title(<span class=\"string\">\"Title\"</span>)</span><br><span class=\"line\">  body:</span><br><span class=\"line\">    p(<span class=\"string\">\"Hello\"</span>)</span><br><span class=\"line\">    p(<span class=\"string\">\"World\"</span>)</span><br><span class=\"line\">    dv:</span><br><span class=\"line\">      p <span class=\"string\">\"Example\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">echo render(page())</span><br></pre></td></tr></table></figure>\n\n<p>Running this will output the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&lt;!DOCTYPE <span class=\"meta-keyword\">html</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">html</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">charset</span>=<span class=\"string\">\"utf-8\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">\"viewport\"</span> <span class=\"attr\">content</span>=<span class=\"string\">\"width=device-width, initial-scale=1\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">title</span>&gt;</span>Title<span class=\"tag\">&lt;/<span class=\"name\">title</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">body</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>Hello<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>World<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">      <span class=\"tag\">&lt;<span class=\"name\">p</span>&gt;</span>Example<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n\n<br/>\n\n<h2 id=\"Crystal\"><a href=\"#Crystal\" class=\"headerlink\" title=\"Crystal\"></a>Crystal</h2><p>Crystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.</p>\n<p>I first came across Crystal when I saw <a href=\"https://twitter.com/sferik\" target=\"_blank\" rel=\"noopener\">@sferik</a> giving a talk on it in Poland back in 2015. <a href=\"https://www.youtube.com/watch?v=Ysm4IU4aWoQ\" target=\"_blank\" rel=\"noopener\">Video here.</a> It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.</p>\n<h3 id=\"Installing-Crystal\"><a href=\"#Installing-Crystal\" class=\"headerlink\" title=\"Installing Crystal\"></a>Installing Crystal</h3><p>You can find all of the relevant instructions for installing Crystal, on the <a href=\"https://crystal-lang.org/install/\" target=\"_blank\" rel=\"noopener\">main website installation page</a>.</p>\n<p>If you are on Mac, and have Homebrew installed, you can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install crystal</span><br></pre></td></tr></table></figure>\n\n<p><strong>However</strong>, if you are a Windows user, <em>for the time being</em> you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I’d take a (not yet gained) point <strong>away</strong> from Crystal here, for lack of Windows support.</p>\n<h3 id=\"Interfacing-C\"><a href=\"#Interfacing-C\" class=\"headerlink\" title=\"Interfacing C\"></a>Interfacing C</h3><p>Let’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.</p>\n<p>First off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init app sayhi_c</span><br></pre></td></tr></table></figure>\n\n<p>Then head into the directory <code>sayhi_c/src/sayhi_c</code> and let’s create a file <code>sayhi.c</code> with the following contents:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">#<span class=\"meta-keyword\">include</span> <span class=\"meta-string\">&lt;stdio.h&gt;</span></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">void</span> <span class=\"title\">hi</span><span class=\"params\">(<span class=\"keyword\">const</span> <span class=\"keyword\">char</span> * name)</span></span>&#123;</span><br><span class=\"line\">  <span class=\"built_in\">printf</span>(<span class=\"string\">\"Hi %s!\\n\"</span>, name);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ gcc -c sayhi.c -o sayhi.o</span><br></pre></td></tr></table></figure>\n\n<p>Using the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our <code>sayhi_c.cr</code> file, and have it reflect the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"./sayhi_c/*\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"meta\">@[Link(ldflags: <span class=\"meta-string\">\"#&#123;__DIR__&#125;/sayhi_c/sayhi.o\"</span>)]</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">lib</span> <span class=\"title\">Say</span></span></span><br><span class=\"line\">  <span class=\"function\"><span class=\"keyword\">fun</span> <span class=\"title\">hi</span></span>(name : <span class=\"symbol\">LibC:</span>:Char*) : Void</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Say.hi(<span class=\"string\">\"Status\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>I’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.</p>\n<p>Also worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.</p>\n<p>So, if we build our project file and run it, we get the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build --release src&#x2F;sayhi_c.cr</span><br><span class=\"line\"></span><br><span class=\"line\">$ .&#x2F;sayhi_c</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; Hi Status!</span><br></pre></td></tr></table></figure>\n\n<p>As you can see, Nim takes the winners trophy in this case, as it is <strong>much</strong> simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.</p>\n<br/>\n\n<h2 id=\"Performance-Tests\"><a href=\"#Performance-Tests\" class=\"headerlink\" title=\"Performance Tests\"></a>Performance Tests</h2><h3 id=\"Parsing-amp-calculating-values-from-a-large-JSON-file\"><a href=\"#Parsing-amp-calculating-values-from-a-large-JSON-file\" class=\"headerlink\" title=\"Parsing &amp; calculating values from a large JSON file:\"></a>Parsing &amp; calculating values from a large JSON file:</h3><p>Firstly, we need to generate our large JSON file.  For this test, we’re going to generate a dataset which includes <strong>1 Million</strong> items.</p>\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\n<p>We can do so with the following Ruby script:</p>\n<figure class=\"highlight rb\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">'json'</span></span><br><span class=\"line\"></span><br><span class=\"line\">x = []</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"number\">1000000</span>.times <span class=\"keyword\">do</span></span><br><span class=\"line\">  h = &#123;</span><br><span class=\"line\">    <span class=\"string\">'x'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'y'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'z'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'name'</span> =&gt; (<span class=\"string\">'a'</span>..<span class=\"string\">'z'</span>).to_a.shuffle[<span class=\"number\">0</span>..<span class=\"number\">5</span>].join + <span class=\"string\">' '</span> + rand(<span class=\"number\">10000</span>).to_s,</span><br><span class=\"line\">    <span class=\"string\">'opts'</span> =&gt; &#123;<span class=\"string\">'1'</span> =&gt; [<span class=\"number\">1</span>, <span class=\"literal\">true</span>]&#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  x &lt;&lt; h</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">File.open(<span class=\"string\">\"1.json\"</span>, <span class=\"string\">'w'</span>) &#123; <span class=\"params\">|f|</span> f.write JSON.pretty_generate(<span class=\"string\">'coordinates'</span> =&gt; x, <span class=\"string\">'info'</span> =&gt; <span class=\"string\">\"some info\"</span>) &#125;</span><br></pre></td></tr></table></figure>\n\n<p>This will generate a JSON file <strong>of around 212mb</strong>, with the following syntax:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"coordinates\"</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"x\"</span>: <span class=\"number\">0.10327081810860272</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"y\"</span>: <span class=\"number\">0.03247172212368832</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"z\"</span>: <span class=\"number\">0.8155255437507467</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"name\"</span>: <span class=\"string\">\"scojbq 5965\"</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"opts\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"1\"</span>: [</span><br><span class=\"line\">          <span class=\"number\">1</span>,</span><br><span class=\"line\">          <span class=\"literal\">true</span></span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  <span class=\"attr\">\"info\"</span>: <span class=\"string\">\"some info\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now that we have our chunky JSON file; we can write our first test – <strong>in Nim</strong>:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> json</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> jobj = parseFile(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].elems</span><br><span class=\"line\"><span class=\"keyword\">let</span> len = <span class=\"built_in\">float</span>(coordinates.len)</span><br><span class=\"line\"><span class=\"keyword\">var</span> x = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> y = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> z = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> coord <span class=\"keyword\">in</span> coordinates:</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].fnum</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].fnum</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].fnum</span><br><span class=\"line\"></span><br><span class=\"line\">echo x / len</span><br><span class=\"line\">echo y / len</span><br><span class=\"line\">echo z / len</span><br></pre></td></tr></table></figure>\n\n<p>And again; the same simple test, this time written <strong>in Crystal</strong>:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">text = File.read(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\">jobj = JSON.parse(text)</span><br><span class=\"line\">coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].as_a</span><br><span class=\"line\">len = coordinates.size</span><br><span class=\"line\">x = y = z = <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">coordinates.each <span class=\"keyword\">do</span> |coord|</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].as_f</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].as_f</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].as_f</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">p x / len</span><br><span class=\"line\">p y / len</span><br><span class=\"line\">p z / len</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results\"><a href=\"#Results\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>Building our test files into tiny release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build json_test.cr --release -o json_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>We can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>6.92</td>\n<td>1320.4</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>4.58</td>\n<td>960.7</td>\n</tr>\n</tbody></table>\n<p>As you can see; in this case <strong><em>Crystal</em></strong> is the more performant language – taking less time to execute &amp; complete the test, and also fewer Megabytes in memory doing so.</p>\n<br/>\n\n<h3 id=\"Base64-encoding-decoding-a-large-blob\"><a href=\"#Base64-encoding-decoding-a-large-blob\" class=\"headerlink\" title=\"Base64 encoding / decoding a large blob:\"></a>Base64 encoding / decoding a large blob:</h3><p>In this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let’s look at the <strong><em>Nim</em></strong> test:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> base64, times, strutils, strformat</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">STR_SIZE</span> = <span class=\"number\">131072</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">TRIES</span> = <span class=\"number\">8192</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> str = strutils.repeat('a', <span class=\"type\">STR_SIZE</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str2 = base64.encode(str)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"encode &#123;str[..3]&#125;... to &#123;str2[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> t = times.epochTime()</span><br><span class=\"line\"><span class=\"keyword\">var</span> i = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> s:<span class=\"built_in\">int64</span> = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str2 = base64.encode(str)</span><br><span class=\"line\">  s += len(str2)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str3 = base64.decode(str2)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"decode &#123;str2[..3]&#125;... to &#123;str3[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\">t = times.epochTime()</span><br><span class=\"line\">i = <span class=\"number\">0</span></span><br><span class=\"line\">s = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str3 = base64.decode(str2)</span><br><span class=\"line\">  s += len(str3)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And now the same test, written in Crystal:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"base64\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">STR_SIZE = <span class=\"number\">131072</span></span><br><span class=\"line\">TRIES = <span class=\"number\">8192</span></span><br><span class=\"line\"></span><br><span class=\"line\">str = <span class=\"string\">\"a\"</span> * STR_SIZE</span><br><span class=\"line\"></span><br><span class=\"line\">str2 = Base64.strict_encode(str)</span><br><span class=\"line\">print <span class=\"string\">\"encode <span class=\"subst\">#&#123;str[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str2 = Base64.strict_encode(str)</span><br><span class=\"line\">  s += str2.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">str3 = Base64.decode_string(str2)</span><br><span class=\"line\">print <span class=\"string\">\"decode <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str3[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str3 = Base64.decode_string(str2)</span><br><span class=\"line\">  s += str3.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results-1\"><a href=\"#Results-1\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>We can again; build our Base64 test files into release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build base64_test.cr --release -o base64_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>As with our last test suite, we can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>4.17</td>\n<td>6.6</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>2.36</td>\n<td>3.5</td>\n</tr>\n</tbody></table>\n<p>Once again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>The summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research &amp; testing to see how close to <em>C speeds</em> it could achieve.  That being said, I was <em>also</em> already aware that Nim <strong>claims</strong> close to C speeds, and that one of the language’s principals was to run well on old &amp; less-performant hardware.  </p>\n<p>Yet, Crystal beat not only my own expectations; but beat Nim for both memory usage <strong>AND</strong> execution times.  I really didn’t expect to see Crystal come out <em>this</em> far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  <strong>Nim makes it even easier</strong> than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.</p>\n<p>In conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:</p>\n<ul>\n<li>Part 2: Threading and Tooling</li>\n<li>Part 3: Crypto, DApps and P2P</li>\n</ul>\n<p>These two articles will be released over the next couple of days, so don’t forget to come back then to check them out!</p>\n<p>Thanks for reading - as ever, if you have any questions, please feel free to reach out at <a href=\"mailto:robin@status.im\" target=\"_blank\" rel=\"noopener\">robin@status</a>.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> - <strong>@rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>I’ve been wanting to write-up a comparison on Nim and Crystal for quite some time now, and I’m happy that I’m finally able to do so.  What I’ve decided on doing; is breaking this up into a three part series as there are <strong><em>SO</em></strong> many features of both languages I’d like to talk about, and therein many opinions held too.  I do have a habit of writing <strong>very</strong> long articles, so I’d like to limit the topic scope, to keep each of these a little snappier!</p>\n<p>Before I go into specifics on either of these languages, I’d first like to go into my reasons for first learning both languages, and briefly touch on my past experiences with the two of them.  I admit that I <em>have</em> had more experience with Crystal than I have with Nim; however, I will give an objective view of both languages until I go into my personal preference towards the end of each article in this series.</p>\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">crystal or nim? Both super immature but fun</p>&mdash; @r4vi (@r4vi) <a href=\"https://twitter.com/r4vi/status/874741870093623296?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">June 13, 2017</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\n<p>Back in mid-2017, I sent out a tweet asking my dev followers which low-level languages they would recommend I take a look at.  For a while before this, I had been waiting for a new systems language for me to learn, but until this tweet, I never really found one that I was <em>actually</em> interested in taking a look at.</p>\n<p>Naturally, both languages have a <strong>TONNE</strong> of features, so I’m not going to go into details on things like basic types, etc.  I will simply compare the biggest things that attracted me to both languages.  For in-depth tutorials on the features of both langs, check out the <a href=\"https://crystal-lang.org/reference/\" target=\"_blank\" rel=\"noopener\">Crystal Docs</a>, or the <a href=\"https://nim-lang.org/docs/lib.html\" target=\"_blank\" rel=\"noopener\">Nim Docs</a>.</p>\n<p>Anyway, let’s take a look at both languages, and you can make your own mind up as to which you’d rather be programming in.  Maybe both.  Maybe neither!</p>\n<br/>\n\n<h2 id=\"Nim\"><a href=\"#Nim\" class=\"headerlink\" title=\"Nim\"></a>Nim</h2><p>Nim is a statically-typed, imperative, systems programming language; aiming to achieve the performance of C, be as expressive as Lisp, and have a simple, clear syntax like Python.  I have to say, from my experience Nim manages to <strong><em>pretty much</em></strong> fit these criterion.  </p>\n<blockquote>\n<p>By compiling to C, Nim is able to take advantage of many features offered by modern C compilers. The primary benefits gained by this compilation model include incredible portability and optimisations.</p>\n</blockquote>\n<blockquote>\n<p>The binaries produced by Nim have zero dependencies and are typically very small. This makes their distribution easy and keeps your users happy.</p>\n</blockquote>\n<p>When I say it <em>pretty much</em> matches the criteria, the only statement that doesn’t quite match is achieving the performance of C.  In realise this is an almost impossible task, but Nim actually did fall short on a few occasions when it came to performance.  I will go into detail about this later on in the article.</p>\n<h3 id=\"Installing-Nim\"><a href=\"#Installing-Nim\" class=\"headerlink\" title=\"Installing Nim\"></a>Installing Nim</h3><p>Nim is super easy to install.  If you’re on Windows, <a href=\"https://nim-lang.org/install_windows.html\" target=\"_blank\" rel=\"noopener\">head over here</a>, and download/run the installer.</p>\n<p>If you’re on any other Unix-based system, you can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ curl https:&#x2F;&#x2F;nim-lang.org&#x2F;choosenim&#x2F;init.sh -sSf | sh&#96;</span><br></pre></td></tr></table></figure>\n\n<p>If you’re on Mac, and with Homebrew installed, simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install nim</span><br></pre></td></tr></table></figure>\n\n<p>You could also consider using <a href=\"https://github.com/dom96/choosenim\" target=\"_blank\" rel=\"noopener\">choosenim</a> to manage Nim installations in a similar way to <code>pyenv</code> and <code>rustup</code>.</p>\n<h3 id=\"Interfacing-Other-Languages\"><a href=\"#Interfacing-Other-Languages\" class=\"headerlink\" title=\"Interfacing Other Languages\"></a>Interfacing Other Languages</h3><p>One of the things that attracted me to both Nim <strong>and</strong> Crystal, was the ability to natively interface with other languages, and the <strong>ease</strong> with which that is achieved.  Nim has bidirectional interfacing not only with C, but also natively with JavaScript. Crystal natively interfaces with C, but is only unidirectional.  Definitely a point scored here for Nim!</p>\n<p>When it comes to building DApps, the variety of target hardware they must be run on is already large, and growing all the time.  The low-level ability to interop with other languages makes for both languages being a much more attractive proposition.</p>\n<p>For a quick demo, let’s take a look at interfacing both C and JavaScript from Nim.</p>\n<h4 id=\"C-Invocation\"><a href=\"#C-Invocation\" class=\"headerlink\" title=\"C Invocation\"></a>C Invocation</h4><p>Firstly, create the file <code>logic.c</code> with the following content:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">int</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(<span class=\"keyword\">int</span> a, <span class=\"keyword\">int</span> b)</span></span></span><br><span class=\"line\"><span class=\"function\"></span>&#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> a + b;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, create the file <code>calculator.nim</code> with the following content:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&#123;.compile: \"logic.c\".&#125;</span></span><br><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">cint</span>): <span class=\"built_in\">cint</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n<p>Now then, with these two <em>very simple</em> files in place, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -r calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>The Nim compiler will compile the <code>logic.c</code> file in addition to <code>calculator.nim</code> and link both into an executable; which outputs <code>10</code> when run.  Very sharp, in my opinion!</p>\n<h4 id=\"JavaScript-Invocation\"><a href=\"#JavaScript-Invocation\" class=\"headerlink\" title=\"JavaScript Invocation\"></a>JavaScript Invocation</h4><p>Even sharper, in my opinion, is the ability to interop with JavaScript.  Create a file titled <code>host.html</code> with the following content:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">html</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"actionscript\">    <span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">addTwoIntegers</span><span class=\"params\">(a, b)</span></span></span></span><br><span class=\"line\">    &#123;</span><br><span class=\"line\"><span class=\"actionscript\">      <span class=\"keyword\">return</span> a + b;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text/javascript\"</span> <span class=\"attr\">src</span>=<span class=\"string\">\"calculator.js\"</span>&gt;</span><span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>Now, create another <code>calculator.nim</code> file with the following content (or reuse the one from the above C example):</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">proc</span> addTwoIntegers(a, b: <span class=\"built_in\">int</span>): <span class=\"built_in\">int</span> <span class=\"meta\">&#123;.importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">when</span> isMainModule:</span><br><span class=\"line\">  echo addTwoIntegers(<span class=\"number\">3</span>, <span class=\"number\">7</span>)</span><br></pre></td></tr></table></figure>\n\n\n<p>Compile the Nim code to JavaScript by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim js -o:calculator.js calculator.nim</span><br></pre></td></tr></table></figure>\n\n<p>Once that’s done, go ahead and open <code>host.html</code> in a browser and you should see the value <code>10</code> in the browser’s console.  I think this is <strong>REALLY</strong> neat.  It’s superb how easy it is to achieve that, too.</p>\n<h3 id=\"Aside-–-a-Quick-not-so-Secret\"><a href=\"#Aside-–-a-Quick-not-so-Secret\" class=\"headerlink\" title=\"Aside – a Quick (not-so) Secret:\"></a>Aside – a Quick (not-so) Secret:</h3><p>Instead of writing out the HTML above, you could actually use <strong><em>Nim’s native</em></strong> HTML DSL:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> html_dsl</span><br><span class=\"line\"></span><br><span class=\"line\">html page:</span><br><span class=\"line\">  head:</span><br><span class=\"line\">    title(<span class=\"string\">\"Title\"</span>)</span><br><span class=\"line\">  body:</span><br><span class=\"line\">    p(<span class=\"string\">\"Hello\"</span>)</span><br><span class=\"line\">    p(<span class=\"string\">\"World\"</span>)</span><br><span class=\"line\">    dv:</span><br><span class=\"line\">      p <span class=\"string\">\"Example\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">echo render(page())</span><br></pre></td></tr></table></figure>\n\n<p>Running this will output the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&lt;!DOCTYPE <span class=\"meta-keyword\">html</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">html</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">charset</span>=<span class=\"string\">\"utf-8\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">\"viewport\"</span> <span class=\"attr\">content</span>=<span class=\"string\">\"width=device-width, initial-scale=1\"</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">title</span>&gt;</span>Title<span class=\"tag\">&lt;/<span class=\"name\">title</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">head</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;<span class=\"name\">body</span> <span class=\"attr\">class</span>=<span class=\"string\">'has-navbar-fixed-top'</span> &gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>Hello<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">p</span> &gt;</span>World<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">      <span class=\"tag\">&lt;<span class=\"name\">p</span>&gt;</span>Example<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span></span><br><span class=\"line\">    <span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></span><br><span class=\"line\">  <span class=\"tag\">&lt;/<span class=\"name\">body</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;/<span class=\"name\">html</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n\n<br/>\n\n<h2 id=\"Crystal\"><a href=\"#Crystal\" class=\"headerlink\" title=\"Crystal\"></a>Crystal</h2><p>Crystal is a statically-typed, object-oriented, systems programming language; with the aim of achieving the speed and performance of c/c++, whilst having a syntax as simple, readable, and easy to learn as Ruby.</p>\n<p>I first came across Crystal when I saw <a href=\"https://twitter.com/sferik\" target=\"_blank\" rel=\"noopener\">@sferik</a> giving a talk on it in Poland back in 2015. <a href=\"https://www.youtube.com/watch?v=Ysm4IU4aWoQ\" target=\"_blank\" rel=\"noopener\">Video here.</a> It was a great talk, and sparked my interest in Crystal right there and then. When I initially explored Crystal I thought it looked awesome, but I was too busy with all the other languages I was using on a daily basis, to be able to focus my time on it properly.</p>\n<h3 id=\"Installing-Crystal\"><a href=\"#Installing-Crystal\" class=\"headerlink\" title=\"Installing Crystal\"></a>Installing Crystal</h3><p>You can find all of the relevant instructions for installing Crystal, on the <a href=\"https://crystal-lang.org/install/\" target=\"_blank\" rel=\"noopener\">main website installation page</a>.</p>\n<p>If you are on Mac, and have Homebrew installed, you can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ brew install crystal</span><br></pre></td></tr></table></figure>\n\n<p><strong>However</strong>, if you are a Windows user, <em>for the time being</em> you are out of luck, unless you use the Windows Subsystem for Linux.  If I were in a more shocking/pedantic mood, I’d take a (not yet gained) point <strong>away</strong> from Crystal here, for lack of Windows support.</p>\n<h3 id=\"Interfacing-C\"><a href=\"#Interfacing-C\" class=\"headerlink\" title=\"Interfacing C\"></a>Interfacing C</h3><p>Let’s build a simple script in C that says “hi!”. We’ll then write a Crystal app to bind to our C library. This is a great starting point for anyone who wants to know about binding C in Crystal.</p>\n<p>First off, let’s create a project with Crystal’s scaffolding tool (I’ll cover this feature later). Run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init app sayhi_c</span><br></pre></td></tr></table></figure>\n\n<p>Then head into the directory <code>sayhi_c/src/sayhi_c</code> and let’s create a file <code>sayhi.c</code> with the following contents:</p>\n<figure class=\"highlight c\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">#<span class=\"meta-keyword\">include</span> <span class=\"meta-string\">&lt;stdio.h&gt;</span></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">void</span> <span class=\"title\">hi</span><span class=\"params\">(<span class=\"keyword\">const</span> <span class=\"keyword\">char</span> * name)</span></span>&#123;</span><br><span class=\"line\">  <span class=\"built_in\">printf</span>(<span class=\"string\">\"Hi %s!\\n\"</span>, name);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now we need to compile our C file into an object. On Ubuntu or Mac using gcc we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ gcc -c sayhi.c -o sayhi.o</span><br></pre></td></tr></table></figure>\n\n<p>Using the -o flags allow us to create an Object filetype. Once we’ve got our Object file, we can bind it from within our Crystal app. Open up our <code>sayhi_c.cr</code> file, and have it reflect the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"./sayhi_c/*\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"meta\">@[Link(ldflags: <span class=\"meta-string\">\"#&#123;__DIR__&#125;/sayhi_c/sayhi.o\"</span>)]</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">lib</span> <span class=\"title\">Say</span></span></span><br><span class=\"line\">  <span class=\"function\"><span class=\"keyword\">fun</span> <span class=\"title\">hi</span></span>(name : <span class=\"symbol\">LibC:</span>:Char*) : Void</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Say.hi(<span class=\"string\">\"Status\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>I’ll mention now that there are no implicit type conversions except to_unsafe - explained here when invoking a C function: you must pass the exact type that is expected.</p>\n<p>Also worth noting at this point is that since we have built our C file into an object file, we can include it in the project directory and link from there. When we want to link dynamic libraries or installed C packages, we can just link them without including a path.</p>\n<p>So, if we build our project file and run it, we get the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build --release src&#x2F;sayhi_c.cr</span><br><span class=\"line\"></span><br><span class=\"line\">$ .&#x2F;sayhi_c</span><br><span class=\"line\"></span><br><span class=\"line\"> &gt; Hi Status!</span><br></pre></td></tr></table></figure>\n\n<p>As you can see, Nim takes the winners trophy in this case, as it is <strong>much</strong> simpler to achieve a similar goal.  With Nim, we were also able to link both the Nim and C files into the same executable, which Crystal sadly cannot do.</p>\n<br/>\n\n<h2 id=\"Performance-Tests\"><a href=\"#Performance-Tests\" class=\"headerlink\" title=\"Performance Tests\"></a>Performance Tests</h2><h3 id=\"Parsing-amp-calculating-values-from-a-large-JSON-file\"><a href=\"#Parsing-amp-calculating-values-from-a-large-JSON-file\" class=\"headerlink\" title=\"Parsing &amp; calculating values from a large JSON file:\"></a>Parsing &amp; calculating values from a large JSON file:</h3><p>Firstly, we need to generate our large JSON file.  For this test, we’re going to generate a dataset which includes <strong>1 Million</strong> items.</p>\n<center><iframe src=\"https://giphy.com/embed/13B1WmJg7HwjGU\" width=\"480\" height=\"270\" frameBorder=\"0\"></iframe></center>\n\n<p>We can do so with the following Ruby script:</p>\n<figure class=\"highlight rb\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">'json'</span></span><br><span class=\"line\"></span><br><span class=\"line\">x = []</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"number\">1000000</span>.times <span class=\"keyword\">do</span></span><br><span class=\"line\">  h = &#123;</span><br><span class=\"line\">    <span class=\"string\">'x'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'y'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'z'</span> =&gt; rand,</span><br><span class=\"line\">    <span class=\"string\">'name'</span> =&gt; (<span class=\"string\">'a'</span>..<span class=\"string\">'z'</span>).to_a.shuffle[<span class=\"number\">0</span>..<span class=\"number\">5</span>].join + <span class=\"string\">' '</span> + rand(<span class=\"number\">10000</span>).to_s,</span><br><span class=\"line\">    <span class=\"string\">'opts'</span> =&gt; &#123;<span class=\"string\">'1'</span> =&gt; [<span class=\"number\">1</span>, <span class=\"literal\">true</span>]&#125;,</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  x &lt;&lt; h</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">File.open(<span class=\"string\">\"1.json\"</span>, <span class=\"string\">'w'</span>) &#123; <span class=\"params\">|f|</span> f.write JSON.pretty_generate(<span class=\"string\">'coordinates'</span> =&gt; x, <span class=\"string\">'info'</span> =&gt; <span class=\"string\">\"some info\"</span>) &#125;</span><br></pre></td></tr></table></figure>\n\n<p>This will generate a JSON file <strong>of around 212mb</strong>, with the following syntax:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"coordinates\"</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">\"x\"</span>: <span class=\"number\">0.10327081810860272</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"y\"</span>: <span class=\"number\">0.03247172212368832</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"z\"</span>: <span class=\"number\">0.8155255437507467</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"name\"</span>: <span class=\"string\">\"scojbq 5965\"</span>,</span><br><span class=\"line\">      <span class=\"attr\">\"opts\"</span>: &#123;</span><br><span class=\"line\">        <span class=\"attr\">\"1\"</span>: [</span><br><span class=\"line\">          <span class=\"number\">1</span>,</span><br><span class=\"line\">          <span class=\"literal\">true</span></span><br><span class=\"line\">        ]</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  ],</span><br><span class=\"line\">  <span class=\"attr\">\"info\"</span>: <span class=\"string\">\"some info\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Now that we have our chunky JSON file; we can write our first test – <strong>in Nim</strong>:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> json</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> jobj = parseFile(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].elems</span><br><span class=\"line\"><span class=\"keyword\">let</span> len = <span class=\"built_in\">float</span>(coordinates.len)</span><br><span class=\"line\"><span class=\"keyword\">var</span> x = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> y = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> z = <span class=\"number\">0</span>.<span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> coord <span class=\"keyword\">in</span> coordinates:</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].fnum</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].fnum</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].fnum</span><br><span class=\"line\"></span><br><span class=\"line\">echo x / len</span><br><span class=\"line\">echo y / len</span><br><span class=\"line\">echo z / len</span><br></pre></td></tr></table></figure>\n\n<p>And again; the same simple test, this time written <strong>in Crystal</strong>:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">text = File.read(<span class=\"string\">\"1.json\"</span>)</span><br><span class=\"line\">jobj = JSON.parse(text)</span><br><span class=\"line\">coordinates = jobj[<span class=\"string\">\"coordinates\"</span>].as_a</span><br><span class=\"line\">len = coordinates.size</span><br><span class=\"line\">x = y = z = <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">coordinates.each <span class=\"keyword\">do</span> |coord|</span><br><span class=\"line\">  x += coord[<span class=\"string\">\"x\"</span>].as_f</span><br><span class=\"line\">  y += coord[<span class=\"string\">\"y\"</span>].as_f</span><br><span class=\"line\">  z += coord[<span class=\"string\">\"z\"</span>].as_f</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">p x / len</span><br><span class=\"line\">p y / len</span><br><span class=\"line\">p z / len</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results\"><a href=\"#Results\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>Building our test files into tiny release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build json_test.cr --release -o json_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:json_test_nim -d:danger --cc:gcc --verbosity:0 json_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>We can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>6.92</td>\n<td>1320.4</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>4.58</td>\n<td>960.7</td>\n</tr>\n</tbody></table>\n<p>As you can see; in this case <strong><em>Crystal</em></strong> is the more performant language – taking less time to execute &amp; complete the test, and also fewer Megabytes in memory doing so.</p>\n<br/>\n\n<h3 id=\"Base64-encoding-decoding-a-large-blob\"><a href=\"#Base64-encoding-decoding-a-large-blob\" class=\"headerlink\" title=\"Base64 encoding / decoding a large blob:\"></a>Base64 encoding / decoding a large blob:</h3><p>In this test; we will firstly encode and then decode a string, with a current timestamp into newly allocated buffers, utilising the Base64 algorithm.  For starters, let’s look at the <strong><em>Nim</em></strong> test:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> base64, times, strutils, strformat</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">STR_SIZE</span> = <span class=\"number\">131072</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"type\">TRIES</span> = <span class=\"number\">8192</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> str = strutils.repeat('a', <span class=\"type\">STR_SIZE</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str2 = base64.encode(str)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"encode &#123;str[..3]&#125;... to &#123;str2[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> t = times.epochTime()</span><br><span class=\"line\"><span class=\"keyword\">var</span> i = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> s:<span class=\"built_in\">int64</span> = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str2 = base64.encode(str)</span><br><span class=\"line\">  s += len(str2)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str3 = base64.decode(str2)</span><br><span class=\"line\"><span class=\"literal\">stdout</span>.write(<span class=\"string\">fmt\"decode &#123;str2[..3]&#125;... to &#123;str3[..3]&#125;...: \"</span>)</span><br><span class=\"line\"></span><br><span class=\"line\">t = times.epochTime()</span><br><span class=\"line\">i = <span class=\"number\">0</span></span><br><span class=\"line\">s = <span class=\"number\">0</span></span><br><span class=\"line\"><span class=\"keyword\">while</span> i &lt; <span class=\"type\">TRIES</span>:</span><br><span class=\"line\">  str3 = base64.decode(str2)</span><br><span class=\"line\">  s += len(str3)</span><br><span class=\"line\">  i += <span class=\"number\">1</span></span><br><span class=\"line\">echo(<span class=\"string\">fmt\"&#123;s&#125;, &#123;formatFloat(times.epochTime() - t, ffDefault, 6)&#125;\"</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And now the same test, written in Crystal:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"base64\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">STR_SIZE = <span class=\"number\">131072</span></span><br><span class=\"line\">TRIES = <span class=\"number\">8192</span></span><br><span class=\"line\"></span><br><span class=\"line\">str = <span class=\"string\">\"a\"</span> * STR_SIZE</span><br><span class=\"line\"></span><br><span class=\"line\">str2 = Base64.strict_encode(str)</span><br><span class=\"line\">print <span class=\"string\">\"encode <span class=\"subst\">#&#123;str[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str2 = Base64.strict_encode(str)</span><br><span class=\"line\">  s += str2.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br><span class=\"line\"></span><br><span class=\"line\">str3 = Base64.decode_string(str2)</span><br><span class=\"line\">print <span class=\"string\">\"decode <span class=\"subst\">#&#123;str2[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>... to <span class=\"subst\">#&#123;str3[<span class=\"number\">0</span>..<span class=\"number\">3</span>]&#125;</span>...: \"</span></span><br><span class=\"line\"></span><br><span class=\"line\">t, s = Time.local, <span class=\"number\">0</span></span><br><span class=\"line\">TRIES.times <span class=\"keyword\">do</span> |i|</span><br><span class=\"line\">  str3 = Base64.decode_string(str2)</span><br><span class=\"line\">  s += str3.bytesize</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\">puts <span class=\"string\">\"<span class=\"subst\">#&#123;s&#125;</span>, <span class=\"subst\">#&#123;Time.local - t&#125;</span>\"</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Results-1\"><a href=\"#Results-1\" class=\"headerlink\" title=\"Results:\"></a>Results:</h3><p>We can again; build our Base64 test files into release packages with the respective commands below:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal build base64_test.cr --release -o base64_test_cr --no-debug</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ nim c -o:base64_test_nim -d:danger --cc:gcc --verbosity:0 base64_test.nim</span><br></pre></td></tr></table></figure>\n\n<p>As with our last test suite, we can then time &amp; run those packages, to obtain our test results:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Time (s)</th>\n<th>Memory (Mb)</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Nim</td>\n<td>4.17</td>\n<td>6.6</td>\n</tr>\n<tr>\n<td>Crystal</td>\n<td>2.36</td>\n<td>3.5</td>\n</tr>\n</tbody></table>\n<p>Once again, to my surprise, Crystal came out on top. And did again and again for me, running a bunch of different tests I could scrape together from other curious devs.</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>The summary of this first-in-series article, is most definitely one of surprise.  I already knew that Crystal was a highly-performant language, and I have previously done my own research &amp; testing to see how close to <em>C speeds</em> it could achieve.  That being said, I was <em>also</em> already aware that Nim <strong>claims</strong> close to C speeds, and that one of the language’s principals was to run well on old &amp; less-performant hardware.  </p>\n<p>Yet, Crystal beat not only my own expectations; but beat Nim for both memory usage <strong>AND</strong> execution times.  I really didn’t expect to see Crystal come out <em>this</em> far ahead in performance.  On the other hand, Nim came out by-far the leader when it comes to language interoperability.  <strong>Nim makes it even easier</strong> than Crystal when interfacing other langs – not something I thought possible, given just how easy Crystal makes the task.</p>\n<p>In conclusion, it seems that we have 1 point for Nim (interoperability), and 1 point for Crystal (performance).  Both languages have pleasantly surprised me, and I look forward to diving into the next topics in the series:</p>\n<ul>\n<li>Part 2: Threading and Tooling</li>\n<li>Part 3: Crypto, DApps and P2P</li>\n</ul>\n<p>These two articles will be released over the next couple of days, so don’t forget to come back then to check them out!</p>\n<p>Thanks for reading - as ever, if you have any questions, please feel free to reach out at <a href=\"mailto:robin@status.im\" target=\"_blank\" rel=\"noopener\">robin@status</a>.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> - <strong>@rbin</strong></a></p>\n"},{"title":"Nim vs Crystal - Part 2 - Threading & Tooling","summary":"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 2, Threading & Tooling  are reviewed.","author":"robin_percy","layout":"blog-post","image":"/assets/images/nim-crystal-header_blank.jpg","_content":"\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  In [part 1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/), I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!\n\nIn this article, we're going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency & parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it'll be useful; I won't cover ***only*** the in-built tooling, but I'll include my favourite external package too.\n\n\n\n# Threading\n\n\n### Nim Parallelism Primitives\n\nNim has two flavours of parallelism:\n\n * Structured parallelism via the parallel statement.\n * Unstructured parallelism via the standalone spawn statement.\n\nNim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.\n\n``` nim\nimport threadpool\n\nproc processLine(line: string) =\n  discard \"do some heavy lifting here\"\n\nfor x in lines(\"myinput.txt\"):\n  spawn processLine(x)\nsync()\n```\n\nThe parallel statement is the preferred way to use parallelism in a Nim program.\n\n``` nim\n# Compute Pi in an inefficient way\n\nimport strutils, math, threadpool\n{.experimental: \"parallel\".}\n\nproc term(k: float): float = 4 * math.pow(-1, k) / (2*k + 1)\n\nproc pi(n: int): float =\n  var ch = newSeq[float](n+1)\n  parallel:\n    for k in 0..ch.high:\n      ch[k] = spawn term(float(k))\n  for k in 0..ch.high:\n    result += ch[k]\n\necho formatFloat(pi(5000))\n```\n\nThreading support in Nim is part of the `system` module.  To activate thread support you need to compile with the `--threads:on` command line switch.\n\nNim's memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.\n\n### Concurrency vs Parallelism\n\nThe definitions of \"concurrency\" and \"parallelism\" sometimes get mixed up, but they are not the same.\n\nA concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake & change gear, but they don't happen at the exact same time, although they *do* overlap.  This is concurrency.\n\n![concurrency](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nThe human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.\n\n![parallelism](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nAt the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently [Parallelism was tested out](https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html) and I'm sure will be fully ready to use soon!\n\nA Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).\n\n### Crystal Concurrency Primitives\n\nIn Crystal, we can use the `Spawn` functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main `Fiber` that will execute your top-level code, from which we can spawn many other `Fibers`.\n\n`Fibers` are lightweight threads of execution that are managed by the garbage collector, so you don't *really* need to worry about managing them once you've spawned them.  Because of this, you could technically spin up 100 `Fibers` to make a bunch of API requests, and then simply forget about them.\n\nWe can utilise `Spawn` in Crystal like so:\n\n``` crystal\nrequire \"socket\"\n\ndef load(id, chan)\n  puts \"ID=#{id}; START\"\n  (id..11).each do\n    socket = TCPSocket.new(\"http://robin.percy.pw\", 80)\n    socket.close\n  end\n  puts \"ID=#{id}; FINISH\"\n  chan.send nil\nend\n\ndef main\n  chan = Channel(Nil).new\n  (1..10).each{|i| spawn(load(i,chan))}\n  # Wait\n  (1..10).each{chan.receive}\nend\n\nmain\n```\n\n> To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.\n\nIn program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 *should* finish before task #1.  As you can see in the image below; it does just that!\n\n![Crystal spawn test](/assets/images/crystal-thread-test.png)\n\nSimilar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:\n\n``` crystal\ndef ping(pings, message)\n  pings.send message\nend\n\ndef pong(pings, pongs)\n  message = pings.receive\n  pongs.send message\nend\n\npings = Channel(String).new\npongs = Channel(String).new\nspawn ping pings, \"passed message\"\nspawn pong pings, pongs\nputs pongs.receive # => \"passed message\"\n```\n\nUnfortunately, I personally haven't had the opportunity to test Crystal's `Fibers` or Nim's `Spawn` in a load-heavy production environment. But soon I fully intend to, and I'll write another article benchmarking this in detail when I have a good usecase and get the chance to!\n\n\n# Tooling\n\n## Built-in Tooling in Nim\n\nNow that [Nim 1.0 has been released](https://nim-lang.org/blog/2019/09/23/version-100-released.html), its in-built tooling has improved to a great level, and is very quickly reaching maturity.\n\nThe standard library in Nim is fantastic...  Things like native database support for multiple db's, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of 'use the right tool for the job' – so don't go implementing Nim just for the sake of it!\n\nThe only thing to keep in mind; is that Nim *does* seem to be slower in growth than Crystal.  The thing is – Nim has quite a few **less** core contributors than Crystal, so slower growth is to be expected!\n\n\n### Nim Project Packaging\n\nSomething I look for in ***ALL*** modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim's case; we have Nimble!\n\nWe can create a new app (library/binary) by using `nimble init`:\n\n![creating nimble app](/assets/images/nimble-creating-app.png)\n\nI have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.\n\nIt's not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my [last article.](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/)\n\n\n### Documentation\n\nNimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be *slightly* confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the `init` func.\n\nYou can generate the documentation file for your app by running:\n\n```\nnimble doc myapp.nimble\n```\n\n### Testing\n\nNimble offers a pre-defined `test` task which compiles and runs all files in the `/tests` directory beginning with 't' in their filename.\n\nYou may wish to override this `test` task in your `.nimble` file. This is particularly useful when you have a single test suite program. Just add the following to your `.nimble` file to override the default `test` task.\n\n``` nim\ntask test, \"Runs the test suite\":\n  exec \"nim c -r tests/tester\"\n```\n\nRunning nimble test will now use the test task you have defined.\n\n\n\n<br/>\n\n## Built-in Tooling in Crystal\n\nOne of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it's always very reassuring when the language has extensive built-in tooling available to help developers stay productive & happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.\n\n\n### Crystal Project Packaging\n\nMuch the same as the Nimble package manager, ***although not as good in my opinion,*** Crystal has it's own built-in project scaffolder & package manager. I'd recommend using this at all times to ensure semantics are followed. We can use it with the following:\n\n```\n$ crystal init lib my_app\n      create  my_app/.gitignore\n      create  my_app/LICENSE\n      create  my_app/README.md\n      create  my_app/.travis.yml\n      create  my_app/shard.yml\n      create  my_app/src/my_app\n      create  my_app/src/my_app/version.cr\n      create  my_app/spec/spec_helper.cr\n      create  my_app/spec/my_app_spec.cr\nInitialized empty Git repository in ~/my_app/.git/\n```\n\n`Shards` are Crystal's packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the `my_app` app above looks like this:\n\n``` yaml\nname: my_app\nversion: 0.1.0\n\nauthors:\n  - Robin Percy <robin@percy.pw>\n\ntargets:\n  sayhi_c:\n    main: src/my_app.cr\n\ncrystal: 0.31.1\n\nlicense: MIT\n```\n\nThe app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:\n\n``` yaml\ndependencies:\n  github:\n    github: felipeelias/crystal-github\n    version: ~> 0.1.0\n```\n\n### Documentation & Formatting\n\nCrystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.\n\nTo generate documentation, from the project root directory we can simply run:\n\n```\n$ crystal doc\n```\nThis will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.\n\nAlongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:\n\n```\n$ crystal tool format\n```\n\nWe can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project's codebase instead of just a single file.\n\n<br/>\n\n## My Top Crystal Repo\n\n### Kemal\n\nObviously, there ***had*** to be a web framework appear in this list, seen as that's what absolutely **every** dev seems to want to implement.  My choice here is my buddy [Serdar's](https://twitter.com/sdogruyol) library; [Kemal](https://kemalcr.com/). One feature I really like about it, is how simple it makes it to utilise JSON & create a JSON API.  For example, accepting JSON in a POST request, parsing & mapping it directly to an object:\n\n``` crystal\nrequire \"kemal\"\nrequire \"json\"\n\nclass User\n  JSON.mapping(\n    firstname: String,\n    surname: String,\n  )\nend\n\npost \"/\" do |env|\n  user = User.from_json env.request.body.not_nil!\n  {firstname: user.firstname, surname: user.surname}.to_json\nend\n\nKemal.run\n```\n\n**If you want to find all of the best Crystal libraries, [you can check them out here.](https://github.com/veelenga/awesome-crystal)**\n\n<br />\n\n## My Top Nim Repo\n\n### Nimbus\n\nMy favourite Nim library really has to be [Nimbus](https://github.com/status-im/nimbus).  This is not because I work for [Status](https://status.im) (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!\n\nI think that Nimbus is literally the most impressive Nim library outside of the Nim core, the [Nim Beacon Chain](https://github.com/status-im/nimbus) particularly so!\n\n> Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)\n\nWhilst there are no developer code samples to include here, you can check out the [main Nimbus website](https://nimbus.team/), and the [main Nimbus repo](https://github.com/status-im/nimbus/).\n\nTake a look at [https://nimble.directory/](https://nimble.directory/) for a full list of external Nim libraries available for your projects!\n\n\n# Conclusion\n\nBack in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.\n\nIt's fantastic seeing both Nim *and* Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!\n\nI briefly touched on the smaller number of people on the Nim core team above, and this is something that's pretty unfortunate.  Nim is a language and an ecosystem that has **such** great promise, I would love to see more people contributing to it and utilising it in production systems.\n\nThe final article in this series, \"Crypto, DApps & P2P\", will be released over the coming days, so keep checking back.\n\nThanks again for sticking with me!\n\n[ **- @rbin**](https://twitter.com/rbin)\n\n\n","source":"_posts/2019-11-21-nim-vs-crystal-part-2-threading-tooling.md","raw":"title: Nim vs Crystal - Part 2 - Threading & Tooling\nsummary: \"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 2, Threading & Tooling  are reviewed.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/nim-crystal-header_blank.jpg'\n---\n\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  In [part 1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/), I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!\n\nIn this article, we're going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency & parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it'll be useful; I won't cover ***only*** the in-built tooling, but I'll include my favourite external package too.\n\n\n\n# Threading\n\n\n### Nim Parallelism Primitives\n\nNim has two flavours of parallelism:\n\n * Structured parallelism via the parallel statement.\n * Unstructured parallelism via the standalone spawn statement.\n\nNim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.\n\n``` nim\nimport threadpool\n\nproc processLine(line: string) =\n  discard \"do some heavy lifting here\"\n\nfor x in lines(\"myinput.txt\"):\n  spawn processLine(x)\nsync()\n```\n\nThe parallel statement is the preferred way to use parallelism in a Nim program.\n\n``` nim\n# Compute Pi in an inefficient way\n\nimport strutils, math, threadpool\n{.experimental: \"parallel\".}\n\nproc term(k: float): float = 4 * math.pow(-1, k) / (2*k + 1)\n\nproc pi(n: int): float =\n  var ch = newSeq[float](n+1)\n  parallel:\n    for k in 0..ch.high:\n      ch[k] = spawn term(float(k))\n  for k in 0..ch.high:\n    result += ch[k]\n\necho formatFloat(pi(5000))\n```\n\nThreading support in Nim is part of the `system` module.  To activate thread support you need to compile with the `--threads:on` command line switch.\n\nNim's memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.\n\n### Concurrency vs Parallelism\n\nThe definitions of \"concurrency\" and \"parallelism\" sometimes get mixed up, but they are not the same.\n\nA concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake & change gear, but they don't happen at the exact same time, although they *do* overlap.  This is concurrency.\n\n![concurrency](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nThe human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.\n\n![parallelism](https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg)\n*Source: https://livebook.manning.com/book/nim-in-action/chapter-6/13*\n\nAt the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently [Parallelism was tested out](https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html) and I'm sure will be fully ready to use soon!\n\nA Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).\n\n### Crystal Concurrency Primitives\n\nIn Crystal, we can use the `Spawn` functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main `Fiber` that will execute your top-level code, from which we can spawn many other `Fibers`.\n\n`Fibers` are lightweight threads of execution that are managed by the garbage collector, so you don't *really* need to worry about managing them once you've spawned them.  Because of this, you could technically spin up 100 `Fibers` to make a bunch of API requests, and then simply forget about them.\n\nWe can utilise `Spawn` in Crystal like so:\n\n``` crystal\nrequire \"socket\"\n\ndef load(id, chan)\n  puts \"ID=#{id}; START\"\n  (id..11).each do\n    socket = TCPSocket.new(\"http://robin.percy.pw\", 80)\n    socket.close\n  end\n  puts \"ID=#{id}; FINISH\"\n  chan.send nil\nend\n\ndef main\n  chan = Channel(Nil).new\n  (1..10).each{|i| spawn(load(i,chan))}\n  # Wait\n  (1..10).each{chan.receive}\nend\n\nmain\n```\n\n> To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.\n\nIn program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 *should* finish before task #1.  As you can see in the image below; it does just that!\n\n![Crystal spawn test](/assets/images/crystal-thread-test.png)\n\nSimilar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:\n\n``` crystal\ndef ping(pings, message)\n  pings.send message\nend\n\ndef pong(pings, pongs)\n  message = pings.receive\n  pongs.send message\nend\n\npings = Channel(String).new\npongs = Channel(String).new\nspawn ping pings, \"passed message\"\nspawn pong pings, pongs\nputs pongs.receive # => \"passed message\"\n```\n\nUnfortunately, I personally haven't had the opportunity to test Crystal's `Fibers` or Nim's `Spawn` in a load-heavy production environment. But soon I fully intend to, and I'll write another article benchmarking this in detail when I have a good usecase and get the chance to!\n\n\n# Tooling\n\n## Built-in Tooling in Nim\n\nNow that [Nim 1.0 has been released](https://nim-lang.org/blog/2019/09/23/version-100-released.html), its in-built tooling has improved to a great level, and is very quickly reaching maturity.\n\nThe standard library in Nim is fantastic...  Things like native database support for multiple db's, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of 'use the right tool for the job' – so don't go implementing Nim just for the sake of it!\n\nThe only thing to keep in mind; is that Nim *does* seem to be slower in growth than Crystal.  The thing is – Nim has quite a few **less** core contributors than Crystal, so slower growth is to be expected!\n\n\n### Nim Project Packaging\n\nSomething I look for in ***ALL*** modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim's case; we have Nimble!\n\nWe can create a new app (library/binary) by using `nimble init`:\n\n![creating nimble app](/assets/images/nimble-creating-app.png)\n\nI have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.\n\nIt's not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my [last article.](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/)\n\n\n### Documentation\n\nNimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be *slightly* confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the `init` func.\n\nYou can generate the documentation file for your app by running:\n\n```\nnimble doc myapp.nimble\n```\n\n### Testing\n\nNimble offers a pre-defined `test` task which compiles and runs all files in the `/tests` directory beginning with 't' in their filename.\n\nYou may wish to override this `test` task in your `.nimble` file. This is particularly useful when you have a single test suite program. Just add the following to your `.nimble` file to override the default `test` task.\n\n``` nim\ntask test, \"Runs the test suite\":\n  exec \"nim c -r tests/tester\"\n```\n\nRunning nimble test will now use the test task you have defined.\n\n\n\n<br/>\n\n## Built-in Tooling in Crystal\n\nOne of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it's always very reassuring when the language has extensive built-in tooling available to help developers stay productive & happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.\n\n\n### Crystal Project Packaging\n\nMuch the same as the Nimble package manager, ***although not as good in my opinion,*** Crystal has it's own built-in project scaffolder & package manager. I'd recommend using this at all times to ensure semantics are followed. We can use it with the following:\n\n```\n$ crystal init lib my_app\n      create  my_app/.gitignore\n      create  my_app/LICENSE\n      create  my_app/README.md\n      create  my_app/.travis.yml\n      create  my_app/shard.yml\n      create  my_app/src/my_app\n      create  my_app/src/my_app/version.cr\n      create  my_app/spec/spec_helper.cr\n      create  my_app/spec/my_app_spec.cr\nInitialized empty Git repository in ~/my_app/.git/\n```\n\n`Shards` are Crystal's packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the `my_app` app above looks like this:\n\n``` yaml\nname: my_app\nversion: 0.1.0\n\nauthors:\n  - Robin Percy <robin@percy.pw>\n\ntargets:\n  sayhi_c:\n    main: src/my_app.cr\n\ncrystal: 0.31.1\n\nlicense: MIT\n```\n\nThe app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:\n\n``` yaml\ndependencies:\n  github:\n    github: felipeelias/crystal-github\n    version: ~> 0.1.0\n```\n\n### Documentation & Formatting\n\nCrystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.\n\nTo generate documentation, from the project root directory we can simply run:\n\n```\n$ crystal doc\n```\nThis will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.\n\nAlongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:\n\n```\n$ crystal tool format\n```\n\nWe can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project's codebase instead of just a single file.\n\n<br/>\n\n## My Top Crystal Repo\n\n### Kemal\n\nObviously, there ***had*** to be a web framework appear in this list, seen as that's what absolutely **every** dev seems to want to implement.  My choice here is my buddy [Serdar's](https://twitter.com/sdogruyol) library; [Kemal](https://kemalcr.com/). One feature I really like about it, is how simple it makes it to utilise JSON & create a JSON API.  For example, accepting JSON in a POST request, parsing & mapping it directly to an object:\n\n``` crystal\nrequire \"kemal\"\nrequire \"json\"\n\nclass User\n  JSON.mapping(\n    firstname: String,\n    surname: String,\n  )\nend\n\npost \"/\" do |env|\n  user = User.from_json env.request.body.not_nil!\n  {firstname: user.firstname, surname: user.surname}.to_json\nend\n\nKemal.run\n```\n\n**If you want to find all of the best Crystal libraries, [you can check them out here.](https://github.com/veelenga/awesome-crystal)**\n\n<br />\n\n## My Top Nim Repo\n\n### Nimbus\n\nMy favourite Nim library really has to be [Nimbus](https://github.com/status-im/nimbus).  This is not because I work for [Status](https://status.im) (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!\n\nI think that Nimbus is literally the most impressive Nim library outside of the Nim core, the [Nim Beacon Chain](https://github.com/status-im/nimbus) particularly so!\n\n> Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)\n\nWhilst there are no developer code samples to include here, you can check out the [main Nimbus website](https://nimbus.team/), and the [main Nimbus repo](https://github.com/status-im/nimbus/).\n\nTake a look at [https://nimble.directory/](https://nimble.directory/) for a full list of external Nim libraries available for your projects!\n\n\n# Conclusion\n\nBack in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.\n\nIt's fantastic seeing both Nim *and* Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!\n\nI briefly touched on the smaller number of people on the Nim core team above, and this is something that's pretty unfortunate.  Nim is a language and an ecosystem that has **such** great promise, I would love to see more people contributing to it and utilising it in production systems.\n\nThe final article in this series, \"Crypto, DApps & P2P\", will be released over the coming days, so keep checking back.\n\nThanks again for sticking with me!\n\n[ **- @rbin**](https://twitter.com/rbin)\n\n\n","slug":"nim-vs-crystal-part-2-threading-tooling","published":1,"date":"2019-11-21T05:00:00.000Z","updated":"2020-01-17T19:05:36.402Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3u7002i7hegd17nahv0","content":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  In <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">part 1</a>, I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!</p>\n<p>In this article, we’re going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency &amp; parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it’ll be useful; I won’t cover <strong><em>only</em></strong> the in-built tooling, but I’ll include my favourite external package too.</p>\n<h1 id=\"Threading\"><a href=\"#Threading\" class=\"headerlink\" title=\"Threading\"></a>Threading</h1><h3 id=\"Nim-Parallelism-Primitives\"><a href=\"#Nim-Parallelism-Primitives\" class=\"headerlink\" title=\"Nim Parallelism Primitives\"></a>Nim Parallelism Primitives</h3><p>Nim has two flavours of parallelism:</p>\n<ul>\n<li>Structured parallelism via the parallel statement.</li>\n<li>Unstructured parallelism via the standalone spawn statement.</li>\n</ul>\n<p>Nim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> threadpool</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> processLine(line: <span class=\"built_in\">string</span>) =</span><br><span class=\"line\">  <span class=\"keyword\">discard</span> <span class=\"string\">\"do some heavy lifting here\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> x <span class=\"keyword\">in</span> lines(<span class=\"string\">\"myinput.txt\"</span>):</span><br><span class=\"line\">  spawn processLine(x)</span><br><span class=\"line\">sync()</span><br></pre></td></tr></table></figure>\n\n<p>The parallel statement is the preferred way to use parallelism in a Nim program.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Compute Pi in an inefficient way</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> strutils, math, threadpool</span><br><span class=\"line\"><span class=\"meta\">&#123;.experimental: \"parallel\".&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> term(k: <span class=\"built_in\">float</span>): <span class=\"built_in\">float</span> = <span class=\"number\">4</span> * math.pow(-<span class=\"number\">1</span>, k) / (<span class=\"number\">2</span>*k + <span class=\"number\">1</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> pi(n: <span class=\"built_in\">int</span>): <span class=\"built_in\">float</span> =</span><br><span class=\"line\">  <span class=\"keyword\">var</span> ch = newSeq[<span class=\"built_in\">float</span>](n+<span class=\"number\">1</span>)</span><br><span class=\"line\">  parallel:</span><br><span class=\"line\">    <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">      ch[k] = spawn term(<span class=\"built_in\">float</span>(k))</span><br><span class=\"line\">  <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">    <span class=\"literal\">result</span> += ch[k]</span><br><span class=\"line\"></span><br><span class=\"line\">echo formatFloat(pi(<span class=\"number\">5000</span>))</span><br></pre></td></tr></table></figure>\n\n<p>Threading support in Nim is part of the <code>system</code> module.  To activate thread support you need to compile with the <code>--threads:on</code> command line switch.</p>\n<p>Nim’s memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.</p>\n<h3 id=\"Concurrency-vs-Parallelism\"><a href=\"#Concurrency-vs-Parallelism\" class=\"headerlink\" title=\"Concurrency vs Parallelism\"></a>Concurrency vs Parallelism</h3><p>The definitions of “concurrency” and “parallelism” sometimes get mixed up, but they are not the same.</p>\n<p>A concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake &amp; change gear, but they don’t happen at the exact same time, although they <em>do</em> overlap.  This is concurrency.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg\" alt=\"concurrency\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>The human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg\" alt=\"parallelism\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>At the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently <a href=\"https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html\" target=\"_blank\" rel=\"noopener\">Parallelism was tested out</a> and I’m sure will be fully ready to use soon!</p>\n<p>A Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).</p>\n<h3 id=\"Crystal-Concurrency-Primitives\"><a href=\"#Crystal-Concurrency-Primitives\" class=\"headerlink\" title=\"Crystal Concurrency Primitives\"></a>Crystal Concurrency Primitives</h3><p>In Crystal, we can use the <code>Spawn</code> functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main <code>Fiber</code> that will execute your top-level code, from which we can spawn many other <code>Fibers</code>.</p>\n<p><code>Fibers</code> are lightweight threads of execution that are managed by the garbage collector, so you don’t <em>really</em> need to worry about managing them once you’ve spawned them.  Because of this, you could technically spin up 100 <code>Fibers</code> to make a bunch of API requests, and then simply forget about them.</p>\n<p>We can utilise <code>Spawn</code> in Crystal like so:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"socket\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">load</span></span>(id, chan)</span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; START\"</span></span><br><span class=\"line\">  (id..<span class=\"number\">11</span>).each <span class=\"keyword\">do</span></span><br><span class=\"line\">    socket = TCPSocket.new(<span class=\"string\">\"http://robin.percy.pw\"</span>, <span class=\"number\">80</span>)</span><br><span class=\"line\">    socket.close</span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; FINISH\"</span></span><br><span class=\"line\">  chan.send <span class=\"literal\">nil</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">main</span></span></span><br><span class=\"line\">  chan = Channel(Nil).new</span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;|i| spawn(load(i,chan))&#125;</span><br><span class=\"line\">  <span class=\"comment\"># Wait</span></span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;chan.receive&#125;</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">main</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.</p>\n</blockquote>\n<p>In program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 <em>should</em> finish before task #1.  As you can see in the image below; it does just that!</p>\n<p><img src=\"/assets/images/crystal-thread-test.png\" alt=\"Crystal spawn test\"></p>\n<p>Similar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">ping</span></span>(pings, message)</span><br><span class=\"line\">  pings.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">pong</span></span>(pings, pongs)</span><br><span class=\"line\">  message = pings.receive</span><br><span class=\"line\">  pongs.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">pings = Channel(String).new</span><br><span class=\"line\">pongs = Channel(String).new</span><br><span class=\"line\">spawn ping pings, <span class=\"string\">\"passed message\"</span></span><br><span class=\"line\">spawn pong pings, pongs</span><br><span class=\"line\">puts pongs.receive <span class=\"comment\"># =&gt; \"passed message\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Unfortunately, I personally haven’t had the opportunity to test Crystal’s <code>Fibers</code> or Nim’s <code>Spawn</code> in a load-heavy production environment. But soon I fully intend to, and I’ll write another article benchmarking this in detail when I have a good usecase and get the chance to!</p>\n<h1 id=\"Tooling\"><a href=\"#Tooling\" class=\"headerlink\" title=\"Tooling\"></a>Tooling</h1><h2 id=\"Built-in-Tooling-in-Nim\"><a href=\"#Built-in-Tooling-in-Nim\" class=\"headerlink\" title=\"Built-in Tooling in Nim\"></a>Built-in Tooling in Nim</h2><p>Now that <a href=\"https://nim-lang.org/blog/2019/09/23/version-100-released.html\" target=\"_blank\" rel=\"noopener\">Nim 1.0 has been released</a>, its in-built tooling has improved to a great level, and is very quickly reaching maturity.</p>\n<p>The standard library in Nim is fantastic…  Things like native database support for multiple db’s, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of ‘use the right tool for the job’ – so don’t go implementing Nim just for the sake of it!</p>\n<p>The only thing to keep in mind; is that Nim <em>does</em> seem to be slower in growth than Crystal.  The thing is – Nim has quite a few <strong>less</strong> core contributors than Crystal, so slower growth is to be expected!</p>\n<h3 id=\"Nim-Project-Packaging\"><a href=\"#Nim-Project-Packaging\" class=\"headerlink\" title=\"Nim Project Packaging\"></a>Nim Project Packaging</h3><p>Something I look for in <strong><em>ALL</em></strong> modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim’s case; we have Nimble!</p>\n<p>We can create a new app (library/binary) by using <code>nimble init</code>:</p>\n<p><img src=\"/assets/images/nimble-creating-app.png\" alt=\"creating nimble app\"></p>\n<p>I have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.</p>\n<p>It’s not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">last article.</a></p>\n<h3 id=\"Documentation\"><a href=\"#Documentation\" class=\"headerlink\" title=\"Documentation\"></a>Documentation</h3><p>Nimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be <em>slightly</em> confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the <code>init</code> func.</p>\n<p>You can generate the documentation file for your app by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nimble doc myapp.nimble</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Testing\"><a href=\"#Testing\" class=\"headerlink\" title=\"Testing\"></a>Testing</h3><p>Nimble offers a pre-defined <code>test</code> task which compiles and runs all files in the <code>/tests</code> directory beginning with ‘t’ in their filename.</p>\n<p>You may wish to override this <code>test</code> task in your <code>.nimble</code> file. This is particularly useful when you have a single test suite program. Just add the following to your <code>.nimble</code> file to override the default <code>test</code> task.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\">task test, <span class=\"string\">\"Runs the test suite\"</span>:</span><br><span class=\"line\">  exec <span class=\"string\">\"nim c -r tests/tester\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Running nimble test will now use the test task you have defined.</p>\n<br/>\n\n<h2 id=\"Built-in-Tooling-in-Crystal\"><a href=\"#Built-in-Tooling-in-Crystal\" class=\"headerlink\" title=\"Built-in Tooling in Crystal\"></a>Built-in Tooling in Crystal</h2><p>One of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it’s always very reassuring when the language has extensive built-in tooling available to help developers stay productive &amp; happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.</p>\n<h3 id=\"Crystal-Project-Packaging\"><a href=\"#Crystal-Project-Packaging\" class=\"headerlink\" title=\"Crystal Project Packaging\"></a>Crystal Project Packaging</h3><p>Much the same as the Nimble package manager, <strong><em>although not as good in my opinion,</em></strong> Crystal has it’s own built-in project scaffolder &amp; package manager. I’d recommend using this at all times to ensure semantics are followed. We can use it with the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init lib my_app</span><br><span class=\"line\">      create  my_app&#x2F;.gitignore</span><br><span class=\"line\">      create  my_app&#x2F;LICENSE</span><br><span class=\"line\">      create  my_app&#x2F;README.md</span><br><span class=\"line\">      create  my_app&#x2F;.travis.yml</span><br><span class=\"line\">      create  my_app&#x2F;shard.yml</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app&#x2F;version.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;spec_helper.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;my_app_spec.cr</span><br><span class=\"line\">Initialized empty Git repository in ~&#x2F;my_app&#x2F;.git&#x2F;</span><br></pre></td></tr></table></figure>\n\n<p><code>Shards</code> are Crystal’s packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the <code>my_app</code> app above looks like this:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">my_app</span></span><br><span class=\"line\"><span class=\"attr\">version:</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">authors:</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"string\">Robin</span> <span class=\"string\">Percy</span> <span class=\"string\">&lt;robin@percy.pw&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">targets:</span></span><br><span class=\"line\">  <span class=\"attr\">sayhi_c:</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">src/my_app.cr</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">crystal:</span> <span class=\"number\">0.31</span><span class=\"number\">.1</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">license:</span> <span class=\"string\">MIT</span></span><br></pre></td></tr></table></figure>\n\n<p>The app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">dependencies:</span></span><br><span class=\"line\">  <span class=\"attr\">github:</span></span><br><span class=\"line\">    <span class=\"attr\">github:</span> <span class=\"string\">felipeelias/crystal-github</span></span><br><span class=\"line\">    <span class=\"attr\">version:</span> <span class=\"string\">~&gt;</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Documentation-amp-Formatting\"><a href=\"#Documentation-amp-Formatting\" class=\"headerlink\" title=\"Documentation &amp; Formatting\"></a>Documentation &amp; Formatting</h3><p>Crystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.</p>\n<p>To generate documentation, from the project root directory we can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal doc</span><br></pre></td></tr></table></figure>\n<p>This will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.</p>\n<p>Alongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal tool format</span><br></pre></td></tr></table></figure>\n\n<p>We can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project’s codebase instead of just a single file.</p>\n<br/>\n\n<h2 id=\"My-Top-Crystal-Repo\"><a href=\"#My-Top-Crystal-Repo\" class=\"headerlink\" title=\"My Top Crystal Repo\"></a>My Top Crystal Repo</h2><h3 id=\"Kemal\"><a href=\"#Kemal\" class=\"headerlink\" title=\"Kemal\"></a>Kemal</h3><p>Obviously, there <strong><em>had</em></strong> to be a web framework appear in this list, seen as that’s what absolutely <strong>every</strong> dev seems to want to implement.  My choice here is my buddy <a href=\"https://twitter.com/sdogruyol\" target=\"_blank\" rel=\"noopener\">Serdar’s</a> library; <a href=\"https://kemalcr.com/\" target=\"_blank\" rel=\"noopener\">Kemal</a>. One feature I really like about it, is how simple it makes it to utilise JSON &amp; create a JSON API.  For example, accepting JSON in a POST request, parsing &amp; mapping it directly to an object:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"kemal\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">User</span></span></span><br><span class=\"line\">  JSON.mapping(</span><br><span class=\"line\">    <span class=\"symbol\">firstname:</span> String,</span><br><span class=\"line\">    <span class=\"symbol\">surname:</span> String,</span><br><span class=\"line\">  )</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">post <span class=\"string\">\"/\"</span> <span class=\"keyword\">do</span> |env|</span><br><span class=\"line\">  user = User.from_json env.request.body.not_nil!</span><br><span class=\"line\">  &#123;<span class=\"symbol\">firstname:</span> user.firstname, <span class=\"symbol\">surname:</span> user.surname&#125;.to_json</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Kemal.run</span><br></pre></td></tr></table></figure>\n\n<p><strong>If you want to find all of the best Crystal libraries, <a href=\"https://github.com/veelenga/awesome-crystal\" target=\"_blank\" rel=\"noopener\">you can check them out here.</a></strong></p>\n<br />\n\n<h2 id=\"My-Top-Nim-Repo\"><a href=\"#My-Top-Nim-Repo\" class=\"headerlink\" title=\"My Top Nim Repo\"></a>My Top Nim Repo</h2><h3 id=\"Nimbus\"><a href=\"#Nimbus\" class=\"headerlink\" title=\"Nimbus\"></a>Nimbus</h3><p>My favourite Nim library really has to be <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nimbus</a>.  This is not because I work for <a href=\"https://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!</p>\n<p>I think that Nimbus is literally the most impressive Nim library outside of the Nim core, the <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nim Beacon Chain</a> particularly so!</p>\n<blockquote>\n<p>Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)</p>\n</blockquote>\n<p>Whilst there are no developer code samples to include here, you can check out the <a href=\"https://nimbus.team/\" target=\"_blank\" rel=\"noopener\">main Nimbus website</a>, and the <a href=\"https://github.com/status-im/nimbus/\" target=\"_blank\" rel=\"noopener\">main Nimbus repo</a>.</p>\n<p>Take a look at <a href=\"https://nimble.directory/\" target=\"_blank\" rel=\"noopener\">https://nimble.directory/</a> for a full list of external Nim libraries available for your projects!</p>\n<h1 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h1><p>Back in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.</p>\n<p>It’s fantastic seeing both Nim <em>and</em> Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!</p>\n<p>I briefly touched on the smaller number of people on the Nim core team above, and this is something that’s pretty unfortunate.  Nim is a language and an ecosystem that has <strong>such</strong> great promise, I would love to see more people contributing to it and utilising it in production systems.</p>\n<p>The final article in this series, “Crypto, DApps &amp; P2P”, will be released over the coming days, so keep checking back.</p>\n<p>Thanks again for sticking with me!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  In <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">part 1</a>, I talked about my views on the interoperability of the two languages, alongside the performance figures of both.  Article #1 managed to throw-up a couple of surprises, but I have to admit; these made it all the more enjoyable to write!</p>\n<p>In this article, we’re going to look into the commodity that would have  changed the aforementioned performance figures, namely concurrency &amp; parallelism, and then into the things that attract me most to programming languages; which is he in-built tooling available.  As I know it’ll be useful; I won’t cover <strong><em>only</em></strong> the in-built tooling, but I’ll include my favourite external package too.</p>\n<h1 id=\"Threading\"><a href=\"#Threading\" class=\"headerlink\" title=\"Threading\"></a>Threading</h1><h3 id=\"Nim-Parallelism-Primitives\"><a href=\"#Nim-Parallelism-Primitives\" class=\"headerlink\" title=\"Nim Parallelism Primitives\"></a>Nim Parallelism Primitives</h3><p>Nim has two flavours of parallelism:</p>\n<ul>\n<li>Structured parallelism via the parallel statement.</li>\n<li>Unstructured parallelism via the standalone spawn statement.</li>\n</ul>\n<p>Nim has a builtin thread pool that can be used for CPU intensive tasks. For IO intensive tasks the async and await features should be used instead. Both parallel and spawn need the threadpool module to work.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> threadpool</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> processLine(line: <span class=\"built_in\">string</span>) =</span><br><span class=\"line\">  <span class=\"keyword\">discard</span> <span class=\"string\">\"do some heavy lifting here\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> x <span class=\"keyword\">in</span> lines(<span class=\"string\">\"myinput.txt\"</span>):</span><br><span class=\"line\">  spawn processLine(x)</span><br><span class=\"line\">sync()</span><br></pre></td></tr></table></figure>\n\n<p>The parallel statement is the preferred way to use parallelism in a Nim program.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Compute Pi in an inefficient way</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">import</span> strutils, math, threadpool</span><br><span class=\"line\"><span class=\"meta\">&#123;.experimental: \"parallel\".&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> term(k: <span class=\"built_in\">float</span>): <span class=\"built_in\">float</span> = <span class=\"number\">4</span> * math.pow(-<span class=\"number\">1</span>, k) / (<span class=\"number\">2</span>*k + <span class=\"number\">1</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> pi(n: <span class=\"built_in\">int</span>): <span class=\"built_in\">float</span> =</span><br><span class=\"line\">  <span class=\"keyword\">var</span> ch = newSeq[<span class=\"built_in\">float</span>](n+<span class=\"number\">1</span>)</span><br><span class=\"line\">  parallel:</span><br><span class=\"line\">    <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">      ch[k] = spawn term(<span class=\"built_in\">float</span>(k))</span><br><span class=\"line\">  <span class=\"keyword\">for</span> k <span class=\"keyword\">in</span> <span class=\"number\">0</span>..ch.high:</span><br><span class=\"line\">    <span class=\"literal\">result</span> += ch[k]</span><br><span class=\"line\"></span><br><span class=\"line\">echo formatFloat(pi(<span class=\"number\">5000</span>))</span><br></pre></td></tr></table></figure>\n\n<p>Threading support in Nim is part of the <code>system</code> module.  To activate thread support you need to compile with the <code>--threads:on</code> command line switch.</p>\n<p>Nim’s memory model for threads is quite different from older common programming languages (C, Pascal), but similar to Golang and Elixir in that; each thread has its own (garbage collected) heap and sharing of memory is restricted. This helps to prevent race conditions and improves efficiency.</p>\n<h3 id=\"Concurrency-vs-Parallelism\"><a href=\"#Concurrency-vs-Parallelism\" class=\"headerlink\" title=\"Concurrency vs Parallelism\"></a>Concurrency vs Parallelism</h3><p>The definitions of “concurrency” and “parallelism” sometimes get mixed up, but they are not the same.</p>\n<p>A concurrent system is one that can be in charge of many tasks, although not necessarily executing them at the same time.  A good way to think of this is driving a car – the car can accelerate, brake &amp; change gear, but they don’t happen at the exact same time, although they <em>do</em> overlap.  This is concurrency.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig01_alt.jpg\" alt=\"concurrency\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>The human driving the car holds the clutch in, moves the gear lever in parallel, and then eases of the clutch at the exact same time as easing on the accelerator.  This is processes running in parallel, hence parallelism.</p>\n<p><img src=\"https://dpzbhybb2pdcj.cloudfront.net/picheta/Figures/06fig02_alt.jpg\" alt=\"parallelism\"><br><em>Source: <a href=\"https://livebook.manning.com/book/nim-in-action/chapter-6/13\" target=\"_blank\" rel=\"noopener\">https://livebook.manning.com/book/nim-in-action/chapter-6/13</a></em></p>\n<p>At the moment, Crystal has concurrency support but not parallelism: several tasks can be executed, and a bit of time will be spent on each of these, but two code paths are never executed at the same exact time.  However, recently <a href=\"https://crystal-lang.org/2019/09/06/parallelism-in-crystal.html\" target=\"_blank\" rel=\"noopener\">Parallelism was tested out</a> and I’m sure will be fully ready to use soon!</p>\n<p>A Crystal program executes in a single operating system thread, except the Garbage Collector (GC) which implements a concurrent mark-and-sweep (currently Boehm GC).</p>\n<h3 id=\"Crystal-Concurrency-Primitives\"><a href=\"#Crystal-Concurrency-Primitives\" class=\"headerlink\" title=\"Crystal Concurrency Primitives\"></a>Crystal Concurrency Primitives</h3><p>In Crystal, we can use the <code>Spawn</code> functionality in a very similar way to Goroutines in Golang, core.async in Clojure, or the threading in Nim.  When a program starts, it fires up a main <code>Fiber</code> that will execute your top-level code, from which we can spawn many other <code>Fibers</code>.</p>\n<p><code>Fibers</code> are lightweight threads of execution that are managed by the garbage collector, so you don’t <em>really</em> need to worry about managing them once you’ve spawned them.  Because of this, you could technically spin up 100 <code>Fibers</code> to make a bunch of API requests, and then simply forget about them.</p>\n<p>We can utilise <code>Spawn</code> in Crystal like so:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"socket\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">load</span></span>(id, chan)</span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; START\"</span></span><br><span class=\"line\">  (id..<span class=\"number\">11</span>).each <span class=\"keyword\">do</span></span><br><span class=\"line\">    socket = TCPSocket.new(<span class=\"string\">\"http://robin.percy.pw\"</span>, <span class=\"number\">80</span>)</span><br><span class=\"line\">    socket.close</span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\">  puts <span class=\"string\">\"ID=<span class=\"subst\">#&#123;id&#125;</span>; FINISH\"</span></span><br><span class=\"line\">  chan.send <span class=\"literal\">nil</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">main</span></span></span><br><span class=\"line\">  chan = Channel(Nil).new</span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;|i| spawn(load(i,chan))&#125;</span><br><span class=\"line\">  <span class=\"comment\"># Wait</span></span><br><span class=\"line\">  (<span class=\"number\">1</span>..<span class=\"number\">10</span>).each&#123;chan.receive&#125;</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">main</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>To support concurrency, Crystal has to be able to switch fibers when a fiber performs non-blocking IO operations.</p>\n</blockquote>\n<p>In program above, a spawned task with lower-number id repeatedly creates a TCP socket, and does this more times than a task with a higher-number id. For example; task #1 establishes a TCP socket 11 times, and task #10 creates a TCP socket just once. So even though task #1 started long before task #10, task #10 <em>should</em> finish before task #1.  As you can see in the image below; it does just that!</p>\n<p><img src=\"/assets/images/crystal-thread-test.png\" alt=\"Crystal spawn test\"></p>\n<p>Similar to Golang, Crystal uses channels to pass messages between spawned fibers.  Take the traditional Ping Pong channels example, in Crystal it looks like the following:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">ping</span></span>(pings, message)</span><br><span class=\"line\">  pings.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">pong</span></span>(pings, pongs)</span><br><span class=\"line\">  message = pings.receive</span><br><span class=\"line\">  pongs.send message</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">pings = Channel(String).new</span><br><span class=\"line\">pongs = Channel(String).new</span><br><span class=\"line\">spawn ping pings, <span class=\"string\">\"passed message\"</span></span><br><span class=\"line\">spawn pong pings, pongs</span><br><span class=\"line\">puts pongs.receive <span class=\"comment\"># =&gt; \"passed message\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Unfortunately, I personally haven’t had the opportunity to test Crystal’s <code>Fibers</code> or Nim’s <code>Spawn</code> in a load-heavy production environment. But soon I fully intend to, and I’ll write another article benchmarking this in detail when I have a good usecase and get the chance to!</p>\n<h1 id=\"Tooling\"><a href=\"#Tooling\" class=\"headerlink\" title=\"Tooling\"></a>Tooling</h1><h2 id=\"Built-in-Tooling-in-Nim\"><a href=\"#Built-in-Tooling-in-Nim\" class=\"headerlink\" title=\"Built-in Tooling in Nim\"></a>Built-in Tooling in Nim</h2><p>Now that <a href=\"https://nim-lang.org/blog/2019/09/23/version-100-released.html\" target=\"_blank\" rel=\"noopener\">Nim 1.0 has been released</a>, its in-built tooling has improved to a great level, and is very quickly reaching maturity.</p>\n<p>The standard library in Nim is fantastic…  Things like native database support for multiple db’s, without using any external packages like Crystal does, makes me extremely hopeful for Nim.  I really do believe it is language worth considering, if it matches your production needs.  That being said, I am still an advocate of ‘use the right tool for the job’ – so don’t go implementing Nim just for the sake of it!</p>\n<p>The only thing to keep in mind; is that Nim <em>does</em> seem to be slower in growth than Crystal.  The thing is – Nim has quite a few <strong>less</strong> core contributors than Crystal, so slower growth is to be expected!</p>\n<h3 id=\"Nim-Project-Packaging\"><a href=\"#Nim-Project-Packaging\" class=\"headerlink\" title=\"Nim Project Packaging\"></a>Nim Project Packaging</h3><p>Something I look for in <strong><em>ALL</em></strong> modern programming languages, and something I consider to be a necessity is a good, and well featured in-built package manager.  Happily in Nim’s case; we have Nimble!</p>\n<p>We can create a new app (library/binary) by using <code>nimble init</code>:</p>\n<p><img src=\"/assets/images/nimble-creating-app.png\" alt=\"creating nimble app\"></p>\n<p>I have to admit, although a simple thing, this is one of my favourite parts of the entire Nim ecosystem!  Being able to enter your selection variables while actually creating your app package is something I think is not only tremendously useful, but awesomely novel.</p>\n<p>It’s not just the fact that you can enter selections, but actually the fact that you can select the backend for your app.  As you can see in the image above, you have the choice of C, C++, Objective-C and JavaScript -– something that I touched on in my <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">last article.</a></p>\n<h3 id=\"Documentation\"><a href=\"#Documentation\" class=\"headerlink\" title=\"Documentation\"></a>Documentation</h3><p>Nimble has in-built documentation generators that can output both HTML and JSON project documentation files.  The one thing I will say is that I actually found this functionality to be <em>slightly</em> confusing, as I kept getting very odd errors, but also lacking in the excellent use experience you get from the rest of Nimble, i.e. the <code>init</code> func.</p>\n<p>You can generate the documentation file for your app by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nimble doc myapp.nimble</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Testing\"><a href=\"#Testing\" class=\"headerlink\" title=\"Testing\"></a>Testing</h3><p>Nimble offers a pre-defined <code>test</code> task which compiles and runs all files in the <code>/tests</code> directory beginning with ‘t’ in their filename.</p>\n<p>You may wish to override this <code>test</code> task in your <code>.nimble</code> file. This is particularly useful when you have a single test suite program. Just add the following to your <code>.nimble</code> file to override the default <code>test</code> task.</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\">task test, <span class=\"string\">\"Runs the test suite\"</span>:</span><br><span class=\"line\">  exec <span class=\"string\">\"nim c -r tests/tester\"</span></span><br></pre></td></tr></table></figure>\n\n<p>Running nimble test will now use the test task you have defined.</p>\n<br/>\n\n<h2 id=\"Built-in-Tooling-in-Crystal\"><a href=\"#Built-in-Tooling-in-Crystal\" class=\"headerlink\" title=\"Built-in Tooling in Crystal\"></a>Built-in Tooling in Crystal</h2><p>One of the things I like most about Crystal is the excellent built-in tooling available. When I look at new languages, especially relatively immature languages; it’s always very reassuring when the language has extensive built-in tooling available to help developers stay productive &amp; happy! In Crystal, there are a bunch of tools that make hacking around in the language super fun, but also help us to stay on the right track with semantics etc.</p>\n<h3 id=\"Crystal-Project-Packaging\"><a href=\"#Crystal-Project-Packaging\" class=\"headerlink\" title=\"Crystal Project Packaging\"></a>Crystal Project Packaging</h3><p>Much the same as the Nimble package manager, <strong><em>although not as good in my opinion,</em></strong> Crystal has it’s own built-in project scaffolder &amp; package manager. I’d recommend using this at all times to ensure semantics are followed. We can use it with the following:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal init lib my_app</span><br><span class=\"line\">      create  my_app&#x2F;.gitignore</span><br><span class=\"line\">      create  my_app&#x2F;LICENSE</span><br><span class=\"line\">      create  my_app&#x2F;README.md</span><br><span class=\"line\">      create  my_app&#x2F;.travis.yml</span><br><span class=\"line\">      create  my_app&#x2F;shard.yml</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app</span><br><span class=\"line\">      create  my_app&#x2F;src&#x2F;my_app&#x2F;version.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;spec_helper.cr</span><br><span class=\"line\">      create  my_app&#x2F;spec&#x2F;my_app_spec.cr</span><br><span class=\"line\">Initialized empty Git repository in ~&#x2F;my_app&#x2F;.git&#x2F;</span><br></pre></td></tr></table></figure>\n\n<p><code>Shards</code> are Crystal’s packages; distributed in the same way as Ruby Gems, Elixir Libs or Golang packages. Each application we create contains a file in the root directory named shard.yml. This file contains project details and external dependencies. The shard.yml file in the <code>my_app</code> app above looks like this:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">my_app</span></span><br><span class=\"line\"><span class=\"attr\">version:</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">authors:</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"string\">Robin</span> <span class=\"string\">Percy</span> <span class=\"string\">&lt;robin@percy.pw&gt;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">targets:</span></span><br><span class=\"line\">  <span class=\"attr\">sayhi_c:</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">src/my_app.cr</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">crystal:</span> <span class=\"number\">0.31</span><span class=\"number\">.1</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">license:</span> <span class=\"string\">MIT</span></span><br></pre></td></tr></table></figure>\n\n<p>The app I built has no dependencies to use, but if we want to include external packages we can do so by adding them at the bottom of the file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">dependencies:</span></span><br><span class=\"line\">  <span class=\"attr\">github:</span></span><br><span class=\"line\">    <span class=\"attr\">github:</span> <span class=\"string\">felipeelias/crystal-github</span></span><br><span class=\"line\">    <span class=\"attr\">version:</span> <span class=\"string\">~&gt;</span> <span class=\"number\">0.1</span><span class=\"number\">.0</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Documentation-amp-Formatting\"><a href=\"#Documentation-amp-Formatting\" class=\"headerlink\" title=\"Documentation &amp; Formatting\"></a>Documentation &amp; Formatting</h3><p>Crystal has a great built-in tool for generating documentation and formatting files. The documentation that is generated is excellent - built-in html/css and almost instantly ready to deploy.</p>\n<p>To generate documentation, from the project root directory we can simply run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal doc</span><br></pre></td></tr></table></figure>\n<p>This will create a docs directory, with a doc/index.html entry point. All files inside the root src directory of the project from which we ran the command will be considered.</p>\n<p>Alongside this, the built-in Formatter tool is a great feature of the language. We can run the formatter over our project by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ crystal tool format</span><br></pre></td></tr></table></figure>\n\n<p>We can use this tool to unify code styles and to submit documentation improvements to Crystal itself. The formatter is also very fast, so very little time is lost if you format the entire project’s codebase instead of just a single file.</p>\n<br/>\n\n<h2 id=\"My-Top-Crystal-Repo\"><a href=\"#My-Top-Crystal-Repo\" class=\"headerlink\" title=\"My Top Crystal Repo\"></a>My Top Crystal Repo</h2><h3 id=\"Kemal\"><a href=\"#Kemal\" class=\"headerlink\" title=\"Kemal\"></a>Kemal</h3><p>Obviously, there <strong><em>had</em></strong> to be a web framework appear in this list, seen as that’s what absolutely <strong>every</strong> dev seems to want to implement.  My choice here is my buddy <a href=\"https://twitter.com/sdogruyol\" target=\"_blank\" rel=\"noopener\">Serdar’s</a> library; <a href=\"https://kemalcr.com/\" target=\"_blank\" rel=\"noopener\">Kemal</a>. One feature I really like about it, is how simple it makes it to utilise JSON &amp; create a JSON API.  For example, accepting JSON in a POST request, parsing &amp; mapping it directly to an object:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"kemal\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">User</span></span></span><br><span class=\"line\">  JSON.mapping(</span><br><span class=\"line\">    <span class=\"symbol\">firstname:</span> String,</span><br><span class=\"line\">    <span class=\"symbol\">surname:</span> String,</span><br><span class=\"line\">  )</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">post <span class=\"string\">\"/\"</span> <span class=\"keyword\">do</span> |env|</span><br><span class=\"line\">  user = User.from_json env.request.body.not_nil!</span><br><span class=\"line\">  &#123;<span class=\"symbol\">firstname:</span> user.firstname, <span class=\"symbol\">surname:</span> user.surname&#125;.to_json</span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">Kemal.run</span><br></pre></td></tr></table></figure>\n\n<p><strong>If you want to find all of the best Crystal libraries, <a href=\"https://github.com/veelenga/awesome-crystal\" target=\"_blank\" rel=\"noopener\">you can check them out here.</a></strong></p>\n<br />\n\n<h2 id=\"My-Top-Nim-Repo\"><a href=\"#My-Top-Nim-Repo\" class=\"headerlink\" title=\"My Top Nim Repo\"></a>My Top Nim Repo</h2><h3 id=\"Nimbus\"><a href=\"#Nimbus\" class=\"headerlink\" title=\"Nimbus\"></a>Nimbus</h3><p>My favourite Nim library really has to be <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nimbus</a>.  This is not because I work for <a href=\"https://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> (the Nimbus creators), but because of the technology.  Nimbus has has such a fantastic reception from the Nim community – and rightly so!</p>\n<p>I think that Nimbus is literally the most impressive Nim library outside of the Nim core, the <a href=\"https://github.com/status-im/nimbus\" target=\"_blank\" rel=\"noopener\">Nim Beacon Chain</a> particularly so!</p>\n<blockquote>\n<p>Nimbus beacon chain is a research implementation of the beacon chain component of the upcoming Ethereum Serenity upgrade (Ethereum 2)</p>\n</blockquote>\n<p>Whilst there are no developer code samples to include here, you can check out the <a href=\"https://nimbus.team/\" target=\"_blank\" rel=\"noopener\">main Nimbus website</a>, and the <a href=\"https://github.com/status-im/nimbus/\" target=\"_blank\" rel=\"noopener\">main Nimbus repo</a>.</p>\n<p>Take a look at <a href=\"https://nimble.directory/\" target=\"_blank\" rel=\"noopener\">https://nimble.directory/</a> for a full list of external Nim libraries available for your projects!</p>\n<h1 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h1><p>Back in 2012 when I quit writing Python and started exploring a bunch of other available languages, I started to become more aware of threading and its benefits.  Once I got into the likes of Golang and Elixir, I learned about their threading models, and lightweight threads of execution being the way forward.</p>\n<p>It’s fantastic seeing both Nim <em>and</em> Crystal adopting the aforementioned concurrency primitives.  I guess I have to give both languages a point there!</p>\n<p>I briefly touched on the smaller number of people on the Nim core team above, and this is something that’s pretty unfortunate.  Nim is a language and an ecosystem that has <strong>such</strong> great promise, I would love to see more people contributing to it and utilising it in production systems.</p>\n<p>The final article in this series, “Crypto, DApps &amp; P2P”, will be released over the coming days, so keep checking back.</p>\n<p>Thanks again for sticking with me!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n"},{"title":"Introduction to Web3 - What Are Your Options?","summary":"Web3.js is a collection of APIs giving us the ability to interact with, and send commands to, the Ethereum Network from a JavaScript frontend.  In this article, I will go over the basics of what and why we need Web3.js.","author":"robin_percy","layout":"blog-post","image":"/assets/images/web3-article-header.png","_content":"\n![Web3.js](/assets/images/web3-article-header.png)\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nTo kick this article off, I first have to reaffirm, for those that aren't aware, I am not, and never have been, a ***lover*** of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.\n\nFor years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being ***forced*** to use it in my daily work life.  Now however, I do have to say; over the last few years I have *softened* to JS, and I am much more comfortable in my own skin when having to use it.\n\nIt goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app's dependencies - JS.\n\nJavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.\n\nAs I mentioned briefly in my [***last*** article](/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/), my ***next*** article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where [Web3.js](https://web3js.readthedocs.io/en/v1.2.4/index.html) comes into the mix.  `Web3.js` is a collection of APIs allowing us such functionality as:  Reading & Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets & data, and *a whole bunch* of other stuff too.  Basically, *most* of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.\n\n\nThis is how the `web3.js` library talks to the Ethereum Network:\n\n![Web3 JS Diagram](/assets/images/web3-js-diagram.png)\n*Image credit: [iotbl](https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html)*\n\nSo, now that the basics are covered, let's go over installing and using the `web3.js` library.\n\n\n# Installing Web3\n\nInstalling `web3.js` is as simple as:\n\n```\nnpm install web3\n```\n\n*One thing worth noting here*; is that (coming from an anti-js background), I kept getting a `cannot find web3 module` error when trying to import web3 into a Node console.  If you, like me, aren't a big js fan, this can be solved by first running the `npm init` command to ensure there is a `package.json` file in the cwd, and *then* you can run `npm install web3`, and it will work fine.  (I realise this is basic stuff – but actually for someone who's *tried* to avoid Node at all costs, it was initially confusing enough to have to search online.)\n\nI am working from a Mac here, but if you are working from Windows, the install process *can* be exactly the same, assuming you do have [Node & NPM installed](https://phoenixnap.com/kb/install-node-js-npm-on-windows).\n\nSo, with `web3.js` installed, let's do some basic interactions with the Ethereum Network, and ***dive on in!***\n\n\n\n# Communicating with the Ethereum Network\n\n## Wallet Interaction\n\nFor this article, we're going to use [Ganache](https://www.trufflesuite.com/ganache), for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!\n\n***(Yes, I realise that rhymes.  No, I didn't realise until my second proof-read through of this article!)***\n\nIn fact, though, Embark already has Ganache inbuilt, so we could also simply run:\n\n```js\nembark simulator\n```\n\nAnyway, to install Ganache head over to [this page](https://www.trufflesuite.com/ganache) and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:\n\n```\nnpm install -g ganache-cli\n```\n\nRunning the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.\n\n![Ganache CLI](/assets/images/ganache-cli.png)\n\nRather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a `node` instance from the same working directory we ran the `npm init` command from earlier.\n\nNow, in our interactive Node console, run:\n\n``` js\nvar Web3 = require('web3');\nvar web3 = new Web3('http://localhost:8545');\n```\n\nSomething to note here, is that I'm calling `new Web3` with an `http` protocol, but the WebSocket protocol is also commonly used:\n\n``` js\nvar web3 = new Web3(Web3.givenProvider || new Web3.providers.WebsocketProvider('ws://remotenode.com:8546'));\n```\n\nTo test and ensure the connection, you can get a list of the accounts made available in Ganache by running:\n\n``` js\nweb3.eth.getAccounts().then(console.log);\n```\n\nWhich *should* give you an output like the following:\n\n```js\n> [ '0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b',\n  '0x852e9a9db77a4e6169e175cDBb33dBE350150A8e',\n  '0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401',\n  '0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616',\n  '0x88A116a16e4c8838F575a0e7a72eE27C7B073263',\n  '0x655317701Fcf3b310F492cB801C8D23f8c6fb556',\n  '0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E',\n  '0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32',\n  '0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1',\n  '0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5' ]\n```\n\nIf you want to check the balance of an individual account from the above list, you can do so by running:\n\n```js\nconst account1 = \"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\";\n\nweb3.eth.getBalance(account1)\n.then(console.log);\n```\n\nWhich will output:\n\n```\n> 100000000000000000000\n```\n\n\n## Contract Interaction\n\nAs above; interacting with our *individual accounts* through `web3.js` is cool, but not nearly the extent to which the library works.  Let's now take a brief look at the more important functionality; of interacting with Smart Contracts through `web3.js`.\n\nThe first thing we need to do, is to create a new Smart Contract, which we can do with the `new web3.eth.Contract` command.\n\nBefore we call the `new` command, we need to assign our `json interface` for the contract's `ABI`:\n\n```js\nconst abi = [{\"type\":\"function\", \"name\":\"foo\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\"}], \"outputs\": [{\"name\":\"b\",\"type\":\"address\"}] },{ \"type\":\"event\", \"name\":\"Event\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\",\"indexed\":true},{\"name\":\"b\",\"type\":\"bytes32\",\"indexed\":false}], }]\n```\n\nThe `json interface` is a JSON object describing the *Application Binary Interface (ABI)* for our Smart Contract.  Using this JSON interface; `web3.js` is able to create a JavaScript object representing our Smart Contract and its methods & events, using the `web3.eth.Contract` functionality.\n\n*Note, the above JSON interface / ABI is taken directly from the [Web3 docs](https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5).*\n\nNow that we have our `json interface` defined, we can create our new contract instance:\n\n```js\nvar myContract = new web3.eth.Contract(abi, '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe');\n```\n\n*(The `from` address is the address of the already deployed contract instance that we're aiming to talk to.)*\n\nYou could then set the Smart Contract's `data` and other `options`, and then **deploy** your Contract with something *like* the following:\n\n```js\nmyContract.options.data = '0x12345...';\n\nmyContract.deploy({\n    arguments: [123, 'My String']\n})\n.send({\n    from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',\n    gas: 1500000,\n    gasPrice: '30000000000000'\n})\n.then(function(newContractInstance){\n    console.log(newContractInstance.options.address) // instance with the new contract address\n});\n```\n\nThe above examples aren't supposed to be perfect continuous code, and should definitely *not* be copy/pasted into a production project, but they are there to show off roughly how `Web.js` works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.\n\nIn my next tutorial series, we will be utilising [Embark](https://embark.status.im/docs/quick_start.html), and therefore we'll be diving deeper into `web3.js`, and showing off much more of its potential.\n\n\n# Web.js in Other Languages\n\nNaturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also **many** other libraries, in pretty much every language, available to do the same:\n\n***Nim - [nim-web3](https://github.com/status-im/nim-web3)***\nCrystal - [web3.cr](https://github.com/light-side-software/web3.cr)\nRuby - [web3-eth gem](https://github.com/izetex/web3-eth)\nElixir - [ethereumex](https://github.com/mana-ethereum/ethereumex)\nPython - [Web3.py](https://github.com/ethereum/web3.py)\nHaskell - [hs-web3](https://github.com/airalab/hs-web3)\nJava - [web3j](https://github.com/web3j/web3j)\nScala - [web3j-scala](https://github.com/mslinn/web3j-scala)\nPurescript - [purescript-web3](https://github.com/f-o-a-m/purescript-web3)\nPHP - [web3.php](https://github.com/sc0Vu/web3.php)\n\n\n# Beyond Web3\n\nAs stated at the opening of this article, we've barely even scratched the surface of `web.js` capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.\n\nPersonally, I am **very much** looking forward to ***diving on in*** to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.\n\nAs always, if you have *any* questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at [robin@status](mailto:robin@status.im).\n\nThanks again for reading, and check back for my DApp tutorial series, starting later this week!\n\n[ **- @rbin**](https://twitter.com/rbin)\n","source":"_posts/2019-12-09-web3-what-are-your-options.md","raw":"title: Introduction to Web3 - What Are Your Options?\nsummary: \"Web3.js is a collection of APIs giving us the ability to interact with, and send commands to, the Ethereum Network from a JavaScript frontend.  In this article, I will go over the basics of what and why we need Web3.js.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/web3-article-header.png'\n---\n\n![Web3.js](/assets/images/web3-article-header.png)\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nTo kick this article off, I first have to reaffirm, for those that aren't aware, I am not, and never have been, a ***lover*** of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.\n\nFor years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being ***forced*** to use it in my daily work life.  Now however, I do have to say; over the last few years I have *softened* to JS, and I am much more comfortable in my own skin when having to use it.\n\nIt goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app's dependencies - JS.\n\nJavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.\n\nAs I mentioned briefly in my [***last*** article](/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/), my ***next*** article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where [Web3.js](https://web3js.readthedocs.io/en/v1.2.4/index.html) comes into the mix.  `Web3.js` is a collection of APIs allowing us such functionality as:  Reading & Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets & data, and *a whole bunch* of other stuff too.  Basically, *most* of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.\n\n\nThis is how the `web3.js` library talks to the Ethereum Network:\n\n![Web3 JS Diagram](/assets/images/web3-js-diagram.png)\n*Image credit: [iotbl](https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html)*\n\nSo, now that the basics are covered, let's go over installing and using the `web3.js` library.\n\n\n# Installing Web3\n\nInstalling `web3.js` is as simple as:\n\n```\nnpm install web3\n```\n\n*One thing worth noting here*; is that (coming from an anti-js background), I kept getting a `cannot find web3 module` error when trying to import web3 into a Node console.  If you, like me, aren't a big js fan, this can be solved by first running the `npm init` command to ensure there is a `package.json` file in the cwd, and *then* you can run `npm install web3`, and it will work fine.  (I realise this is basic stuff – but actually for someone who's *tried* to avoid Node at all costs, it was initially confusing enough to have to search online.)\n\nI am working from a Mac here, but if you are working from Windows, the install process *can* be exactly the same, assuming you do have [Node & NPM installed](https://phoenixnap.com/kb/install-node-js-npm-on-windows).\n\nSo, with `web3.js` installed, let's do some basic interactions with the Ethereum Network, and ***dive on in!***\n\n\n\n# Communicating with the Ethereum Network\n\n## Wallet Interaction\n\nFor this article, we're going to use [Ganache](https://www.trufflesuite.com/ganache), for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!\n\n***(Yes, I realise that rhymes.  No, I didn't realise until my second proof-read through of this article!)***\n\nIn fact, though, Embark already has Ganache inbuilt, so we could also simply run:\n\n```js\nembark simulator\n```\n\nAnyway, to install Ganache head over to [this page](https://www.trufflesuite.com/ganache) and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:\n\n```\nnpm install -g ganache-cli\n```\n\nRunning the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.\n\n![Ganache CLI](/assets/images/ganache-cli.png)\n\nRather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a `node` instance from the same working directory we ran the `npm init` command from earlier.\n\nNow, in our interactive Node console, run:\n\n``` js\nvar Web3 = require('web3');\nvar web3 = new Web3('http://localhost:8545');\n```\n\nSomething to note here, is that I'm calling `new Web3` with an `http` protocol, but the WebSocket protocol is also commonly used:\n\n``` js\nvar web3 = new Web3(Web3.givenProvider || new Web3.providers.WebsocketProvider('ws://remotenode.com:8546'));\n```\n\nTo test and ensure the connection, you can get a list of the accounts made available in Ganache by running:\n\n``` js\nweb3.eth.getAccounts().then(console.log);\n```\n\nWhich *should* give you an output like the following:\n\n```js\n> [ '0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b',\n  '0x852e9a9db77a4e6169e175cDBb33dBE350150A8e',\n  '0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401',\n  '0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616',\n  '0x88A116a16e4c8838F575a0e7a72eE27C7B073263',\n  '0x655317701Fcf3b310F492cB801C8D23f8c6fb556',\n  '0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E',\n  '0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32',\n  '0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1',\n  '0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5' ]\n```\n\nIf you want to check the balance of an individual account from the above list, you can do so by running:\n\n```js\nconst account1 = \"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\";\n\nweb3.eth.getBalance(account1)\n.then(console.log);\n```\n\nWhich will output:\n\n```\n> 100000000000000000000\n```\n\n\n## Contract Interaction\n\nAs above; interacting with our *individual accounts* through `web3.js` is cool, but not nearly the extent to which the library works.  Let's now take a brief look at the more important functionality; of interacting with Smart Contracts through `web3.js`.\n\nThe first thing we need to do, is to create a new Smart Contract, which we can do with the `new web3.eth.Contract` command.\n\nBefore we call the `new` command, we need to assign our `json interface` for the contract's `ABI`:\n\n```js\nconst abi = [{\"type\":\"function\", \"name\":\"foo\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\"}], \"outputs\": [{\"name\":\"b\",\"type\":\"address\"}] },{ \"type\":\"event\", \"name\":\"Event\", \"inputs\": [{\"name\":\"a\",\"type\":\"uint256\",\"indexed\":true},{\"name\":\"b\",\"type\":\"bytes32\",\"indexed\":false}], }]\n```\n\nThe `json interface` is a JSON object describing the *Application Binary Interface (ABI)* for our Smart Contract.  Using this JSON interface; `web3.js` is able to create a JavaScript object representing our Smart Contract and its methods & events, using the `web3.eth.Contract` functionality.\n\n*Note, the above JSON interface / ABI is taken directly from the [Web3 docs](https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5).*\n\nNow that we have our `json interface` defined, we can create our new contract instance:\n\n```js\nvar myContract = new web3.eth.Contract(abi, '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe');\n```\n\n*(The `from` address is the address of the already deployed contract instance that we're aiming to talk to.)*\n\nYou could then set the Smart Contract's `data` and other `options`, and then **deploy** your Contract with something *like* the following:\n\n```js\nmyContract.options.data = '0x12345...';\n\nmyContract.deploy({\n    arguments: [123, 'My String']\n})\n.send({\n    from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',\n    gas: 1500000,\n    gasPrice: '30000000000000'\n})\n.then(function(newContractInstance){\n    console.log(newContractInstance.options.address) // instance with the new contract address\n});\n```\n\nThe above examples aren't supposed to be perfect continuous code, and should definitely *not* be copy/pasted into a production project, but they are there to show off roughly how `Web.js` works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.\n\nIn my next tutorial series, we will be utilising [Embark](https://embark.status.im/docs/quick_start.html), and therefore we'll be diving deeper into `web3.js`, and showing off much more of its potential.\n\n\n# Web.js in Other Languages\n\nNaturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also **many** other libraries, in pretty much every language, available to do the same:\n\n***Nim - [nim-web3](https://github.com/status-im/nim-web3)***\nCrystal - [web3.cr](https://github.com/light-side-software/web3.cr)\nRuby - [web3-eth gem](https://github.com/izetex/web3-eth)\nElixir - [ethereumex](https://github.com/mana-ethereum/ethereumex)\nPython - [Web3.py](https://github.com/ethereum/web3.py)\nHaskell - [hs-web3](https://github.com/airalab/hs-web3)\nJava - [web3j](https://github.com/web3j/web3j)\nScala - [web3j-scala](https://github.com/mslinn/web3j-scala)\nPurescript - [purescript-web3](https://github.com/f-o-a-m/purescript-web3)\nPHP - [web3.php](https://github.com/sc0Vu/web3.php)\n\n\n# Beyond Web3\n\nAs stated at the opening of this article, we've barely even scratched the surface of `web.js` capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.\n\nPersonally, I am **very much** looking forward to ***diving on in*** to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.\n\nAs always, if you have *any* questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at [robin@status](mailto:robin@status.im).\n\nThanks again for reading, and check back for my DApp tutorial series, starting later this week!\n\n[ **- @rbin**](https://twitter.com/rbin)\n","slug":"web3-what-are-your-options","published":1,"date":"2019-12-09T05:00:00.000Z","updated":"2020-01-30T14:52:47.138Z","_id":"ck5ijm3u8002k7hegdpuf24tc","comments":1,"photos":[],"link":"","content":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>To kick this article off, I first have to reaffirm, for those that aren’t aware, I am not, and never have been, a <strong><em>lover</em></strong> of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.</p>\n<p>For years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being <strong><em>forced</em></strong> to use it in my daily work life.  Now however, I do have to say; over the last few years I have <em>softened</em> to JS, and I am much more comfortable in my own skin when having to use it.</p>\n<p>It goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app’s dependencies - JS.</p>\n<p>JavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.</p>\n<p>As I mentioned briefly in my <a href=\"/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/\"><strong><em>last</em></strong> article</a>, my <strong><em>next</em></strong> article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where <a href=\"https://web3js.readthedocs.io/en/v1.2.4/index.html\" target=\"_blank\" rel=\"noopener\">Web3.js</a> comes into the mix.  <code>Web3.js</code> is a collection of APIs allowing us such functionality as:  Reading &amp; Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets &amp; data, and <em>a whole bunch</em> of other stuff too.  Basically, <em>most</em> of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.</p>\n<p>This is how the <code>web3.js</code> library talks to the Ethereum Network:</p>\n<p><img src=\"/assets/images/web3-js-diagram.png\" alt=\"Web3 JS Diagram\"><br><em>Image credit: <a href=\"https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html\" target=\"_blank\" rel=\"noopener\">iotbl</a></em></p>\n<p>So, now that the basics are covered, let’s go over installing and using the <code>web3.js</code> library.</p>\n<h1 id=\"Installing-Web3\"><a href=\"#Installing-Web3\" class=\"headerlink\" title=\"Installing Web3\"></a>Installing Web3</h1><p>Installing <code>web3.js</code> is as simple as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install web3</span><br></pre></td></tr></table></figure>\n\n<p><em>One thing worth noting here</em>; is that (coming from an anti-js background), I kept getting a <code>cannot find web3 module</code> error when trying to import web3 into a Node console.  If you, like me, aren’t a big js fan, this can be solved by first running the <code>npm init</code> command to ensure there is a <code>package.json</code> file in the cwd, and <em>then</em> you can run <code>npm install web3</code>, and it will work fine.  (I realise this is basic stuff – but actually for someone who’s <em>tried</em> to avoid Node at all costs, it was initially confusing enough to have to search online.)</p>\n<p>I am working from a Mac here, but if you are working from Windows, the install process <em>can</em> be exactly the same, assuming you do have <a href=\"https://phoenixnap.com/kb/install-node-js-npm-on-windows\" target=\"_blank\" rel=\"noopener\">Node &amp; NPM installed</a>.</p>\n<p>So, with <code>web3.js</code> installed, let’s do some basic interactions with the Ethereum Network, and <strong><em>dive on in!</em></strong></p>\n<h1 id=\"Communicating-with-the-Ethereum-Network\"><a href=\"#Communicating-with-the-Ethereum-Network\" class=\"headerlink\" title=\"Communicating with the Ethereum Network\"></a>Communicating with the Ethereum Network</h1><h2 id=\"Wallet-Interaction\"><a href=\"#Wallet-Interaction\" class=\"headerlink\" title=\"Wallet Interaction\"></a>Wallet Interaction</h2><p>For this article, we’re going to use <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>, for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!</p>\n<p><strong><em>(Yes, I realise that rhymes.  No, I didn’t realise until my second proof-read through of this article!)</em></strong></p>\n<p>In fact, though, Embark already has Ganache inbuilt, so we could also simply run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark simulator</span><br></pre></td></tr></table></figure>\n\n<p>Anyway, to install Ganache head over to <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">this page</a> and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g ganache-cli</span><br></pre></td></tr></table></figure>\n\n<p>Running the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.</p>\n<p><img src=\"/assets/images/ganache-cli.png\" alt=\"Ganache CLI\"></p>\n<p>Rather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a <code>node</code> instance from the same working directory we ran the <code>npm init</code> command from earlier.</p>\n<p>Now, in our interactive Node console, run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> Web3 = <span class=\"built_in\">require</span>(<span class=\"string\">'web3'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(<span class=\"string\">'http://localhost:8545'</span>);</span><br></pre></td></tr></table></figure>\n\n<p>Something to note here, is that I’m calling <code>new Web3</code> with an <code>http</code> protocol, but the WebSocket protocol is also commonly used:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(Web3.givenProvider || <span class=\"keyword\">new</span> Web3.providers.WebsocketProvider(<span class=\"string\">'ws://remotenode.com:8546'</span>));</span><br></pre></td></tr></table></figure>\n\n<p>To test and ensure the connection, you can get a list of the accounts made available in Ganache by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">web3.eth.getAccounts().then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which <em>should</em> give you an output like the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; [ <span class=\"string\">'0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x852e9a9db77a4e6169e175cDBb33dBE350150A8e'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x88A116a16e4c8838F575a0e7a72eE27C7B073263'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x655317701Fcf3b310F492cB801C8D23f8c6fb556'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5'</span> ]</span><br></pre></td></tr></table></figure>\n\n<p>If you want to check the balance of an individual account from the above list, you can do so by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> account1 = <span class=\"string\">\"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\"</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">web3.eth.getBalance(account1)</span><br><span class=\"line\">.then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which will output:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; 100000000000000000000</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Contract-Interaction\"><a href=\"#Contract-Interaction\" class=\"headerlink\" title=\"Contract Interaction\"></a>Contract Interaction</h2><p>As above; interacting with our <em>individual accounts</em> through <code>web3.js</code> is cool, but not nearly the extent to which the library works.  Let’s now take a brief look at the more important functionality; of interacting with Smart Contracts through <code>web3.js</code>.</p>\n<p>The first thing we need to do, is to create a new Smart Contract, which we can do with the <code>new web3.eth.Contract</code> command.</p>\n<p>Before we call the <code>new</code> command, we need to assign our <code>json interface</code> for the contract’s <code>ABI</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> abi = [&#123;<span class=\"string\">\"type\"</span>:<span class=\"string\">\"function\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"foo\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>&#125;], <span class=\"string\">\"outputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"address\"</span>&#125;] &#125;,&#123; <span class=\"string\">\"type\"</span>:<span class=\"string\">\"event\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"Event\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">true</span>&#125;,&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"bytes32\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">false</span>&#125;], &#125;]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>json interface</code> is a JSON object describing the <em>Application Binary Interface (ABI)</em> for our Smart Contract.  Using this JSON interface; <code>web3.js</code> is able to create a JavaScript object representing our Smart Contract and its methods &amp; events, using the <code>web3.eth.Contract</code> functionality.</p>\n<p><em>Note, the above JSON interface / ABI is taken directly from the <a href=\"https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5\" target=\"_blank\" rel=\"noopener\">Web3 docs</a>.</em></p>\n<p>Now that we have our <code>json interface</code> defined, we can create our new contract instance:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> myContract = <span class=\"keyword\">new</span> web3.eth.Contract(abi, <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>);</span><br></pre></td></tr></table></figure>\n\n<p><em>(The <code>from</code> address is the address of the already deployed contract instance that we’re aiming to talk to.)</em></p>\n<p>You could then set the Smart Contract’s <code>data</code> and other <code>options</code>, and then <strong>deploy</strong> your Contract with something <em>like</em> the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">myContract.options.data = <span class=\"string\">'0x12345...'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">myContract.deploy(&#123;</span><br><span class=\"line\">    <span class=\"built_in\">arguments</span>: [<span class=\"number\">123</span>, <span class=\"string\">'My String'</span>]</span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.send(&#123;</span><br><span class=\"line\">    <span class=\"keyword\">from</span>: <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>,</span><br><span class=\"line\">    gas: <span class=\"number\">1500000</span>,</span><br><span class=\"line\">    gasPrice: <span class=\"string\">'30000000000000'</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.then(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">newContractInstance</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(newContractInstance.options.address) <span class=\"comment\">// instance with the new contract address</span></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The above examples aren’t supposed to be perfect continuous code, and should definitely <em>not</em> be copy/pasted into a production project, but they are there to show off roughly how <code>Web.js</code> works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.</p>\n<p>In my next tutorial series, we will be utilising <a href=\"https://embark.status.im/docs/quick_start.html\" target=\"_blank\" rel=\"noopener\">Embark</a>, and therefore we’ll be diving deeper into <code>web3.js</code>, and showing off much more of its potential.</p>\n<h1 id=\"Web-js-in-Other-Languages\"><a href=\"#Web-js-in-Other-Languages\" class=\"headerlink\" title=\"Web.js in Other Languages\"></a>Web.js in Other Languages</h1><p>Naturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also <strong>many</strong> other libraries, in pretty much every language, available to do the same:</p>\n<p><strong><em>Nim - <a href=\"https://github.com/status-im/nim-web3\" target=\"_blank\" rel=\"noopener\">nim-web3</a></em></strong><br>Crystal - <a href=\"https://github.com/light-side-software/web3.cr\" target=\"_blank\" rel=\"noopener\">web3.cr</a><br>Ruby - <a href=\"https://github.com/izetex/web3-eth\" target=\"_blank\" rel=\"noopener\">web3-eth gem</a><br>Elixir - <a href=\"https://github.com/mana-ethereum/ethereumex\" target=\"_blank\" rel=\"noopener\">ethereumex</a><br>Python - <a href=\"https://github.com/ethereum/web3.py\" target=\"_blank\" rel=\"noopener\">Web3.py</a><br>Haskell - <a href=\"https://github.com/airalab/hs-web3\" target=\"_blank\" rel=\"noopener\">hs-web3</a><br>Java - <a href=\"https://github.com/web3j/web3j\" target=\"_blank\" rel=\"noopener\">web3j</a><br>Scala - <a href=\"https://github.com/mslinn/web3j-scala\" target=\"_blank\" rel=\"noopener\">web3j-scala</a><br>Purescript - <a href=\"https://github.com/f-o-a-m/purescript-web3\" target=\"_blank\" rel=\"noopener\">purescript-web3</a><br>PHP - <a href=\"https://github.com/sc0Vu/web3.php\" target=\"_blank\" rel=\"noopener\">web3.php</a></p>\n<h1 id=\"Beyond-Web3\"><a href=\"#Beyond-Web3\" class=\"headerlink\" title=\"Beyond Web3\"></a>Beyond Web3</h1><p>As stated at the opening of this article, we’ve barely even scratched the surface of <code>web.js</code> capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.</p>\n<p>Personally, I am <strong>very much</strong> looking forward to <strong><em>diving on in</em></strong> to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.</p>\n<p>As always, if you have <em>any</em> questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at <a href=\"mailto:robin@status.im\">robin@status</a>.</p>\n<p>Thanks again for reading, and check back for my DApp tutorial series, starting later this week!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>To kick this article off, I first have to reaffirm, for those that aren’t aware, I am not, and never have been, a <strong><em>lover</em></strong> of JavaScript.  While my cool friends were off learning Node.js, and for some reason moving a scripting language to the backend, I was learning C and Go, Erlang and Distributed Systems.</p>\n<p>For years, I harboured a deep hatred of JS, and actively whinged about it at every opportunity I got; being <strong><em>forced</em></strong> to use it in my daily work life.  Now however, I do have to say; over the last few years I have <em>softened</em> to JS, and I am much more comfortable in my own skin when having to use it.</p>\n<p>It goes without saying, the entire web is JS.  Look around you - JS.  View the source of this article - JS files.  Look at your own app’s dependencies - JS.</p>\n<p>JavaScript, specifically Node, really is in everything we use, and that now also applies to our wonderful world of Cryptocurrencies.</p>\n<p>As I mentioned briefly in my <a href=\"/news/2019/11/28/nim-vs-crystal-part-3-cryto-dapps-p2p/\"><strong><em>last</em></strong> article</a>, my <strong><em>next</em></strong> article series is going to be about building your first DApp – from start to finish.  Inevitably, the frontend of our DApp needs to be able to communicate with the Ethereum Network.  This is where <a href=\"https://web3js.readthedocs.io/en/v1.2.4/index.html\" target=\"_blank\" rel=\"noopener\">Web3.js</a> comes into the mix.  <code>Web3.js</code> is a collection of APIs allowing us such functionality as:  Reading &amp; Writing data from Smart Contracts, sending and receiving Ether, encrypting / decrypting wallets &amp; data, and <em>a whole bunch</em> of other stuff too.  Basically, <em>most</em> of the backend functionality available on the Ethereum Network natively becomes available for use in the browser.</p>\n<p>This is how the <code>web3.js</code> library talks to the Ethereum Network:</p>\n<p><img src=\"/assets/images/web3-js-diagram.png\" alt=\"Web3 JS Diagram\"><br><em>Image credit: <a href=\"https://iotbl.blogspot.com/2017/03/ethereum-and-blockchain-2.html\" target=\"_blank\" rel=\"noopener\">iotbl</a></em></p>\n<p>So, now that the basics are covered, let’s go over installing and using the <code>web3.js</code> library.</p>\n<h1 id=\"Installing-Web3\"><a href=\"#Installing-Web3\" class=\"headerlink\" title=\"Installing Web3\"></a>Installing Web3</h1><p>Installing <code>web3.js</code> is as simple as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install web3</span><br></pre></td></tr></table></figure>\n\n<p><em>One thing worth noting here</em>; is that (coming from an anti-js background), I kept getting a <code>cannot find web3 module</code> error when trying to import web3 into a Node console.  If you, like me, aren’t a big js fan, this can be solved by first running the <code>npm init</code> command to ensure there is a <code>package.json</code> file in the cwd, and <em>then</em> you can run <code>npm install web3</code>, and it will work fine.  (I realise this is basic stuff – but actually for someone who’s <em>tried</em> to avoid Node at all costs, it was initially confusing enough to have to search online.)</p>\n<p>I am working from a Mac here, but if you are working from Windows, the install process <em>can</em> be exactly the same, assuming you do have <a href=\"https://phoenixnap.com/kb/install-node-js-npm-on-windows\" target=\"_blank\" rel=\"noopener\">Node &amp; NPM installed</a>.</p>\n<p>So, with <code>web3.js</code> installed, let’s do some basic interactions with the Ethereum Network, and <strong><em>dive on in!</em></strong></p>\n<h1 id=\"Communicating-with-the-Ethereum-Network\"><a href=\"#Communicating-with-the-Ethereum-Network\" class=\"headerlink\" title=\"Communicating with the Ethereum Network\"></a>Communicating with the Ethereum Network</h1><h2 id=\"Wallet-Interaction\"><a href=\"#Wallet-Interaction\" class=\"headerlink\" title=\"Wallet Interaction\"></a>Wallet Interaction</h2><p>For this article, we’re going to use <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">Ganache</a>, for simplicity, as our local Blockchain.  By using Ganache, we can spin up a local Ethereum node, without having to write a single line of code!</p>\n<p><strong><em>(Yes, I realise that rhymes.  No, I didn’t realise until my second proof-read through of this article!)</em></strong></p>\n<p>In fact, though, Embark already has Ganache inbuilt, so we could also simply run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">embark simulator</span><br></pre></td></tr></table></figure>\n\n<p>Anyway, to install Ganache head over to <a href=\"https://www.trufflesuite.com/ganache\" target=\"_blank\" rel=\"noopener\">this page</a> and click on the executable there.  If you so choose; there is also a Ganache CLI available you can install by running:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install -g ganache-cli</span><br></pre></td></tr></table></figure>\n\n<p>Running the Ganache CLI will give you the same functionality as the desktop client; in essence giving us a multitude of ETH-loaded wallets that we can build contracts around / interact with.</p>\n<p><img src=\"/assets/images/ganache-cli.png\" alt=\"Ganache CLI\"></p>\n<p>Rather brilliantly; we now have a local Ethereum Node running that we can start using the Web3 client to interact with.  In another Terminal tab, open up a <code>node</code> instance from the same working directory we ran the <code>npm init</code> command from earlier.</p>\n<p>Now, in our interactive Node console, run:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> Web3 = <span class=\"built_in\">require</span>(<span class=\"string\">'web3'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(<span class=\"string\">'http://localhost:8545'</span>);</span><br></pre></td></tr></table></figure>\n\n<p>Something to note here, is that I’m calling <code>new Web3</code> with an <code>http</code> protocol, but the WebSocket protocol is also commonly used:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> web3 = <span class=\"keyword\">new</span> Web3(Web3.givenProvider || <span class=\"keyword\">new</span> Web3.providers.WebsocketProvider(<span class=\"string\">'ws://remotenode.com:8546'</span>));</span><br></pre></td></tr></table></figure>\n\n<p>To test and ensure the connection, you can get a list of the accounts made available in Ganache by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">web3.eth.getAccounts().then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which <em>should</em> give you an output like the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; [ <span class=\"string\">'0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x852e9a9db77a4e6169e175cDBb33dBE350150A8e'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x946700a1a4f30Dfe80307C91B6DaF1cCa2d09401'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x7d356aF02A87147D3ce5F9ACA716a78f70aF7616'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x88A116a16e4c8838F575a0e7a72eE27C7B073263'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x655317701Fcf3b310F492cB801C8D23f8c6fb556'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x16D305e72aFb0DDa1dB1830F8a98D5cD5337882E'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x9099bb4Af9CE5734E7a7e62f817e833fcFFaaF32'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x2ec4CC6700d0424A78a9B9Fc2ecBaeFc162313F1'</span>,</span><br><span class=\"line\">  <span class=\"string\">'0x1BC51a0edEC9FdEA3B14748e9209F4bF8Fe024b5'</span> ]</span><br></pre></td></tr></table></figure>\n\n<p>If you want to check the balance of an individual account from the above list, you can do so by running:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> account1 = <span class=\"string\">\"0x7689cF9F90FAad61B8a3c9b1b2A5b4580B37358b\"</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">web3.eth.getBalance(account1)</span><br><span class=\"line\">.then(<span class=\"built_in\">console</span>.log);</span><br></pre></td></tr></table></figure>\n\n<p>Which will output:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&gt; 100000000000000000000</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Contract-Interaction\"><a href=\"#Contract-Interaction\" class=\"headerlink\" title=\"Contract Interaction\"></a>Contract Interaction</h2><p>As above; interacting with our <em>individual accounts</em> through <code>web3.js</code> is cool, but not nearly the extent to which the library works.  Let’s now take a brief look at the more important functionality; of interacting with Smart Contracts through <code>web3.js</code>.</p>\n<p>The first thing we need to do, is to create a new Smart Contract, which we can do with the <code>new web3.eth.Contract</code> command.</p>\n<p>Before we call the <code>new</code> command, we need to assign our <code>json interface</code> for the contract’s <code>ABI</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> abi = [&#123;<span class=\"string\">\"type\"</span>:<span class=\"string\">\"function\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"foo\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>&#125;], <span class=\"string\">\"outputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"address\"</span>&#125;] &#125;,&#123; <span class=\"string\">\"type\"</span>:<span class=\"string\">\"event\"</span>, <span class=\"string\">\"name\"</span>:<span class=\"string\">\"Event\"</span>, <span class=\"string\">\"inputs\"</span>: [&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"a\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"uint256\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">true</span>&#125;,&#123;<span class=\"string\">\"name\"</span>:<span class=\"string\">\"b\"</span>,<span class=\"string\">\"type\"</span>:<span class=\"string\">\"bytes32\"</span>,<span class=\"string\">\"indexed\"</span>:<span class=\"literal\">false</span>&#125;], &#125;]</span><br></pre></td></tr></table></figure>\n\n<p>The <code>json interface</code> is a JSON object describing the <em>Application Binary Interface (ABI)</em> for our Smart Contract.  Using this JSON interface; <code>web3.js</code> is able to create a JavaScript object representing our Smart Contract and its methods &amp; events, using the <code>web3.eth.Contract</code> functionality.</p>\n<p><em>Note, the above JSON interface / ABI is taken directly from the <a href=\"https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#id5\" target=\"_blank\" rel=\"noopener\">Web3 docs</a>.</em></p>\n<p>Now that we have our <code>json interface</code> defined, we can create our new contract instance:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> myContract = <span class=\"keyword\">new</span> web3.eth.Contract(abi, <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>);</span><br></pre></td></tr></table></figure>\n\n<p><em>(The <code>from</code> address is the address of the already deployed contract instance that we’re aiming to talk to.)</em></p>\n<p>You could then set the Smart Contract’s <code>data</code> and other <code>options</code>, and then <strong>deploy</strong> your Contract with something <em>like</em> the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">myContract.options.data = <span class=\"string\">'0x12345...'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">myContract.deploy(&#123;</span><br><span class=\"line\">    <span class=\"built_in\">arguments</span>: [<span class=\"number\">123</span>, <span class=\"string\">'My String'</span>]</span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.send(&#123;</span><br><span class=\"line\">    <span class=\"keyword\">from</span>: <span class=\"string\">'0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'</span>,</span><br><span class=\"line\">    gas: <span class=\"number\">1500000</span>,</span><br><span class=\"line\">    gasPrice: <span class=\"string\">'30000000000000'</span></span><br><span class=\"line\">&#125;)</span><br><span class=\"line\">.then(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">newContractInstance</span>)</span>&#123;</span><br><span class=\"line\">    <span class=\"built_in\">console</span>.log(newContractInstance.options.address) <span class=\"comment\">// instance with the new contract address</span></span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>The above examples aren’t supposed to be perfect continuous code, and should definitely <em>not</em> be copy/pasted into a production project, but they are there to show off roughly how <code>Web.js</code> works, and give an overview of interacting with the 2 main pieces of functionality, as I see them – Wallets and Contracts.</p>\n<p>In my next tutorial series, we will be utilising <a href=\"https://embark.status.im/docs/quick_start.html\" target=\"_blank\" rel=\"noopener\">Embark</a>, and therefore we’ll be diving deeper into <code>web3.js</code>, and showing off much more of its potential.</p>\n<h1 id=\"Web-js-in-Other-Languages\"><a href=\"#Web-js-in-Other-Languages\" class=\"headerlink\" title=\"Web.js in Other Languages\"></a>Web.js in Other Languages</h1><p>Naturally the whole idea behind this article was to show off communication with the Ethereum Network through a JavaScript frontend.  However, there are also <strong>many</strong> other libraries, in pretty much every language, available to do the same:</p>\n<p><strong><em>Nim - <a href=\"https://github.com/status-im/nim-web3\" target=\"_blank\" rel=\"noopener\">nim-web3</a></em></strong><br>Crystal - <a href=\"https://github.com/light-side-software/web3.cr\" target=\"_blank\" rel=\"noopener\">web3.cr</a><br>Ruby - <a href=\"https://github.com/izetex/web3-eth\" target=\"_blank\" rel=\"noopener\">web3-eth gem</a><br>Elixir - <a href=\"https://github.com/mana-ethereum/ethereumex\" target=\"_blank\" rel=\"noopener\">ethereumex</a><br>Python - <a href=\"https://github.com/ethereum/web3.py\" target=\"_blank\" rel=\"noopener\">Web3.py</a><br>Haskell - <a href=\"https://github.com/airalab/hs-web3\" target=\"_blank\" rel=\"noopener\">hs-web3</a><br>Java - <a href=\"https://github.com/web3j/web3j\" target=\"_blank\" rel=\"noopener\">web3j</a><br>Scala - <a href=\"https://github.com/mslinn/web3j-scala\" target=\"_blank\" rel=\"noopener\">web3j-scala</a><br>Purescript - <a href=\"https://github.com/f-o-a-m/purescript-web3\" target=\"_blank\" rel=\"noopener\">purescript-web3</a><br>PHP - <a href=\"https://github.com/sc0Vu/web3.php\" target=\"_blank\" rel=\"noopener\">web3.php</a></p>\n<h1 id=\"Beyond-Web3\"><a href=\"#Beyond-Web3\" class=\"headerlink\" title=\"Beyond Web3\"></a>Beyond Web3</h1><p>As stated at the opening of this article, we’ve barely even scratched the surface of <code>web.js</code> capabilities.  But I do hope that you now have a better understanding of what Web3 stands for.</p>\n<p>Personally, I am <strong>very much</strong> looking forward to <strong><em>diving on in</em></strong> to my next DApp tutorial series, to utilise and demonstrate the Ethereum Network to its fullest.</p>\n<p>As always, if you have <em>any</em> questions regarding Web3, how Status utilises Web3, or if you have comments on this article, feel free to reach out to me at <a href=\"mailto:robin@status.im\">robin@status</a>.</p>\n<p>Thanks again for reading, and check back for my DApp tutorial series, starting later this week!</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n"},{"title":"Introducing Embark 5","author":"pascal_precht","summary":"About half a year after our last stable release, we've now published Embark version 5 with lots of features, improvements and fixes. Read on for more information!","layout":"blog-post","_content":"\nIf you've been following the development of Embark you're probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we've published 10 alpha releases and one beta release for Embark 5 and today we're happy to announce the Embark 5 stable release!\n\nIn this post we'll be looking at some of the main changes and features to get up and running with v5. Notice that we've add a [migration guide](https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5) to our official docs as well.\n\n## New Features\n\nLet's first start with new features that have been introduced in Embark 5.\n\n### Whisper client configuration\n\nPrior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.\n\nTo specify a client, use the new `client` configuration property which defaults to `geth`:\n\n```js\n// communication.js\n\n...\ndefault: {\n  ...\n  client: \"geth\" // can be either 'geth' or 'parity'\n},\n...\n\n```\n\n### Support for Dynamic Addresses\n\nIf you're using Embark already, you're probably aware that there are many different ways to [configure your Smart Contracts](/docs/contracts_configuration.html). One of the things that can be configured is the `address` of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.\n\nThere's one more case that hasn't been covered so far: Calculating a Smart Contract address dynamically as it's scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.\n\nThe following example configures `MyContract` to get its address from a call made to `AnotherContract`'s API:\n\n```js\n...\ndeploy: {\n  AnotherContract: {...},\n  MyContract: {\n    deps: [\"AnotherContract\"]\n    address: async (deps) => {\n      const receipt = await deps.contracts.AnotherContract.methods.someFunction();\n      return receipt.events.SomeEvent.returnValues.someAddress;\n    }\n  }\n}\n...\n```\n\n## Breaking changes\n\nNext up, let's quickly talk about the few breaking changes we've introduced to improve the overall developer experience. It's worth noting that we try to keep breaking changes at a minimum and if it's indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.\n\n### NodeJS support\n\nDue to some package dependencies, Embark doesn't yet support Node's [*Current* version](https://nodejs.org/en/about/releases/) version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version `>= 10.17.0` and `< 12.0.0`. It also requires npm `>= 6.11.3` (bundled with Node `10.17.0`) or yarn `>= 1.19.1`.\n\n### New Smart Contract configuration API\n\nEmbark's Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user's choice of blockchain client. This sometimes caused confusion for our users since they weren't sure where certain configurations should go.\n\nThat's why we've made the following changes:\n\n### Deployment section moved to Blockchain config\n\nThe `deployment` section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the `host`, `port` and `protocol` being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.\n\nHere's what such a config looked like prior to v5:\n\n```js\n...\ndeployment: {\n  host: \"localhost\", // Host of the blockchain node\n  port: 8546, // Port of the blockchain node\n  type: \"ws\" // Type of connection (ws or rpc),\n  accounts: [...]\n},\n...\n```\n\nThere's no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.\n\n### `contracts` property has been renamed to `deploy`\n\nWhen configuring Smart Contracts, there are a few deployment hooks that can be specified, such as `beforeDeploy` and `afterDeploy`. To make the API a bit more descriptive and to clarify intent, the `contracts` property has been renamed to `deploy`, aligning wonderfully with its deployment hooks counterparts.\n\nBefore:\n\n```js\n...\ncontracts: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\nAfter:\n\n```js\n...\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\n### Polished Blockchain configuration API\n\nOne of the most complex APIs has been Embark's Blockchain configuration API. That's why we've put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.\n\nThe following configuration properties have been renamed:\n\n- `isDev` is now `miningMode: 'dev'`\n- `mineWhenNeeded` is now `miningMode: 'auto'`\n- `ethereumClientName` is now `client`\n\nWe've also removed several endpoint-related settings, such as `host` and `port`, and replaced them with a single `endpoint` property. Here's what the new defaults look like:\n\n```js\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {\n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nFor more information on Blockchain configuration, head over to the [official docs](/docs/blockchain_configuration.html).\n\n### Accounts configuration moved to Blockchain config\n\nPrior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn't really clear which accounts belonged to what action. To eliminate confusion, we've moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.\n\nJust like before, accounts can be defined using different configuration settings, depending on the use case:\n\n```js\n...\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n...\n```\n\nCheck out the documentation on [accounts configuration](/docs/blockchain_accounts_configuration.html) for more information.\n\n### Configuring tests\n\nAll the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark's `config()` function inside test suites, the same configuration APi applies:\n\n```javascript\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in the Smart Contract configuration guide\n    }\n  }\n});\n```\n\nTesting is covered in-depth in our [testing guide](/docs/contracts_testing.html).\n\nTo see any of the new APIs in action, have a look at our [template](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates) and [test dapps](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests) in the official Embark repository.\n\nObviously we've worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our [changelog](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07).\n\nAs always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can't wait to see the great apps you'll be building with it!\n","source":"_posts/2020-01-13-announcing-embark-5.md","raw":"title: Introducing Embark 5\nauthor: pascal_precht\nsummary: \"About half a year after our last stable release, we've now published Embark version 5 with lots of features, improvements and fixes. Read on for more information!\"\ncategories:\n  - announcements\nlayout: blog-post\n---\n\nIf you've been following the development of Embark you're probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we've published 10 alpha releases and one beta release for Embark 5 and today we're happy to announce the Embark 5 stable release!\n\nIn this post we'll be looking at some of the main changes and features to get up and running with v5. Notice that we've add a [migration guide](https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5) to our official docs as well.\n\n## New Features\n\nLet's first start with new features that have been introduced in Embark 5.\n\n### Whisper client configuration\n\nPrior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.\n\nTo specify a client, use the new `client` configuration property which defaults to `geth`:\n\n```js\n// communication.js\n\n...\ndefault: {\n  ...\n  client: \"geth\" // can be either 'geth' or 'parity'\n},\n...\n\n```\n\n### Support for Dynamic Addresses\n\nIf you're using Embark already, you're probably aware that there are many different ways to [configure your Smart Contracts](/docs/contracts_configuration.html). One of the things that can be configured is the `address` of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.\n\nThere's one more case that hasn't been covered so far: Calculating a Smart Contract address dynamically as it's scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.\n\nThe following example configures `MyContract` to get its address from a call made to `AnotherContract`'s API:\n\n```js\n...\ndeploy: {\n  AnotherContract: {...},\n  MyContract: {\n    deps: [\"AnotherContract\"]\n    address: async (deps) => {\n      const receipt = await deps.contracts.AnotherContract.methods.someFunction();\n      return receipt.events.SomeEvent.returnValues.someAddress;\n    }\n  }\n}\n...\n```\n\n## Breaking changes\n\nNext up, let's quickly talk about the few breaking changes we've introduced to improve the overall developer experience. It's worth noting that we try to keep breaking changes at a minimum and if it's indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.\n\n### NodeJS support\n\nDue to some package dependencies, Embark doesn't yet support Node's [*Current* version](https://nodejs.org/en/about/releases/) version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version `>= 10.17.0` and `< 12.0.0`. It also requires npm `>= 6.11.3` (bundled with Node `10.17.0`) or yarn `>= 1.19.1`.\n\n### New Smart Contract configuration API\n\nEmbark's Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user's choice of blockchain client. This sometimes caused confusion for our users since they weren't sure where certain configurations should go.\n\nThat's why we've made the following changes:\n\n### Deployment section moved to Blockchain config\n\nThe `deployment` section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the `host`, `port` and `protocol` being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.\n\nHere's what such a config looked like prior to v5:\n\n```js\n...\ndeployment: {\n  host: \"localhost\", // Host of the blockchain node\n  port: 8546, // Port of the blockchain node\n  type: \"ws\" // Type of connection (ws or rpc),\n  accounts: [...]\n},\n...\n```\n\nThere's no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.\n\n### `contracts` property has been renamed to `deploy`\n\nWhen configuring Smart Contracts, there are a few deployment hooks that can be specified, such as `beforeDeploy` and `afterDeploy`. To make the API a bit more descriptive and to clarify intent, the `contracts` property has been renamed to `deploy`, aligning wonderfully with its deployment hooks counterparts.\n\nBefore:\n\n```js\n...\ncontracts: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\nAfter:\n\n```js\n...\ndeploy: {\n  SimpleStorage: {\n    fromIndex: 0,\n    args: [100],\n    onDeploy: async () => { ... },\n    deployIf: async () => { ... }\n  }\n}\n...\n```\n\n### Polished Blockchain configuration API\n\nOne of the most complex APIs has been Embark's Blockchain configuration API. That's why we've put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.\n\nThe following configuration properties have been renamed:\n\n- `isDev` is now `miningMode: 'dev'`\n- `mineWhenNeeded` is now `miningMode: 'auto'`\n- `ethereumClientName` is now `client`\n\nWe've also removed several endpoint-related settings, such as `host` and `port`, and replaced them with a single `endpoint` property. Here's what the new defaults look like:\n\n```js\nmodule.exports = {\n  default: {\n    enabled: true,\n    client: \"geth\"\n  },\n  development: {\n    clientConfig: {\n      miningMode: 'dev'\n    }\n  },\n  testnet: {\n    endpoint: \"https://external-node.com\",\n    accounts: [\n      {\n        mnemonic: \"12 word mnemonic\"\n      }\n    ]\n  }\n}\n```\n\nFor more information on Blockchain configuration, head over to the [official docs](/docs/blockchain_configuration.html).\n\n### Accounts configuration moved to Blockchain config\n\nPrior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn't really clear which accounts belonged to what action. To eliminate confusion, we've moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.\n\nJust like before, accounts can be defined using different configuration settings, depending on the use case:\n\n```js\n...\naccounts: [\n  {\n    nodeAccounts: true,\n    numAddresses: \"1\",\n    password: \"config/development/devpassword\"\n  },\n  {\n    privateKey: process.env.MyPrivateKey\n  },\n  {\n    privateKeyFile: \"path/to/file\",\n    password: process.env.MyKeyStorePassword\n  },\n  {\n    mnemonic: process.env.My12WordsMnemonic,\n    addressIndex: \"0\",\n    numAddresses: \"1\",\n    hdpath: \"m/44'/60'/0'/0/\"\n  }\n]\n...\n```\n\nCheck out the documentation on [accounts configuration](/docs/blockchain_accounts_configuration.html) for more information.\n\n### Configuring tests\n\nAll the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark's `config()` function inside test suites, the same configuration APi applies:\n\n```javascript\nconfig({\n  contracts: {\n    deploy: {\n      SomeContract: {} // options as discussed in the Smart Contract configuration guide\n    }\n  }\n});\n```\n\nTesting is covered in-depth in our [testing guide](/docs/contracts_testing.html).\n\nTo see any of the new APIs in action, have a look at our [template](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates) and [test dapps](https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests) in the official Embark repository.\n\nObviously we've worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our [changelog](https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07).\n\nAs always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can't wait to see the great apps you'll be building with it!\n","slug":"announcing-embark-5","published":1,"date":"2020-01-13T05:00:00.000Z","updated":"2020-01-19T20:56:52.653Z","_id":"ck5ijm3ub002m7heg363x7mwy","comments":1,"photos":[],"link":"","content":"<p>If you’ve been following the development of Embark you’re probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we’ve published 10 alpha releases and one beta release for Embark 5 and today we’re happy to announce the Embark 5 stable release!</p>\n<p>In this post we’ll be looking at some of the main changes and features to get up and running with v5. Notice that we’ve add a <a href=\"https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5\">migration guide</a> to our official docs as well.</p>\n<h2 id=\"New-Features\"><a href=\"#New-Features\" class=\"headerlink\" title=\"New Features\"></a>New Features</h2><p>Let’s first start with new features that have been introduced in Embark 5.</p>\n<h3 id=\"Whisper-client-configuration\"><a href=\"#Whisper-client-configuration\" class=\"headerlink\" title=\"Whisper client configuration\"></a>Whisper client configuration</h3><p>Prior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.</p>\n<p>To specify a client, use the new <code>client</code> configuration property which defaults to <code>geth</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// communication.js</span></span><br><span class=\"line\"></span><br><span class=\"line\">...</span><br><span class=\"line\"><span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  client: <span class=\"string\">\"geth\"</span> <span class=\"comment\">// can be either 'geth' or 'parity'</span></span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Support-for-Dynamic-Addresses\"><a href=\"#Support-for-Dynamic-Addresses\" class=\"headerlink\" title=\"Support for Dynamic Addresses\"></a>Support for Dynamic Addresses</h3><p>If you’re using Embark already, you’re probably aware that there are many different ways to <a href=\"/docs/contracts_configuration.html\">configure your Smart Contracts</a>. One of the things that can be configured is the <code>address</code> of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.</p>\n<p>There’s one more case that hasn’t been covered so far: Calculating a Smart Contract address dynamically as it’s scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.</p>\n<p>The following example configures <code>MyContract</code> to get its address from a call made to <code>AnotherContract</code>‘s API:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  AnotherContract: &#123;...&#125;,</span><br><span class=\"line\">  MyContract: &#123;</span><br><span class=\"line\">    deps: [<span class=\"string\">\"AnotherContract\"</span>]</span><br><span class=\"line\">    address: <span class=\"keyword\">async</span> (deps) =&gt; &#123;</span><br><span class=\"line\">      <span class=\"keyword\">const</span> receipt = <span class=\"keyword\">await</span> deps.contracts.AnotherContract.methods.someFunction();</span><br><span class=\"line\">      <span class=\"keyword\">return</span> receipt.events.SomeEvent.returnValues.someAddress;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Breaking-changes\"><a href=\"#Breaking-changes\" class=\"headerlink\" title=\"Breaking changes\"></a>Breaking changes</h2><p>Next up, let’s quickly talk about the few breaking changes we’ve introduced to improve the overall developer experience. It’s worth noting that we try to keep breaking changes at a minimum and if it’s indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.</p>\n<h3 id=\"NodeJS-support\"><a href=\"#NodeJS-support\" class=\"headerlink\" title=\"NodeJS support\"></a>NodeJS support</h3><p>Due to some package dependencies, Embark doesn’t yet support Node’s <a href=\"https://nodejs.org/en/about/releases/\" target=\"_blank\" rel=\"noopener\"><em>Current</em> version</a> version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version <code>&gt;= 10.17.0</code> and <code>&lt; 12.0.0</code>. It also requires npm <code>&gt;= 6.11.3</code> (bundled with Node <code>10.17.0</code>) or yarn <code>&gt;= 1.19.1</code>.</p>\n<h3 id=\"New-Smart-Contract-configuration-API\"><a href=\"#New-Smart-Contract-configuration-API\" class=\"headerlink\" title=\"New Smart Contract configuration API\"></a>New Smart Contract configuration API</h3><p>Embark’s Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user’s choice of blockchain client. This sometimes caused confusion for our users since they weren’t sure where certain configurations should go.</p>\n<p>That’s why we’ve made the following changes:</p>\n<h3 id=\"Deployment-section-moved-to-Blockchain-config\"><a href=\"#Deployment-section-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Deployment section moved to Blockchain config\"></a>Deployment section moved to Blockchain config</h3><p>The <code>deployment</code> section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the <code>host</code>, <code>port</code> and <code>protocol</code> being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.</p>\n<p>Here’s what such a config looked like prior to v5:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deployment: &#123;</span><br><span class=\"line\">  host: <span class=\"string\">\"localhost\"</span>, <span class=\"comment\">// Host of the blockchain node</span></span><br><span class=\"line\">  port: <span class=\"number\">8546</span>, <span class=\"comment\">// Port of the blockchain node</span></span><br><span class=\"line\">  type: <span class=\"string\">\"ws\"</span> <span class=\"comment\">// Type of connection (ws or rpc),</span></span><br><span class=\"line\">  accounts: [...]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>There’s no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.</p>\n<h3 id=\"contracts-property-has-been-renamed-to-deploy\"><a href=\"#contracts-property-has-been-renamed-to-deploy\" class=\"headerlink\" title=\"contracts property has been renamed to deploy\"></a><code>contracts</code> property has been renamed to <code>deploy</code></h3><p>When configuring Smart Contracts, there are a few deployment hooks that can be specified, such as <code>beforeDeploy</code> and <code>afterDeploy</code>. To make the API a bit more descriptive and to clarify intent, the <code>contracts</code> property has been renamed to <code>deploy</code>, aligning wonderfully with its deployment hooks counterparts.</p>\n<p>Before:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>After:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Polished-Blockchain-configuration-API\"><a href=\"#Polished-Blockchain-configuration-API\" class=\"headerlink\" title=\"Polished Blockchain configuration API\"></a>Polished Blockchain configuration API</h3><p>One of the most complex APIs has been Embark’s Blockchain configuration API. That’s why we’ve put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.</p>\n<p>The following configuration properties have been renamed:</p>\n<ul>\n<li><code>isDev</code> is now <code>miningMode: &#39;dev&#39;</code></li>\n<li><code>mineWhenNeeded</code> is now <code>miningMode: &#39;auto&#39;</code></li>\n<li><code>ethereumClientName</code> is now <code>client</code></li>\n</ul>\n<p>We’ve also removed several endpoint-related settings, such as <code>host</code> and <code>port</code>, and replaced them with a single <code>endpoint</code> property. Here’s what the new defaults look like:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">module</span>.exports = &#123;</span><br><span class=\"line\">  <span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">    enabled: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    client: <span class=\"string\">\"geth\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: <span class=\"string\">'dev'</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: <span class=\"string\">\"https://external-node.com\"</span>,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: <span class=\"string\">\"12 word mnemonic\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on Blockchain configuration, head over to the <a href=\"/docs/blockchain_configuration.html\">official docs</a>.</p>\n<h3 id=\"Accounts-configuration-moved-to-Blockchain-config\"><a href=\"#Accounts-configuration-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Accounts configuration moved to Blockchain config\"></a>Accounts configuration moved to Blockchain config</h3><p>Prior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn’t really clear which accounts belonged to what action. To eliminate confusion, we’ve moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.</p>\n<p>Just like before, accounts can be defined using different configuration settings, depending on the use case:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    password: <span class=\"string\">\"config/development/devpassword\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: <span class=\"string\">\"path/to/file\"</span>,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: <span class=\"string\">\"0\"</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    hdpath: <span class=\"string\">\"m/44'/60'/0'/0/\"</span></span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Check out the documentation on <a href=\"/docs/blockchain_accounts_configuration.html\">accounts configuration</a> for more information.</p>\n<h3 id=\"Configuring-tests\"><a href=\"#Configuring-tests\" class=\"headerlink\" title=\"Configuring tests\"></a>Configuring tests</h3><p>All the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark’s <code>config()</code> function inside test suites, the same configuration APi applies:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; <span class=\"comment\">// options as discussed in the Smart Contract configuration guide</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Testing is covered in-depth in our <a href=\"/docs/contracts_testing.html\">testing guide</a>.</p>\n<p>To see any of the new APIs in action, have a look at our <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates\" target=\"_blank\" rel=\"noopener\">template</a> and <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests\" target=\"_blank\" rel=\"noopener\">test dapps</a> in the official Embark repository.</p>\n<p>Obviously we’ve worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07\" target=\"_blank\" rel=\"noopener\">changelog</a>.</p>\n<p>As always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can’t wait to see the great apps you’ll be building with it!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>If you’ve been following the development of Embark you’re probably aware that we regularly put out alpha and beta releases for upcoming major or feature versions of Embark. In the past ~6 months since the release of Embark 4, we’ve published 10 alpha releases and one beta release for Embark 5 and today we’re happy to announce the Embark 5 stable release!</p>\n<p>In this post we’ll be looking at some of the main changes and features to get up and running with v5. Notice that we’ve add a <a href=\"https://embark.embarklabs.io/docs/migrating_from_3.x.html#Updating-to-v5\">migration guide</a> to our official docs as well.</p>\n<h2 id=\"New-Features\"><a href=\"#New-Features\" class=\"headerlink\" title=\"New Features\"></a>New Features</h2><p>Let’s first start with new features that have been introduced in Embark 5.</p>\n<h3 id=\"Whisper-client-configuration\"><a href=\"#Whisper-client-configuration\" class=\"headerlink\" title=\"Whisper client configuration\"></a>Whisper client configuration</h3><p>Prior to Embark 5, Embark would use the same blockchain client to enable blockchain features and communication features for Whisper. With Embark 5, Embark spins up a separate client for Whisper. This also ensures that that Whisper service stays in tact when the blockchain service is turned off and vice versa.</p>\n<p>To specify a client, use the new <code>client</code> configuration property which defaults to <code>geth</code>:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// communication.js</span></span><br><span class=\"line\"></span><br><span class=\"line\">...</span><br><span class=\"line\"><span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  client: <span class=\"string\">\"geth\"</span> <span class=\"comment\">// can be either 'geth' or 'parity'</span></span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Support-for-Dynamic-Addresses\"><a href=\"#Support-for-Dynamic-Addresses\" class=\"headerlink\" title=\"Support for Dynamic Addresses\"></a>Support for Dynamic Addresses</h3><p>If you’re using Embark already, you’re probably aware that there are many different ways to <a href=\"/docs/contracts_configuration.html\">configure your Smart Contracts</a>. One of the things that can be configured is the <code>address</code> of a Smart Contract. Usually the address will be determined after a Smart Contract has been deployed. In other cases, what we want to do is simply specifying the address because the Smart Contract is already deployed to the network.</p>\n<p>There’s one more case that hasn’t been covered so far: Calculating a Smart Contract address dynamically as it’s scheduled for deployment. This is useful when the address of a Smart Contract is the result of the interaction with another Smart Contract that is already instantiated on the network.</p>\n<p>The following example configures <code>MyContract</code> to get its address from a call made to <code>AnotherContract</code>‘s API:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  AnotherContract: &#123;...&#125;,</span><br><span class=\"line\">  MyContract: &#123;</span><br><span class=\"line\">    deps: [<span class=\"string\">\"AnotherContract\"</span>]</span><br><span class=\"line\">    address: <span class=\"keyword\">async</span> (deps) =&gt; &#123;</span><br><span class=\"line\">      <span class=\"keyword\">const</span> receipt = <span class=\"keyword\">await</span> deps.contracts.AnotherContract.methods.someFunction();</span><br><span class=\"line\">      <span class=\"keyword\">return</span> receipt.events.SomeEvent.returnValues.someAddress;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Breaking-changes\"><a href=\"#Breaking-changes\" class=\"headerlink\" title=\"Breaking changes\"></a>Breaking changes</h2><p>Next up, let’s quickly talk about the few breaking changes we’ve introduced to improve the overall developer experience. It’s worth noting that we try to keep breaking changes at a minimum and if it’s indeed unavoidable, we put lots of effort into keeping the necessary changes as small as possible.</p>\n<h3 id=\"NodeJS-support\"><a href=\"#NodeJS-support\" class=\"headerlink\" title=\"NodeJS support\"></a>NodeJS support</h3><p>Due to some package dependencies, Embark doesn’t yet support Node’s <a href=\"https://nodejs.org/en/about/releases/\" target=\"_blank\" rel=\"noopener\"><em>Current</em> version</a> version (13.x) or latest LTS version (12.x). Embark 5 runs with any node version <code>&gt;= 10.17.0</code> and <code>&lt; 12.0.0</code>. It also requires npm <code>&gt;= 6.11.3</code> (bundled with Node <code>10.17.0</code>) or yarn <code>&gt;= 1.19.1</code>.</p>\n<h3 id=\"New-Smart-Contract-configuration-API\"><a href=\"#New-Smart-Contract-configuration-API\" class=\"headerlink\" title=\"New Smart Contract configuration API\"></a>New Smart Contract configuration API</h3><p>Embark’s Smart Contract configuration has been highly declarative from day one. Configuring different deployment options and settings for various scenarios is a largely descriptive process when using Embark. However, we felt there was still room for improvement. Especially because Embark handles not only Smart Contract configurations, but also configurations for elements such as the user’s choice of blockchain client. This sometimes caused confusion for our users since they weren’t sure where certain configurations should go.</p>\n<p>That’s why we’ve made the following changes:</p>\n<h3 id=\"Deployment-section-moved-to-Blockchain-config\"><a href=\"#Deployment-section-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Deployment section moved to Blockchain config\"></a>Deployment section moved to Blockchain config</h3><p>The <code>deployment</code> section of the Smart Contract configuration has been completely moved to the Blockchain configuration as discussed in a moment. This section was primarily used to specify things like the <code>host</code>, <code>port</code> and <code>protocol</code> being used to connect to a node to which you Smart Contracts will be deployed, as well as the accounts configuration.</p>\n<p>Here’s what such a config looked like prior to v5:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deployment: &#123;</span><br><span class=\"line\">  host: <span class=\"string\">\"localhost\"</span>, <span class=\"comment\">// Host of the blockchain node</span></span><br><span class=\"line\">  port: <span class=\"number\">8546</span>, <span class=\"comment\">// Port of the blockchain node</span></span><br><span class=\"line\">  type: <span class=\"string\">\"ws\"</span> <span class=\"comment\">// Type of connection (ws or rpc),</span></span><br><span class=\"line\">  accounts: [...]</span><br><span class=\"line\">&#125;,</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>There’s no equivalent for this configuration inside the Smart Contract configuration in Embark 5, so this section can be entirely (re)moved.</p>\n<h3 id=\"contracts-property-has-been-renamed-to-deploy\"><a href=\"#contracts-property-has-been-renamed-to-deploy\" class=\"headerlink\" title=\"contracts property has been renamed to deploy\"></a><code>contracts</code> property has been renamed to <code>deploy</code></h3><p>When configuring Smart Contracts, there are a few deployment hooks that can be specified, such as <code>beforeDeploy</code> and <code>afterDeploy</code>. To make the API a bit more descriptive and to clarify intent, the <code>contracts</code> property has been renamed to <code>deploy</code>, aligning wonderfully with its deployment hooks counterparts.</p>\n<p>Before:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">contracts: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>After:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  SimpleStorage: &#123;</span><br><span class=\"line\">    fromIndex: <span class=\"number\">0</span>,</span><br><span class=\"line\">    args: [<span class=\"number\">100</span>],</span><br><span class=\"line\">    onDeploy: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;,</span><br><span class=\"line\">    deployIf: <span class=\"keyword\">async</span> () =&gt; &#123; ... &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Polished-Blockchain-configuration-API\"><a href=\"#Polished-Blockchain-configuration-API\" class=\"headerlink\" title=\"Polished Blockchain configuration API\"></a>Polished Blockchain configuration API</h3><p>One of the most complex APIs has been Embark’s Blockchain configuration API. That’s why we’ve put a lot of effort into streamlining the settings and properties and removing the ones that happened to be redundant. On top of that, Embark now defines most of them as defaults, resulting in significantly smaller and less complex configuration files.</p>\n<p>The following configuration properties have been renamed:</p>\n<ul>\n<li><code>isDev</code> is now <code>miningMode: &#39;dev&#39;</code></li>\n<li><code>mineWhenNeeded</code> is now <code>miningMode: &#39;auto&#39;</code></li>\n<li><code>ethereumClientName</code> is now <code>client</code></li>\n</ul>\n<p>We’ve also removed several endpoint-related settings, such as <code>host</code> and <code>port</code>, and replaced them with a single <code>endpoint</code> property. Here’s what the new defaults look like:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">module</span>.exports = &#123;</span><br><span class=\"line\">  <span class=\"keyword\">default</span>: &#123;</span><br><span class=\"line\">    enabled: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    client: <span class=\"string\">\"geth\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  development: &#123;</span><br><span class=\"line\">    clientConfig: &#123;</span><br><span class=\"line\">      miningMode: <span class=\"string\">'dev'</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  testnet: &#123;</span><br><span class=\"line\">    endpoint: <span class=\"string\">\"https://external-node.com\"</span>,</span><br><span class=\"line\">    accounts: [</span><br><span class=\"line\">      &#123;</span><br><span class=\"line\">        mnemonic: <span class=\"string\">\"12 word mnemonic\"</span></span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    ]</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>For more information on Blockchain configuration, head over to the <a href=\"/docs/blockchain_configuration.html\">official docs</a>.</p>\n<h3 id=\"Accounts-configuration-moved-to-Blockchain-config\"><a href=\"#Accounts-configuration-moved-to-Blockchain-config\" class=\"headerlink\" title=\"Accounts configuration moved to Blockchain config\"></a>Accounts configuration moved to Blockchain config</h3><p>Prior to Embark 5 it was possible to specify and configure various accounts for deployment and interaction both inside the Smart Contract configuration and the Blockchain configuration. This caused a lot of confusion because it wasn’t really clear which accounts belonged to what action. To eliminate confusion, we’ve moved the accounts configuration entirely to the Blockchain configuration, making it much more straightforward to find the right place when setting up custom accounts.</p>\n<p>Just like before, accounts can be defined using different configuration settings, depending on the use case:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">accounts: [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    nodeAccounts: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    password: <span class=\"string\">\"config/development/devpassword\"</span></span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKey: process.env.MyPrivateKey</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    privateKeyFile: <span class=\"string\">\"path/to/file\"</span>,</span><br><span class=\"line\">    password: process.env.MyKeyStorePassword</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    mnemonic: process.env.My12WordsMnemonic,</span><br><span class=\"line\">    addressIndex: <span class=\"string\">\"0\"</span>,</span><br><span class=\"line\">    numAddresses: <span class=\"string\">\"1\"</span>,</span><br><span class=\"line\">    hdpath: <span class=\"string\">\"m/44'/60'/0'/0/\"</span></span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">]</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>Check out the documentation on <a href=\"/docs/blockchain_accounts_configuration.html\">accounts configuration</a> for more information.</p>\n<h3 id=\"Configuring-tests\"><a href=\"#Configuring-tests\" class=\"headerlink\" title=\"Configuring tests\"></a>Configuring tests</h3><p>All the configuration changes discussed above have been ported and made available inside the test runner as well. In other words, when using Embark’s <code>config()</code> function inside test suites, the same configuration APi applies:</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\">config(&#123;</span><br><span class=\"line\">  contracts: &#123;</span><br><span class=\"line\">    deploy: &#123;</span><br><span class=\"line\">      SomeContract: &#123;&#125; <span class=\"comment\">// options as discussed in the Smart Contract configuration guide</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>Testing is covered in-depth in our <a href=\"/docs/contracts_testing.html\">testing guide</a>.</p>\n<p>To see any of the new APIs in action, have a look at our <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/templates\" target=\"_blank\" rel=\"noopener\">template</a> and <a href=\"https://github.com/embarklabs/embark/tree/ba0d6d17f30018d8258c65d85f17bea100c3ad0a/dapps/tests\" target=\"_blank\" rel=\"noopener\">test dapps</a> in the official Embark repository.</p>\n<p>Obviously we’ve worked on many more things as part of the v5 release. For a full list of features and bug fixes, head over to our <a href=\"https://github.com/embarklabs/embark/blob/master/CHANGELOG.md#500-2020-01-07\" target=\"_blank\" rel=\"noopener\">changelog</a>.</p>\n<p>As always, we encourage our users to install the latest version of Embark and give it a spin. Feedback is very welcome and we can’t wait to see the great apps you’ll be building with it!</p>\n"},{"title":"Nim vs Crystal - Part 3 - Crypto, DApps & P2P","summary":"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 3; Crypto, P2P & DApps are explored.","author":"robin_percy","layout":"blog-post","image":"/assets/images/nim-crystal-header_blank.jpg","_content":"\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in [article #1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/) I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests ***did*** throw up some unexpected twists in the plot.  Crystal used *very-nearly* half of the memory amount executing the tests when compared to Nim, and also took *very nearly* half of the execution time in doing so.  **This seriously took me by surprise!**\n\nIn [article #2](/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/); I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they're just the high-level tools that I look for...\n\nFrom a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just *markedly* improve our application performance, but that are also relatively simple, and intuitive to use.  I see *this* as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love \\*cough* ***Ruby*** \\*cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress...\n\nI regret to say that this is the final article in this series!  It's been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it's going to be a good one!  We're going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:\n\n***Let's dive on in!***\n\n## Cryptocurrency\n\nFirstly, I'd like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have ***proven to be two of the strongest languages*** to consider for the undertaking..  (That being the *next* blog series I'm going to write – in the near future, so deciding which language to use will be heavily influenced by ***this*** blog series!)\n\nFor our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a ***very*** tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be **ONE HELL** of an impressive piece of technology.\n\nHappily, both Crystal *and* Nim allow us ***all*** of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining *and* hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.\n\nAs I'd like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we'd require for our Crypto app:\n\n\n### Calculating our Block Hashes\n\nWhen building our Blockchain; we need to consider how we're going to identify and chain our transaction blocks together (blockchain).  Without going into details in *this* article on how blockchains function, we'll stick with the existing, and proven, SHA256 algorithm.\n\n\n### In Crystal:\n\n``` crystal\nrequire \"json\"\nrequire \"openssl\"\n\nmodule OurCryptoApp::Model\n  struct Transaction\n    include JSON::Serializable\n\n    alias TxnHash = String\n\n    property from : String\n    property to : String\n    property amount : Float32\n    getter hash : TxnHash\n    getter timestamp : Int64\n\n    def initialize(@from, @to, @amount)\n      @timestamp = Time.utc_now.to_unix\n      @hash = calc_hash\n    end\n\n    private def calc_hash : TxnHash\n      sha = OpenSSL::Digest.new(\"SHA256\")\n      sha.update(\"#{@from}#{@to}#{@amount}#{@timestamp}\")\n      sha.hexdigest\n    end\n  end\nend\n```\n\n\n### In Nim:\n\nIf we want to generate a similar hash in Nim, we could run the following:\n\n``` nim\nimport strutils\n\nconst SHA256Len = 32\n\nproc SHA256(d: cstring, n: culong, md: cstring = nil): cstring {.cdecl, dynlib: \"libssl.so\", importc.}\n\nproc SHA256(s: string): string =\n  result = \"\"\n  let s = SHA256(s.cstring, s.len.culong)\n  for i in 0 .. < SHA256Len:\n    result.add s[i].BiggestInt.toHex(2).toLower\n\necho SHA256(\"Hash this block, yo\")\n```\n\n\n## Releasing our Crypto App\n\nAnother serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are *compiled* languages, we're already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)\n\nIt pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using [React Native](https://facebook.github.io/react-native/).\n\nHowever, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:\n\n - [Ionic Framework](http://ionicframework.com/)\n - [Flutter](https://flutter.io/)\n - [NativeScript](https://www.nativescript.org/)\n\nAnd if you come from a Windows background:\n\n - [Xamarin](https://dotnet.microsoft.com/apps/xamarin)\n\n\n### Building & Releasing In Nim:\n\nIf we wanted to build out and release our app for Android, we can run:\n\n```\nnim c -c --cpu:arm --os:android -d:androidNDK --noMain:on\n```\n\nTo generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.\n\nSimilarly, we could run:\n\n```\nnim c -c --os:ios --noMain:on\n```\n\nTo generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.\n\n\n### Building & Releasing In Crystal:\n\nCrystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:\n\n```\ncrystal build your_program.cr --cross-compile --target \"x86_64-unknown-linux-gnu\"\n```\n\n***Worth noting:*** *Crystal doesn't offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!*\n\n## Ethereum - Building, Signing & Sending a  Transaction\n\nFor the sake of this article, in Crystal, I didn't see the need to write out a more low-level example of the below action, as it *is* so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.\n\n### In Crystal:\n\n``` crystal\nrequire \"http/client\"\n\nmodule Ethereum\n  class Transaction\n\n    # /ethereum/create/ Create - Ethereum::Transaction.create(args)\n    def self.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : EthereumToSign | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/create//?to=#{to}&from=#{from}&amount=#{amount}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      ethereumtosign = EthereumToSign.from_json response.body\n\n\n      return ethereumtosign\n    end\n\n    # /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)\n    def self.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : SendStatus | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/sign_and_send//?to=#{to}&from=#{from}&amount=#{amount}&r=#{r}&s=#{s}&v=#{v}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      sendstatus = SendStatus.from_json response.body\n\n\n      return sendstatus\n    end\n\n  end\nend\n```\n\nThen, in our application we could simply call:\n\n``` crystal\nEthereum::Transaction.create(\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", \"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", 80000)\n```\n\nAnd we would get a response similar to the following, ready to be signed and sent to the Ethereum network:\n\n``` json\n{\n  \"tx\": \"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\",\n  \"hash_to_sign\": \"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"\n}\n```\n\n\n## In Nim:\n\nFrom a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status' very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported `nim-eth` into our Nimble project, our Ethereum transaction can be built atop of the following protocol:\n\n``` nim\nimport\n  nim-eth/[common, rlp, keys], nimcrypto\n\nproc initTransaction*(nonce: AccountNonce, gasPrice, gasLimit: GasInt, to: EthAddress,\n  value: UInt256, payload: Blob, V: byte, R, S: UInt256, isContractCreation = false): Transaction =\n  result.accountNonce = nonce\n  result.gasPrice = gasPrice\n  result.gasLimit = gasLimit\n  result.to = to\n  result.value = value\n  result.payload = payload\n  result.V = V\n  result.R = R\n  result.S = S\n  result.isContractCreation = isContractCreation\n\ntype\n  TransHashObj = object\n    accountNonce:  AccountNonce\n    gasPrice:      GasInt\n    gasLimit:      GasInt\n    to {.rlpCustomSerialization.}: EthAddress\n    value:         UInt256\n    payload:       Blob\n    mIsContractCreation {.rlpIgnore.}: bool\n\nproc read(rlp: var Rlp, t: var TransHashObj, _: type EthAddress): EthAddress {.inline.} =\n  if rlp.blobLen != 0:\n    result = rlp.read(EthAddress)\n  else:\n    t.mIsContractCreation = true\n\nproc append(rlpWriter: var RlpWriter, t: TransHashObj, a: EthAddress) {.inline.} =\n  if t.mIsContractCreation:\n    rlpWriter.append(\"\")\n  else:\n    rlpWriter.append(a)\n\nconst\n  EIP155_CHAIN_ID_OFFSET* = 35\n\nfunc rlpEncode*(transaction: Transaction): auto =\n  # Encode transaction without signature\n  return rlp.encode(TransHashObj(\n    accountNonce: transaction.accountNonce,\n    gasPrice: transaction.gasPrice,\n    gasLimit: transaction.gasLimit,\n    to: transaction.to,\n    value: transaction.value,\n    payload: transaction.payload,\n    mIsContractCreation: transaction.isContractCreation\n    ))\n\nfunc rlpEncodeEIP155*(tx: Transaction): auto =\n  let V = (tx.V.int - EIP155_CHAIN_ID_OFFSET) div 2\n  # Encode transaction without signature\n  return rlp.encode(Transaction(\n    accountNonce: tx.accountNonce,\n    gasPrice: tx.gasPrice,\n    gasLimit: tx.gasLimit,\n    to: tx.to,\n    value: tx.value,\n    payload: tx.payload,\n    isContractCreation: tx.isContractCreation,\n    V: V.byte,\n    R: 0.u256,\n    S: 0.u256\n    ))\n\nfunc txHashNoSignature*(tx: Transaction): Hash256 =\n  # Hash transaction without signature\n  return keccak256.digest(if tx.V.int >= EIP155_CHAIN_ID_OFFSET: tx.rlpEncodeEIP155 else: tx.rlpEncode)\n```\n\n*Note* - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.\n\n\n[Status' Eth Common Library](https://github.com/status-im/nim-eth/) contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:\n\n - [Recursive Length Prefix encoding (RLP)](https://github.com/status-im/nim-eth/blob/master/doc/rlp.md),\n - [P2P](https://github.com/status-im/nim-eth/blob/master/doc/p2p.md),\n - [Eth-keys](https://github.com/status-im/nim-eth/blob/master/doc/keys.md),\n - [Eth-keyfile](https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md),\n - [Ethereum Trie structure](https://github.com/status-im/nim-eth/blob/master/doc/trie.md), and\n - [Ethereum Bloom Filter](https://github.com/status-im/nim-eth/blob/master/doc/bloom.md).\n\nIf you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status & the [Nimbus](https://nimbus.team) team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!\n\n\n## Conclusion\n\nOur hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.\n\nRealistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be **Crystal**.  This is simply because of the *much* larger ecosystem and resources surrounding it.\n\nHowever, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you'd inevitably choose **Nim**.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.\n\nAlas, this brings me on to my final points...\n\n\n## Series Conclusion\n\nIt's funny – each article in this series, I've started by saying to myself \"Right, Nim is going to win.\" And then half way through; changing my story to \"Crystal is my choice, actually.\"\n\nBut then I went and spoiled it all, by saying something stupid like \"Cryptocurrency\".\n\nPrior to this article, I *was swaying* towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up *extremely* impressive interoperability, awesome inbuilt tooling, and great efficiency overall.\n\nI hate to do this, but I'm just going to have to say it:  for your usecase – **pick the best tool for the job**. Please ensure that you research properly into both languages, and weigh-up the pro's/con's that pertain to your specific usecase.\n\n***Cliches aside*** – if I had to pick a favourite overall language, it would have to be **Crystal**.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I **much** prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!\n\nSo, to answer the epic question – Crystal vs Nim?\n\nPersonally, I choose Crystal.  But I think **you** should choose ***Nim.*** 😅\n\n[ **- @rbin**](https://twitter.com/rbin)\n","source":"_posts/2019-11-28-nim-vs-crystal-part-3-cryto-dapps-p2p.md","raw":"title: Nim vs Crystal - Part 3 - Crypto, DApps & P2P\nsummary: \"Crystal and Nim go head-to-head to figure out the best modern, low-level programming language!  In part 3; Crypto, P2P & DApps are explored.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/nim-crystal-header_blank.jpg'\n---\n\n![crystal vs nim](/assets/images/nim-crystal-header-img_NEW.jpg)\n\nWelcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in [article #1](/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/) I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests ***did*** throw up some unexpected twists in the plot.  Crystal used *very-nearly* half of the memory amount executing the tests when compared to Nim, and also took *very nearly* half of the execution time in doing so.  **This seriously took me by surprise!**\n\nIn [article #2](/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/); I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they're just the high-level tools that I look for...\n\nFrom a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just *markedly* improve our application performance, but that are also relatively simple, and intuitive to use.  I see *this* as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love \\*cough* ***Ruby*** \\*cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress...\n\nI regret to say that this is the final article in this series!  It's been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it's going to be a good one!  We're going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:\n\n***Let's dive on in!***\n\n## Cryptocurrency\n\nFirstly, I'd like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have ***proven to be two of the strongest languages*** to consider for the undertaking..  (That being the *next* blog series I'm going to write – in the near future, so deciding which language to use will be heavily influenced by ***this*** blog series!)\n\nFor our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a ***very*** tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be **ONE HELL** of an impressive piece of technology.\n\nHappily, both Crystal *and* Nim allow us ***all*** of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining *and* hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.\n\nAs I'd like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we'd require for our Crypto app:\n\n\n### Calculating our Block Hashes\n\nWhen building our Blockchain; we need to consider how we're going to identify and chain our transaction blocks together (blockchain).  Without going into details in *this* article on how blockchains function, we'll stick with the existing, and proven, SHA256 algorithm.\n\n\n### In Crystal:\n\n``` crystal\nrequire \"json\"\nrequire \"openssl\"\n\nmodule OurCryptoApp::Model\n  struct Transaction\n    include JSON::Serializable\n\n    alias TxnHash = String\n\n    property from : String\n    property to : String\n    property amount : Float32\n    getter hash : TxnHash\n    getter timestamp : Int64\n\n    def initialize(@from, @to, @amount)\n      @timestamp = Time.utc_now.to_unix\n      @hash = calc_hash\n    end\n\n    private def calc_hash : TxnHash\n      sha = OpenSSL::Digest.new(\"SHA256\")\n      sha.update(\"#{@from}#{@to}#{@amount}#{@timestamp}\")\n      sha.hexdigest\n    end\n  end\nend\n```\n\n\n### In Nim:\n\nIf we want to generate a similar hash in Nim, we could run the following:\n\n``` nim\nimport strutils\n\nconst SHA256Len = 32\n\nproc SHA256(d: cstring, n: culong, md: cstring = nil): cstring {.cdecl, dynlib: \"libssl.so\", importc.}\n\nproc SHA256(s: string): string =\n  result = \"\"\n  let s = SHA256(s.cstring, s.len.culong)\n  for i in 0 .. < SHA256Len:\n    result.add s[i].BiggestInt.toHex(2).toLower\n\necho SHA256(\"Hash this block, yo\")\n```\n\n\n## Releasing our Crypto App\n\nAnother serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are *compiled* languages, we're already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)\n\nIt pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using [React Native](https://facebook.github.io/react-native/).\n\nHowever, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:\n\n - [Ionic Framework](http://ionicframework.com/)\n - [Flutter](https://flutter.io/)\n - [NativeScript](https://www.nativescript.org/)\n\nAnd if you come from a Windows background:\n\n - [Xamarin](https://dotnet.microsoft.com/apps/xamarin)\n\n\n### Building & Releasing In Nim:\n\nIf we wanted to build out and release our app for Android, we can run:\n\n```\nnim c -c --cpu:arm --os:android -d:androidNDK --noMain:on\n```\n\nTo generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.\n\nSimilarly, we could run:\n\n```\nnim c -c --os:ios --noMain:on\n```\n\nTo generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.\n\n\n### Building & Releasing In Crystal:\n\nCrystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:\n\n```\ncrystal build your_program.cr --cross-compile --target \"x86_64-unknown-linux-gnu\"\n```\n\n***Worth noting:*** *Crystal doesn't offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!*\n\n## Ethereum - Building, Signing & Sending a  Transaction\n\nFor the sake of this article, in Crystal, I didn't see the need to write out a more low-level example of the below action, as it *is* so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.\n\n### In Crystal:\n\n``` crystal\nrequire \"http/client\"\n\nmodule Ethereum\n  class Transaction\n\n    # /ethereum/create/ Create - Ethereum::Transaction.create(args)\n    def self.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : EthereumToSign | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/create//?to=#{to}&from=#{from}&amount=#{amount}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      ethereumtosign = EthereumToSign.from_json response.body\n\n\n      return ethereumtosign\n    end\n\n    # /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)\n    def self.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = nil, gas_limit : UInt64? = nil) : SendStatus | ErrorMessage\n\n      headers = HTTP::Headers.new\n      if ENV[\"ONCHAIN_API_KEY\"]? != nil\n        headers.add(\"X-API-KEY\", ENV[\"ONCHAIN_API_KEY\"])\n      end\n\n      response = HTTP::Client.post \"https://onchain.io/api/ethereum/sign_and_send//?to=#{to}&from=#{from}&amount=#{amount}&r=#{r}&s=#{s}&v=#{v}&gas_price=#{gas_price}&gas_limit=#{gas_limit}\", headers: headers\n\n      return ErrorMessage.from_json response.body if response.status_code != 200\n\n      sendstatus = SendStatus.from_json response.body\n\n\n      return sendstatus\n    end\n\n  end\nend\n```\n\nThen, in our application we could simply call:\n\n``` crystal\nEthereum::Transaction.create(\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", \"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\", 80000)\n```\n\nAnd we would get a response similar to the following, ready to be signed and sent to the Ethereum network:\n\n``` json\n{\n  \"tx\": \"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\",\n  \"hash_to_sign\": \"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"\n}\n```\n\n\n## In Nim:\n\nFrom a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status' very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported `nim-eth` into our Nimble project, our Ethereum transaction can be built atop of the following protocol:\n\n``` nim\nimport\n  nim-eth/[common, rlp, keys], nimcrypto\n\nproc initTransaction*(nonce: AccountNonce, gasPrice, gasLimit: GasInt, to: EthAddress,\n  value: UInt256, payload: Blob, V: byte, R, S: UInt256, isContractCreation = false): Transaction =\n  result.accountNonce = nonce\n  result.gasPrice = gasPrice\n  result.gasLimit = gasLimit\n  result.to = to\n  result.value = value\n  result.payload = payload\n  result.V = V\n  result.R = R\n  result.S = S\n  result.isContractCreation = isContractCreation\n\ntype\n  TransHashObj = object\n    accountNonce:  AccountNonce\n    gasPrice:      GasInt\n    gasLimit:      GasInt\n    to {.rlpCustomSerialization.}: EthAddress\n    value:         UInt256\n    payload:       Blob\n    mIsContractCreation {.rlpIgnore.}: bool\n\nproc read(rlp: var Rlp, t: var TransHashObj, _: type EthAddress): EthAddress {.inline.} =\n  if rlp.blobLen != 0:\n    result = rlp.read(EthAddress)\n  else:\n    t.mIsContractCreation = true\n\nproc append(rlpWriter: var RlpWriter, t: TransHashObj, a: EthAddress) {.inline.} =\n  if t.mIsContractCreation:\n    rlpWriter.append(\"\")\n  else:\n    rlpWriter.append(a)\n\nconst\n  EIP155_CHAIN_ID_OFFSET* = 35\n\nfunc rlpEncode*(transaction: Transaction): auto =\n  # Encode transaction without signature\n  return rlp.encode(TransHashObj(\n    accountNonce: transaction.accountNonce,\n    gasPrice: transaction.gasPrice,\n    gasLimit: transaction.gasLimit,\n    to: transaction.to,\n    value: transaction.value,\n    payload: transaction.payload,\n    mIsContractCreation: transaction.isContractCreation\n    ))\n\nfunc rlpEncodeEIP155*(tx: Transaction): auto =\n  let V = (tx.V.int - EIP155_CHAIN_ID_OFFSET) div 2\n  # Encode transaction without signature\n  return rlp.encode(Transaction(\n    accountNonce: tx.accountNonce,\n    gasPrice: tx.gasPrice,\n    gasLimit: tx.gasLimit,\n    to: tx.to,\n    value: tx.value,\n    payload: tx.payload,\n    isContractCreation: tx.isContractCreation,\n    V: V.byte,\n    R: 0.u256,\n    S: 0.u256\n    ))\n\nfunc txHashNoSignature*(tx: Transaction): Hash256 =\n  # Hash transaction without signature\n  return keccak256.digest(if tx.V.int >= EIP155_CHAIN_ID_OFFSET: tx.rlpEncodeEIP155 else: tx.rlpEncode)\n```\n\n*Note* - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.\n\n\n[Status' Eth Common Library](https://github.com/status-im/nim-eth/) contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:\n\n - [Recursive Length Prefix encoding (RLP)](https://github.com/status-im/nim-eth/blob/master/doc/rlp.md),\n - [P2P](https://github.com/status-im/nim-eth/blob/master/doc/p2p.md),\n - [Eth-keys](https://github.com/status-im/nim-eth/blob/master/doc/keys.md),\n - [Eth-keyfile](https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md),\n - [Ethereum Trie structure](https://github.com/status-im/nim-eth/blob/master/doc/trie.md), and\n - [Ethereum Bloom Filter](https://github.com/status-im/nim-eth/blob/master/doc/bloom.md).\n\nIf you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status & the [Nimbus](https://nimbus.team) team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!\n\n\n## Conclusion\n\nOur hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.\n\nRealistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be **Crystal**.  This is simply because of the *much* larger ecosystem and resources surrounding it.\n\nHowever, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you'd inevitably choose **Nim**.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.\n\nAlas, this brings me on to my final points...\n\n\n## Series Conclusion\n\nIt's funny – each article in this series, I've started by saying to myself \"Right, Nim is going to win.\" And then half way through; changing my story to \"Crystal is my choice, actually.\"\n\nBut then I went and spoiled it all, by saying something stupid like \"Cryptocurrency\".\n\nPrior to this article, I *was swaying* towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up *extremely* impressive interoperability, awesome inbuilt tooling, and great efficiency overall.\n\nI hate to do this, but I'm just going to have to say it:  for your usecase – **pick the best tool for the job**. Please ensure that you research properly into both languages, and weigh-up the pro's/con's that pertain to your specific usecase.\n\n***Cliches aside*** – if I had to pick a favourite overall language, it would have to be **Crystal**.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I **much** prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!\n\nSo, to answer the epic question – Crystal vs Nim?\n\nPersonally, I choose Crystal.  But I think **you** should choose ***Nim.*** 😅\n\n[ **- @rbin**](https://twitter.com/rbin)\n","slug":"nim-vs-crystal-part-3-cryto-dapps-p2p","published":1,"date":"2019-11-28T05:00:00.000Z","updated":"2020-01-17T19:05:36.402Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3ui002r7heg90h8743t","content":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">article #1</a> I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests <strong><em>did</em></strong> throw up some unexpected twists in the plot.  Crystal used <em>very-nearly</em> half of the memory amount executing the tests when compared to Nim, and also took <em>very nearly</em> half of the execution time in doing so.  <strong>This seriously took me by surprise!</strong></p>\n<p>In <a href=\"/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/\">article #2</a>; I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they’re just the high-level tools that I look for…</p>\n<p>From a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just <em>markedly</em> improve our application performance, but that are also relatively simple, and intuitive to use.  I see <em>this</em> as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love *cough* <strong><em>Ruby</em></strong> *cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress…</p>\n<p>I regret to say that this is the final article in this series!  It’s been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it’s going to be a good one!  We’re going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:</p>\n<p><strong><em>Let’s dive on in!</em></strong></p>\n<h2 id=\"Cryptocurrency\"><a href=\"#Cryptocurrency\" class=\"headerlink\" title=\"Cryptocurrency\"></a>Cryptocurrency</h2><p>Firstly, I’d like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have <strong><em>proven to be two of the strongest languages</em></strong> to consider for the undertaking..  (That being the <em>next</em> blog series I’m going to write – in the near future, so deciding which language to use will be heavily influenced by <strong><em>this</em></strong> blog series!)</p>\n<p>For our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a <strong><em>very</em></strong> tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be <strong>ONE HELL</strong> of an impressive piece of technology.</p>\n<p>Happily, both Crystal <em>and</em> Nim allow us <strong><em>all</em></strong> of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining <em>and</em> hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.</p>\n<p>As I’d like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we’d require for our Crypto app:</p>\n<h3 id=\"Calculating-our-Block-Hashes\"><a href=\"#Calculating-our-Block-Hashes\" class=\"headerlink\" title=\"Calculating our Block Hashes\"></a>Calculating our Block Hashes</h3><p>When building our Blockchain; we need to consider how we’re going to identify and chain our transaction blocks together (blockchain).  Without going into details in <em>this</em> article on how blockchains function, we’ll stick with the existing, and proven, SHA256 algorithm.</p>\n<h3 id=\"In-Crystal\"><a href=\"#In-Crystal\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"openssl\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">OurCryptoApp::Model</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">struct</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\">    <span class=\"keyword\">include</span> <span class=\"symbol\">JSON:</span>:Serializable</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">alias</span> TxnHash = String</span><br><span class=\"line\"></span><br><span class=\"line\">    property from : String</span><br><span class=\"line\">    property to : String</span><br><span class=\"line\">    property amount : Float32</span><br><span class=\"line\">    getter hash : TxnHash</span><br><span class=\"line\">    getter timestamp : Int64</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">initialize</span></span>(@from, @to, @amount)</span><br><span class=\"line\">      @timestamp = Time.utc_now.to_unix</span><br><span class=\"line\">      @hash = calc_hash</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">private</span> <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">calc_hash</span></span> : TxnHash</span><br><span class=\"line\">      sha = <span class=\"symbol\">OpenSSL:</span>:Digest.new(<span class=\"string\">\"SHA256\"</span>)</span><br><span class=\"line\">      sha.update(<span class=\"string\">\"<span class=\"subst\">#&#123;@from&#125;</span><span class=\"subst\">#&#123;@to&#125;</span><span class=\"subst\">#&#123;@amount&#125;</span><span class=\"subst\">#&#123;@timestamp&#125;</span>\"</span>)</span><br><span class=\"line\">      sha.hexdigest</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n\n<h3 id=\"In-Nim\"><a href=\"#In-Nim\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h3><p>If we want to generate a similar hash in Nim, we could run the following:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> strutils</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"type\">SHA256Len</span> = <span class=\"number\">32</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(d: <span class=\"built_in\">cstring</span>, n: <span class=\"built_in\">culong</span>, md: <span class=\"built_in\">cstring</span> = <span class=\"keyword\">nil</span>): <span class=\"built_in\">cstring</span> <span class=\"meta\">&#123;.cdecl, dynlib: \"libssl.so\", importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(s: <span class=\"built_in\">string</span>): <span class=\"built_in\">string</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span> = <span class=\"string\">\"\"</span></span><br><span class=\"line\">  <span class=\"keyword\">let</span> s = <span class=\"type\">SHA256</span>(s.<span class=\"built_in\">cstring</span>, s.len.<span class=\"built_in\">culong</span>)</span><br><span class=\"line\">  <span class=\"keyword\">for</span> i <span class=\"keyword\">in</span> <span class=\"number\">0</span> .. &lt; <span class=\"type\">SHA256Len</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span>.add s[i].<span class=\"type\">BiggestInt</span>.toHex(<span class=\"number\">2</span>).toLower</span><br><span class=\"line\"></span><br><span class=\"line\">echo <span class=\"type\">SHA256</span>(<span class=\"string\">\"Hash this block, yo\"</span>)</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Releasing-our-Crypto-App\"><a href=\"#Releasing-our-Crypto-App\" class=\"headerlink\" title=\"Releasing our Crypto App\"></a>Releasing our Crypto App</h2><p>Another serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are <em>compiled</em> languages, we’re already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)</p>\n<p>It pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using <a href=\"https://facebook.github.io/react-native/\" target=\"_blank\" rel=\"noopener\">React Native</a>.</p>\n<p>However, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:</p>\n<ul>\n<li><a href=\"http://ionicframework.com/\" target=\"_blank\" rel=\"noopener\">Ionic Framework</a></li>\n<li><a href=\"https://flutter.io/\" target=\"_blank\" rel=\"noopener\">Flutter</a></li>\n<li><a href=\"https://www.nativescript.org/\" target=\"_blank\" rel=\"noopener\">NativeScript</a></li>\n</ul>\n<p>And if you come from a Windows background:</p>\n<ul>\n<li><a href=\"https://dotnet.microsoft.com/apps/xamarin\" target=\"_blank\" rel=\"noopener\">Xamarin</a></li>\n</ul>\n<h3 id=\"Building-amp-Releasing-In-Nim\"><a href=\"#Building-amp-Releasing-In-Nim\" class=\"headerlink\" title=\"Building &amp; Releasing In Nim:\"></a>Building &amp; Releasing In Nim:</h3><p>If we wanted to build out and release our app for Android, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --cpu:arm --os:android -d:androidNDK --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.</p>\n<p>Similarly, we could run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --os:ios --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.</p>\n<h3 id=\"Building-amp-Releasing-In-Crystal\"><a href=\"#Building-amp-Releasing-In-Crystal\" class=\"headerlink\" title=\"Building &amp; Releasing In Crystal:\"></a>Building &amp; Releasing In Crystal:</h3><p>Crystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">crystal build your_program.cr --cross-compile --target &quot;x86_64-unknown-linux-gnu&quot;</span><br></pre></td></tr></table></figure>\n\n<p><strong><em>Worth noting:</em></strong> <em>Crystal doesn’t offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!</em></p>\n<h2 id=\"Ethereum-Building-Signing-amp-Sending-a-Transaction\"><a href=\"#Ethereum-Building-Signing-amp-Sending-a-Transaction\" class=\"headerlink\" title=\"Ethereum - Building, Signing &amp; Sending a  Transaction\"></a>Ethereum - Building, Signing &amp; Sending a  Transaction</h2><p>For the sake of this article, in Crystal, I didn’t see the need to write out a more low-level example of the below action, as it <em>is</em> so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.</p>\n<h3 id=\"In-Crystal-1\"><a href=\"#In-Crystal-1\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"http/client\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">Ethereum</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/create/ Create - Ethereum::Transaction.create(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : EthereumToSign | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/create//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      ethereumtosign = EthereumToSign.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ethereumtosign</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : SendStatus | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/sign_and_send//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;r=<span class=\"subst\">#&#123;r&#125;</span>&amp;s=<span class=\"subst\">#&#123;s&#125;</span>&amp;v=<span class=\"subst\">#&#123;v&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      sendstatus = SendStatus.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> sendstatus</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n<p>Then, in our application we could simply call:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"symbol\">Ethereum:</span>:Transaction.create(<span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"number\">80000</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And we would get a response similar to the following, ready to be signed and sent to the Ethereum network:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"tx\"</span>: <span class=\"string\">\"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\"</span>,</span><br><span class=\"line\">  <span class=\"attr\">\"hash_to_sign\"</span>: <span class=\"string\">\"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"In-Nim-1\"><a href=\"#In-Nim-1\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h2><p>From a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status’ very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported <code>nim-eth</code> into our Nimble project, our Ethereum transaction can be built atop of the following protocol:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span></span><br><span class=\"line\">  nim-eth/[common, rlp, keys], nimcrypto</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> initTransaction*(nonce: <span class=\"type\">AccountNonce</span>, gasPrice, gasLimit: <span class=\"type\">GasInt</span>, to: <span class=\"type\">EthAddress</span>,</span><br><span class=\"line\">  value: <span class=\"type\">UInt256</span>, payload: <span class=\"type\">Blob</span>, V: byte, R, S: <span class=\"type\">UInt256</span>, isContractCreation = <span class=\"literal\">false</span>): <span class=\"type\">Transaction</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span>.accountNonce = nonce</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasPrice = gasPrice</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasLimit = gasLimit</span><br><span class=\"line\">  <span class=\"literal\">result</span>.to = to</span><br><span class=\"line\">  <span class=\"literal\">result</span>.value = value</span><br><span class=\"line\">  <span class=\"literal\">result</span>.payload = payload</span><br><span class=\"line\">  <span class=\"literal\">result</span>.V = V</span><br><span class=\"line\">  <span class=\"literal\">result</span>.R = R</span><br><span class=\"line\">  <span class=\"literal\">result</span>.S = S</span><br><span class=\"line\">  <span class=\"literal\">result</span>.isContractCreation = isContractCreation</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">type</span></span><br><span class=\"line\">  <span class=\"type\">TransHashObj</span> = <span class=\"keyword\">object</span></span><br><span class=\"line\">    accountNonce:  <span class=\"type\">AccountNonce</span></span><br><span class=\"line\">    gasPrice:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    gasLimit:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    to <span class=\"meta\">&#123;.rlpCustomSerialization.&#125;</span>: <span class=\"type\">EthAddress</span></span><br><span class=\"line\">    value:         <span class=\"type\">UInt256</span></span><br><span class=\"line\">    payload:       <span class=\"type\">Blob</span></span><br><span class=\"line\">    mIsContractCreation <span class=\"meta\">&#123;.rlpIgnore.&#125;</span>: <span class=\"built_in\">bool</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> read(rlp: <span class=\"keyword\">var</span> <span class=\"type\">Rlp</span>, t: <span class=\"keyword\">var</span> <span class=\"type\">TransHashObj</span>, _: <span class=\"keyword\">type</span> <span class=\"type\">EthAddress</span>): <span class=\"type\">EthAddress</span> <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> rlp.blobLen != <span class=\"number\">0</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span> = rlp.read(<span class=\"type\">EthAddress</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    t.mIsContractCreation = <span class=\"literal\">true</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> append(rlpWriter: <span class=\"keyword\">var</span> <span class=\"type\">RlpWriter</span>, t: <span class=\"type\">TransHashObj</span>, a: <span class=\"type\">EthAddress</span>) <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> t.mIsContractCreation:</span><br><span class=\"line\">    rlpWriter.append(<span class=\"string\">\"\"</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    rlpWriter.append(a)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span></span><br><span class=\"line\">  <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>* = <span class=\"number\">35</span></span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncode*(transaction: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">TransHashObj</span>(</span><br><span class=\"line\">    accountNonce: transaction.accountNonce,</span><br><span class=\"line\">    gasPrice: transaction.gasPrice,</span><br><span class=\"line\">    gasLimit: transaction.gasLimit,</span><br><span class=\"line\">    to: transaction.to,</span><br><span class=\"line\">    value: transaction.value,</span><br><span class=\"line\">    payload: transaction.payload,</span><br><span class=\"line\">    mIsContractCreation: transaction.isContractCreation</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncodeEIP155*(tx: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"keyword\">let</span> V = (tx.V.<span class=\"built_in\">int</span> - <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>) <span class=\"keyword\">div</span> <span class=\"number\">2</span></span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">Transaction</span>(</span><br><span class=\"line\">    accountNonce: tx.accountNonce,</span><br><span class=\"line\">    gasPrice: tx.gasPrice,</span><br><span class=\"line\">    gasLimit: tx.gasLimit,</span><br><span class=\"line\">    to: tx.to,</span><br><span class=\"line\">    value: tx.value,</span><br><span class=\"line\">    payload: tx.payload,</span><br><span class=\"line\">    isContractCreation: tx.isContractCreation,</span><br><span class=\"line\">    V: V.byte,</span><br><span class=\"line\">    R: <span class=\"number\">0</span>.u256,</span><br><span class=\"line\">    S: <span class=\"number\">0</span>.u256</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func txHashNoSignature*(tx: <span class=\"type\">Transaction</span>): <span class=\"type\">Hash256</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Hash transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> keccak256.digest(<span class=\"keyword\">if</span> tx.V.<span class=\"built_in\">int</span> &gt;= <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>: tx.rlpEncodeEIP155 <span class=\"keyword\">else</span>: tx.rlpEncode)</span><br></pre></td></tr></table></figure>\n\n<p><em>Note</em> - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.</p>\n<p><a href=\"https://github.com/status-im/nim-eth/\" target=\"_blank\" rel=\"noopener\">Status’ Eth Common Library</a> contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:</p>\n<ul>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/rlp.md\" target=\"_blank\" rel=\"noopener\">Recursive Length Prefix encoding (RLP)</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/p2p.md\" target=\"_blank\" rel=\"noopener\">P2P</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keys.md\" target=\"_blank\" rel=\"noopener\">Eth-keys</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md\" target=\"_blank\" rel=\"noopener\">Eth-keyfile</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/trie.md\" target=\"_blank\" rel=\"noopener\">Ethereum Trie structure</a>, and</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/bloom.md\" target=\"_blank\" rel=\"noopener\">Ethereum Bloom Filter</a>.</li>\n</ul>\n<p>If you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status &amp; the <a href=\"https://nimbus.team\" target=\"_blank\" rel=\"noopener\">Nimbus</a> team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Our hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.</p>\n<p>Realistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be <strong>Crystal</strong>.  This is simply because of the <em>much</em> larger ecosystem and resources surrounding it.</p>\n<p>However, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you’d inevitably choose <strong>Nim</strong>.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.</p>\n<p>Alas, this brings me on to my final points…</p>\n<h2 id=\"Series-Conclusion\"><a href=\"#Series-Conclusion\" class=\"headerlink\" title=\"Series Conclusion\"></a>Series Conclusion</h2><p>It’s funny – each article in this series, I’ve started by saying to myself “Right, Nim is going to win.” And then half way through; changing my story to “Crystal is my choice, actually.”</p>\n<p>But then I went and spoiled it all, by saying something stupid like “Cryptocurrency”.</p>\n<p>Prior to this article, I <em>was swaying</em> towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up <em>extremely</em> impressive interoperability, awesome inbuilt tooling, and great efficiency overall.</p>\n<p>I hate to do this, but I’m just going to have to say it:  for your usecase – <strong>pick the best tool for the job</strong>. Please ensure that you research properly into both languages, and weigh-up the pro’s/con’s that pertain to your specific usecase.</p>\n<p><strong><em>Cliches aside</em></strong> – if I had to pick a favourite overall language, it would have to be <strong>Crystal</strong>.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I <strong>much</strong> prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!</p>\n<p>So, to answer the epic question – Crystal vs Nim?</p>\n<p>Personally, I choose Crystal.  But I think <strong>you</strong> should choose <strong><em>Nim.</em></strong> 😅</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/nim-crystal-header-img_NEW.jpg\" alt=\"crystal vs nim\"></p>\n<p>Welcome back to my series comparing the two sweethearts of the modern low-level programming world.  Just to quickly recap: in <a href=\"/news/2019/11/18/nim-vs-crystal-part-1-performance-interoperability/\">article #1</a> I noted my thoughts on the interoperability capabilities of the two languages, alongside briefly reviewing the performance metrics for each (albeit with relatively simple tests).  Whether simple or not, the tests <strong><em>did</em></strong> throw up some unexpected twists in the plot.  Crystal used <em>very-nearly</em> half of the memory amount executing the tests when compared to Nim, and also took <em>very nearly</em> half of the execution time in doing so.  <strong>This seriously took me by surprise!</strong></p>\n<p>In <a href=\"/news/2019/11/21/nim-vs-crystal-part-2-threading-tooling/\">article #2</a>; I looked at the Concurrency primitives of each language, and explored both the in-built tooling, and external package ecosystems surrounding each language.  As I said in that article, one of the biggest factors I look at when considering adopting a new language; is its tooling ecosystem.  This includes, but is not limited to:  A comprehensive package manager, an intuitive testing suite, a good project scaffolder, and an in-built formatter/linter to ensure my code stays semantically correct – especially if I know I will be working in Open Source repos that others will contribute to.  But they’re just the high-level tools that I look for…</p>\n<p>From a low-level standpoint; I look for efficient use of technology in features such as in-memory storage, caching, garbage collection, and concurrency primitives that not just <em>markedly</em> improve our application performance, but that are also relatively simple, and intuitive to use.  I see <em>this</em> as particularly important as I have, in my past, seen some truly shocking examples of trying to handle multi-threading, from languages that I love *cough* <strong><em>Ruby</em></strong> *cough*. I also like to see a fully-featured standard library that takes influence from previous successful languages.  However, I digress…</p>\n<p>I regret to say that this is the final article in this series!  It’s been good fun for me; getting to the know the ins-and-outs of Nim, and to re-grow a fresh appreciation of Crystal, having put it on the back-burner for quite some time.  However,  whether the final article in the series or not, it’s going to be a good one!  We’re going to be covering the benefits to the Cryptocurrency / DApp industries from both Crystal and Nim.  So without further ado:</p>\n<p><strong><em>Let’s dive on in!</em></strong></p>\n<h2 id=\"Cryptocurrency\"><a href=\"#Cryptocurrency\" class=\"headerlink\" title=\"Cryptocurrency\"></a>Cryptocurrency</h2><p>Firstly, I’d like to talk about the possibility of using either Crystal or Nim,  (or both!) in the development of crypto apps. Hypothetically; if we had the inclination to build out our own Cryptocurrency:   Crystal and Nim have <strong><em>proven to be two of the strongest languages</em></strong> to consider for the undertaking..  (That being the <em>next</em> blog series I’m going to write – in the near future, so deciding which language to use will be heavily influenced by <strong><em>this</em></strong> blog series!)</p>\n<p>For our Cryptocurrency, we would need to be able to use an intelligent key manager, utilise smart hashing algorithms, maintain strong performance, and all of this atop of a distributed, decentralised virtual machine or blockchain.  Now, all of this sounds like a <strong><em>very</em></strong> tall order!  For all of these feature requirements to be met by a single programming language, it would mean that this language is going to have to be <strong>ONE HELL</strong> of an impressive piece of technology.</p>\n<p>Happily, both Crystal <em>and</em> Nim allow us <strong><em>all</em></strong> of the above functionality.  In our hypothetical usecase, if we were to build out a fully-featured blockchain; mining <em>and</em> hashing functions would need to be continually made, both of which entail relatively heavy computations.  As shown over the last 2 articles in the series, we can at least be sure that both langs can handle the performance stresses, no problemo.</p>\n<p>As I’d like to write this topic out into a further detailed article series, I will show off just 2 of the above pieces of functionality we’d require for our Crypto app:</p>\n<h3 id=\"Calculating-our-Block-Hashes\"><a href=\"#Calculating-our-Block-Hashes\" class=\"headerlink\" title=\"Calculating our Block Hashes\"></a>Calculating our Block Hashes</h3><p>When building our Blockchain; we need to consider how we’re going to identify and chain our transaction blocks together (blockchain).  Without going into details in <em>this</em> article on how blockchains function, we’ll stick with the existing, and proven, SHA256 algorithm.</p>\n<h3 id=\"In-Crystal\"><a href=\"#In-Crystal\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"json\"</span></span><br><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"openssl\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">OurCryptoApp::Model</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">struct</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\">    <span class=\"keyword\">include</span> <span class=\"symbol\">JSON:</span>:Serializable</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">alias</span> TxnHash = String</span><br><span class=\"line\"></span><br><span class=\"line\">    property from : String</span><br><span class=\"line\">    property to : String</span><br><span class=\"line\">    property amount : Float32</span><br><span class=\"line\">    getter hash : TxnHash</span><br><span class=\"line\">    getter timestamp : Int64</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">initialize</span></span>(@from, @to, @amount)</span><br><span class=\"line\">      @timestamp = Time.utc_now.to_unix</span><br><span class=\"line\">      @hash = calc_hash</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">private</span> <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">calc_hash</span></span> : TxnHash</span><br><span class=\"line\">      sha = <span class=\"symbol\">OpenSSL:</span>:Digest.new(<span class=\"string\">\"SHA256\"</span>)</span><br><span class=\"line\">      sha.update(<span class=\"string\">\"<span class=\"subst\">#&#123;@from&#125;</span><span class=\"subst\">#&#123;@to&#125;</span><span class=\"subst\">#&#123;@amount&#125;</span><span class=\"subst\">#&#123;@timestamp&#125;</span>\"</span>)</span><br><span class=\"line\">      sha.hexdigest</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n\n<h3 id=\"In-Nim\"><a href=\"#In-Nim\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h3><p>If we want to generate a similar hash in Nim, we could run the following:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> strutils</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"type\">SHA256Len</span> = <span class=\"number\">32</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(d: <span class=\"built_in\">cstring</span>, n: <span class=\"built_in\">culong</span>, md: <span class=\"built_in\">cstring</span> = <span class=\"keyword\">nil</span>): <span class=\"built_in\">cstring</span> <span class=\"meta\">&#123;.cdecl, dynlib: \"libssl.so\", importc.&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> <span class=\"type\">SHA256</span>(s: <span class=\"built_in\">string</span>): <span class=\"built_in\">string</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span> = <span class=\"string\">\"\"</span></span><br><span class=\"line\">  <span class=\"keyword\">let</span> s = <span class=\"type\">SHA256</span>(s.<span class=\"built_in\">cstring</span>, s.len.<span class=\"built_in\">culong</span>)</span><br><span class=\"line\">  <span class=\"keyword\">for</span> i <span class=\"keyword\">in</span> <span class=\"number\">0</span> .. &lt; <span class=\"type\">SHA256Len</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span>.add s[i].<span class=\"type\">BiggestInt</span>.toHex(<span class=\"number\">2</span>).toLower</span><br><span class=\"line\"></span><br><span class=\"line\">echo <span class=\"type\">SHA256</span>(<span class=\"string\">\"Hash this block, yo\"</span>)</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Releasing-our-Crypto-App\"><a href=\"#Releasing-our-Crypto-App\" class=\"headerlink\" title=\"Releasing our Crypto App\"></a>Releasing our Crypto App</h2><p>Another serious factor we have to consider, is the ability to distribute our crypto app, once built, with great ease.  Remembering that both Crystal and Nim are <em>compiled</em> languages, we’re already off to a promising start.  (A single executable binary is always going to be easier to distribute than something requiring its own specialist environment!)</p>\n<p>It pays rather large dividends being able to write our Crypto app just once, and having the ability to maintain one singular code repo for that app. To this end – I think it is definitely worth considering a multi-platform app framework.  I already know that in my next article series, I will be exploring building a Crypto app using <a href=\"https://facebook.github.io/react-native/\" target=\"_blank\" rel=\"noopener\">React Native</a>.</p>\n<p>However, if you wish to build the frontend of your cross-platform crypto app in something else, there are a variety of technologies available - all of which seem to work well with both Crystal and Nim:</p>\n<ul>\n<li><a href=\"http://ionicframework.com/\" target=\"_blank\" rel=\"noopener\">Ionic Framework</a></li>\n<li><a href=\"https://flutter.io/\" target=\"_blank\" rel=\"noopener\">Flutter</a></li>\n<li><a href=\"https://www.nativescript.org/\" target=\"_blank\" rel=\"noopener\">NativeScript</a></li>\n</ul>\n<p>And if you come from a Windows background:</p>\n<ul>\n<li><a href=\"https://dotnet.microsoft.com/apps/xamarin\" target=\"_blank\" rel=\"noopener\">Xamarin</a></li>\n</ul>\n<h3 id=\"Building-amp-Releasing-In-Nim\"><a href=\"#Building-amp-Releasing-In-Nim\" class=\"headerlink\" title=\"Building &amp; Releasing In Nim:\"></a>Building &amp; Releasing In Nim:</h3><p>If we wanted to build out and release our app for Android, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --cpu:arm --os:android -d:androidNDK --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate the C source files we need to include in our Android Studio project.  We then simply add the generated C files to our CMake build script in our Android project.</p>\n<p>Similarly, we could run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">nim c -c --os:ios --noMain:on</span><br></pre></td></tr></table></figure>\n\n<p>To generate C files to include in our XCode project. Then, we can use XCode to compile, link, package and sign everything.</p>\n<h3 id=\"Building-amp-Releasing-In-Crystal\"><a href=\"#Building-amp-Releasing-In-Crystal\" class=\"headerlink\" title=\"Building &amp; Releasing In Crystal:\"></a>Building &amp; Releasing In Crystal:</h3><p>Crystal also allows for cross-compilation, and makes it just as easy.  For example, to build our app for Linux distributions from our Mac, we can run:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">crystal build your_program.cr --cross-compile --target &quot;x86_64-unknown-linux-gnu&quot;</span><br></pre></td></tr></table></figure>\n\n<p><strong><em>Worth noting:</em></strong> <em>Crystal doesn’t offer the out-of-the-box iPhone / Android cross-compilation functionality that Nim does, so building our app in Nim gets a definite thumbs-up from a distribution point-of-view!</em></p>\n<h2 id=\"Ethereum-Building-Signing-amp-Sending-a-Transaction\"><a href=\"#Ethereum-Building-Signing-amp-Sending-a-Transaction\" class=\"headerlink\" title=\"Ethereum - Building, Signing &amp; Sending a  Transaction\"></a>Ethereum - Building, Signing &amp; Sending a  Transaction</h2><p>For the sake of this article, in Crystal, I didn’t see the need to write out a more low-level example of the below action, as it <em>is</em> so similar to the Nim demo that follows.  This actually worked out in my favour, as it means I get to further show off the native HTTP library for Crystal.</p>\n<h3 id=\"In-Crystal-1\"><a href=\"#In-Crystal-1\" class=\"headerlink\" title=\"In Crystal:\"></a>In Crystal:</h3><figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">require</span> <span class=\"string\">\"http/client\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">module</span> <span class=\"title\">Ethereum</span></span></span><br><span class=\"line\">  <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">Transaction</span></span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/create/ Create - Ethereum::Transaction.create(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.create(to : String, from : String, amount : UInt64, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : EthereumToSign | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/create//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      ethereumtosign = EthereumToSign.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ethereumtosign</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"comment\"># /ethereum/sign_and_send/ Sign and send - Ethereum::Transaction.sign_and_send(args)</span></span><br><span class=\"line\">    <span class=\"function\"><span class=\"keyword\">def</span> <span class=\"title\">self</span></span>.sign_and_send(to : String, from : String, amount : UInt64, r : String, s : String, v : String, gas_price : UInt64? = <span class=\"literal\">nil</span>, gas_limit : UInt64? = <span class=\"literal\">nil</span>) : SendStatus | ErrorMessage</span><br><span class=\"line\"></span><br><span class=\"line\">      headers = <span class=\"symbol\">HTTP:</span>:Headers.new</span><br><span class=\"line\">      <span class=\"keyword\">if</span> ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>]? != <span class=\"literal\">nil</span></span><br><span class=\"line\">        headers.add(<span class=\"string\">\"X-API-KEY\"</span>, ENV[<span class=\"string\">\"ONCHAIN_API_KEY\"</span>])</span><br><span class=\"line\">      <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">      response = <span class=\"symbol\">HTTP:</span>:Client.post <span class=\"string\">\"https://onchain.io/api/ethereum/sign_and_send//?to=<span class=\"subst\">#&#123;to&#125;</span>&amp;from=<span class=\"subst\">#&#123;from&#125;</span>&amp;amount=<span class=\"subst\">#&#123;amount&#125;</span>&amp;r=<span class=\"subst\">#&#123;r&#125;</span>&amp;s=<span class=\"subst\">#&#123;s&#125;</span>&amp;v=<span class=\"subst\">#&#123;v&#125;</span>&amp;gas_price=<span class=\"subst\">#&#123;gas_price&#125;</span>&amp;gas_limit=<span class=\"subst\">#&#123;gas_limit&#125;</span>\"</span>, <span class=\"symbol\">headers:</span> headers</span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> ErrorMessage.from_json response.body <span class=\"keyword\">if</span> response.status_code != <span class=\"number\">200</span></span><br><span class=\"line\"></span><br><span class=\"line\">      sendstatus = SendStatus.from_json response.body</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">      <span class=\"keyword\">return</span> sendstatus</span><br><span class=\"line\">    <span class=\"keyword\">end</span></span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">end</span></span><br><span class=\"line\"><span class=\"keyword\">end</span></span><br></pre></td></tr></table></figure>\n\n<p>Then, in our application we could simply call:</p>\n<figure class=\"highlight crystal\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"symbol\">Ethereum:</span>:Transaction.create(<span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"string\">\"0xA02378cA1c24767eCD776aAFeC02158a30dc01ac\"</span>, <span class=\"number\">80000</span>)</span><br></pre></td></tr></table></figure>\n\n<p>And we would get a response similar to the following, ready to be signed and sent to the Ethereum network:</p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">\"tx\"</span>: <span class=\"string\">\"02000000011cd5d7621e2a7c9403e54e089cb0b5430b83ed13f1b897d3e319b100ba1b059b01000000db00483045022100d7534c80bc0a42addc3d955f74e31610aa78bf15d79ec4df4c36dc98e802f5200220369cab1bccb2dbca0921444ce3fafb15129fa0494d041998be104df39b8895ec01483045022100fe48c4c1d46e163acaff6b0d2e702812d20\"</span>,</span><br><span class=\"line\">  <span class=\"attr\">\"hash_to_sign\"</span>: <span class=\"string\">\"955f74e31610aa78bf15d79ec4df4c36dc98e802f52002\"</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"In-Nim-1\"><a href=\"#In-Nim-1\" class=\"headerlink\" title=\"In Nim:\"></a>In Nim:</h2><p>From a deeper, more low-level perspective; instead of using an HTTP library as in the Crystal example above, we can use Status’ very own Nim-Ethereum library to build our Ethereum transaction.  Assuming we have imported <code>nim-eth</code> into our Nimble project, our Ethereum transaction can be built atop of the following protocol:</p>\n<figure class=\"highlight nim\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span></span><br><span class=\"line\">  nim-eth/[common, rlp, keys], nimcrypto</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> initTransaction*(nonce: <span class=\"type\">AccountNonce</span>, gasPrice, gasLimit: <span class=\"type\">GasInt</span>, to: <span class=\"type\">EthAddress</span>,</span><br><span class=\"line\">  value: <span class=\"type\">UInt256</span>, payload: <span class=\"type\">Blob</span>, V: byte, R, S: <span class=\"type\">UInt256</span>, isContractCreation = <span class=\"literal\">false</span>): <span class=\"type\">Transaction</span> =</span><br><span class=\"line\">  <span class=\"literal\">result</span>.accountNonce = nonce</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasPrice = gasPrice</span><br><span class=\"line\">  <span class=\"literal\">result</span>.gasLimit = gasLimit</span><br><span class=\"line\">  <span class=\"literal\">result</span>.to = to</span><br><span class=\"line\">  <span class=\"literal\">result</span>.value = value</span><br><span class=\"line\">  <span class=\"literal\">result</span>.payload = payload</span><br><span class=\"line\">  <span class=\"literal\">result</span>.V = V</span><br><span class=\"line\">  <span class=\"literal\">result</span>.R = R</span><br><span class=\"line\">  <span class=\"literal\">result</span>.S = S</span><br><span class=\"line\">  <span class=\"literal\">result</span>.isContractCreation = isContractCreation</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">type</span></span><br><span class=\"line\">  <span class=\"type\">TransHashObj</span> = <span class=\"keyword\">object</span></span><br><span class=\"line\">    accountNonce:  <span class=\"type\">AccountNonce</span></span><br><span class=\"line\">    gasPrice:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    gasLimit:      <span class=\"type\">GasInt</span></span><br><span class=\"line\">    to <span class=\"meta\">&#123;.rlpCustomSerialization.&#125;</span>: <span class=\"type\">EthAddress</span></span><br><span class=\"line\">    value:         <span class=\"type\">UInt256</span></span><br><span class=\"line\">    payload:       <span class=\"type\">Blob</span></span><br><span class=\"line\">    mIsContractCreation <span class=\"meta\">&#123;.rlpIgnore.&#125;</span>: <span class=\"built_in\">bool</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> read(rlp: <span class=\"keyword\">var</span> <span class=\"type\">Rlp</span>, t: <span class=\"keyword\">var</span> <span class=\"type\">TransHashObj</span>, _: <span class=\"keyword\">type</span> <span class=\"type\">EthAddress</span>): <span class=\"type\">EthAddress</span> <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> rlp.blobLen != <span class=\"number\">0</span>:</span><br><span class=\"line\">    <span class=\"literal\">result</span> = rlp.read(<span class=\"type\">EthAddress</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    t.mIsContractCreation = <span class=\"literal\">true</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">proc</span> append(rlpWriter: <span class=\"keyword\">var</span> <span class=\"type\">RlpWriter</span>, t: <span class=\"type\">TransHashObj</span>, a: <span class=\"type\">EthAddress</span>) <span class=\"meta\">&#123;.inline.&#125;</span> =</span><br><span class=\"line\">  <span class=\"keyword\">if</span> t.mIsContractCreation:</span><br><span class=\"line\">    rlpWriter.append(<span class=\"string\">\"\"</span>)</span><br><span class=\"line\">  <span class=\"keyword\">else</span>:</span><br><span class=\"line\">    rlpWriter.append(a)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span></span><br><span class=\"line\">  <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>* = <span class=\"number\">35</span></span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncode*(transaction: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">TransHashObj</span>(</span><br><span class=\"line\">    accountNonce: transaction.accountNonce,</span><br><span class=\"line\">    gasPrice: transaction.gasPrice,</span><br><span class=\"line\">    gasLimit: transaction.gasLimit,</span><br><span class=\"line\">    to: transaction.to,</span><br><span class=\"line\">    value: transaction.value,</span><br><span class=\"line\">    payload: transaction.payload,</span><br><span class=\"line\">    mIsContractCreation: transaction.isContractCreation</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func rlpEncodeEIP155*(tx: <span class=\"type\">Transaction</span>): <span class=\"built_in\">auto</span> =</span><br><span class=\"line\">  <span class=\"keyword\">let</span> V = (tx.V.<span class=\"built_in\">int</span> - <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>) <span class=\"keyword\">div</span> <span class=\"number\">2</span></span><br><span class=\"line\">  <span class=\"comment\"># Encode transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> rlp.encode(<span class=\"type\">Transaction</span>(</span><br><span class=\"line\">    accountNonce: tx.accountNonce,</span><br><span class=\"line\">    gasPrice: tx.gasPrice,</span><br><span class=\"line\">    gasLimit: tx.gasLimit,</span><br><span class=\"line\">    to: tx.to,</span><br><span class=\"line\">    value: tx.value,</span><br><span class=\"line\">    payload: tx.payload,</span><br><span class=\"line\">    isContractCreation: tx.isContractCreation,</span><br><span class=\"line\">    V: V.byte,</span><br><span class=\"line\">    R: <span class=\"number\">0</span>.u256,</span><br><span class=\"line\">    S: <span class=\"number\">0</span>.u256</span><br><span class=\"line\">    ))</span><br><span class=\"line\"></span><br><span class=\"line\">func txHashNoSignature*(tx: <span class=\"type\">Transaction</span>): <span class=\"type\">Hash256</span> =</span><br><span class=\"line\">  <span class=\"comment\"># Hash transaction without signature</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> keccak256.digest(<span class=\"keyword\">if</span> tx.V.<span class=\"built_in\">int</span> &gt;= <span class=\"type\">EIP155_CHAIN_ID_OFFSET</span>: tx.rlpEncodeEIP155 <span class=\"keyword\">else</span>: tx.rlpEncode)</span><br></pre></td></tr></table></figure>\n\n<p><em>Note</em> - I do realise the above Nim code example and the Crystal examples are different - I fully intended them to be.  The Crystal example allowed me to further show off the HTTP library I touched on in the last article, and the Nim example allowed me to go to a lower-level; something I think brings the article relevancy full circle.</p>\n<p><a href=\"https://github.com/status-im/nim-eth/\" target=\"_blank\" rel=\"noopener\">Status’ Eth Common Library</a> contains a whole bunch of useful Nim libraries for interacting with the Ethereum Network, including:</p>\n<ul>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/rlp.md\" target=\"_blank\" rel=\"noopener\">Recursive Length Prefix encoding (RLP)</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/p2p.md\" target=\"_blank\" rel=\"noopener\">P2P</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keys.md\" target=\"_blank\" rel=\"noopener\">Eth-keys</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/keyfile.md\" target=\"_blank\" rel=\"noopener\">Eth-keyfile</a>,</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/trie.md\" target=\"_blank\" rel=\"noopener\">Ethereum Trie structure</a>, and</li>\n<li><a href=\"https://github.com/status-im/nim-eth/blob/master/doc/bloom.md\" target=\"_blank\" rel=\"noopener\">Ethereum Bloom Filter</a>.</li>\n</ul>\n<p>If you are going to be working in the Ethereum ecosystem using Nim, it goes without saying that these utilities are absolutely essential.  With Status &amp; the <a href=\"https://nimbus.team\" target=\"_blank\" rel=\"noopener\">Nimbus</a> team being such early adopters and major contributors to the Nim/Crypto universe, you are more than likely to stumble across this code sooner or later!</p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Our hypothetical Crypto app has taken shape throughout this article, and I think both languages have shown off great promise, and have proven their respective abilities to power the Cryptocurrency universe.</p>\n<p>Realistically, if you were a brand-new developer looking to learn a language to break into the Crypto scene, the choice would almost definitely be <strong>Crystal</strong>.  This is simply because of the <em>much</em> larger ecosystem and resources surrounding it.</p>\n<p>However, if you were an already-established developer, looking to build out a crypto app that you could develop and multi-platform release with greater ease, you’d inevitably choose <strong>Nim</strong>.  Crystal not only lacks the ability to be developed properly on Windows, but also lacks the interoperability and multi-release functionality, as we have seen, with Nim.</p>\n<p>Alas, this brings me on to my final points…</p>\n<h2 id=\"Series-Conclusion\"><a href=\"#Series-Conclusion\" class=\"headerlink\" title=\"Series Conclusion\"></a>Series Conclusion</h2><p>It’s funny – each article in this series, I’ve started by saying to myself “Right, Nim is going to win.” And then half way through; changing my story to “Crystal is my choice, actually.”</p>\n<p>But then I went and spoiled it all, by saying something stupid like “Cryptocurrency”.</p>\n<p>Prior to this article, I <em>was swaying</em> towards settling on Crystal.  Not only did it impress in performance, but also seemed to have an enthusiastic ecosystem building around it.  Nim, however, refused to go down without a fight –  offering up <em>extremely</em> impressive interoperability, awesome inbuilt tooling, and great efficiency overall.</p>\n<p>I hate to do this, but I’m just going to have to say it:  for your usecase – <strong>pick the best tool for the job</strong>. Please ensure that you research properly into both languages, and weigh-up the pro’s/con’s that pertain to your specific usecase.</p>\n<p><strong><em>Cliches aside</em></strong> – if I had to pick a favourite overall language, it would have to be <strong>Crystal</strong>.  Frankly, this opinion is formed from my extensive use of Crystal over Nim, the fact I <strong>much</strong> prefer the Crystal syntax, and the fact that I am simply more comfortable coding in Crystal than I am in Nim!</p>\n<p>So, to answer the epic question – Crystal vs Nim?</p>\n<p>Personally, I choose Crystal.  But I think <strong>you</strong> should choose <strong><em>Nim.</em></strong> 😅</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong>- @rbin</strong></a></p>\n"},{"title":"Building a decentralized Reddit with Embark - Part 3","summary":"In this third and last part of the tutorial series about building a decentralized Reddit with Embark, we're building the front-end for our application using React and EmbarkJS.","layout":"blog-post","author":"pascal_precht","alias":"news/2019/02/17/building-a-decentralized-reddit-with-embark-part-3/","_content":"\nHopefully you've read [the first](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) and [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/) of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we'll be focussing on building the front-end for our application and continue where we've left off.\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n\nWe'll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\n## Rendering our first component\n\nAlright, before we jump straight into building components that will talk to our Smart Contract instance, let's first actually render a simple text on the screen just to make sure our setup is working correctly.\n\nFor that, what we'll do is adding React as a dependency to our project. In fact, we'll be relying on two packages - `react` and `react-dom`. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.\n\nLet's add the following `dependencies` section to our projects `package.json`:\n\n```\n\"dependencies\": {\n  \"react\": \"^16.4.2\",\n  \"react-dom\": \"^16.4.2\"\n}\n```\n\nOnce that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:\n\n```\n$ npm install\n```\n\nNow we can go ahead and actually make use of React. As Embark is framework agnostic, we won't be focussing too much on details specific to React, just the least amount that is needed to make our app work.\n\nCreating components in React is pretty straight forward. All we need to do is creating a class that extends React's `Component` type and add a `render()` method that will render the component's view.\n\nLet's create a folder for all of our components inside our projects:\n\n```\n$ mkdir app/js/components\n```\n\nNext, we create a file for our root component. We call it simply `App` and use the same file name:\n\n```\n$ touch app/js/components/App.js\n```\n\nAlright, as mentioned earlier, we really just want to render some text on the screen for starters. Here's what that could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class App extends Component {\n\n  render() {\n    return <h1>DReddit</h1>\n  }\n}\n```\n\nThis is probably self explanatory, but all we're doing here is importing `React` and its `Component` type and create an `App` class that extends `Component`. The `render()` method will be used by React to render the component's view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We'll make use of that later!\n\nOkay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to `app/js/index.js` and add the following code:\n\n```\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { App } from './components/App';\n\nrender(<App />, document.getElementById('root'));\n```\n\nWe need to import `React` again as it has to be available in this script's scope. We also import a `render` function from `react-dom`, which is used to render our root component (`App`) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id `root`.\n\nLet's set this up really quick. In `app/index.html` add a new element with a `root` id:\n\n```\n<body>\n\t<div id=\"root\"></div>\n\t<script src=\"js/app.js\"></script>\n</body>\n```\n\nNotice that we've also moved the `script` tag inside the body tag, after the element with the `root` id. This is just one way to work around the fact that the element we're referencing inside our `render()` method is actually available in the document at the time the script is executed.\n\nThat should do it! Let's spin up Embark, we should then see our component rendered on the screen:\n\n```\n$ embark run\n```\n\n## Building a `CreatePost` component\n\nAlright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to `App`, we'll introduce a new component `createPost` that comes with a `render()` method to display a simple form for entering data. We'll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.\n\nCreating a simple form is very straight forward:\n\n```\nimport React, { Component } from 'react';\n\nexport class CreatePost extends Component {\n\n  render() {\n    return (\n      <form>\n        <div>\n          <label>Topic</label>\n          <input type=\"text\" name=\"topic\" />\n        </div>\n        <div>\n          <textarea name=\"content\"></textarea>\n        </div>\n        <button>Post</button>\n      </form>\n    )\n  }\n}\n```\n\nTo actually render this component on screen, we need to make it part of our `App` component. Or, to be more specific, have the `App` component render our `CreatePost` component. For now we can simply add it to `App`'s render function like this;\n\n\n```\nimport { CreatePost } from './CreatePost';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n      </React.Fragment&>\n    )\n  }\n}\n```\n\nReact doesn't allow for multiple root elements in a single component's view, so we have to take advantage of `React.Fragment`. Obviously, there's not too much going on here apart from us rendering a static form. Also notice that we don't spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!\n\nLet's make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called `state` that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a `setState()` method if needed.\n\nLet's introduce `state` in our component by adding a constructor and initializing it accordingly:\n\n```\nexport class CreatePost extends Component {\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      topic: '',\n      content: '',\n      loading: false\n    };\n  }\n  ...\n}\n```\n\nNext we bind that state to our form fields:\n\n```\n<form>\n  <div>\n    <label>Topic</label>\n    <input type=\"text\" name=\"topic\" value={this.state.topic} />\n  </div>\n  <div>\n    <textarea name=\"content\" value={this.state.content}></textarea>\n  </div>\n  <button>Post</button>\n</form>\n```\n\nNo worries, we'll make use of `loading` in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component's state as the user is entering data. To make sure everything works fine, we'll also add an event handler for the form submission and output the data in `state`. Here's what our `handleChange()` and `createPost()` handlers looks like:\n\n```\nexport class CreatePost extends Component {\n  ...\n  handleChange(field, event) {\n    this.setState({\n      [field]: event.target.value\n    });\n  }\n\n  createPost(event) {\n    event.preventDefault();\n    console.log(this.state);\n  }\n  ...\n}\n```\n\nNotice how we're using `setState()` inside `handleChange()` to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:\n\n```\n<form onSubmit={e => createPost(e)}>\n  <div>\n    <label>Topic</label>\n    <input\n      type=\"text\"\n      name=\"topic\"\n      value={this.state.topic}\n      onChange={e => handleChange('topic', e)} />\n  </div>\n  <div>\n    <textarea\n      name=\"content\"\n      value={this.state.content}\n      onChange={e => handleChange('content', e})></textarea>\n  </div>\n  <button type=\"submit\">Post</button>\n</form>\n```\n\nSince we're using the `onSubmit()` handler of the form, it's also important that we either add a `type=\"submit\"` to our `button` or change the button to an `<input type=\"submit\">` element. Otherwise, the form won't emit a submit event.\n\nNice! With that in place, we should see the component's `state` in the console when submitting the form! The next challenge is to use `EmbarkJS` and its APIs to make our component talk to our Smart Contract instance.\n\n### Uploading data to IPFS\n\nRecall from our [first part](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts) of this tutorial that our `DReddit` Smart Contract comes with a `createPost()` method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we'll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.\n\nLuckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! `EmbarkJS.Storage.saveText()` takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in [part two](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost) of this tutorial, we'll use `async/await` to write asynchronous code in a synchronous fashion.\n\n```\nasync createPost(event) {\n  event.preventDefault();\n\n  this.setState({\n    loading: true\n  });\n\n  const ipfsHash = await EmbarkJS.Storage.saveText(JSON.stringify({\n    topic: this.state.topic,\n    content: this.state.content\n  }));\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWe use `JSON.stringify()` on an object that holds the `topic` and `content` of the post to be created. This is also the first time we put `loading` into action. Setting it to `true` before, and `false` after we've performed our operations lets us render a useful message as the user is waiting for updates.\n\n```\n<form onSubmit={e => createPost(e)}>\n  ...\n  {this.state.loading &&\n    <p>Posting...</p>\n  }\n</form>\n```\n\nObviously, we're not done yet though. All we do right now is uploading the post's data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its `createPost()` method. Let's do that!\n\n### Sending transactions to create posts\n\nTo send a transaction to our Smart Contract, we can again take advantage of EmbarkJS' APIs, similar to how we did it in the [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2). We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we'll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.\n\nOnce we have those things in place we can get a gas estimation for our transaction and send the data over. Here's how we retrieve our accounts, notice that `async/await` can be used here as well:\n\n```\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  ...\n}\n```\n\nNext up we'll import a `DReddit` Smart Contract instance from EmbarkJS and use it to get a gas estimation from `web3`. We can then use the estimation and one of our accounts to actually send the transaction:\n\n```\nimport DReddit from './artifacts/contracts/DReddit';\n...\n\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  const createPost = DReddit.methods.createPost(web3.utils.toHex(ipfsHash));\n  const estimate = await createPost.estimateGas();\n\n  await createPost.send({from: accounts[0], gas: estimate});\n  ...\n}\n```\n\nSweet, with that, our `createPost` method is done! We haven't built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running `embark run`. We should see a confirmation that looks something like this:\n\n```\nBlockchain> DReddit.createPost(\"0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e\") | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1\n```\n\n## Creating a Post component\n\nThe next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we'll look into rendering a list of posts dynamically, based on the data we're fetching.\n\nAgain, our application won't look particularly pretty, we'll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.\n\nHere's what such a component with a basic template could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class Post extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>Some Topic</h3>\n        <p>This is the content of a post</p>\n        <p><small><i>created at 2019-02-18 by 0x00000000000000</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThere are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the `Post` component that represents the entire post object and can then be displayed inside its `render()` method. However, for this tutorial we're going to choose a slightly different path. We'll make `Post` receive IPFS hash that's stored in the Smart Contract and have it resolve the data itself.\n\nLet's stay consistent with our naming and say the property we're expecting to be filled with data is called `description`, just like the one used inside the Smart Contract. We can then use `EmbarkJS.Storage.get()` with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside `Post`'s view, we'll parse it and use `setState()` accordingly.\n\nTo make sure all of that happens once the component is ready to do its work, we'll do all of that inside its `componentDidMount()` life cycle hook:\n\n```\nimport React, { Component } from 'react';\nimport EmbarkJS from '.artifacts/embarkjs';\n\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: ''\n    };\n  }\n\n  async componentDidMount() {\n    const ipfsHash = web3.utils.toAscii(this.props.description);\n    const data = await EmbarkJS.Storage.get(ipfsHash);\n    const { topic, content } = JSON.parse(data);\n\n    this.setState({ topic, content });\n  }\n  ...\n}\n```\n\nThere's one gotcha to keep in mind here: Calling `EmbarkJS.Storage.get()` or any `EmbarkJS` function on page load can fail, because the storage system might not be fully initialized yet. This wasn't a problem for the previous `EmbarkJS.Storage.uploadText()` because we called that function well after Embark had finished initializing\n\nTheoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its `onReady()` hook. `EmbarkJS.onReady()` takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let's wrap that `render()` call in our `App` component inside Embark's `onReady()` function.\n\n```\nEmbarkJS.onReady(() => {\n  render(<App />, document.getElementById('root'));\n});\n```\n\nThis also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.\n\nLet's also quickly add the `owner` and creation date. The `owner` is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it'll be formatted in a way the users can make sense of the data. We'll use the `dateformat` library for that and install it as a dependency like this:\n\n```\n$ npm install --save dateformat\n```\n\nOnce that is done, we can update our `Post` component's `render()` function to calculate a properly formatted date based on the `creationDate` that has been passed down through properties:\n\n```\n...\nimport dateformat from 'dateformat';\n\nexport class Post extends Component {\n  ...\n  render() {\n    const formattedDate = dateformat(\n      new Date(this.props.creationDate * 1000),\n      'yyyy-mm-dd HH:MM:ss'\n    );\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>{this.state.topic}</h3>\n        <p>{this.state.content}</p>\n        <p><small><i>created at {formattedDate} by {this.props.owner}</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nNotice that variables created inside `render()` can be interpolated as they are - there's no need to make them available on `props` or `state`. As a matter of fact, `props` are always considered read only in React.\n\nLet's try out our new `Post` component with some static data by adding it to our `App` component's view. Next up, we'll make this dynamic by fetching the posts from our Smart Contract.\n\n**Attention**: The hash used in this snippet might not be available in your local IPFS node, so you'll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.\n\n```\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <Post\n          description=\"0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250\"\n          creationDate=\"1550073772\"\n          owner=\"0x00000000000\"\n          />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n## Creating a List component\n\nBefore we can move on with building a component that renders a list of posts, we'll have to extend our Smart Contract with one more method. Since there's no canonical way to fetch array data from a Smart Contract, we'll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.\n\nLet's introduce a method `numPosts()` in our `DReddit` Smart Contract:\n\n```\nfunction numPosts() public view returns (uint) {\n  return posts.length;\n}\n```\n\n`posts.length` will increase as we're adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we'll leave that up to you!\n\nWith that in place, we can start building a new `List` component. The `List` component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:\n\n```\nimport React, { Component } from 'react';\n\nexport class List extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  render() {\n    return (<React.Fragment>\n      {this.state.posts.map(post => {\n        return (\n          <Post\n            key={post.id}\n            description={post.description}\n            creationDate={post.creationDate}\n            owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThe most interesting part here is probably the `render()` method, in which we iterate over all `state.posts` (which at the moment is empty) and then render a `Post` component for every iteration. Another thing to note is that every `Post` receives a `key`. This is required in React when creating views from loops. We've never introduced a `post.id` in this tutorial, but don't worry, we'll fix that in a moment.\n\nWe can already put that in our `App` component. It won't render anything as we haven't fetched any posts yet, but that's what we'll do next.\n\n\n```\nimport { List } from './List';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <List />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Fetching posts data\n\nLet's fill our new `List` component with life! As mentioned earlier, we'll use our Smart Contract's `numPosts()` method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the `List` component is ready, we'll use its `componentDidMount()` method for that:\n\n```\nexport class List extends Component {\n  ...\n  async componentDidMount() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    for (let i = 0; i < totalPosts; i++) {\n      const post = DReddit.methods.posts(i).call();\n      list.push(post);\n    }\n\n    list = await Promise.all(list);\n  }\n  ...\n}\n```\n\nNotice that in the above code we don't `await` the calls to every individual post. This is on purpose as we don't want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using `Promise.all().`\n\nLast but not least, we need to add an `id` property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post's index as `id`. Once that is done, we can use `setState()` to update our component's state and render the list:\n\n```\nasync componentDidMount() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    return post;\n  });\n\n  this.setState({ posts: list });\n}\n```\n\nThat's it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we'll have to reload the browser every time after adding a post. However, this we'll address now.\n\n### Reloading posts\n\nThere is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the `createPost` component tell the `List` component to reload its posts. However, there's no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of `CreatePost` and `List` (in our case `App`), and have it pass that logic down to places where its needed. This also means we'll be fetching the list inside `App` and pass down the pure data to `List`.\n\nIf this sounds overwhelming, no worries, it's more trivial than that! Let's start by introducing a `loadPosts()` function in our `App` component. Essentially we're moving everything from `List`'s `componentDidMount()` function into `App`:\n\n```\nexport class App extends Component {\n  ...\n  async loadPosts() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    if (totalPosts > 0) {\n      for (let i = 0; i < totalPosts; i++) {\n        const post = DReddit.methods.posts(i).call();\n        list.push(post);\n      }\n    }\n\n    list = await Promise.all(list);\n    list = list.map((post, index) => {\n      post.id = index;\n      return post;\n    });\n\n    list;\n\n    this.setState({ posts: list });\n  }\n}\n```\n\nTo make this work we also need to introduce a `state` with the dedicated `posts`. After that, we make sure `loadPosts()` is called when `App` is mounted:\n\n```\nexport class App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  async componentDidMount() {\n    await this.loadPosts();\n  }\n  ...\n}\n```\n\nLast but not least, all we have to do is to pass the `posts` down to `List` and `loadPosts()` to `CreatePost` as a callback handler if you will:\n\n```\nrender() {\n  return (\n    <React.Fragment>\n      <h1>DReddit</h1>\n      <CreatePost afterPostHandler={this.loadPosts.bind(this)}/>\n      <List posts={this.state.posts}/>\n    </React.Fragment>\n  )\n}\n```\n\nOnce that is done, we can consume `posts` and `afterPostHandler()` from `this.props` respectively. In `List`'s `render()` function we'll do (notice we don't rely on `this.state` anymore):\n\n```\nrender() {\n  return (<React.Fragment>\n    {this.props.posts.map(post => {\n      ...\n    })}\n    </React.Fragment>\n  )\n}\n```\n\nAnd in `CreatePost` we call `afterPostHandler()` after a post has been created:\n\n```\nasync createPost(event) {\n  ...\n  await createPost.send({from: accounts[0], gas: estimate});\n  await this.props.afterPostHandler();\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWonderful! The list now automatically reloads after creating posts, give it a try!\n\n## Add voting functionality\n\nThe final feature we'll be implementing is the up and down voting of posts. This is where we come back to our `Post` component that we've created earlier. In order to make this feature complete we'll have to:\n\n- Render the number of up and down votes per post\n- Add handlers for users to up and down vote\n- Determine if a user can vote on a post\n\n### Rendering number of votes\nLet's start with the first one, as it's the most trivial one. While the number of up and down votes is already attached to the data that we receive from our `DReddit` Smart Contract, it's not yet in the right format as it comes back as a string. Let's make sure we parse the up and down vote counts on posts by extending our `App`'s `loadPosts()` method like this:\n\n```\nasync loadPosts() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    post.upvotes = parseInt(post.upvotes, 10);\n    post.downvotes = parseInt(post.downvotes, 10);\n    return post;\n  });\n  ...\n}\n```\n\nOnce that is done we can pass each post's `upvotes` and `downvotes` to every `Post` component via its `props` inside our `List` component:\n\n```\nexport class List extends Component {\n  ...\n  render() {\n    return (<React.Fragment>\n      {this.props.posts.map(post => {\n        return (<Post\n          key={post.id}\n          description={post.description}\n          creationDate={post.creationDate}\n          upvotes={post.upvotes}\n          downvotes={post.downvotes}\n          owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nRendering the number of `upvotes` and `downvotes` is then really just a matter of interpolating them in `Post`'s `render()` function. We're just going to add them next to the buttons, but feel free to put them somewhere else:\n\n```\nexport class Post extends Component {\n  ...\n  render() {\n    ...\n    return (\n      <React.Fragment>\n        ...\n        {this.props.upvotes} <button>Upvote</button>\n        {this.props.downvotes} <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Implement up and down votes\n\nSimilar to when creating new posts, making the up and down vote buttons work requires sending transactions to our `DReddit` Smart Contract. So we'll do almost the same thing as in our `CreatePost` component, just that we're calling the Smart Contract's `vote()` method. If you recall, the `vote()` method takes a post id and the vote type, which is either `NONE`, `UPVOTE` or `DOWNVOTE` and are stored as `uint8`.\n\nIt makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we'll use a hash object instead:\n\n```\nconst BALLOT = {\n  NONE: 0,\n  UPVOTE: 1,\n  DOWNVOTE: 2\n}\n```\n\nWe don't actually have the post id available in our `Post` component yet. That's easily added in our `List` component, by now you should know how to do that!\n\nWe can then add click handlers to our up and down vote buttons and pass one of the `BALLOT` types to them (notice that we added `BALLOT.NONE` only for completeness-sake but don't actually use it in our code):\n\n```\n<button onClick={e => this.vote(BALLOT.UPVOTE)}>Upvote</button>\n<button onClick={e => this.vote(BALLOT.DOWNVOTE)}>Downvote</button>\n```\n\nThe next thing we need to do is sending that vote type along with the post id to our Smart Contract:\n\n```\nasync vote(ballot) {\n  const accounts = await web3.eth.getAccounts();\n  const vote = DReddit.methods.vote(this.props.id, ballot);\n  const estimate = await vote.estimateGas();\n\n  await vote.send({from: accounts[0], gas: estimate});\n}\n```\n\nObviously, we also want to update the view when a vote has been successfully sent. Right now we're reading a post's up and down votes from its `props` and render them accordingly. However, we want to update those values as votes are coming in. For that we'll change our code to only read the up and down votes from `props` once and store them in the component's state.\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes\n    };\n  }\n  ...\n}\n```\n\nWe also change the component's view to render the values from state instead of `props`:\n\n```\nrender() {\n  ...\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button ...>Upvote</button>\n      {this.state.downvotes} <button ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\n\nAfter that we can update the state with new votes using `setState()`, right after a vote has been sent:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({\n    upvotes: this.state.upvotes + (ballot == BALLOT.UPVOTE ? 1 : 0),\n    downvotes: this.state.downvotes + (ballot == BALLOT.DOWNVOTE ? 1 : 0)\n  });\n}\n```\n\n**That's it!** We can now up and down vote on posts...but only once! Yes, that's right. When we try to vote multiple times on the same post, we'll actually receive an error. That's because, if you remember, there's a restriction in our Smart Contract that makes sure users can not vote on posts that they've either already voted on, or created themselves.\n\nLet's make sure this is reflected in our application's UI and wrap up this tutorial!\n\n### Use `canVote()` to disable vote buttons\n\nWe'll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract's `canVote()` method. Another thing we need to consider is that we shouldn't allow a user to vote when a vote for the same post is already in flight but hasn't completed yet.\n\nLet's introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes,\n      canVote: true,\n      submitting: false\n    };\n  }\n  ...\n}\n```\n\nNext, we update our `Post` component's `render()` function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:\n\n```\nrender() {\n  ...\n  const disabled = this.state.submitting || !this.state.canVote;\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button disabled={disabled} ...>Upvote</button>\n      {this.state.downvotes} <button disabled={disabled} ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\nLast but not least, we have to make sure the state properties are updated accordingly. We'll call our Smart Contract's `canVote()` method when a post is initialized:\n\n```\nexport class Post extends Component {\n  ...\n  async componentDidMount() {\n    ...\n    const canVote = await DReddit.methods.canVote(this.props.id).call();\n    this.setState({ topic, content, canVote });\n  }\n  ...\n}\n```\n\nAnd when a vote is being made, we set `submitting` to `true` right before we send a transaction and set it back to `false` again when the transaction is done. At this point, we also know that a vote has been made on this post, so `canVote` can be set to `false` at the same time:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({ submitting: true });\n  await vote.send({from: accounts[0], gas: estimate + 1000});\n\n  this.setState({\n    ...\n    canVote: false,\n    submitting: false\n  });\n}\n```\n\n**And we're done!**\n\n## Wrapping it up\n\nCongratulations! You've completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:\n\n- Sort the posts in reversed chronological order so that the latest post is always on top\n- Rely on Smart Contracts Events to reload list\n- Introduce routing so there can be different views for creating and viewing posts\n- Use CSS to make the application look nice\n\nWe hope you've learned that it's not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.\n\n**We've recorded every single step of this tutorial [in this repository](https://github.com/embarklabs/dreddit-tutorial)**, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to [follow us on Twitter](https://twitter.com/EmbarkProject) as well for updates!\n\n","source":"_posts/2019-02-18-building-a-decentralized-reddit-with-embark-part-3.md","raw":"title: Building a decentralized Reddit with Embark - Part 3\nsummary: \"In this third and last part of the tutorial series about building a decentralized Reddit with Embark, we're building the front-end for our application using React and EmbarkJS.\"\ncategories:\n  - tutorials\nlayout: blog-post\nauthor: pascal_precht\nalias: news/2019/02/17/building-a-decentralized-reddit-with-embark-part-3/\n---\n\nHopefully you've read [the first](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/) and [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/) of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we'll be focussing on building the front-end for our application and continue where we've left off.\n\n- [**Part 1** - Setting up the project and implementing a Smart Contract](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/)\n- [**Part 2** - Testing the Smart Contract through EmbarkJS](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/)\n\nWe'll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!\n\n**The code for this tutorial can be found in [this repository](https://github.com/embarklabs/dreddit-tutorial)**.\n\n## Rendering our first component\n\nAlright, before we jump straight into building components that will talk to our Smart Contract instance, let's first actually render a simple text on the screen just to make sure our setup is working correctly.\n\nFor that, what we'll do is adding React as a dependency to our project. In fact, we'll be relying on two packages - `react` and `react-dom`. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.\n\nLet's add the following `dependencies` section to our projects `package.json`:\n\n```\n\"dependencies\": {\n  \"react\": \"^16.4.2\",\n  \"react-dom\": \"^16.4.2\"\n}\n```\n\nOnce that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:\n\n```\n$ npm install\n```\n\nNow we can go ahead and actually make use of React. As Embark is framework agnostic, we won't be focussing too much on details specific to React, just the least amount that is needed to make our app work.\n\nCreating components in React is pretty straight forward. All we need to do is creating a class that extends React's `Component` type and add a `render()` method that will render the component's view.\n\nLet's create a folder for all of our components inside our projects:\n\n```\n$ mkdir app/js/components\n```\n\nNext, we create a file for our root component. We call it simply `App` and use the same file name:\n\n```\n$ touch app/js/components/App.js\n```\n\nAlright, as mentioned earlier, we really just want to render some text on the screen for starters. Here's what that could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class App extends Component {\n\n  render() {\n    return <h1>DReddit</h1>\n  }\n}\n```\n\nThis is probably self explanatory, but all we're doing here is importing `React` and its `Component` type and create an `App` class that extends `Component`. The `render()` method will be used by React to render the component's view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We'll make use of that later!\n\nOkay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to `app/js/index.js` and add the following code:\n\n```\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { App } from './components/App';\n\nrender(<App />, document.getElementById('root'));\n```\n\nWe need to import `React` again as it has to be available in this script's scope. We also import a `render` function from `react-dom`, which is used to render our root component (`App`) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id `root`.\n\nLet's set this up really quick. In `app/index.html` add a new element with a `root` id:\n\n```\n<body>\n\t<div id=\"root\"></div>\n\t<script src=\"js/app.js\"></script>\n</body>\n```\n\nNotice that we've also moved the `script` tag inside the body tag, after the element with the `root` id. This is just one way to work around the fact that the element we're referencing inside our `render()` method is actually available in the document at the time the script is executed.\n\nThat should do it! Let's spin up Embark, we should then see our component rendered on the screen:\n\n```\n$ embark run\n```\n\n## Building a `CreatePost` component\n\nAlright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to `App`, we'll introduce a new component `createPost` that comes with a `render()` method to display a simple form for entering data. We'll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.\n\nCreating a simple form is very straight forward:\n\n```\nimport React, { Component } from 'react';\n\nexport class CreatePost extends Component {\n\n  render() {\n    return (\n      <form>\n        <div>\n          <label>Topic</label>\n          <input type=\"text\" name=\"topic\" />\n        </div>\n        <div>\n          <textarea name=\"content\"></textarea>\n        </div>\n        <button>Post</button>\n      </form>\n    )\n  }\n}\n```\n\nTo actually render this component on screen, we need to make it part of our `App` component. Or, to be more specific, have the `App` component render our `CreatePost` component. For now we can simply add it to `App`'s render function like this;\n\n\n```\nimport { CreatePost } from './CreatePost';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n      </React.Fragment&>\n    )\n  }\n}\n```\n\nReact doesn't allow for multiple root elements in a single component's view, so we have to take advantage of `React.Fragment`. Obviously, there's not too much going on here apart from us rendering a static form. Also notice that we don't spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!\n\nLet's make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called `state` that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a `setState()` method if needed.\n\nLet's introduce `state` in our component by adding a constructor and initializing it accordingly:\n\n```\nexport class CreatePost extends Component {\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      topic: '',\n      content: '',\n      loading: false\n    };\n  }\n  ...\n}\n```\n\nNext we bind that state to our form fields:\n\n```\n<form>\n  <div>\n    <label>Topic</label>\n    <input type=\"text\" name=\"topic\" value={this.state.topic} />\n  </div>\n  <div>\n    <textarea name=\"content\" value={this.state.content}></textarea>\n  </div>\n  <button>Post</button>\n</form>\n```\n\nNo worries, we'll make use of `loading` in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component's state as the user is entering data. To make sure everything works fine, we'll also add an event handler for the form submission and output the data in `state`. Here's what our `handleChange()` and `createPost()` handlers looks like:\n\n```\nexport class CreatePost extends Component {\n  ...\n  handleChange(field, event) {\n    this.setState({\n      [field]: event.target.value\n    });\n  }\n\n  createPost(event) {\n    event.preventDefault();\n    console.log(this.state);\n  }\n  ...\n}\n```\n\nNotice how we're using `setState()` inside `handleChange()` to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:\n\n```\n<form onSubmit={e => createPost(e)}>\n  <div>\n    <label>Topic</label>\n    <input\n      type=\"text\"\n      name=\"topic\"\n      value={this.state.topic}\n      onChange={e => handleChange('topic', e)} />\n  </div>\n  <div>\n    <textarea\n      name=\"content\"\n      value={this.state.content}\n      onChange={e => handleChange('content', e})></textarea>\n  </div>\n  <button type=\"submit\">Post</button>\n</form>\n```\n\nSince we're using the `onSubmit()` handler of the form, it's also important that we either add a `type=\"submit\"` to our `button` or change the button to an `<input type=\"submit\">` element. Otherwise, the form won't emit a submit event.\n\nNice! With that in place, we should see the component's `state` in the console when submitting the form! The next challenge is to use `EmbarkJS` and its APIs to make our component talk to our Smart Contract instance.\n\n### Uploading data to IPFS\n\nRecall from our [first part](/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts) of this tutorial that our `DReddit` Smart Contract comes with a `createPost()` method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we'll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.\n\nLuckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! `EmbarkJS.Storage.saveText()` takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in [part two](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost) of this tutorial, we'll use `async/await` to write asynchronous code in a synchronous fashion.\n\n```\nasync createPost(event) {\n  event.preventDefault();\n\n  this.setState({\n    loading: true\n  });\n\n  const ipfsHash = await EmbarkJS.Storage.saveText(JSON.stringify({\n    topic: this.state.topic,\n    content: this.state.content\n  }));\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWe use `JSON.stringify()` on an object that holds the `topic` and `content` of the post to be created. This is also the first time we put `loading` into action. Setting it to `true` before, and `false` after we've performed our operations lets us render a useful message as the user is waiting for updates.\n\n```\n<form onSubmit={e => createPost(e)}>\n  ...\n  {this.state.loading &&\n    <p>Posting...</p>\n  }\n</form>\n```\n\nObviously, we're not done yet though. All we do right now is uploading the post's data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its `createPost()` method. Let's do that!\n\n### Sending transactions to create posts\n\nTo send a transaction to our Smart Contract, we can again take advantage of EmbarkJS' APIs, similar to how we did it in the [second part](/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2). We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we'll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.\n\nOnce we have those things in place we can get a gas estimation for our transaction and send the data over. Here's how we retrieve our accounts, notice that `async/await` can be used here as well:\n\n```\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  ...\n}\n```\n\nNext up we'll import a `DReddit` Smart Contract instance from EmbarkJS and use it to get a gas estimation from `web3`. We can then use the estimation and one of our accounts to actually send the transaction:\n\n```\nimport DReddit from './artifacts/contracts/DReddit';\n...\n\nasync createPost(event) {\n  ...\n  const accounts = await web3.eth.getAccounts();\n  const createPost = DReddit.methods.createPost(web3.utils.toHex(ipfsHash));\n  const estimate = await createPost.estimateGas();\n\n  await createPost.send({from: accounts[0], gas: estimate});\n  ...\n}\n```\n\nSweet, with that, our `createPost` method is done! We haven't built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running `embark run`. We should see a confirmation that looks something like this:\n\n```\nBlockchain> DReddit.createPost(\"0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e\") | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1\n```\n\n## Creating a Post component\n\nThe next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we'll look into rendering a list of posts dynamically, based on the data we're fetching.\n\nAgain, our application won't look particularly pretty, we'll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.\n\nHere's what such a component with a basic template could look like:\n\n```\nimport React, { Component } from 'react';\n\nexport class Post extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>Some Topic</h3>\n        <p>This is the content of a post</p>\n        <p><small><i>created at 2019-02-18 by 0x00000000000000</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThere are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the `Post` component that represents the entire post object and can then be displayed inside its `render()` method. However, for this tutorial we're going to choose a slightly different path. We'll make `Post` receive IPFS hash that's stored in the Smart Contract and have it resolve the data itself.\n\nLet's stay consistent with our naming and say the property we're expecting to be filled with data is called `description`, just like the one used inside the Smart Contract. We can then use `EmbarkJS.Storage.get()` with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside `Post`'s view, we'll parse it and use `setState()` accordingly.\n\nTo make sure all of that happens once the component is ready to do its work, we'll do all of that inside its `componentDidMount()` life cycle hook:\n\n```\nimport React, { Component } from 'react';\nimport EmbarkJS from '.artifacts/embarkjs';\n\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: ''\n    };\n  }\n\n  async componentDidMount() {\n    const ipfsHash = web3.utils.toAscii(this.props.description);\n    const data = await EmbarkJS.Storage.get(ipfsHash);\n    const { topic, content } = JSON.parse(data);\n\n    this.setState({ topic, content });\n  }\n  ...\n}\n```\n\nThere's one gotcha to keep in mind here: Calling `EmbarkJS.Storage.get()` or any `EmbarkJS` function on page load can fail, because the storage system might not be fully initialized yet. This wasn't a problem for the previous `EmbarkJS.Storage.uploadText()` because we called that function well after Embark had finished initializing\n\nTheoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its `onReady()` hook. `EmbarkJS.onReady()` takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let's wrap that `render()` call in our `App` component inside Embark's `onReady()` function.\n\n```\nEmbarkJS.onReady(() => {\n  render(<App />, document.getElementById('root'));\n});\n```\n\nThis also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.\n\nLet's also quickly add the `owner` and creation date. The `owner` is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it'll be formatted in a way the users can make sense of the data. We'll use the `dateformat` library for that and install it as a dependency like this:\n\n```\n$ npm install --save dateformat\n```\n\nOnce that is done, we can update our `Post` component's `render()` function to calculate a properly formatted date based on the `creationDate` that has been passed down through properties:\n\n```\n...\nimport dateformat from 'dateformat';\n\nexport class Post extends Component {\n  ...\n  render() {\n    const formattedDate = dateformat(\n      new Date(this.props.creationDate * 1000),\n      'yyyy-mm-dd HH:MM:ss'\n    );\n    return (\n      <React.Fragment>\n        <hr />\n        <h3>{this.state.topic}</h3>\n        <p>{this.state.content}</p>\n        <p><small><i>created at {formattedDate} by {this.props.owner}</i></small></p>\n        <button>Upvote</button>\n        <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\nNotice that variables created inside `render()` can be interpolated as they are - there's no need to make them available on `props` or `state`. As a matter of fact, `props` are always considered read only in React.\n\nLet's try out our new `Post` component with some static data by adding it to our `App` component's view. Next up, we'll make this dynamic by fetching the posts from our Smart Contract.\n\n**Attention**: The hash used in this snippet might not be available in your local IPFS node, so you'll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.\n\n```\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <Post\n          description=\"0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250\"\n          creationDate=\"1550073772\"\n          owner=\"0x00000000000\"\n          />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n## Creating a List component\n\nBefore we can move on with building a component that renders a list of posts, we'll have to extend our Smart Contract with one more method. Since there's no canonical way to fetch array data from a Smart Contract, we'll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.\n\nLet's introduce a method `numPosts()` in our `DReddit` Smart Contract:\n\n```\nfunction numPosts() public view returns (uint) {\n  return posts.length;\n}\n```\n\n`posts.length` will increase as we're adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we'll leave that up to you!\n\nWith that in place, we can start building a new `List` component. The `List` component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:\n\n```\nimport React, { Component } from 'react';\n\nexport class List extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  render() {\n    return (<React.Fragment>\n      {this.state.posts.map(post => {\n        return (\n          <Post\n            key={post.id}\n            description={post.description}\n            creationDate={post.creationDate}\n            owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nThe most interesting part here is probably the `render()` method, in which we iterate over all `state.posts` (which at the moment is empty) and then render a `Post` component for every iteration. Another thing to note is that every `Post` receives a `key`. This is required in React when creating views from loops. We've never introduced a `post.id` in this tutorial, but don't worry, we'll fix that in a moment.\n\nWe can already put that in our `App` component. It won't render anything as we haven't fetched any posts yet, but that's what we'll do next.\n\n\n```\nimport { List } from './List';\n\nexport class App extends Component {\n\n  render() {\n    return (\n      <React.Fragment>\n        <h1>DReddit</h1>\n        <CreatePost />\n        <List />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Fetching posts data\n\nLet's fill our new `List` component with life! As mentioned earlier, we'll use our Smart Contract's `numPosts()` method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the `List` component is ready, we'll use its `componentDidMount()` method for that:\n\n```\nexport class List extends Component {\n  ...\n  async componentDidMount() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    for (let i = 0; i < totalPosts; i++) {\n      const post = DReddit.methods.posts(i).call();\n      list.push(post);\n    }\n\n    list = await Promise.all(list);\n  }\n  ...\n}\n```\n\nNotice that in the above code we don't `await` the calls to every individual post. This is on purpose as we don't want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using `Promise.all().`\n\nLast but not least, we need to add an `id` property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post's index as `id`. Once that is done, we can use `setState()` to update our component's state and render the list:\n\n```\nasync componentDidMount() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    return post;\n  });\n\n  this.setState({ posts: list });\n}\n```\n\nThat's it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we'll have to reload the browser every time after adding a post. However, this we'll address now.\n\n### Reloading posts\n\nThere is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the `createPost` component tell the `List` component to reload its posts. However, there's no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of `CreatePost` and `List` (in our case `App`), and have it pass that logic down to places where its needed. This also means we'll be fetching the list inside `App` and pass down the pure data to `List`.\n\nIf this sounds overwhelming, no worries, it's more trivial than that! Let's start by introducing a `loadPosts()` function in our `App` component. Essentially we're moving everything from `List`'s `componentDidMount()` function into `App`:\n\n```\nexport class App extends Component {\n  ...\n  async loadPosts() {\n    const totalPosts = await DReddit.methods.numPosts().call();\n\n    let list = [];\n\n    if (totalPosts > 0) {\n      for (let i = 0; i < totalPosts; i++) {\n        const post = DReddit.methods.posts(i).call();\n        list.push(post);\n      }\n    }\n\n    list = await Promise.all(list);\n    list = list.map((post, index) => {\n      post.id = index;\n      return post;\n    });\n\n    list;\n\n    this.setState({ posts: list });\n  }\n}\n```\n\nTo make this work we also need to introduce a `state` with the dedicated `posts`. After that, we make sure `loadPosts()` is called when `App` is mounted:\n\n```\nexport class App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      posts: []\n    };\n  }\n\n  async componentDidMount() {\n    await this.loadPosts();\n  }\n  ...\n}\n```\n\nLast but not least, all we have to do is to pass the `posts` down to `List` and `loadPosts()` to `CreatePost` as a callback handler if you will:\n\n```\nrender() {\n  return (\n    <React.Fragment>\n      <h1>DReddit</h1>\n      <CreatePost afterPostHandler={this.loadPosts.bind(this)}/>\n      <List posts={this.state.posts}/>\n    </React.Fragment>\n  )\n}\n```\n\nOnce that is done, we can consume `posts` and `afterPostHandler()` from `this.props` respectively. In `List`'s `render()` function we'll do (notice we don't rely on `this.state` anymore):\n\n```\nrender() {\n  return (<React.Fragment>\n    {this.props.posts.map(post => {\n      ...\n    })}\n    </React.Fragment>\n  )\n}\n```\n\nAnd in `CreatePost` we call `afterPostHandler()` after a post has been created:\n\n```\nasync createPost(event) {\n  ...\n  await createPost.send({from: accounts[0], gas: estimate});\n  await this.props.afterPostHandler();\n\n  this.setState({\n    topic: '',\n    content: '',\n    loading: false\n  });\n}\n```\n\nWonderful! The list now automatically reloads after creating posts, give it a try!\n\n## Add voting functionality\n\nThe final feature we'll be implementing is the up and down voting of posts. This is where we come back to our `Post` component that we've created earlier. In order to make this feature complete we'll have to:\n\n- Render the number of up and down votes per post\n- Add handlers for users to up and down vote\n- Determine if a user can vote on a post\n\n### Rendering number of votes\nLet's start with the first one, as it's the most trivial one. While the number of up and down votes is already attached to the data that we receive from our `DReddit` Smart Contract, it's not yet in the right format as it comes back as a string. Let's make sure we parse the up and down vote counts on posts by extending our `App`'s `loadPosts()` method like this:\n\n```\nasync loadPosts() {\n  ...\n  list = list.map((post, index) => {\n    post.id = index;\n    post.upvotes = parseInt(post.upvotes, 10);\n    post.downvotes = parseInt(post.downvotes, 10);\n    return post;\n  });\n  ...\n}\n```\n\nOnce that is done we can pass each post's `upvotes` and `downvotes` to every `Post` component via its `props` inside our `List` component:\n\n```\nexport class List extends Component {\n  ...\n  render() {\n    return (<React.Fragment>\n      {this.props.posts.map(post => {\n        return (<Post\n          key={post.id}\n          description={post.description}\n          creationDate={post.creationDate}\n          upvotes={post.upvotes}\n          downvotes={post.downvotes}\n          owner={post.owner}\n          />)\n      })}\n      </React.Fragment>\n    )\n  }\n}\n```\n\nRendering the number of `upvotes` and `downvotes` is then really just a matter of interpolating them in `Post`'s `render()` function. We're just going to add them next to the buttons, but feel free to put them somewhere else:\n\n```\nexport class Post extends Component {\n  ...\n  render() {\n    ...\n    return (\n      <React.Fragment>\n        ...\n        {this.props.upvotes} <button>Upvote</button>\n        {this.props.downvotes} <button>Downvote</button>\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Implement up and down votes\n\nSimilar to when creating new posts, making the up and down vote buttons work requires sending transactions to our `DReddit` Smart Contract. So we'll do almost the same thing as in our `CreatePost` component, just that we're calling the Smart Contract's `vote()` method. If you recall, the `vote()` method takes a post id and the vote type, which is either `NONE`, `UPVOTE` or `DOWNVOTE` and are stored as `uint8`.\n\nIt makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we'll use a hash object instead:\n\n```\nconst BALLOT = {\n  NONE: 0,\n  UPVOTE: 1,\n  DOWNVOTE: 2\n}\n```\n\nWe don't actually have the post id available in our `Post` component yet. That's easily added in our `List` component, by now you should know how to do that!\n\nWe can then add click handlers to our up and down vote buttons and pass one of the `BALLOT` types to them (notice that we added `BALLOT.NONE` only for completeness-sake but don't actually use it in our code):\n\n```\n<button onClick={e => this.vote(BALLOT.UPVOTE)}>Upvote</button>\n<button onClick={e => this.vote(BALLOT.DOWNVOTE)}>Downvote</button>\n```\n\nThe next thing we need to do is sending that vote type along with the post id to our Smart Contract:\n\n```\nasync vote(ballot) {\n  const accounts = await web3.eth.getAccounts();\n  const vote = DReddit.methods.vote(this.props.id, ballot);\n  const estimate = await vote.estimateGas();\n\n  await vote.send({from: accounts[0], gas: estimate});\n}\n```\n\nObviously, we also want to update the view when a vote has been successfully sent. Right now we're reading a post's up and down votes from its `props` and render them accordingly. However, we want to update those values as votes are coming in. For that we'll change our code to only read the up and down votes from `props` once and store them in the component's state.\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes\n    };\n  }\n  ...\n}\n```\n\nWe also change the component's view to render the values from state instead of `props`:\n\n```\nrender() {\n  ...\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button ...>Upvote</button>\n      {this.state.downvotes} <button ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\n\nAfter that we can update the state with new votes using `setState()`, right after a vote has been sent:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({\n    upvotes: this.state.upvotes + (ballot == BALLOT.UPVOTE ? 1 : 0),\n    downvotes: this.state.downvotes + (ballot == BALLOT.DOWNVOTE ? 1 : 0)\n  });\n}\n```\n\n**That's it!** We can now up and down vote on posts...but only once! Yes, that's right. When we try to vote multiple times on the same post, we'll actually receive an error. That's because, if you remember, there's a restriction in our Smart Contract that makes sure users can not vote on posts that they've either already voted on, or created themselves.\n\nLet's make sure this is reflected in our application's UI and wrap up this tutorial!\n\n### Use `canVote()` to disable vote buttons\n\nWe'll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract's `canVote()` method. Another thing we need to consider is that we shouldn't allow a user to vote when a vote for the same post is already in flight but hasn't completed yet.\n\nLet's introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:\n\n```\nexport class Post extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      topic: '',\n      content: '',\n      upvotes: this.props.upvotes,\n      downvotes: this.props.downvotes,\n      canVote: true,\n      submitting: false\n    };\n  }\n  ...\n}\n```\n\nNext, we update our `Post` component's `render()` function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:\n\n```\nrender() {\n  ...\n  const disabled = this.state.submitting || !this.state.canVote;\n  return (\n    <React.Fragment>\n      ...\n      {this.state.upvotes} <button disabled={disabled} ...>Upvote</button>\n      {this.state.downvotes} <button disabled={disabled} ...>Downvote</button>\n    </React.Fragment>\n  )\n}\n```\n\nLast but not least, we have to make sure the state properties are updated accordingly. We'll call our Smart Contract's `canVote()` method when a post is initialized:\n\n```\nexport class Post extends Component {\n  ...\n  async componentDidMount() {\n    ...\n    const canVote = await DReddit.methods.canVote(this.props.id).call();\n    this.setState({ topic, content, canVote });\n  }\n  ...\n}\n```\n\nAnd when a vote is being made, we set `submitting` to `true` right before we send a transaction and set it back to `false` again when the transaction is done. At this point, we also know that a vote has been made on this post, so `canVote` can be set to `false` at the same time:\n\n```\nasync vote(ballot) {\n  ...\n  this.setState({ submitting: true });\n  await vote.send({from: accounts[0], gas: estimate + 1000});\n\n  this.setState({\n    ...\n    canVote: false,\n    submitting: false\n  });\n}\n```\n\n**And we're done!**\n\n## Wrapping it up\n\nCongratulations! You've completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:\n\n- Sort the posts in reversed chronological order so that the latest post is always on top\n- Rely on Smart Contracts Events to reload list\n- Introduce routing so there can be different views for creating and viewing posts\n- Use CSS to make the application look nice\n\nWe hope you've learned that it's not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.\n\n**We've recorded every single step of this tutorial [in this repository](https://github.com/embarklabs/dreddit-tutorial)**, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to [follow us on Twitter](https://twitter.com/EmbarkProject) as well for updates!\n\n","slug":"building-a-decentralized-reddit-with-embark-part-3","published":1,"date":"2019-02-18T05:00:00.000Z","updated":"2020-01-17T19:05:36.394Z","comments":1,"photos":[],"link":"","_id":"ck5ijm3uv002v7heg23u54ek5","content":"<p>Hopefully you’ve read <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first</a> and <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\">second part</a> of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we’ll be focussing on building the front-end for our application and continue where we’ve left off.</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n</ul>\n<p>We’ll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!</p>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<h2 id=\"Rendering-our-first-component\"><a href=\"#Rendering-our-first-component\" class=\"headerlink\" title=\"Rendering our first component\"></a>Rendering our first component</h2><p>Alright, before we jump straight into building components that will talk to our Smart Contract instance, let’s first actually render a simple text on the screen just to make sure our setup is working correctly.</p>\n<p>For that, what we’ll do is adding React as a dependency to our project. In fact, we’ll be relying on two packages - <code>react</code> and <code>react-dom</code>. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.</p>\n<p>Let’s add the following <code>dependencies</code> section to our projects <code>package.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;dependencies&quot;: &#123;</span><br><span class=\"line\">  &quot;react&quot;: &quot;^16.4.2&quot;,</span><br><span class=\"line\">  &quot;react-dom&quot;: &quot;^16.4.2&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n\n<p>Now we can go ahead and actually make use of React. As Embark is framework agnostic, we won’t be focussing too much on details specific to React, just the least amount that is needed to make our app work.</p>\n<p>Creating components in React is pretty straight forward. All we need to do is creating a class that extends React’s <code>Component</code> type and add a <code>render()</code> method that will render the component’s view.</p>\n<p>Let’s create a folder for all of our components inside our projects:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir app&#x2F;js&#x2F;components</span><br></pre></td></tr></table></figure>\n\n<p>Next, we create a file for our root component. We call it simply <code>App</code> and use the same file name:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ touch app&#x2F;js&#x2F;components&#x2F;App.js</span><br></pre></td></tr></table></figure>\n\n<p>Alright, as mentioned earlier, we really just want to render some text on the screen for starters. Here’s what that could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This is probably self explanatory, but all we’re doing here is importing <code>React</code> and its <code>Component</code> type and create an <code>App</code> class that extends <code>Component</code>. The <code>render()</code> method will be used by React to render the component’s view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We’ll make use of that later!</p>\n<p>Okay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to <code>app/js/index.js</code> and add the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React from &#39;react&#39;;</span><br><span class=\"line\">import &#123; render &#125; from &#39;react-dom&#39;;</span><br><span class=\"line\">import &#123; App &#125; from &#39;.&#x2F;components&#x2F;App&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br></pre></td></tr></table></figure>\n\n<p>We need to import <code>React</code> again as it has to be available in this script’s scope. We also import a <code>render</code> function from <code>react-dom</code>, which is used to render our root component (<code>App</code>) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id <code>root</code>.</p>\n<p>Let’s set this up really quick. In <code>app/index.html</code> add a new element with a <code>root</code> id:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">\t&lt;div id&#x3D;&quot;root&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class=\"line\">\t&lt;script src&#x3D;&quot;js&#x2F;app.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class=\"line\">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’ve also moved the <code>script</code> tag inside the body tag, after the element with the <code>root</code> id. This is just one way to work around the fact that the element we’re referencing inside our <code>render()</code> method is actually available in the document at the time the script is executed.</p>\n<p>That should do it! Let’s spin up Embark, we should then see our component rendered on the screen:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Building-a-CreatePost-component\"><a href=\"#Building-a-CreatePost-component\" class=\"headerlink\" title=\"Building a CreatePost component\"></a>Building a <code>CreatePost</code> component</h2><p>Alright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to <code>App</code>, we’ll introduce a new component <code>createPost</code> that comes with a <code>render()</code> method to display a simple form for entering data. We’ll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.</p>\n<p>Creating a simple form is very straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;form&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">          &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; &#x2F;&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;textarea name&#x3D;&quot;content&quot;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;form&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To actually render this component on screen, we need to make it part of our <code>App</code> component. Or, to be more specific, have the <code>App</code> component render our <code>CreatePost</code> component. For now we can simply add it to <code>App</code>‘s render function like this;</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; CreatePost &#125; from &#39;.&#x2F;CreatePost&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&amp;&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>React doesn’t allow for multiple root elements in a single component’s view, so we have to take advantage of <code>React.Fragment</code>. Obviously, there’s not too much going on here apart from us rendering a static form. Also notice that we don’t spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!</p>\n<p>Let’s make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called <code>state</code> that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a <code>setState()</code> method if needed.</p>\n<p>Let’s introduce <code>state</code> in our component by adding a constructor and initializing it accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      loading: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next we bind that state to our form fields:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; value&#x3D;&#123;this.state.topic&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea name&#x3D;&quot;content&quot; value&#x3D;&#123;this.state.content&#125;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>No worries, we’ll make use of <code>loading</code> in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component’s state as the user is entering data. To make sure everything works fine, we’ll also add an event handler for the form submission and output the data in <code>state</code>. Here’s what our <code>handleChange()</code> and <code>createPost()</code> handlers looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  handleChange(field, event) &#123;</span><br><span class=\"line\">    this.setState(&#123;</span><br><span class=\"line\">      [field]: event.target.value</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  createPost(event) &#123;</span><br><span class=\"line\">    event.preventDefault();</span><br><span class=\"line\">    console.log(this.state);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice how we’re using <code>setState()</code> inside <code>handleChange()</code> to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input</span><br><span class=\"line\">      type&#x3D;&quot;text&quot;</span><br><span class=\"line\">      name&#x3D;&quot;topic&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.topic&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;topic&#39;, e)&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea</span><br><span class=\"line\">      name&#x3D;&quot;content&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.content&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;content&#39;, e&#125;)&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button type&#x3D;&quot;submit&quot;&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Since we’re using the <code>onSubmit()</code> handler of the form, it’s also important that we either add a <code>type=&quot;submit&quot;</code> to our <code>button</code> or change the button to an <code>&lt;input type=&quot;submit&quot;&gt;</code> element. Otherwise, the form won’t emit a submit event.</p>\n<p>Nice! With that in place, we should see the component’s <code>state</code> in the console when submitting the form! The next challenge is to use <code>EmbarkJS</code> and its APIs to make our component talk to our Smart Contract instance.</p>\n<h3 id=\"Uploading-data-to-IPFS\"><a href=\"#Uploading-data-to-IPFS\" class=\"headerlink\" title=\"Uploading data to IPFS\"></a>Uploading data to IPFS</h3><p>Recall from our <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts\">first part</a> of this tutorial that our <code>DReddit</code> Smart Contract comes with a <code>createPost()</code> method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we’ll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.</p>\n<p>Luckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! <code>EmbarkJS.Storage.saveText()</code> takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost\">part two</a> of this tutorial, we’ll use <code>async/await</code> to write asynchronous code in a synchronous fashion.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  event.preventDefault();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    loading: true</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  const ipfsHash &#x3D; await EmbarkJS.Storage.saveText(JSON.stringify(&#123;</span><br><span class=\"line\">    topic: this.state.topic,</span><br><span class=\"line\">    content: this.state.content</span><br><span class=\"line\">  &#125;));</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We use <code>JSON.stringify()</code> on an object that holds the <code>topic</code> and <code>content</code> of the post to be created. This is also the first time we put <code>loading</code> into action. Setting it to <code>true</code> before, and <code>false</code> after we’ve performed our operations lets us render a useful message as the user is waiting for updates.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#123;this.state.loading &amp;&amp;</span><br><span class=\"line\">    &lt;p&gt;Posting...&lt;&#x2F;p&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we’re not done yet though. All we do right now is uploading the post’s data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its <code>createPost()</code> method. Let’s do that!</p>\n<h3 id=\"Sending-transactions-to-create-posts\"><a href=\"#Sending-transactions-to-create-posts\" class=\"headerlink\" title=\"Sending transactions to create posts\"></a>Sending transactions to create posts</h3><p>To send a transaction to our Smart Contract, we can again take advantage of EmbarkJS’ APIs, similar to how we did it in the <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2\">second part</a>. We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we’ll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.</p>\n<p>Once we have those things in place we can get a gas estimation for our transaction and send the data over. Here’s how we retrieve our accounts, notice that <code>async/await</code> can be used here as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next up we’ll import a <code>DReddit</code> Smart Contract instance from EmbarkJS and use it to get a gas estimation from <code>web3</code>. We can then use the estimation and one of our accounts to actually send the transaction:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import DReddit from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;DReddit&#39;;</span><br><span class=\"line\">...</span><br><span class=\"line\"></span><br><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const createPost &#x3D; DReddit.methods.createPost(web3.utils.toHex(ipfsHash));</span><br><span class=\"line\">  const estimate &#x3D; await createPost.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Sweet, with that, our <code>createPost</code> method is done! We haven’t built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running <code>embark run</code>. We should see a confirmation that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Blockchain&gt; DReddit.createPost(&quot;0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e&quot;) | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-Post-component\"><a href=\"#Creating-a-Post-component\" class=\"headerlink\" title=\"Creating a Post component\"></a>Creating a Post component</h2><p>The next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we’ll look into rendering a list of posts dynamically, based on the data we’re fetching.</p>\n<p>Again, our application won’t look particularly pretty, we’ll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.</p>\n<p>Here’s what such a component with a basic template could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;Some Topic&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;This is the content of a post&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at 2019-02-18 by 0x00000000000000&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the <code>Post</code> component that represents the entire post object and can then be displayed inside its <code>render()</code> method. However, for this tutorial we’re going to choose a slightly different path. We’ll make <code>Post</code> receive IPFS hash that’s stored in the Smart Contract and have it resolve the data itself.</p>\n<p>Let’s stay consistent with our naming and say the property we’re expecting to be filled with data is called <code>description</code>, just like the one used inside the Smart Contract. We can then use <code>EmbarkJS.Storage.get()</code> with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside <code>Post</code>‘s view, we’ll parse it and use <code>setState()</code> accordingly.</p>\n<p>To make sure all of that happens once the component is ready to do its work, we’ll do all of that inside its <code>componentDidMount()</code> life cycle hook:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\">import EmbarkJS from &#39;.artifacts&#x2F;embarkjs&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const ipfsHash &#x3D; web3.utils.toAscii(this.props.description);</span><br><span class=\"line\">    const data &#x3D; await EmbarkJS.Storage.get(ipfsHash);</span><br><span class=\"line\">    const &#123; topic, content &#125; &#x3D; JSON.parse(data);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; topic, content &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind here: Calling <code>EmbarkJS.Storage.get()</code> or any <code>EmbarkJS</code> function on page load can fail, because the storage system might not be fully initialized yet. This wasn’t a problem for the previous <code>EmbarkJS.Storage.uploadText()</code> because we called that function well after Embark had finished initializing</p>\n<p>Theoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its <code>onReady()</code> hook. <code>EmbarkJS.onReady()</code> takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let’s wrap that <code>render()</code> call in our <code>App</code> component inside Embark’s <code>onReady()</code> function.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.onReady(() &#x3D;&gt; &#123;</span><br><span class=\"line\">  render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.</p>\n<p>Let’s also quickly add the <code>owner</code> and creation date. The <code>owner</code> is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it’ll be formatted in a way the users can make sense of the data. We’ll use the <code>dateformat</code> library for that and install it as a dependency like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install --save dateformat</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can update our <code>Post</code> component’s <code>render()</code> function to calculate a properly formatted date based on the <code>creationDate</code> that has been passed down through properties:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">import dateformat from &#39;dateformat&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    const formattedDate &#x3D; dateformat(</span><br><span class=\"line\">      new Date(this.props.creationDate * 1000),</span><br><span class=\"line\">      &#39;yyyy-mm-dd HH:MM:ss&#39;</span><br><span class=\"line\">    );</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;&#123;this.state.topic&#125;&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;&#123;this.state.content&#125;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at &#123;formattedDate&#125; by &#123;this.props.owner&#125;&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that variables created inside <code>render()</code> can be interpolated as they are - there’s no need to make them available on <code>props</code> or <code>state</code>. As a matter of fact, <code>props</code> are always considered read only in React.</p>\n<p>Let’s try out our new <code>Post</code> component with some static data by adding it to our <code>App</code> component’s view. Next up, we’ll make this dynamic by fetching the posts from our Smart Contract.</p>\n<p><strong>Attention</strong>: The hash used in this snippet might not be available in your local IPFS node, so you’ll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;Post</span><br><span class=\"line\">          description&#x3D;&quot;0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250&quot;</span><br><span class=\"line\">          creationDate&#x3D;&quot;1550073772&quot;</span><br><span class=\"line\">          owner&#x3D;&quot;0x00000000000&quot;</span><br><span class=\"line\">          &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-List-component\"><a href=\"#Creating-a-List-component\" class=\"headerlink\" title=\"Creating a List component\"></a>Creating a List component</h2><p>Before we can move on with building a component that renders a list of posts, we’ll have to extend our Smart Contract with one more method. Since there’s no canonical way to fetch array data from a Smart Contract, we’ll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.</p>\n<p>Let’s introduce a method <code>numPosts()</code> in our <code>DReddit</code> Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function numPosts() public view returns (uint) &#123;</span><br><span class=\"line\">  return posts.length;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>posts.length</code> will increase as we’re adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we’ll leave that up to you!</p>\n<p>With that in place, we can start building a new <code>List</code> component. The <code>List</code> component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.state.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (</span><br><span class=\"line\">          &lt;Post</span><br><span class=\"line\">            key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">            description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">            creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">            owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The most interesting part here is probably the <code>render()</code> method, in which we iterate over all <code>state.posts</code> (which at the moment is empty) and then render a <code>Post</code> component for every iteration. Another thing to note is that every <code>Post</code> receives a <code>key</code>. This is required in React when creating views from loops. We’ve never introduced a <code>post.id</code> in this tutorial, but don’t worry, we’ll fix that in a moment.</p>\n<p>We can already put that in our <code>App</code> component. It won’t render anything as we haven’t fetched any posts yet, but that’s what we’ll do next.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; List &#125; from &#39;.&#x2F;List&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;List &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Fetching-posts-data\"><a href=\"#Fetching-posts-data\" class=\"headerlink\" title=\"Fetching posts data\"></a>Fetching posts data</h3><p>Let’s fill our new <code>List</code> component with life! As mentioned earlier, we’ll use our Smart Contract’s <code>numPosts()</code> method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the <code>List</code> component is ready, we’ll use its <code>componentDidMount()</code> method for that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">      const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">      list.push(post);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that in the above code we don’t <code>await</code> the calls to every individual post. This is on purpose as we don’t want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using <code>Promise.all().</code></p>\n<p>Last but not least, we need to add an <code>id</code> property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post’s index as <code>id</code>. Once that is done, we can use <code>setState()</code> to update our component’s state and render the list:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async componentDidMount() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>That’s it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we’ll have to reload the browser every time after adding a post. However, this we’ll address now.</p>\n<h3 id=\"Reloading-posts\"><a href=\"#Reloading-posts\" class=\"headerlink\" title=\"Reloading posts\"></a>Reloading posts</h3><p>There is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the <code>createPost</code> component tell the <code>List</code> component to reload its posts. However, there’s no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of <code>CreatePost</code> and <code>List</code> (in our case <code>App</code>), and have it pass that logic down to places where its needed. This also means we’ll be fetching the list inside <code>App</code> and pass down the pure data to <code>List</code>.</p>\n<p>If this sounds overwhelming, no worries, it’s more trivial than that! Let’s start by introducing a <code>loadPosts()</code> function in our <code>App</code> component. Essentially we’re moving everything from <code>List</code>‘s <code>componentDidMount()</code> function into <code>App</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async loadPosts() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    if (totalPosts &gt; 0) &#123;</span><br><span class=\"line\">      for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">        const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">        list.push(post);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">    list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">      post.id &#x3D; index;</span><br><span class=\"line\">      return post;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    list;</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To make this work we also need to introduce a <code>state</code> with the dedicated <code>posts</code>. After that, we make sure <code>loadPosts()</code> is called when <code>App</code> is mounted:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    await this.loadPosts();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, all we have to do is to pass the <code>posts</code> down to <code>List</code> and <code>loadPosts()</code> to <code>CreatePost</code> as a callback handler if you will:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">      &lt;CreatePost afterPostHandler&#x3D;&#123;this.loadPosts.bind(this)&#125;&#x2F;&gt;</span><br><span class=\"line\">      &lt;List posts&#x3D;&#123;this.state.posts&#125;&#x2F;&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can consume <code>posts</code> and <code>afterPostHandler()</code> from <code>this.props</code> respectively. In <code>List</code>‘s <code>render()</code> function we’ll do (notice we don’t rely on <code>this.state</code> anymore):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (&lt;React.Fragment&gt;</span><br><span class=\"line\">    &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;)&#125;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And in <code>CreatePost</code> we call <code>afterPostHandler()</code> after a post has been created:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  await this.props.afterPostHandler();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful! The list now automatically reloads after creating posts, give it a try!</p>\n<h2 id=\"Add-voting-functionality\"><a href=\"#Add-voting-functionality\" class=\"headerlink\" title=\"Add voting functionality\"></a>Add voting functionality</h2><p>The final feature we’ll be implementing is the up and down voting of posts. This is where we come back to our <code>Post</code> component that we’ve created earlier. In order to make this feature complete we’ll have to:</p>\n<ul>\n<li>Render the number of up and down votes per post</li>\n<li>Add handlers for users to up and down vote</li>\n<li>Determine if a user can vote on a post</li>\n</ul>\n<h3 id=\"Rendering-number-of-votes\"><a href=\"#Rendering-number-of-votes\" class=\"headerlink\" title=\"Rendering number of votes\"></a>Rendering number of votes</h3><p>Let’s start with the first one, as it’s the most trivial one. While the number of up and down votes is already attached to the data that we receive from our <code>DReddit</code> Smart Contract, it’s not yet in the right format as it comes back as a string. Let’s make sure we parse the up and down vote counts on posts by extending our <code>App</code>‘s <code>loadPosts()</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async loadPosts() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    post.upvotes &#x3D; parseInt(post.upvotes, 10);</span><br><span class=\"line\">    post.downvotes &#x3D; parseInt(post.downvotes, 10);</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can pass each post’s <code>upvotes</code> and <code>downvotes</code> to every <code>Post</code> component via its <code>props</code> inside our <code>List</code> component:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (&lt;Post</span><br><span class=\"line\">          key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">          description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">          creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">          upvotes&#x3D;&#123;post.upvotes&#125;</span><br><span class=\"line\">          downvotes&#x3D;&#123;post.downvotes&#125;</span><br><span class=\"line\">          owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Rendering the number of <code>upvotes</code> and <code>downvotes</code> is then really just a matter of interpolating them in <code>Post</code>‘s <code>render()</code> function. We’re just going to add them next to the buttons, but feel free to put them somewhere else:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">        &#123;this.props.upvotes&#125; &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &#123;this.props.downvotes&#125; &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Implement-up-and-down-votes\"><a href=\"#Implement-up-and-down-votes\" class=\"headerlink\" title=\"Implement up and down votes\"></a>Implement up and down votes</h3><p>Similar to when creating new posts, making the up and down vote buttons work requires sending transactions to our <code>DReddit</code> Smart Contract. So we’ll do almost the same thing as in our <code>CreatePost</code> component, just that we’re calling the Smart Contract’s <code>vote()</code> method. If you recall, the <code>vote()</code> method takes a post id and the vote type, which is either <code>NONE</code>, <code>UPVOTE</code> or <code>DOWNVOTE</code> and are stored as <code>uint8</code>.</p>\n<p>It makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we’ll use a hash object instead:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const BALLOT &#x3D; &#123;</span><br><span class=\"line\">  NONE: 0,</span><br><span class=\"line\">  UPVOTE: 1,</span><br><span class=\"line\">  DOWNVOTE: 2</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We don’t actually have the post id available in our <code>Post</code> component yet. That’s easily added in our <code>List</code> component, by now you should know how to do that!</p>\n<p>We can then add click handlers to our up and down vote buttons and pass one of the <code>BALLOT</code> types to them (notice that we added <code>BALLOT.NONE</code> only for completeness-sake but don’t actually use it in our code):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.UPVOTE)&#125;&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.DOWNVOTE)&#125;&gt;Downvote&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The next thing we need to do is sending that vote type along with the post id to our Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const vote &#x3D; DReddit.methods.vote(this.props.id, ballot);</span><br><span class=\"line\">  const estimate &#x3D; await vote.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we also want to update the view when a vote has been successfully sent. Right now we’re reading a post’s up and down votes from its <code>props</code> and render them accordingly. However, we want to update those values as votes are coming in. For that we’ll change our code to only read the up and down votes from <code>props</code> once and store them in the component’s state.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We also change the component’s view to render the values from state instead of <code>props</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<p>After that we can update the state with new votes using <code>setState()</code>, right after a vote has been sent:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    upvotes: this.state.upvotes + (ballot &#x3D;&#x3D; BALLOT.UPVOTE ? 1 : 0),</span><br><span class=\"line\">    downvotes: this.state.downvotes + (ballot &#x3D;&#x3D; BALLOT.DOWNVOTE ? 1 : 0)</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>That’s it!</strong> We can now up and down vote on posts…but only once! Yes, that’s right. When we try to vote multiple times on the same post, we’ll actually receive an error. That’s because, if you remember, there’s a restriction in our Smart Contract that makes sure users can not vote on posts that they’ve either already voted on, or created themselves.</p>\n<p>Let’s make sure this is reflected in our application’s UI and wrap up this tutorial!</p>\n<h3 id=\"Use-canVote-to-disable-vote-buttons\"><a href=\"#Use-canVote-to-disable-vote-buttons\" class=\"headerlink\" title=\"Use canVote() to disable vote buttons\"></a>Use <code>canVote()</code> to disable vote buttons</h3><p>We’ll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract’s <code>canVote()</code> method. Another thing we need to consider is that we shouldn’t allow a user to vote when a vote for the same post is already in flight but hasn’t completed yet.</p>\n<p>Let’s introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes,</span><br><span class=\"line\">      canVote: true,</span><br><span class=\"line\">      submitting: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, we update our <code>Post</code> component’s <code>render()</code> function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const disabled &#x3D; this.state.submitting || !this.state.canVote;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, we have to make sure the state properties are updated accordingly. We’ll call our Smart Contract’s <code>canVote()</code> method when a post is initialized:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    const canVote &#x3D; await DReddit.methods.canVote(this.props.id).call();</span><br><span class=\"line\">    this.setState(&#123; topic, content, canVote &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And when a vote is being made, we set <code>submitting</code> to <code>true</code> right before we send a transaction and set it back to <code>false</code> again when the transaction is done. At this point, we also know that a vote has been made on this post, so <code>canVote</code> can be set to <code>false</code> at the same time:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123; submitting: true &#125;);</span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate + 1000&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    canVote: false,</span><br><span class=\"line\">    submitting: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>And we’re done!</strong></p>\n<h2 id=\"Wrapping-it-up\"><a href=\"#Wrapping-it-up\" class=\"headerlink\" title=\"Wrapping it up\"></a>Wrapping it up</h2><p>Congratulations! You’ve completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:</p>\n<ul>\n<li>Sort the posts in reversed chronological order so that the latest post is always on top</li>\n<li>Rely on Smart Contracts Events to reload list</li>\n<li>Introduce routing so there can be different views for creating and viewing posts</li>\n<li>Use CSS to make the application look nice</li>\n</ul>\n<p>We hope you’ve learned that it’s not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.</p>\n<p><strong>We’ve recorded every single step of this tutorial <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">in this repository</a></strong>, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">follow us on Twitter</a> as well for updates!</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p>Hopefully you’ve read <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\">the first</a> and <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\">second part</a> of this tutorial on building a decentralized Reddit application using Embark. If not, we highly recommend you doing so, because in this part, we’ll be focussing on building the front-end for our application and continue where we’ve left off.</p>\n<ul>\n<li><a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/\"><strong>Part 1</strong> - Setting up the project and implementing a Smart Contract</a></li>\n<li><a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/\"><strong>Part 2</strong> - Testing the Smart Contract through EmbarkJS</a></li>\n</ul>\n<p>We’ll be using React as a client-side JavaScript library to build our application. However, we can use any framework of our choice, so feel free to follow along while using your favourite framework equivalents!</p>\n<p><strong>The code for this tutorial can be found in <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">this repository</a></strong>.</p>\n<h2 id=\"Rendering-our-first-component\"><a href=\"#Rendering-our-first-component\" class=\"headerlink\" title=\"Rendering our first component\"></a>Rendering our first component</h2><p>Alright, before we jump straight into building components that will talk to our Smart Contract instance, let’s first actually render a simple text on the screen just to make sure our setup is working correctly.</p>\n<p>For that, what we’ll do is adding React as a dependency to our project. In fact, we’ll be relying on two packages - <code>react</code> and <code>react-dom</code>. The latter is needed to render components defined with React in a DOM environment, which is what a Browser essentially is.</p>\n<p>Let’s add the following <code>dependencies</code> section to our projects <code>package.json</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&quot;dependencies&quot;: &#123;</span><br><span class=\"line\">  &quot;react&quot;: &quot;^16.4.2&quot;,</span><br><span class=\"line\">  &quot;react-dom&quot;: &quot;^16.4.2&quot;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we need to actually install those dependencies. For that we simply execute the following command in our terminal of choice:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n\n<p>Now we can go ahead and actually make use of React. As Embark is framework agnostic, we won’t be focussing too much on details specific to React, just the least amount that is needed to make our app work.</p>\n<p>Creating components in React is pretty straight forward. All we need to do is creating a class that extends React’s <code>Component</code> type and add a <code>render()</code> method that will render the component’s view.</p>\n<p>Let’s create a folder for all of our components inside our projects:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ mkdir app&#x2F;js&#x2F;components</span><br></pre></td></tr></table></figure>\n\n<p>Next, we create a file for our root component. We call it simply <code>App</code> and use the same file name:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ touch app&#x2F;js&#x2F;components&#x2F;App.js</span><br></pre></td></tr></table></figure>\n\n<p>Alright, as mentioned earlier, we really just want to render some text on the screen for starters. Here’s what that could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>This is probably self explanatory, but all we’re doing here is importing <code>React</code> and its <code>Component</code> type and create an <code>App</code> class that extends <code>Component</code>. The <code>render()</code> method will be used by React to render the component’s view and has to return a template that is written in JSX syntax. JSX looks a lot like HTML just that it comes with extra syntax to embed things like control structures. We’ll make use of that later!</p>\n<p>Okay now that we have this component defined, we need to tell React to actually render this particular component. For that, we head over to <code>app/js/index.js</code> and add the following code:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React from &#39;react&#39;;</span><br><span class=\"line\">import &#123; render &#125; from &#39;react-dom&#39;;</span><br><span class=\"line\">import &#123; App &#125; from &#39;.&#x2F;components&#x2F;App&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br></pre></td></tr></table></figure>\n\n<p>We need to import <code>React</code> again as it has to be available in this script’s scope. We also import a <code>render</code> function from <code>react-dom</code>, which is used to render our root component (<code>App</code>) into some element inside our HTML document. In this case we say that the element in which we want to render our root component is the element with the id <code>root</code>.</p>\n<p>Let’s set this up really quick. In <code>app/index.html</code> add a new element with a <code>root</code> id:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;body&gt;</span><br><span class=\"line\">\t&lt;div id&#x3D;&quot;root&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class=\"line\">\t&lt;script src&#x3D;&quot;js&#x2F;app.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class=\"line\">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that we’ve also moved the <code>script</code> tag inside the body tag, after the element with the <code>root</code> id. This is just one way to work around the fact that the element we’re referencing inside our <code>render()</code> method is actually available in the document at the time the script is executed.</p>\n<p>That should do it! Let’s spin up Embark, we should then see our component rendered on the screen:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ embark run</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Building-a-CreatePost-component\"><a href=\"#Building-a-CreatePost-component\" class=\"headerlink\" title=\"Building a CreatePost component\"></a>Building a <code>CreatePost</code> component</h2><p>Alright, enough warm up. Time to build components that are useful. We start off with building a component that lets users create posts through our application. Similar to <code>App</code>, we’ll introduce a new component <code>createPost</code> that comes with a <code>render()</code> method to display a simple form for entering data. We’ll also need to add event handlers to the form so that when a user submits the form, we can actually access the data and later on send it to our Smart Contract.</p>\n<p>Creating a simple form is very straight forward:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;form&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">          &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; &#x2F;&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;div&gt;</span><br><span class=\"line\">          &lt;textarea name&#x3D;&quot;content&quot;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">        &lt;&#x2F;div&gt;</span><br><span class=\"line\">        &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;form&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To actually render this component on screen, we need to make it part of our <code>App</code> component. Or, to be more specific, have the <code>App</code> component render our <code>CreatePost</code> component. For now we can simply add it to <code>App</code>‘s render function like this;</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; CreatePost &#125; from &#39;.&#x2F;CreatePost&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&amp;&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>React doesn’t allow for multiple root elements in a single component’s view, so we have to take advantage of <code>React.Fragment</code>. Obviously, there’s not too much going on here apart from us rendering a static form. Also notice that we don’t spend too much time and effort on making the form look nice as we focus on the functionality for now. Consider that homework!</p>\n<p>Let’s make this form functional. First of all we want make sure that data entered into the form is available inside our component. React components maintain an object called <code>state</code> that can be used for exactly that. All we have to do is to initialize it with some initial values and update it using a <code>setState()</code> method if needed.</p>\n<p>Let’s introduce <code>state</code> in our component by adding a constructor and initializing it accordingly:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      loading: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next we bind that state to our form fields:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;topic&quot; value&#x3D;&#123;this.state.topic&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea name&#x3D;&quot;content&quot; value&#x3D;&#123;this.state.content&#125;&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>No worries, we’ll make use of <code>loading</code> in a second. Last but not least we want to add some event handlers so that changes in the view will be reflected back to our component’s state as the user is entering data. To make sure everything works fine, we’ll also add an event handler for the form submission and output the data in <code>state</code>. Here’s what our <code>handleChange()</code> and <code>createPost()</code> handlers looks like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class CreatePost extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  handleChange(field, event) &#123;</span><br><span class=\"line\">    this.setState(&#123;</span><br><span class=\"line\">      [field]: event.target.value</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  createPost(event) &#123;</span><br><span class=\"line\">    event.preventDefault();</span><br><span class=\"line\">    console.log(this.state);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice how we’re using <code>setState()</code> inside <code>handleChange()</code> to update whatever field name has been passed to that method. Now all we need to do is attach those handlers to our form:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;label&gt;Topic&lt;&#x2F;label&gt;</span><br><span class=\"line\">    &lt;input</span><br><span class=\"line\">      type&#x3D;&quot;text&quot;</span><br><span class=\"line\">      name&#x3D;&quot;topic&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.topic&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;topic&#39;, e)&#125; &#x2F;&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;div&gt;</span><br><span class=\"line\">    &lt;textarea</span><br><span class=\"line\">      name&#x3D;&quot;content&quot;</span><br><span class=\"line\">      value&#x3D;&#123;this.state.content&#125;</span><br><span class=\"line\">      onChange&#x3D;&#123;e &#x3D;&gt; handleChange(&#39;content&#39;, e&#125;)&gt;&lt;&#x2F;textarea&gt;</span><br><span class=\"line\">  &lt;&#x2F;div&gt;</span><br><span class=\"line\">  &lt;button type&#x3D;&quot;submit&quot;&gt;Post&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Since we’re using the <code>onSubmit()</code> handler of the form, it’s also important that we either add a <code>type=&quot;submit&quot;</code> to our <code>button</code> or change the button to an <code>&lt;input type=&quot;submit&quot;&gt;</code> element. Otherwise, the form won’t emit a submit event.</p>\n<p>Nice! With that in place, we should see the component’s <code>state</code> in the console when submitting the form! The next challenge is to use <code>EmbarkJS</code> and its APIs to make our component talk to our Smart Contract instance.</p>\n<h3 id=\"Uploading-data-to-IPFS\"><a href=\"#Uploading-data-to-IPFS\" class=\"headerlink\" title=\"Uploading data to IPFS\"></a>Uploading data to IPFS</h3><p>Recall from our <a href=\"/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/#Creating-posts\">first part</a> of this tutorial that our <code>DReddit</code> Smart Contract comes with a <code>createPost()</code> method that takes some bytes as post data. Those bytes are actually not the post data itself, but an IPFS hash that points to the post data. In other words, we’ll have to somehow create such a hash and make sure the data is uploaded to IPFS as well.</p>\n<p>Luckily, EmbarkJS comes with plenty of convenient APIs to do exactly that! <code>EmbarkJS.Storage.saveText()</code> takes a string, uploads it to IPFS and returns its hash which can then be used to create a post using our Smart Contract. One thing to keep in mind is that those APIs are asynchronous. Similar to how we wrote tests in <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/#Testing-createPost\">part two</a> of this tutorial, we’ll use <code>async/await</code> to write asynchronous code in a synchronous fashion.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  event.preventDefault();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    loading: true</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  const ipfsHash &#x3D; await EmbarkJS.Storage.saveText(JSON.stringify(&#123;</span><br><span class=\"line\">    topic: this.state.topic,</span><br><span class=\"line\">    content: this.state.content</span><br><span class=\"line\">  &#125;));</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We use <code>JSON.stringify()</code> on an object that holds the <code>topic</code> and <code>content</code> of the post to be created. This is also the first time we put <code>loading</code> into action. Setting it to <code>true</code> before, and <code>false</code> after we’ve performed our operations lets us render a useful message as the user is waiting for updates.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;form onSubmit&#x3D;&#123;e &#x3D;&gt; createPost(e)&#125;&gt;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  &#123;this.state.loading &amp;&amp;</span><br><span class=\"line\">    &lt;p&gt;Posting...&lt;&#x2F;p&gt;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we’re not done yet though. All we do right now is uploading the post’s data to IPFS and receiving the hash, but we still need to take that hash and send it to our Smart Contract using its <code>createPost()</code> method. Let’s do that!</p>\n<h3 id=\"Sending-transactions-to-create-posts\"><a href=\"#Sending-transactions-to-create-posts\" class=\"headerlink\" title=\"Sending transactions to create posts\"></a>Sending transactions to create posts</h3><p>To send a transaction to our Smart Contract, we can again take advantage of EmbarkJS’ APIs, similar to how we did it in the <a href=\"/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2\">second part</a>. We also need to get hold of an Ethereum account to send the transaction from. This will be very straight forward as we’ll be just relying on the accounts that are generated by the Ethereum node that Embark spins up for us.</p>\n<p>Once we have those things in place we can get a gas estimation for our transaction and send the data over. Here’s how we retrieve our accounts, notice that <code>async/await</code> can be used here as well:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next up we’ll import a <code>DReddit</code> Smart Contract instance from EmbarkJS and use it to get a gas estimation from <code>web3</code>. We can then use the estimation and one of our accounts to actually send the transaction:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import DReddit from &#39;.&#x2F;artifacts&#x2F;contracts&#x2F;DReddit&#39;;</span><br><span class=\"line\">...</span><br><span class=\"line\"></span><br><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const createPost &#x3D; DReddit.methods.createPost(web3.utils.toHex(ipfsHash));</span><br><span class=\"line\">  const estimate &#x3D; await createPost.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Sweet, with that, our <code>createPost</code> method is done! We haven’t built a list of all created posts yet, but if we open up the app and create a post, we can use Embark to double check whether the transaction went through successfully. Simply watch the output in the terminal after running <code>embark run</code>. We should see a confirmation that looks something like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Blockchain&gt; DReddit.createPost(&quot;0x516d5452427a47415153504552614645534173335133765a6b59436633634143776368626263387575623434374e&quot;) | 0xbbeb9fa1eb4e3434c08b31409c137c2129de65eb335855620574c537b3004f29 | gas:136089 | blk:18455 | status:0x1</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-Post-component\"><a href=\"#Creating-a-Post-component\" class=\"headerlink\" title=\"Creating a Post component\"></a>Creating a Post component</h2><p>The next challenge lies in fetching all created posts from our Smart Contract and IPFS so we can render them on screen. We start simple and first create a new component that will render a single post. After that we’ll look into rendering a list of posts dynamically, based on the data we’re fetching.</p>\n<p>Again, our application won’t look particularly pretty, we’ll just focus on getting the core functionality right. A post component needs to render the post topic, its content, the owner of the post, ideally the date when it has been created, and a button to up and down vote respectively.</p>\n<p>Here’s what such a component with a basic template could look like:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;Some Topic&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;This is the content of a post&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at 2019-02-18 by 0x00000000000000&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There are different ways to make the data being rendered dynamic. Usually, we would probably pass a one or more properties to the <code>Post</code> component that represents the entire post object and can then be displayed inside its <code>render()</code> method. However, for this tutorial we’re going to choose a slightly different path. We’ll make <code>Post</code> receive IPFS hash that’s stored in the Smart Contract and have it resolve the data itself.</p>\n<p>Let’s stay consistent with our naming and say the property we’re expecting to be filled with data is called <code>description</code>, just like the one used inside the Smart Contract. We can then use <code>EmbarkJS.Storage.get()</code> with the IPFS hash to fetch the data that represents the actual post. In order to render the data inside <code>Post</code>‘s view, we’ll parse it and use <code>setState()</code> accordingly.</p>\n<p>To make sure all of that happens once the component is ready to do its work, we’ll do all of that inside its <code>componentDidMount()</code> life cycle hook:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\">import EmbarkJS from &#39;.artifacts&#x2F;embarkjs&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const ipfsHash &#x3D; web3.utils.toAscii(this.props.description);</span><br><span class=\"line\">    const data &#x3D; await EmbarkJS.Storage.get(ipfsHash);</span><br><span class=\"line\">    const &#123; topic, content &#125; &#x3D; JSON.parse(data);</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; topic, content &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>There’s one gotcha to keep in mind here: Calling <code>EmbarkJS.Storage.get()</code> or any <code>EmbarkJS</code> function on page load can fail, because the storage system might not be fully initialized yet. This wasn’t a problem for the previous <code>EmbarkJS.Storage.uploadText()</code> because we called that function well after Embark had finished initializing</p>\n<p>Theoretically however, there could be a race condition even for creating a post. To ensure that EmbarkJS is ready at any point in time, we use its <code>onReady()</code> hook. <code>EmbarkJS.onReady()</code> takes a callback which will be executed once EmbarkJS is ready to go. The best place to do this in our app is probably where we attempt to render our application, so let’s wrap that <code>render()</code> call in our <code>App</code> component inside Embark’s <code>onReady()</code> function.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">EmbarkJS.onReady(() &#x3D;&gt; &#123;</span><br><span class=\"line\">  render(&lt;App &#x2F;&gt;, document.getElementById(&#39;root&#39;));</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>This also means our app will only render when EmbarkJS is ready, which theoretically could take a little longer. However in this tutorial, chances are very low this is becoming a problem.</p>\n<p>Let’s also quickly add the <code>owner</code> and creation date. The <code>owner</code> is expected to be passed down as a property. The same goes for the creation date. We just need to make sure it’ll be formatted in a way the users can make sense of the data. We’ll use the <code>dateformat</code> library for that and install it as a dependency like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install --save dateformat</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can update our <code>Post</code> component’s <code>render()</code> function to calculate a properly formatted date based on the <code>creationDate</code> that has been passed down through properties:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">import dateformat from &#39;dateformat&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    const formattedDate &#x3D; dateformat(</span><br><span class=\"line\">      new Date(this.props.creationDate * 1000),</span><br><span class=\"line\">      &#39;yyyy-mm-dd HH:MM:ss&#39;</span><br><span class=\"line\">    );</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;hr &#x2F;&gt;</span><br><span class=\"line\">        &lt;h3&gt;&#123;this.state.topic&#125;&lt;&#x2F;h3&gt;</span><br><span class=\"line\">        &lt;p&gt;&#123;this.state.content&#125;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;p&gt;&lt;small&gt;&lt;i&gt;created at &#123;formattedDate&#125; by &#123;this.props.owner&#125;&lt;&#x2F;i&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;</span><br><span class=\"line\">        &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that variables created inside <code>render()</code> can be interpolated as they are - there’s no need to make them available on <code>props</code> or <code>state</code>. As a matter of fact, <code>props</code> are always considered read only in React.</p>\n<p>Let’s try out our new <code>Post</code> component with some static data by adding it to our <code>App</code> component’s view. Next up, we’ll make this dynamic by fetching the posts from our Smart Contract.</p>\n<p><strong>Attention</strong>: The hash used in this snippet might not be available in your local IPFS node, so you’ll have to get hold of your own hash. This can be down by logging out the hash that is returned from IPFS and convert it to hex code.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;Post</span><br><span class=\"line\">          description&#x3D;&quot;0x516d655338444b53464546725369656a747751426d683377626b56707566335770636e4c715978726b516e4b5250&quot;</span><br><span class=\"line\">          creationDate&#x3D;&quot;1550073772&quot;</span><br><span class=\"line\">          owner&#x3D;&quot;0x00000000000&quot;</span><br><span class=\"line\">          &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Creating-a-List-component\"><a href=\"#Creating-a-List-component\" class=\"headerlink\" title=\"Creating a List component\"></a>Creating a List component</h2><p>Before we can move on with building a component that renders a list of posts, we’ll have to extend our Smart Contract with one more method. Since there’s no canonical way to fetch array data from a Smart Contract, we’ll be fetching the post data for each post one by one. We do that by first fetching the total number of posts and use that number to iterate over the available indices, which we can then use to fetch the actual posts.</p>\n<p>Let’s introduce a method <code>numPosts()</code> in our <code>DReddit</code> Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">function numPosts() public view returns (uint) &#123;</span><br><span class=\"line\">  return posts.length;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>posts.length</code> will increase as we’re adding posts, so it will always be the single source of truth when it comes to determining indices of posts. This would be a good opportunity to write another test - we’ll leave that up to you!</p>\n<p>With that in place, we can start building a new <code>List</code> component. The <code>List</code> component maintains a list of posts to render on screen, so we can start simple again and introduce the bare minimum like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import React, &#123; Component &#125; from &#39;react&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.state.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (</span><br><span class=\"line\">          &lt;Post</span><br><span class=\"line\">            key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">            description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">            creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">            owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The most interesting part here is probably the <code>render()</code> method, in which we iterate over all <code>state.posts</code> (which at the moment is empty) and then render a <code>Post</code> component for every iteration. Another thing to note is that every <code>Post</code> receives a <code>key</code>. This is required in React when creating views from loops. We’ve never introduced a <code>post.id</code> in this tutorial, but don’t worry, we’ll fix that in a moment.</p>\n<p>We can already put that in our <code>App</code> component. It won’t render anything as we haven’t fetched any posts yet, but that’s what we’ll do next.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">import &#123; List &#125; from &#39;.&#x2F;List&#39;;</span><br><span class=\"line\"></span><br><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">        &lt;CreatePost &#x2F;&gt;</span><br><span class=\"line\">        &lt;List &#x2F;&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Fetching-posts-data\"><a href=\"#Fetching-posts-data\" class=\"headerlink\" title=\"Fetching posts data\"></a>Fetching posts data</h3><p>Let’s fill our new <code>List</code> component with life! As mentioned earlier, we’ll use our Smart Contract’s <code>numPosts()</code> method to get hold of the total number of posts available. We then use that number to iterate over all indices and request every post individually. Since this is logic we want to execute once the <code>List</code> component is ready, we’ll use its <code>componentDidMount()</code> method for that:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">      const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">      list.push(post);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Notice that in the above code we don’t <code>await</code> the calls to every individual post. This is on purpose as we don’t want to wait on each and every promise to resolve, but first collect all of the promises we need and then resolve them all in one go using <code>Promise.all().</code></p>\n<p>Last but not least, we need to add an <code>id</code> property to every post as mentioned earlier. This is easily done by simply iterating over all posts and assigning the post’s index as <code>id</code>. Once that is done, we can use <code>setState()</code> to update our component’s state and render the list:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async componentDidMount() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>That’s it! Our application now renders a list of all created posts. Unfortunately, posts are not being re-fetched  automatically when adding new posts. For the time being, we’ll have to reload the browser every time after adding a post. However, this we’ll address now.</p>\n<h3 id=\"Reloading-posts\"><a href=\"#Reloading-posts\" class=\"headerlink\" title=\"Reloading posts\"></a>Reloading posts</h3><p>There is certainly different ways to make the list of posts update automatically, so take the following approach with a grain of salt. What we need is a way to have the <code>createPost</code> component tell the <code>List</code> component to reload its posts. However, there’s no communication layer in place when building a simple React app like this, so the most straight forward way to make this possible, is to move the logic of loading the posts in the parent component of <code>CreatePost</code> and <code>List</code> (in our case <code>App</code>), and have it pass that logic down to places where its needed. This also means we’ll be fetching the list inside <code>App</code> and pass down the pure data to <code>List</code>.</p>\n<p>If this sounds overwhelming, no worries, it’s more trivial than that! Let’s start by introducing a <code>loadPosts()</code> function in our <code>App</code> component. Essentially we’re moving everything from <code>List</code>‘s <code>componentDidMount()</code> function into <code>App</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async loadPosts() &#123;</span><br><span class=\"line\">    const totalPosts &#x3D; await DReddit.methods.numPosts().call();</span><br><span class=\"line\"></span><br><span class=\"line\">    let list &#x3D; [];</span><br><span class=\"line\"></span><br><span class=\"line\">    if (totalPosts &gt; 0) &#123;</span><br><span class=\"line\">      for (let i &#x3D; 0; i &lt; totalPosts; i++) &#123;</span><br><span class=\"line\">        const post &#x3D; DReddit.methods.posts(i).call();</span><br><span class=\"line\">        list.push(post);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    list &#x3D; await Promise.all(list);</span><br><span class=\"line\">    list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">      post.id &#x3D; index;</span><br><span class=\"line\">      return post;</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    list;</span><br><span class=\"line\"></span><br><span class=\"line\">    this.setState(&#123; posts: list &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>To make this work we also need to introduce a <code>state</code> with the dedicated <code>posts</code>. After that, we make sure <code>loadPosts()</code> is called when <code>App</code> is mounted:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class App extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      posts: []</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    await this.loadPosts();</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, all we have to do is to pass the <code>posts</code> down to <code>List</code> and <code>loadPosts()</code> to <code>CreatePost</code> as a callback handler if you will:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      &lt;h1&gt;DReddit&lt;&#x2F;h1&gt;</span><br><span class=\"line\">      &lt;CreatePost afterPostHandler&#x3D;&#123;this.loadPosts.bind(this)&#125;&#x2F;&gt;</span><br><span class=\"line\">      &lt;List posts&#x3D;&#123;this.state.posts&#125;&#x2F;&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done, we can consume <code>posts</code> and <code>afterPostHandler()</code> from <code>this.props</code> respectively. In <code>List</code>‘s <code>render()</code> function we’ll do (notice we don’t rely on <code>this.state</code> anymore):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  return (&lt;React.Fragment&gt;</span><br><span class=\"line\">    &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">    &#125;)&#125;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And in <code>CreatePost</code> we call <code>afterPostHandler()</code> after a post has been created:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async createPost(event) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  await createPost.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">  await this.props.afterPostHandler();</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    topic: &#39;&#39;,</span><br><span class=\"line\">    content: &#39;&#39;,</span><br><span class=\"line\">    loading: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Wonderful! The list now automatically reloads after creating posts, give it a try!</p>\n<h2 id=\"Add-voting-functionality\"><a href=\"#Add-voting-functionality\" class=\"headerlink\" title=\"Add voting functionality\"></a>Add voting functionality</h2><p>The final feature we’ll be implementing is the up and down voting of posts. This is where we come back to our <code>Post</code> component that we’ve created earlier. In order to make this feature complete we’ll have to:</p>\n<ul>\n<li>Render the number of up and down votes per post</li>\n<li>Add handlers for users to up and down vote</li>\n<li>Determine if a user can vote on a post</li>\n</ul>\n<h3 id=\"Rendering-number-of-votes\"><a href=\"#Rendering-number-of-votes\" class=\"headerlink\" title=\"Rendering number of votes\"></a>Rendering number of votes</h3><p>Let’s start with the first one, as it’s the most trivial one. While the number of up and down votes is already attached to the data that we receive from our <code>DReddit</code> Smart Contract, it’s not yet in the right format as it comes back as a string. Let’s make sure we parse the up and down vote counts on posts by extending our <code>App</code>‘s <code>loadPosts()</code> method like this:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async loadPosts() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  list &#x3D; list.map((post, index) &#x3D;&gt; &#123;</span><br><span class=\"line\">    post.id &#x3D; index;</span><br><span class=\"line\">    post.upvotes &#x3D; parseInt(post.upvotes, 10);</span><br><span class=\"line\">    post.downvotes &#x3D; parseInt(post.downvotes, 10);</span><br><span class=\"line\">    return post;</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Once that is done we can pass each post’s <code>upvotes</code> and <code>downvotes</code> to every <code>Post</code> component via its <code>props</code> inside our <code>List</code> component:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class List extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    return (&lt;React.Fragment&gt;</span><br><span class=\"line\">      &#123;this.props.posts.map(post &#x3D;&gt; &#123;</span><br><span class=\"line\">        return (&lt;Post</span><br><span class=\"line\">          key&#x3D;&#123;post.id&#125;</span><br><span class=\"line\">          description&#x3D;&#123;post.description&#125;</span><br><span class=\"line\">          creationDate&#x3D;&#123;post.creationDate&#125;</span><br><span class=\"line\">          upvotes&#x3D;&#123;post.upvotes&#125;</span><br><span class=\"line\">          downvotes&#x3D;&#123;post.downvotes&#125;</span><br><span class=\"line\">          owner&#x3D;&#123;post.owner&#125;</span><br><span class=\"line\">          &#x2F;&gt;)</span><br><span class=\"line\">      &#125;)&#125;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Rendering the number of <code>upvotes</code> and <code>downvotes</code> is then really just a matter of interpolating them in <code>Post</code>‘s <code>render()</code> function. We’re just going to add them next to the buttons, but feel free to put them somewhere else:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  render() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    return (</span><br><span class=\"line\">      &lt;React.Fragment&gt;</span><br><span class=\"line\">        ...</span><br><span class=\"line\">        &#123;this.props.upvotes&#125; &lt;button&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">        &#123;this.props.downvotes&#125; &lt;button&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">    )</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Implement-up-and-down-votes\"><a href=\"#Implement-up-and-down-votes\" class=\"headerlink\" title=\"Implement up and down votes\"></a>Implement up and down votes</h3><p>Similar to when creating new posts, making the up and down vote buttons work requires sending transactions to our <code>DReddit</code> Smart Contract. So we’ll do almost the same thing as in our <code>CreatePost</code> component, just that we’re calling the Smart Contract’s <code>vote()</code> method. If you recall, the <code>vote()</code> method takes a post id and the vote type, which is either <code>NONE</code>, <code>UPVOTE</code> or <code>DOWNVOTE</code> and are stored as <code>uint8</code>.</p>\n<p>It makes sense to introduce the same representation in our app so we can use descriptive names, but rely on uint values at the same time. There are no enum data structures in JavaScript so we’ll use a hash object instead:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">const BALLOT &#x3D; &#123;</span><br><span class=\"line\">  NONE: 0,</span><br><span class=\"line\">  UPVOTE: 1,</span><br><span class=\"line\">  DOWNVOTE: 2</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We don’t actually have the post id available in our <code>Post</code> component yet. That’s easily added in our <code>List</code> component, by now you should know how to do that!</p>\n<p>We can then add click handlers to our up and down vote buttons and pass one of the <code>BALLOT</code> types to them (notice that we added <code>BALLOT.NONE</code> only for completeness-sake but don’t actually use it in our code):</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.UPVOTE)&#125;&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">&lt;button onClick&#x3D;&#123;e &#x3D;&gt; this.vote(BALLOT.DOWNVOTE)&#125;&gt;Downvote&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>\n\n<p>The next thing we need to do is sending that vote type along with the post id to our Smart Contract:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  const accounts &#x3D; await web3.eth.getAccounts();</span><br><span class=\"line\">  const vote &#x3D; DReddit.methods.vote(this.props.id, ballot);</span><br><span class=\"line\">  const estimate &#x3D; await vote.estimateGas();</span><br><span class=\"line\"></span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate&#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Obviously, we also want to update the view when a vote has been successfully sent. Right now we’re reading a post’s up and down votes from its <code>props</code> and render them accordingly. However, we want to update those values as votes are coming in. For that we’ll change our code to only read the up and down votes from <code>props</code> once and store them in the component’s state.</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>We also change the component’s view to render the values from state instead of <code>props</code>:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<p>After that we can update the state with new votes using <code>setState()</code>, right after a vote has been sent:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    upvotes: this.state.upvotes + (ballot &#x3D;&#x3D; BALLOT.UPVOTE ? 1 : 0),</span><br><span class=\"line\">    downvotes: this.state.downvotes + (ballot &#x3D;&#x3D; BALLOT.DOWNVOTE ? 1 : 0)</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>That’s it!</strong> We can now up and down vote on posts…but only once! Yes, that’s right. When we try to vote multiple times on the same post, we’ll actually receive an error. That’s because, if you remember, there’s a restriction in our Smart Contract that makes sure users can not vote on posts that they’ve either already voted on, or created themselves.</p>\n<p>Let’s make sure this is reflected in our application’s UI and wrap up this tutorial!</p>\n<h3 id=\"Use-canVote-to-disable-vote-buttons\"><a href=\"#Use-canVote-to-disable-vote-buttons\" class=\"headerlink\" title=\"Use canVote() to disable vote buttons\"></a>Use <code>canVote()</code> to disable vote buttons</h3><p>We’ll keep this one very simple - if a user cannot vote on a post, the voting buttons should be simply disabled. We can easily determine whether a user is allowed to vote by calling our Smart Contract’s <code>canVote()</code> method. Another thing we need to consider is that we shouldn’t allow a user to vote when a vote for the same post is already in flight but hasn’t completed yet.</p>\n<p>Let’s introduce a new state properties for that first. In general we can say that a user is allowed to vote, and that she is not submitting a vote in this very moment:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\"></span><br><span class=\"line\">  constructor(props) &#123;</span><br><span class=\"line\">    super(props);</span><br><span class=\"line\">    this.state &#x3D; &#123;</span><br><span class=\"line\">      topic: &#39;&#39;,</span><br><span class=\"line\">      content: &#39;&#39;,</span><br><span class=\"line\">      upvotes: this.props.upvotes,</span><br><span class=\"line\">      downvotes: this.props.downvotes,</span><br><span class=\"line\">      canVote: true,</span><br><span class=\"line\">      submitting: false</span><br><span class=\"line\">    &#125;;</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Next, we update our <code>Post</code> component’s <code>render()</code> function to disable the voting buttons if a vote is in flight, or a user is simply not allowed to vote:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">render() &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  const disabled &#x3D; this.state.submitting || !this.state.canVote;</span><br><span class=\"line\">  return (</span><br><span class=\"line\">    &lt;React.Fragment&gt;</span><br><span class=\"line\">      ...</span><br><span class=\"line\">      &#123;this.state.upvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Upvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">      &#123;this.state.downvotes&#125; &lt;button disabled&#x3D;&#123;disabled&#125; ...&gt;Downvote&lt;&#x2F;button&gt;</span><br><span class=\"line\">    &lt;&#x2F;React.Fragment&gt;</span><br><span class=\"line\">  )</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Last but not least, we have to make sure the state properties are updated accordingly. We’ll call our Smart Contract’s <code>canVote()</code> method when a post is initialized:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">export class Post extends Component &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  async componentDidMount() &#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    const canVote &#x3D; await DReddit.methods.canVote(this.props.id).call();</span><br><span class=\"line\">    this.setState(&#123; topic, content, canVote &#125;);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>And when a vote is being made, we set <code>submitting</code> to <code>true</code> right before we send a transaction and set it back to <code>false</code> again when the transaction is done. At this point, we also know that a vote has been made on this post, so <code>canVote</code> can be set to <code>false</code> at the same time:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">async vote(ballot) &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">  this.setState(&#123; submitting: true &#125;);</span><br><span class=\"line\">  await vote.send(&#123;from: accounts[0], gas: estimate + 1000&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">  this.setState(&#123;</span><br><span class=\"line\">    ...</span><br><span class=\"line\">    canVote: false,</span><br><span class=\"line\">    submitting: false</span><br><span class=\"line\">  &#125;);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><strong>And we’re done!</strong></p>\n<h2 id=\"Wrapping-it-up\"><a href=\"#Wrapping-it-up\" class=\"headerlink\" title=\"Wrapping it up\"></a>Wrapping it up</h2><p>Congratulations! You’ve completed the tutorial on building a simple decentralized Reddit application! You might have noticed that this is only the tip of the iceberg though, as there are so many things that can be done to improve and optimize this application. Here are some ideas for further exploration:</p>\n<ul>\n<li>Sort the posts in reversed chronological order so that the latest post is always on top</li>\n<li>Rely on Smart Contracts Events to reload list</li>\n<li>Introduce routing so there can be different views for creating and viewing posts</li>\n<li>Use CSS to make the application look nice</li>\n</ul>\n<p>We hope you’ve learned that it’s not too hard to build a DApp that uses IPFS and talks to Smart Contracts, and also how Embark can help you doing all of these things.</p>\n<p><strong>We’ve recorded every single step of this tutorial <a href=\"https://github.com/embarklabs/dreddit-tutorial\" target=\"_blank\" rel=\"noopener\">in this repository</a></strong>, so feel free to go ahead, clone it, play with it, compare it with your work or change it to your needs. There will be more tutorials of this kind in the future, so make sure to <a href=\"https://twitter.com/EmbarkProject\" target=\"_blank\" rel=\"noopener\">follow us on Twitter</a> as well for updates!</p>\n"},{"title":"Embark 5.1","author":"iuri_matias","summary":"Embark 5.1 release","layout":"blog-post","_content":"\nEmbark 5.1\n===\n\n## Interfaces & Libraries Configuration\n\nEmbark 5.1 adds two new configuration settings for Smart Contract configuration:\n\n`interfaces` - Any Smart Contract that represent an interface or is used for inheritance\n`libraries` - Any Smart Contract that is used as a library\n\nThis makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:\n\n```\ndeploy: {\n  Ownable: {\n    deploy: false\n  },\n  ...\n}\n```\n\nThe above can now be done via:\n\n```\ninterfaces: ['Ownable'],\ndeploy: {\n  ...\n}\n```\n\nFind the complete documentation [here](https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces).\n\n## getEvmVersion for conditional tests\n\nEmbark tests now include a helper `getEvmVersion` that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.\n\nFor example:\n\n```\n  it(\"cannot bid after 5 minutes\", async () => {\n    const evmVersion = await global.getEvmVersion();\n    if (evmVersion.indexOf(\"TestRPC\") === -1) return;\n\n    increaseTime(5000)\n\n    await assert.reverts(Auction.methods.bid(), {from: web3.eth.defaultAccount}, 'Returned error: VM Exception while processing transaction: cannot bid after auction expired');\n  })\n```\n\n## Nethermind plugin\n\nEmbark now comes with a [Nethermind](https://nethermind.io/) plugin.\nMore info about the plugin can be found [here](https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind)\n\n## Changelog\n\nFeatures\n@embark/deployment: introduce interfaces and libraries configuration (73d0443)\n@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)\n@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)\n@embark/testing: introduce proper request2 api for async/await (c947517)\n@embark/testing: add missing APIs to register console commands and API calls (bef582d)\nsupport Node.js v12.x and newer (c093cf8)\n\nBug Fixes\n@embark/cmd_controller: fix build command to escape on finish (e2767c2)\n@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)\n@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)\n@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)\n@embark/tests: Fix failing test with —node=embark (81af3af)\n@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)\n@embark/utils: fix deconstruct url to return port as an integer (4190d5e)\ntransaction-logger: fix circular dep issue with util.inspect (6f239f4)\n@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)\n@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)\n@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)\n@embark/proxy: Parse rpcPort from config as integer (9f7c682)\n","source":"_posts/2020-01-28-embark-5-1.md","raw":"title: Embark 5.1\nauthor: iuri_matias\nsummary: \"Embark 5.1 release\"\ncategories:\n  - announcements\n  - releases\nlayout: blog-post\n---\n\nEmbark 5.1\n===\n\n## Interfaces & Libraries Configuration\n\nEmbark 5.1 adds two new configuration settings for Smart Contract configuration:\n\n`interfaces` - Any Smart Contract that represent an interface or is used for inheritance\n`libraries` - Any Smart Contract that is used as a library\n\nThis makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:\n\n```\ndeploy: {\n  Ownable: {\n    deploy: false\n  },\n  ...\n}\n```\n\nThe above can now be done via:\n\n```\ninterfaces: ['Ownable'],\ndeploy: {\n  ...\n}\n```\n\nFind the complete documentation [here](https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces).\n\n## getEvmVersion for conditional tests\n\nEmbark tests now include a helper `getEvmVersion` that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.\n\nFor example:\n\n```\n  it(\"cannot bid after 5 minutes\", async () => {\n    const evmVersion = await global.getEvmVersion();\n    if (evmVersion.indexOf(\"TestRPC\") === -1) return;\n\n    increaseTime(5000)\n\n    await assert.reverts(Auction.methods.bid(), {from: web3.eth.defaultAccount}, 'Returned error: VM Exception while processing transaction: cannot bid after auction expired');\n  })\n```\n\n## Nethermind plugin\n\nEmbark now comes with a [Nethermind](https://nethermind.io/) plugin.\nMore info about the plugin can be found [here](https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind)\n\n## Changelog\n\nFeatures\n@embark/deployment: introduce interfaces and libraries configuration (73d0443)\n@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)\n@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)\n@embark/testing: introduce proper request2 api for async/await (c947517)\n@embark/testing: add missing APIs to register console commands and API calls (bef582d)\nsupport Node.js v12.x and newer (c093cf8)\n\nBug Fixes\n@embark/cmd_controller: fix build command to escape on finish (e2767c2)\n@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)\n@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)\n@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)\n@embark/tests: Fix failing test with —node=embark (81af3af)\n@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)\n@embark/utils: fix deconstruct url to return port as an integer (4190d5e)\ntransaction-logger: fix circular dep issue with util.inspect (6f239f4)\n@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)\n@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)\n@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)\n@embark/proxy: Parse rpcPort from config as integer (9f7c682)\n","slug":"embark-5-1","published":1,"date":"2020-01-28T00:00:00.000Z","updated":"2020-01-28T17:55:09.597Z","comments":1,"photos":[],"link":"","_id":"ck5y92ljl0000zf0e4dk642y7","content":"<h1 id=\"Embark-5-1\"><a href=\"#Embark-5-1\" class=\"headerlink\" title=\"Embark 5.1\"></a>Embark 5.1</h1><h2 id=\"Interfaces-amp-Libraries-Configuration\"><a href=\"#Interfaces-amp-Libraries-Configuration\" class=\"headerlink\" title=\"Interfaces &amp; Libraries Configuration\"></a>Interfaces &amp; Libraries Configuration</h2><p>Embark 5.1 adds two new configuration settings for Smart Contract configuration:</p>\n<p><code>interfaces</code> - Any Smart Contract that represent an interface or is used for inheritance<br><code>libraries</code> - Any Smart Contract that is used as a library</p>\n<p>This makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    deploy: false</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The above can now be done via:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">interfaces: [&#39;Ownable&#39;],</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Find the complete documentation <a href=\"https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h2 id=\"getEvmVersion-for-conditional-tests\"><a href=\"#getEvmVersion-for-conditional-tests\" class=\"headerlink\" title=\"getEvmVersion for conditional tests\"></a>getEvmVersion for conditional tests</h2><p>Embark tests now include a helper <code>getEvmVersion</code> that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.</p>\n<p>For example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;cannot bid after 5 minutes&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const evmVersion &#x3D; await global.getEvmVersion();</span><br><span class=\"line\">  if (evmVersion.indexOf(&quot;TestRPC&quot;) &#x3D;&#x3D;&#x3D; -1) return;</span><br><span class=\"line\"></span><br><span class=\"line\">  increaseTime(5000)</span><br><span class=\"line\"></span><br><span class=\"line\">  await assert.reverts(Auction.methods.bid(), &#123;from: web3.eth.defaultAccount&#125;, &#39;Returned error: VM Exception while processing transaction: cannot bid after auction expired&#39;);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Nethermind-plugin\"><a href=\"#Nethermind-plugin\" class=\"headerlink\" title=\"Nethermind plugin\"></a>Nethermind plugin</h2><p>Embark now comes with a <a href=\"https://nethermind.io/\" target=\"_blank\" rel=\"noopener\">Nethermind</a> plugin.<br>More info about the plugin can be found <a href=\"https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<h2 id=\"Changelog\"><a href=\"#Changelog\" class=\"headerlink\" title=\"Changelog\"></a>Changelog</h2><p>Features<br>@embark/deployment: introduce interfaces and libraries configuration (73d0443)<br>@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)<br>@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)<br>@embark/testing: introduce proper request2 api for async/await (c947517)<br>@embark/testing: add missing APIs to register console commands and API calls (bef582d)<br>support Node.js v12.x and newer (c093cf8)</p>\n<p>Bug Fixes<br>@embark/cmd_controller: fix build command to escape on finish (e2767c2)<br>@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)<br>@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)<br>@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)<br>@embark/tests: Fix failing test with —node=embark (81af3af)<br>@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)<br>@embark/utils: fix deconstruct url to return port as an integer (4190d5e)<br>transaction-logger: fix circular dep issue with util.inspect (6f239f4)<br>@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)<br>@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)<br>@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)<br>@embark/proxy: Parse rpcPort from config as integer (9f7c682)</p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h1 id=\"Embark-5-1\"><a href=\"#Embark-5-1\" class=\"headerlink\" title=\"Embark 5.1\"></a>Embark 5.1</h1><h2 id=\"Interfaces-amp-Libraries-Configuration\"><a href=\"#Interfaces-amp-Libraries-Configuration\" class=\"headerlink\" title=\"Interfaces &amp; Libraries Configuration\"></a>Interfaces &amp; Libraries Configuration</h2><p>Embark 5.1 adds two new configuration settings for Smart Contract configuration:</p>\n<p><code>interfaces</code> - Any Smart Contract that represent an interface or is used for inheritance<br><code>libraries</code> - Any Smart Contract that is used as a library</p>\n<p>This makes the configuration less redundant in cases where otherwise the deploy property has been set to false, such as:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  Ownable: &#123;</span><br><span class=\"line\">    deploy: false</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>The above can now be done via:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">interfaces: [&#39;Ownable&#39;],</span><br><span class=\"line\">deploy: &#123;</span><br><span class=\"line\">  ...</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Find the complete documentation <a href=\"https://framework.embarklabs.io/docs/contracts_configuration.html#Defining-interfaces\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<h2 id=\"getEvmVersion-for-conditional-tests\"><a href=\"#getEvmVersion-for-conditional-tests\" class=\"headerlink\" title=\"getEvmVersion for conditional tests\"></a>getEvmVersion for conditional tests</h2><p>Embark tests now include a helper <code>getEvmVersion</code> that can be used to consult what EVM the tests are being run on. This is useful when you have certain tests that can only be run in a particular type of node, but you still want to be able to run tests everywhere without them breaking.</p>\n<p>For example:</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">it(&quot;cannot bid after 5 minutes&quot;, async () &#x3D;&gt; &#123;</span><br><span class=\"line\">  const evmVersion &#x3D; await global.getEvmVersion();</span><br><span class=\"line\">  if (evmVersion.indexOf(&quot;TestRPC&quot;) &#x3D;&#x3D;&#x3D; -1) return;</span><br><span class=\"line\"></span><br><span class=\"line\">  increaseTime(5000)</span><br><span class=\"line\"></span><br><span class=\"line\">  await assert.reverts(Auction.methods.bid(), &#123;from: web3.eth.defaultAccount&#125;, &#39;Returned error: VM Exception while processing transaction: cannot bid after auction expired&#39;);</span><br><span class=\"line\">&#125;)</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Nethermind-plugin\"><a href=\"#Nethermind-plugin\" class=\"headerlink\" title=\"Nethermind plugin\"></a>Nethermind plugin</h2><p>Embark now comes with a <a href=\"https://nethermind.io/\" target=\"_blank\" rel=\"noopener\">Nethermind</a> plugin.<br>More info about the plugin can be found <a href=\"https://github.com/embarklabs/embark/tree/master/packages/plugins/nethermind\" target=\"_blank\" rel=\"noopener\">here</a></p>\n<h2 id=\"Changelog\"><a href=\"#Changelog\" class=\"headerlink\" title=\"Changelog\"></a>Changelog</h2><p>Features<br>@embark/deployment: introduce interfaces and libraries configuration (73d0443)<br>@embark/nethermind: add Nethermind blockchain client plugin (6db8d87)<br>@embark/test-runner: expose evmClientVersion for conditional tests (e37d3f7)<br>@embark/testing: introduce proper request2 api for async/await (c947517)<br>@embark/testing: add missing APIs to register console commands and API calls (bef582d)<br>support Node.js v12.x and newer (c093cf8)</p>\n<p>Bug Fixes<br>@embark/cmd_controller: fix build command to escape on finish (e2767c2)<br>@embark/debugger: Prevent error if contract not tracked by Embark (1e1172e)<br>@embark/ens: fix Infura connection and testnet use of ENS (42bd3b7)<br>@embark/test-dapp: fix test_dapp broken for ENS resolve (f5849e0)<br>@embark/tests: Fix failing test with —node=embark (81af3af)<br>@embark/transaction-logger: Circular JSON log and unknown contract log level (5843a8e)<br>@embark/utils: fix deconstruct url to return port as an integer (4190d5e)<br>transaction-logger: fix circular dep issue with util.inspect (6f239f4)<br>@embark/embarkjs: change enableEthereum to not rely on returned accounts array (b8f93ea)<br>@embark/test: increase default gas limit to 8M so tests support bigger contracts (b6856b2)<br>@embark/ens: connect to web3 only with dappAutoEnable is true (e0ac539)<br>@embark/proxy: Parse rpcPort from config as integer (9f7c682)</p>\n"},{"title":"DApp Frontend Security","summary":"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.","author":"robin_percy","layout":"blog-post","image":"/assets/images/web3-article-header.png","_content":"\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApps\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nIt's not only regular web apps that need securing, but decentralised web apps too!\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","source":"_posts/2020-01-29-dapp-frontend-security.md","raw":"title: \"DApp Frontend Security\"\nsummary: \"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/web3-article-header.png'\n\n---\n\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApps\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nIt's not only regular web apps that need securing, but decentralised web apps too!\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","slug":"dapp-frontend-security","published":1,"date":"2020-01-29T00:00:00.000Z","updated":"2020-01-28T19:10:46.696Z","comments":1,"photos":[],"link":"","_id":"ck5y9bbct0008zf0e0dtpheeq","content":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApps\"><a href=\"#Security-for-DApps\" class=\"headerlink\" title=\"Security for DApps\"></a>Security for DApps</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>It’s not only regular web apps that need securing, but decentralised web apps too!</p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for web apps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doings things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApps\"><a href=\"#Security-for-DApps\" class=\"headerlink\" title=\"Security for DApps\"></a>Security for DApps</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>It’s not only regular web apps that need securing, but decentralised web apps too!</p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n"},{"title":"Subspace 1.2","author":"iuri_matias","summary":"Subspace 1.2 release - now with HttpProvider support & GraphQL Example","layout":"blog-post","_content":"\nSubspace 1.2\n===\n\n### New Org\nSubspace is now under the *@embarklabs* Org. Versions under @status-im Org have been deprecated.\n\n```bash\n# Using npm\nnpm install --save @embarklabs/subspace\n\n# Using yarn\nyarn add @embarklabs/subspace \n```\n\n### HttpProvider support\n\nPreviously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the `callInterval` option was specified, displaying a warning indicating that the use of providers other than `WebSocketProvider` was discouraged. \n\nWith this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.\n\nSubscriptions can be disabled with the `disableSubscriptions` option.\n\n```Javascript\nlet subspace = new Subspace({disableSubscriptions: true})\n```\n\n### GraphQL Example\n\nAn example DApp using GraphQL with Subspace can now be found at https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1 . \n\n### Bug fixes\n\n- Fixed obtaining the `from` address when instantiating a Web3 Contract with Subspace tracking functionality\n- `.track()` is added only to event names as they're specified in the ABI. Tracking events by signature is not allowed\n\n### Contributions\n\nSubspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. \n\n","source":"_posts/2020-01-29-subspace-1-2.md","raw":"title: Subspace 1.2\nauthor: iuri_matias\nsummary: \"Subspace 1.2 release - now with HttpProvider support & GraphQL Example\"\ncategories:\n  - announcements\n  - releases\nlayout: blog-post\n---\n\nSubspace 1.2\n===\n\n### New Org\nSubspace is now under the *@embarklabs* Org. Versions under @status-im Org have been deprecated.\n\n```bash\n# Using npm\nnpm install --save @embarklabs/subspace\n\n# Using yarn\nyarn add @embarklabs/subspace \n```\n\n### HttpProvider support\n\nPreviously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the `callInterval` option was specified, displaying a warning indicating that the use of providers other than `WebSocketProvider` was discouraged. \n\nWith this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.\n\nSubscriptions can be disabled with the `disableSubscriptions` option.\n\n```Javascript\nlet subspace = new Subspace({disableSubscriptions: true})\n```\n\n### GraphQL Example\n\nAn example DApp using GraphQL with Subspace can now be found at https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1 . \n\n### Bug fixes\n\n- Fixed obtaining the `from` address when instantiating a Web3 Contract with Subspace tracking functionality\n- `.track()` is added only to event names as they're specified in the ABI. Tracking events by signature is not allowed\n\n### Contributions\n\nSubspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. \n\n","slug":"subspace-1-2","published":1,"date":"2020-01-29T05:00:00.000Z","updated":"2020-01-30T14:52:47.140Z","comments":1,"photos":[],"link":"","_id":"ck60uz6ai0000bzt4ar0hbppr","content":"<h1 id=\"Subspace-1-2\"><a href=\"#Subspace-1-2\" class=\"headerlink\" title=\"Subspace 1.2\"></a>Subspace 1.2</h1><h3 id=\"New-Org\"><a href=\"#New-Org\" class=\"headerlink\" title=\"New Org\"></a>New Org</h3><p>Subspace is now under the <em>@embarklabs</em> Org. Versions under @status-im Org have been deprecated.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Using npm</span></span><br><span class=\"line\">npm install --save @embarklabs/subspace</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\"># Using yarn</span></span><br><span class=\"line\">yarn add @embarklabs/subspace</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HttpProvider-support\"><a href=\"#HttpProvider-support\" class=\"headerlink\" title=\"HttpProvider support\"></a>HttpProvider support</h3><p>Previously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the <code>callInterval</code> option was specified, displaying a warning indicating that the use of providers other than <code>WebSocketProvider</code> was discouraged. </p>\n<p>With this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.</p>\n<p>Subscriptions can be disabled with the <code>disableSubscriptions</code> option.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> subspace = <span class=\"keyword\">new</span> Subspace(&#123;<span class=\"attr\">disableSubscriptions</span>: <span class=\"literal\">true</span>&#125;)</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"GraphQL-Example\"><a href=\"#GraphQL-Example\" class=\"headerlink\" title=\"GraphQL Example\"></a>GraphQL Example</h3><p>An example DApp using GraphQL with Subspace can now be found at <a href=\"https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1\" target=\"_blank\" rel=\"noopener\">https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1</a> . </p>\n<h3 id=\"Bug-fixes\"><a href=\"#Bug-fixes\" class=\"headerlink\" title=\"Bug fixes\"></a>Bug fixes</h3><ul>\n<li>Fixed obtaining the <code>from</code> address when instantiating a Web3 Contract with Subspace tracking functionality</li>\n<li><code>.track()</code> is added only to event names as they’re specified in the ABI. Tracking events by signature is not allowed</li>\n</ul>\n<h3 id=\"Contributions\"><a href=\"#Contributions\" class=\"headerlink\" title=\"Contributions\"></a>Contributions</h3><p>Subspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. </p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<h1 id=\"Subspace-1-2\"><a href=\"#Subspace-1-2\" class=\"headerlink\" title=\"Subspace 1.2\"></a>Subspace 1.2</h1><h3 id=\"New-Org\"><a href=\"#New-Org\" class=\"headerlink\" title=\"New Org\"></a>New Org</h3><p>Subspace is now under the <em>@embarklabs</em> Org. Versions under @status-im Org have been deprecated.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Using npm</span></span><br><span class=\"line\">npm install --save @embarklabs/subspace</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\"># Using yarn</span></span><br><span class=\"line\">yarn add @embarklabs/subspace</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HttpProvider-support\"><a href=\"#HttpProvider-support\" class=\"headerlink\" title=\"HttpProvider support\"></a>HttpProvider support</h3><p>Previously Subspace only worked with WebSockets for event subscriptions, and polled for changes only if the <code>callInterval</code> option was specified, displaying a warning indicating that the use of providers other than <code>WebSocketProvider</code> was discouraged. </p>\n<p>With this release, Subspace will identify if the provider supports subscriptions and use them automatically. If no subscriptions are available, it will assume the provider does not support them and poll the contract for new changes periodically.</p>\n<p>Subscriptions can be disabled with the <code>disableSubscriptions</code> option.</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> subspace = <span class=\"keyword\">new</span> Subspace(&#123;<span class=\"attr\">disableSubscriptions</span>: <span class=\"literal\">true</span>&#125;)</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"GraphQL-Example\"><a href=\"#GraphQL-Example\" class=\"headerlink\" title=\"GraphQL Example\"></a>GraphQL Example</h3><p>An example DApp using GraphQL with Subspace can now be found at <a href=\"https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1\" target=\"_blank\" rel=\"noopener\">https://github.com/embarklabs/subspace/tree/master/examples/react-graphql-example1</a> . </p>\n<h3 id=\"Bug-fixes\"><a href=\"#Bug-fixes\" class=\"headerlink\" title=\"Bug fixes\"></a>Bug fixes</h3><ul>\n<li>Fixed obtaining the <code>from</code> address when instantiating a Web3 Contract with Subspace tracking functionality</li>\n<li><code>.track()</code> is added only to event names as they’re specified in the ABI. Tracking events by signature is not allowed</li>\n</ul>\n<h3 id=\"Contributions\"><a href=\"#Contributions\" class=\"headerlink\" title=\"Contributions\"></a>Contributions</h3><p>Subspace and the entire Embark labs organization are open source. As such we welcome contributions and input from the community using the product. </p>\n"},{"title":"DApp Frontend Security","summary":"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.","author":"robin_percy","layout":"blog-post","image":"/assets/images/web3-article-header.png","_content":"\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApp Users\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","source":"_posts/2020-01-30-dapp-frontend-security.md","raw":"title: \"DApp Frontend Security\"\nsummary: \"Security is not just a consideration for DApp Backend Developers, but for Frontend Developers too.  In this article we'll cover a comprehensive security strategy for DApp Frontends.\"\nauthor: robin_percy\ncategories:\n  - tutorials\nlayout: blog-post\nimage: '/assets/images/web3-article-header.png'\n\n---\n\n![Web3.js](/assets/images/web3-article-header.png)\n\n\n## Introduction\n\n*This article is the second in my series of articles based on the frontend of the web.  We'll look at [Web3.js](/news/2019/12/09/web3-what-are-your-options/) & accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the \"4th language of the web\", and we'll build a realtime Blockchain explorer app in Phoenix LiveView!*\n\nWorking for a [security-focused company like Status](https://status.im/security/) means that security, in its many forms, is mentioned on a daily basis. \n\nHowever; outside of [Status](http://status.im) one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term _security_,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really _must_ take into account.\n\nSecurity is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.\n\nIn my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.\n\nIn this article, I'll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We'll take a look at security for your DApps too!\n\n\n## Strict Transport Security (HSTS)\n\nHSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you'll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from [Let's Encrypt](https://letsencrypt.org).  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don't have it implemented.\n\nNow, as you're probably aware, simply owning an SSL Cert will *not* immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance ***boost***, as we no longer would have to send our users through a manual redirect.\n\nSo, you're probably thinking \"Wow! I need this!\".  Well, whilst I agree - alongside the *Content Security Policy* I'll talk about later, this needs to be implemented **with caution.**  Allow me to explain!  Here's what a sample HSTS Header looks like:\n\n\tStrict-Transport-Security: max-age=630720; includeSubDomains; preload\n\n*And in Node.js:*\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader('Strict-Transport-Security', 'max-age=630720; includeSubDomains; preload');\n}\n```\n\nIn this Header, we have 3 *directives* that apply.  `max-age`, `includeSubDomains` and `preload`.\n\n***max-age***:  By specifying a max-age, we are telling the user's browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, *before* it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this *does* sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever *needed* to access a non-HTTPS page, their browser simply won't let them, until this `max-age` expires. If you are going to activate this feature, and set a long `max-age`, (required by the pre-load sites I'll talk about in a second), you ***really*** need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on *all* of your Web App before you take action!\n\n***includeSubDomains***:  The `includeSubDomains` directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you ***must*** be sure *every* subdomain you own and run, is entirely ready for this to be applied.\n\n***preload***:  The most dangerous directive of them all!  Basically, the `preload` directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual *Browser* to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you're on this list; it's ***very*** difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that's only for the people who auto-update, you've got a *huge* wait-time if you make a mistake.\n\nSo we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you **know** your security measures inside-out, and using  discretion.  Whilst I don't recommend you submit your site to the `preload` directive, if you wish to - you [can here](https://hstspreload.org/).\n\n**Note** - it is *not* a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.\n\nIf you are going to use the HSTS protocol, start out with a small `max-age` - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the `includeSubDomains` directive, be sure you don't have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you're going to submit your Web App to `preload`, follow the official guidelines, and make sure you know exactly what you're doing - (which I'm not entirely confident of myself!)\n\n\n## Using the X-XSS-Protection Header\n\nXSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)\n\nTo ensure our Users are protected, we can force this filter (worth it), on our Web App by using the `X-XSS-Protection` Header.  This Header is widely supported by common browsers, and something I'd recommend using every time.\n\nTo apply this header to your Node.js app, you should include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-XSS-Protection', '1; mode=block' );\n}\n```\n\nNote the two *directives* in this header:  `1` is simply acts as a boolean 1 or 0 value to reflect on or off.  `mode=block` will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.\n\nIf you're a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:\n\n\tX-XSS-Protection: 1; report=<reporting-uri>\n\nNow, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP `report-uri` directive to send a report that I will talk about in the Content Security Policy section below.\n\n\n## Defend against Clickjacking\n\nClickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.\n\nNow, whilst this *could* be a very dangerous issue, it's very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named `X-Frame-Options`.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  `DENY`, `ALLOW-FROM`, and `SAMEORIGIN`.\n\nIf we choose `DENY`, we can block all framing.  If we use `ALLOW-FROM`, we can supply a list of domains to allow framing within.  I use the `SAMEORIGIN` directive, as this means framing can only be done within the current domain.  This can be utilised with the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'X-Frame-Options', 'SAMEORIGIN' );\n}\n```\n\n\n## Content Security Policy (CSP)\n\nCSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a `<script>` tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.\n\nThe whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.\n\nTo include a Content Security Policy that allows only internal and *Google Analytics*, in an Express.js server, you could do the following:\n\n```js\nvar express = require('express');\nvar app = express();\n\n\napp.use(function(req, res, next) {\n    res.setHeader(\"Content-Security-Policy\", \"script-src 'self' https://analytics.google.com\");\n    return next();\n});\n\napp.use(express.static(__dirname + '/'));\n\napp.listen(process.env.PORT || 3000);\n```\n\nHowever, if we do not wish to allow *any* external sites to execute scripts on our Web App, we could simply include the following:\n\n```js\nfunction requestHandler(req, res) {\n\tres.setHeader( 'Content-Security-Policy', \"script-src 'self'\" );\n}\n```\n\nNote the `script-src` directive here, that we have set to `self`, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so *rich* in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.\n\nSo, once activated, this Server Header *could* potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; `report-only` and `report-uri` to test them.  The `report-uri` directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The `report-only` directive does the same, but will ***not*** block the scripts on the site.  This is very useful for testing, before we put this Header into production.\n\nThere's a great write-up on the reporting, [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only).\n\nContent Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they ***will*** be blocked.\n\n\n## CSRF\n\nCross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:\n\nImagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I'm also aware that most people who visit *my* Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.\n\nOn my Web App, I could embed a script such as the following:\n\n~~~html\n<form action=\"https://twitter.com/tweet\" method=\"POST\" id=\"sendTweet\">\n<input type=\"hidden\" name=\"tweet\" value=\"Hey!  Check out my awesome spam site - spam.com\">\n~~~\n\nWhen your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:\n\n~~~js\ndocument.getElementById(\"sendTweet\").submit();\n~~~\n\nIn doing this, I've just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a *forged request*, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!\n\nFor years, we have been trying to solve CSRF requests by checking HTTP headers such as the `Origin` and `Referer`.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.\n\nEnter, the ***SameSite*** Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to **never** send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:\n\n\tSet-Cookie: sess=sessionid123; path=/; SameSite\n\nIt really is that easy.  I wouldn't recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.\n\n\n## Cookies\n\nAs we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.\n\n*Cookie Prefixing* is a relatively under-used technique that we can utilise to ensure a cookie *is* secure:\n\n***The `__Secure` prefix*** - If a cookie's name begins with \"__Secure\", the cookie MUST be:\n\n- Set with a \"*Secure*\" attribute\n- Set from a URI whose scheme is considered secure by the user agent.\n\nThe following cookie would be rejected when set from any origin, as the \"Secure\" flag is not set:\n\n\tSet-Cookie: __Secure-sess=12345; Domain=myapp.com\n\nWhile the following would be accepted if set from a secure origin e.g. `https://` and rejected otherwise:\n\n\tSet-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com\n\nAlongside the `__Secure` prefix, we also have the `__Host` prefix:\n\n***The `__Host` prefix*** - If a cookie's name begins with \"__Host\", the cookie MUST be:\n\n- Set with a \"Secure\" attribute\n- Set from a URI whose \"scheme\" is considered \"secure\" by the user agent.\n- Sent only to the host which set the cookie.  That is, a cookie named \"__Host-cookie1\" set from \"https://example.com\" *MUST NOT* contain a \"Domain\" attribute (and will therefore be sent only to \"example.com\", and not to \"subdomain.example.com\").\n- Sent to every request for a host.  That is, a cookie named \"__Host-cookie1\" MUST contain a \"Path\" attribute with a value of \"/\".\n\nThe following cookies would always be rejected:\n\n\tSet-Cookie: __Host-sess=12345\n\tSet-Cookie: __Host-sess=12345; Secure\n\tSet-Cookie: __Host-sess=12345; Domain=example.com\n\tSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\n\tSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/\n\nWhile the following would be accepted if set from a secure origin e.g. `https://`, and rejected otherwise:\n\n\tSet-Cookie: __Host-sess=12345; Secure; Path=/\n\nBy setting these prefixes, any compliant browser will be made to enforce them.\n\nNow, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:\n\n\tSet-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite\n\nIn this most-secure-cookie, we're utilising the `__Host` prefix which means the `Secure` attribute has to be set, and it must be served from a secure host.  There is no `Domain` attribute set and the `Path` is /.  We've set `HttpOnly` for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won't be the best or most practical solution for a lot of people, but it *is* the most in-theory secure Cookie we could set from our Web App.\n\n\n## Take a DApp Blueprint\n\n***Note** - In my opinion, this is one of the most important security steps one can take.*\n\nDo you know the ins-and-outs of each library your Developers use?  Probably not - it's near impossible to keep track nowadays, but this is to *great* detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?\n\nThe issue here is that using so much *automation* in modern development, we grant access to a huge amount of tools/libraries without *really* knowing exactly what they're doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.\n\nWe all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw `sudo` commands at package managers if a command fails is also truly terrifying.\n\nSo how do we get around this?  ***Take a Tech Blueprint!***  This needn't be a complex process, it's as simple as knowing what each piece of Software is doing on your servers, and what authority they've been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. `*package* security vulnerabilities` will usually bring up more results than you'd expect.  It's also worth checking out the *Issues* tab on the package's GitHub page.  Vulnerabilities are often discussed there and you'll be able to act accordingly.  This applies to the top-level Package Managers too.\n\nPackage managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search `*package manager* security vulnerability` and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558](this article for a relevant example!)\n\n**Handy tip:**  if you want to know which hooks an npm package runs, before you install it, run the command:\n\n```bash\n  $ npm show $module scripts\n```\n\n## Security for DApp Users\n\n![Dapp security](https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png)\n[Image Source](https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/)\n\nWith more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user's wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user's private keys being stored in local storage (super insecure).\n\nThe DApp developer, however, didn't realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player's private keys to the bad actor's server.\n\n - **Protect wallets and private keys:** If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.\n - **Protect user information:** Users do not want their personal data being exposed to the world. Ensure that user data remains private.\n - **Use *MetaMask* or similar** to ensure security of wallets and user keys.\n - **Evaluate wisely what needs to be stored in the blockchain or in your servers.** Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.\n\nThere is an excellent write-up on DApp security standards you [can check out here.](https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md)\n\n\n## Conclusion\nWithout a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.\n\nBy following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.\n\nSo, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web & decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.\n\n[ **_- @rbin_**](https://twitter.com/rbin)\n\n\n","slug":"dapp-frontend-security","published":1,"date":"2020-01-30T05:00:00.000Z","updated":"2020-01-30T14:52:47.141Z","comments":1,"photos":[],"link":"","_id":"ck60uz6cn0003bzt49el1gmkb","content":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApp-Users\"><a href=\"#Security-for-DApp-Users\" class=\"headerlink\" title=\"Security for DApp Users\"></a>Security for DApp Users</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n","site":{"data":{"authors":{"iuri_matias":{"name":"Iuri Matias","twitter":"iurimatias","image":"https://pbs.twimg.com/profile_images/928272512181563392/iDJdvy2k_400x400.jpg"},"pascal_precht":{"name":"Pascal Precht","twitter":"pascalprecht","image":"https://pbs.twimg.com/profile_images/993785060733194241/p3oAIMDP_400x400.jpg"},"anthony_laibe":{"name":"Anthony Laibe","twitter":"a_laibe","image":"https://pbs.twimg.com/profile_images/257742900/13168239_400x400.jpg"},"jonathan_rainville":{"name":"Jonathan Rainville","twitter":"ShyolGhul","image":"https://pbs.twimg.com/profile_images/993873866878570496/-aE4byjj_400x400.jpg"},"andre_medeiros":{"name":"Andre Medeiros","twitter":"superdealloc","image":"https://pbs.twimg.com/profile_images/965722487735701504/m58KNgWN_400x400.jpg"},"eric_mastro":{"name":"Eric Mastro","twitter":"ericmastro","image":"https://avatars1.githubusercontent.com/u/5089238?s=460&v=4"},"michael_bradley":{"name":"Michael Bradley","image":"https://avatars3.githubusercontent.com/u/194260?s=460&v=4"},"richard_ramos":{"name":"Richard Ramos","twitter":"richardramos_me","image":"https://pbs.twimg.com/profile_images/1063160577973866496/aM313uHG_400x400.jpg"},"jonny_zerah":{"name":"Jonny Zerah","twitter":"jonnyzerah","image":"https://pbs.twimg.com/profile_images/1043774340490248192/gI9aGy17_400x400.jpg"},"robin_percy":{"name":"Robin Percy","twitter":"rbin","image":"https://avatars1.githubusercontent.com/u/29288325?s=400&v=4"}},"categories":{"tutorials":"Tutorials","announcements":"Announcements"},"languages":{"en":"English"},"plugins":[{"name":"embark-bamboo","description":"plugins_page.plugins.bamboo.desc","link":"https://www.npmjs.com/package/embark-bamboo","thumbnail":"bamboo.png","tags":["language","smart-contracts"]},{"name":"embark-solc","description":"plugins_page.plugins.solc.desc","link":"https://www.npmjs.com/package/embark-solc","thumbnail":"solidity.png","tags":["solidity","language","smart-contracts"]},{"name":"embark-solium","description":"plugins_page.plugins.solium.desc","link":"https://www.npmjs.com/package/embark-solium","thumbnail":"solium.png","tags":["linter","solidity","solium"]},{"name":"embark-etherscan-verifier","description":"plugins_page.plugins.verifier.desc","link":"https://www.npmjs.com/package/embark-etherscan-verifier","tags":["solidity","etherscan","smart-contracts"]},{"name":"embark-status","description":"plugins_page.plugins.status.desc","link":"https://www.npmjs.com/package/embark-status-plugin","thumbnail":"status.png","tags":["status","mobile"]},{"name":"embark-remix","description":"plugins_page.plugins.remix.desc","link":"https://www.npmjs.com/package/embark-remix","thumbnail":"remix.png","tags":["remix","debugger"]},{"name":"embark-slither","description":"plugins_page.plugins.slither.desc","link":"https://www.npmjs.com/package/embark-slither","tags":["solidity"]},{"name":"embark-snark","description":"plugins_page.plugins.snark.desc","link":"https://www.npmjs.com/package/embark-snark","tags":["snark"]},{"name":"embark-fortune","description":"plugins_page.plugins.fortune.desc","link":"https://www.npmjs.com/package/embark-fortune","thumbnail":"fortune.jpg","tags":["fun"]},{"name":"embark-pug","description":"plugins_page.plugins.pug.desc","link":"https://www.npmjs.com/package/embark-pug","legacy":true,"thumbnail":"pug.png","tags":["pug","jade","templates"]},{"name":"embark-haml","description":"plugins_page.plugins.haml.desc","link":"https://www.npmjs.com/package/embark-haml","legacy":true,"thumbnail":"haml.png","tags":["haml","templates"]},{"name":"embark-mythx","description":"plugins_page.plugins.mythx.desc","link":"https://www.npmjs.com/package/embark-mythx","thumbnail":"mythx.png","tags":["mythx","smart-contracts"]}],"menu":{"docs":"/docs/","plugins":"/plugins/","chat":"/chat/","blog":"/news/"},"sidebar":{"docs":{"getting_started":{"overview":"overview.html","installation":"installation.html","faq":"faq.html"},"general_usage":{"creating_project":"create_project.html","structure":"structure.html","running_apps":"running_apps.html","dashboard":"dashboard.html","using_the_console":"using_the_console.html","environments":"environments.html","configuration":"configuration.html","pipeline_and_webpack":"pipeline_and_webpack.html","javascript_usage":"javascript_usage.html"},"smart_contracts":{"contracts_configuration":"contracts_configuration.html","contracts_deployment":"contracts_deployment.html","contracts_imports":"contracts_imports.html","contracts_testing":"contracts_testing.html","contracts_javascript":"contracts_javascript.html"},"blockchain_node":{"blockchain_configuration":"blockchain_configuration.html","blockchain_accounts_configuration":"blockchain_accounts_configuration.html"},"storage":{"storage_configuration":"storage_configuration.html","storage_deployment":"storage_deployment.html","storage_javascript":"storage_javascript.html"},"messages":{"messages_configuration":"messages_configuration.html","messages_javascript":"messages_javascript.html"},"naming":{"naming_configuration":"naming_configuration.html","naming_javascript":"naming_javascript.html"},"plugins":{"installing_a_plugin":"installing_plugins.html","creating_a_plugin":"creating_plugins.html","plugin_reference":"plugin_reference.html"},"cockpit":{"cockpit_introduction":"cockpit_introduction.html","cockpit_dashboard":"cockpit_dashboard.html","cockpit_deployment":"cockpit_deployment.html","cockpit_explorer":"cockpit_explorer.html","cockpit_editor":"cockpit_editor.html","cockpit_debugger":"cockpit_debugger.html"},"reference":{"embark_commands":"embark_commands.html"},"miscellaneous":{"migrating_from_3":"migrating_from_3.x.html","troubleshooting":"troubleshooting.html","contributing":"contributing.html"}}},"templates":[{"name":"Vyper Template","description":"Template to demonstrate the use of the Vyper contracts","install":"embark new AppName --template vyper","thumbnail":"vyper.png","link":"https://github.com/embarklabs/embark-vyper-template","tags":["vyper","contracts"]},{"name":"Embark Demo React Template","description":"A React Application showcasing Embark's functionality","install":"embark demo","thumbnail":"react.png","link":"https://embark.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project","tags":["react","contracts","whisper","ipfs"]},{"name":"Typescript Template","description":"Template with Typescript support pre-configured","thumbnail":"typescript.png","install":"embark new AppName --template typescript","link":"https://github.com/embarklabs/embark-typescript-template","tags":["typescript","frontend"]},{"name":"Vue.js Template","description":"Ready to use Template for using Embark with vue.js","thumbnail":"vuejs.png","install":"embark new AppName --template vue","link":"https://github.com/embarklabs/embark-vue-template","tags":["vue.js","frontend"]},{"name":"ethvtx Template","description":"Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration","thumbnail":"vortex.png","install":"embark new AppName --template Horyus/ethvtx_embark","link":"https://github.com/Horyus/ethvtx_embark","tags":["react"]},{"name":"Bamboo Template","description":"Template to demonstrate use of the Bamboo contracts","install":"embark new AppName --template bamboo","thumbnail":"bamboo.png","link":"https://github.com/embarklabs/embark-bamboo-template","tags":["bamboo","contracts"]},{"name":"Solidity Gas Golfing","description":"Boilerplate and tests for the first Solidity Gas Golfing Contest","thumbnail":"sggc.png","install":"embark new AppName --template embarklabs/sggc","link":"https://github.com/embarklabs/sggc","tags":["solidity","tests","fun"]}],"tutorials":[{"name":"How to create a Token Factory with Ethereum — Part 1","description":"Create and Deploy a Token with Ethereum","link":"/tutorials/token_factory_1.html","tags":["token","ethereum"]},{"name":"How to create a Token Factory with Ethereum — Part 2","description":"Create a DApp that can deploy Tokens on the fly","link":"/tutorials/token_factory_2.html","tags":["token","ethereum","client-side-deployment"]},{"name":"How to deploy to a testnet with Infura","description":"Deploy and interact with your Dapp on a testnet with the use of Infura","link":"/tutorials/infura_guide.html","tags":["ethereum","deployment","testnet"]}],"versions":{"latest":{"label":"stable (v4)","url":"https://embark.embarklabs.io/docs"},"3.2":{"label":"v3.2","url":"https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/"}}}},"excerpt":"","more":"<p><img src=\"/assets/images/web3-article-header.png\" alt=\"Web3.js\"></p>\n<h2 id=\"Introduction\"><a href=\"#Introduction\" class=\"headerlink\" title=\"Introduction\"></a>Introduction</h2><p><em>This article is the second in my series of articles based on the frontend of the web.  We’ll look at <a href=\"/news/2019/12/09/web3-what-are-your-options/\">Web3.js</a> &amp; accessing the Ethereum Blockchain client-side, frontend to backend security for DApps,  how WebAssembly has become the “4th language of the web”, and we’ll build a realtime Blockchain explorer app in Phoenix LiveView!</em></p>\n<p>Working for a <a href=\"https://status.im/security/\" target=\"_blank\" rel=\"noopener\">security-focused company like Status</a> means that security, in its many forms, is mentioned on a daily basis. </p>\n<p>However; outside of <a href=\"http://status.im\" target=\"_blank\" rel=\"noopener\">Status</a> one of the broadest, most important, yet often ignored considerations when deploying and running web applications is the security of the app.  When I use the term <em>security</em>,  I’m not just speaking from a Back end perspective, but also of the Front end of the application.  Having good infrastructure security is highly important, but there are also security factors on the front end of the application that we really <em>must</em> take into account.</p>\n<p>Security is an ongoing, and ever-changing, practice that you must observe to ensure that your product is never included in the companies that one hears about on the news after a huge data breach. Regardless of which programming paradigm, language or framework you wish to use, there are plenty of non-specific, terse security practices you should follow from the very start of the project.</p>\n<p>In my last personal Startup, we provided User Authentication as a Service, so we were a major target for hackers. On one of our first evenings live, we watched someone attempt to send 5million malicious requests within 30 minutes. None of which had any affect other than exposing the hacker. This is because we made security a priority — which is something we all need to do in the modern world of Tech.</p>\n<p>In this article, I’ll introduce you to my biggest tips for top to bottom (Front end to Back end) security for your web applications.  We’ll take a look at security for your DApps too!</p>\n<h2 id=\"Strict-Transport-Security-HSTS\"><a href=\"#Strict-Transport-Security-HSTS\" class=\"headerlink\" title=\"Strict Transport Security (HSTS)\"></a>Strict Transport Security (HSTS)</h2><p>HSTS is a security header that allows us to enforce HTTPS across our entire Web App.  If you read my previous article, you’ll remember I advocate the idea of HTTPS everywhere, and showed you how to get a trusted, secure SSL certificate free-of-charge from <a href=\"https://letsencrypt.org\" target=\"_blank\" rel=\"noopener\">Let’s Encrypt</a>.  The reason we need HTTPS everywhere is that our users are vulnerable to Cookie stealing and Man-in-the-middle attacks if we don’t have it implemented.</p>\n<p>Now, as you’re probably aware, simply owning an SSL Cert will <em>not</em> immediately make all of your Web App HTTPS only - we need to tell our App to do that, ourselves.  One of the best ways of doing this is by using the HTTP Header of HSTS.  By using this Header, we can force all traffic on our App to use HTTPS and upgrade non-HTTPS.  This Header may also even provide a performance <strong><em>boost</em></strong>, as we no longer would have to send our users through a manual redirect.</p>\n<p>So, you’re probably thinking “Wow! I need this!”.  Well, whilst I agree - alongside the <em>Content Security Policy</em> I’ll talk about later, this needs to be implemented <strong>with caution.</strong>  Allow me to explain!  Here’s what a sample HSTS Header looks like:</p>\n<pre><code>Strict-Transport-Security: max-age=630720; includeSubDomains; preload</code></pre><p><em>And in Node.js:</em></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader(<span class=\"string\">'Strict-Transport-Security'</span>, <span class=\"string\">'max-age=630720; includeSubDomains; preload'</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>In this Header, we have 3 <em>directives</em> that apply.  <code>max-age</code>, <code>includeSubDomains</code> and <code>preload</code>.</p>\n<p><strong><em>max-age</em></strong>:  By specifying a max-age, we are telling the user’s browser to cache the fact that we use only HTTPS.  This means that if the user tries to visit a non-HTTPS version of the site, their browser will be automatically redirected to the HTTPS site, <em>before</em> it even sends a message to the Server.  Therein lies the slight performance boost I mentioned earlier.  Now, while this <em>does</em> sound fantastic in theory, what we need to be aware of here, is the fact that if a user ever <em>needed</em> to access a non-HTTPS page, their browser simply won’t let them, until this <code>max-age</code> expires. If you are going to activate this feature, and set a long <code>max-age</code>, (required by the pre-load sites I’ll talk about in a second), you <strong><em>really</em></strong> need to be sure that you have your SSL cert setup correctly, and HTTPS enabled on <em>all</em> of your Web App before you take action!</p>\n<p><strong><em>includeSubDomains</em></strong>:  The <code>includeSubDomains</code> directive does exactly what it says on-the-tin.  It simply offers additional protection by enforcing the policy across your subdomains too.  This is useful if you run a Web App that sets Cookies from one section (perhaps a gaming section), to another section (perhaps a profile section), that need to be kept secure.  Again, the issue with this lies similarly to the above, in that you <strong><em>must</em></strong> be sure <em>every</em> subdomain you own and run, is entirely ready for this to be applied.</p>\n<p><strong><em>preload</em></strong>:  The most dangerous directive of them all!  Basically, the <code>preload</code> directive is an in-browser-built directive that comes straight from the browser creators. This means that your Web App can be hard-coded into the actual <em>Browser</em> to always use HTTPS.  Again, whilst this would mean no redirects, and therefore a performance boost, once you’re on this list; it’s <strong><em>very</em></strong> difficult to get back off it!  Considering that Chrome takes around 3 months from build-to-table, and that’s only for the people who auto-update, you’ve got a <em>huge</em> wait-time if you make a mistake.</p>\n<p>So we have ourselves here an incredibly powerful, yet actively quite dangerous Security feature.  The key here is ensuring you <strong>know</strong> your security measures inside-out, and using  discretion.  Whilst I don’t recommend you submit your site to the <code>preload</code> directive, if you wish to - you <a href=\"https://hstspreload.org/\" target=\"_blank\" rel=\"noopener\">can here</a>.</p>\n<p><strong>Note</strong> - it is <em>not</em> a requirement to use preload to utilise HSTS.  The only Header you need apply is the max-age header.</p>\n<p>If you are going to use the HSTS protocol, start out with a small <code>max-age</code> - something like a few hours, and continue to ramp it up over a period of time.  This is also the advice Google Chrome give.  If you use the <code>includeSubDomains</code> directive, be sure you don’t have internal (company.mysite.com) subdomains that would be unreachable if affected.  If you’re going to submit your Web App to <code>preload</code>, follow the official guidelines, and make sure you know exactly what you’re doing - (which I’m not entirely confident of myself!)</p>\n<h2 id=\"Using-the-X-XSS-Protection-Header\"><a href=\"#Using-the-X-XSS-Protection-Header\" class=\"headerlink\" title=\"Using the X-XSS-Protection Header\"></a>Using the X-XSS-Protection Header</h2><p>XSS (Cross Site Scripting) is the most common of all Web App attacks.  XSS occurs when a malicious entity injects scripts to be run into your Web App.  A few years back, most web browsers added a security filter for XSS attacks built into the browser itself.  Now whilst in theory this was a good step, they did tend to throw-up false-positives quite often.  Due to this, the filter can be turned off by the User. (As the option should be available, in my opinion.)</p>\n<p>To ensure our Users are protected, we can force this filter (worth it), on our Web App by using the <code>X-XSS-Protection</code> Header.  This Header is widely supported by common browsers, and something I’d recommend using every time.</p>\n<p>To apply this header to your Node.js app, you should include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-XSS-Protection'</span>, <span class=\"string\">'1; mode=block'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the two <em>directives</em> in this header:  <code>1</code> is simply acts as a boolean 1 or 0 value to reflect on or off.  <code>mode=block</code> will stop the entire page loading, instead of simply sanitising the page as it would if you excluded this directive.</p>\n<p>If you’re a security-freak like myself, and a user of the Chromium browser, you could even go one-step further than this and set the directives like so:</p>\n<pre><code>X-XSS-Protection: 1; report=&lt;reporting-uri&gt;</code></pre><p>Now, if the browser detects an XSS attack, the page will be sanitized, and report the violation.  Note that this uses the functionality of the CSP <code>report-uri</code> directive to send a report that I will talk about in the Content Security Policy section below.</p>\n<h2 id=\"Defend-against-Clickjacking\"><a href=\"#Defend-against-Clickjacking\" class=\"headerlink\" title=\"Defend against Clickjacking\"></a>Defend against Clickjacking</h2><p>Clickjacking occurs when a malicious agent injects objects / iFrames into your DApp, made to look identical, that actually sends the User to a malicious site when clicked.  Another common, and possibly more scary example is that malicious agents insert something like a payment form into your DApp, that looks identical to your DApp, but steals payment details.</p>\n<p>Now, whilst this <em>could</em> be a very dangerous issue, it’s very easy to mitigate, with almost no impact on your Web App.  Servers offer Browsers a Header Protocol named <code>X-Frame-Options</code>.  This protocol allows us to specify domains to accept iFrames from.  It also allows us to state which sites our Web App can be embedded on.  With this protocol, we get three fairly self-explanitory options/directives:  <code>DENY</code>, <code>ALLOW-FROM</code>, and <code>SAMEORIGIN</code>.</p>\n<p>If we choose <code>DENY</code>, we can block all framing.  If we use <code>ALLOW-FROM</code>, we can supply a list of domains to allow framing within.  I use the <code>SAMEORIGIN</code> directive, as this means framing can only be done within the current domain.  This can be utilised with the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'X-Frame-Options'</span>, <span class=\"string\">'SAMEORIGIN'</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"Content-Security-Policy-CSP\"><a href=\"#Content-Security-Policy-CSP\" class=\"headerlink\" title=\"Content Security Policy (CSP)\"></a>Content Security Policy (CSP)</h2><p>CSP is another major topic when it comes to Server-Browser security for Web Apps.  At a high-level; Content Security Policies tell the browser what content is authorised to execute on a Web App, and what will block.  Primarily, this can be used to prevent XSS, in which an attacker could place a <code>&lt;script&gt;</code> tag on your Web App.  The Content-Security-Policy is a Server-Browser header that we can set to ensure our Server tells the Browser exactly which media, scripts, and their origins, we will allow to be executed on our Web app.</p>\n<p>The whitelisting of resource loading and execution URIs provides a good level of security, that will in most parts, defend against most attacks.</p>\n<p>To include a Content Security Policy that allows only internal and <em>Google Analytics</em>, in an Express.js server, you could do the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> express = <span class=\"built_in\">require</span>(<span class=\"string\">'express'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> app = express();</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">app.use(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">req, res, next</span>) </span>&#123;</span><br><span class=\"line\">    res.setHeader(<span class=\"string\">\"Content-Security-Policy\"</span>, <span class=\"string\">\"script-src 'self' https://analytics.google.com\"</span>);</span><br><span class=\"line\">    <span class=\"keyword\">return</span> next();</span><br><span class=\"line\">&#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">app.use(express.static(__dirname + <span class=\"string\">'/'</span>));</span><br><span class=\"line\"></span><br><span class=\"line\">app.listen(process.env.PORT || <span class=\"number\">3000</span>);</span><br></pre></td></tr></table></figure>\n\n<p>However, if we do not wish to allow <em>any</em> external sites to execute scripts on our Web App, we could simply include the following:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">requestHandler</span>(<span class=\"params\">req, res</span>) </span>&#123;</span><br><span class=\"line\">\tres.setHeader( <span class=\"string\">'Content-Security-Policy'</span>, <span class=\"string\">\"script-src 'self'\"</span> );</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>Note the <code>script-src</code> directive here, that we have set to <code>self</code>, therefore only allowing scripts from within our own domain.  Of course, CSP is not without its own problems.  Firstly, it would be very easy for us to forget about some of the media we have in our Web App and to simply exclude them accidentally.  Now that the web is so <em>rich</em> in media, this would be reasonably easy to do.  Secondly, many of us use third-party plugins on our Web App.  Again, unless we have a full blueprint of these, we could very easily block them.</p>\n<p>So, once activated, this Server Header <em>could</em> potentially be very detrimental to us.  However, there are two great ways of testing this.  You can set a strict policy, and use the built in directives; <code>report-only</code> and <code>report-uri</code> to test them.  The <code>report-uri</code> directive tells the Browser to send a JSON report of all of the blocked scripts to a URi that we specify.  The <code>report-only</code> directive does the same, but will <strong><em>not</em></strong> block the scripts on the site.  This is very useful for testing, before we put this Header into production.</p>\n<p>There’s a great write-up on the reporting, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only\" target=\"_blank\" rel=\"noopener\">here</a>.</p>\n<p>Content Security Policies are both excellent and very powerful, but must be used cautiously.  Much the same as HSTS mentioned above, we need to ensure we are aware of the situation before activating.  If you are loading in external images, scripts etc. you need to understand that unless you include these in the policy, they <strong><em>will</em></strong> be blocked.</p>\n<h2 id=\"CSRF\"><a href=\"#CSRF\" class=\"headerlink\" title=\"CSRF\"></a>CSRF</h2><p>Cross Site Request Forgery (CSRF) has been at the forefront of Web App Security for longer than any of us care to remember.  The idea behind it is that a malicious agent sends a (forged) request from one app to another whilst the User is signed in and authorised.  This would therefore allow the request to enter and alter restricted actions on the requested App, with the requested app believing entirely that the actions were coming from the logged in User.  A better way for me to describe this is to show you:</p>\n<p>Imagine if you will, I am security-abusing miscreant, and I happen to know that Twitter has no CSRF protection.  (They do, this is all hypothetical.)  I’m also aware that most people who visit <em>my</em> Web App, probably leave their Twitter logged in, and therefore have a Cookie stored in their browser, to allow them fast access to Twitter the next time they want to post something.</p>\n<p>On my Web App, I could embed a script such as the following:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">form</span> <span class=\"attr\">action</span>=<span class=\"string\">\"https://twitter.com/tweet\"</span> <span class=\"attr\">method</span>=<span class=\"string\">\"POST\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"sendTweet\"</span>&gt;</span></span><br><span class=\"line\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"hidden\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"tweet\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"Hey!  Check out my awesome spam site - spam.com\"</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<p>When your browser loads my Web App, this form will be loaded (entirely invisibly) too.  I would then also have embedded a small piece of JS to POST the form, without you ever knowing:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">\"sendTweet\"</span>).submit();</span><br></pre></td></tr></table></figure>\n\n<p>In doing this, I’ve just sent a Tweet on your account, without ever having to know your Username or Password.  The Cookie you had stored in your Browser allowed my app to send a <em>forged request</em>, pretending to be you - and if Twitter had no CSRF mitigation, it would have worked too!</p>\n<p>For years, we have been trying to solve CSRF requests by checking HTTP headers such as the <code>Origin</code> and <code>Referer</code>.  Whilst these have offered fairly robust protection for a few years, there is now a simple directive that once applied; will entirely mitigate CSRF attacks.</p>\n<p>Enter, the <strong><em>SameSite</em></strong> Cookie directive.  SameSite is relatively new, and only been around for the past year, in which it has gained some publicity, but is still widely unknown.  In essence, the SameSite directive, once applied, will tell the Browser to <strong>never</strong> send that cookie when a request from an external (Cross Site) url is made.  We can apply this directive by altering our Cookies as such:</p>\n<pre><code>Set-Cookie: sess=sessionid123; path=/; SameSite</code></pre><p>It really is that easy.  I wouldn’t recommend removing your existing CSRF protection just yet, but I would definitely recommend including this directive on your Web App.</p>\n<h2 id=\"Cookies\"><a href=\"#Cookies\" class=\"headerlink\" title=\"Cookies\"></a>Cookies</h2><p>As we know, cookies are an important feature of our Web Applications, carrying data mainly referring to our User Sessions.  While simply implementing the aforementioned directives is sufficient in securing your cookies, and preventing attacks, we can actually take cookie security a step further.</p>\n<p><em>Cookie Prefixing</em> is a relatively under-used technique that we can utilise to ensure a cookie <em>is</em> secure:</p>\n<p><strong><em>The <code>__Secure</code> prefix</em></strong> - If a cookie’s name begins with “__Secure”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “<em>Secure</em>“ attribute</li>\n<li>Set from a URI whose scheme is considered secure by the user agent.</li>\n</ul>\n<p>The following cookie would be rejected when set from any origin, as the “Secure” flag is not set:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Domain=myapp.com</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code> and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Secure-sess=12345; Secure; Domain=myapp.com</code></pre><p>Alongside the <code>__Secure</code> prefix, we also have the <code>__Host</code> prefix:</p>\n<p><strong><em>The <code>__Host</code> prefix</em></strong> - If a cookie’s name begins with “__Host”, the cookie MUST be:</p>\n<ul>\n<li>Set with a “Secure” attribute</li>\n<li>Set from a URI whose “scheme” is considered “secure” by the user agent.</li>\n<li>Sent only to the host which set the cookie.  That is, a cookie named “__Host-cookie1” set from “<a href=\"https://example.com&quot;\" target=\"_blank\" rel=\"noopener\">https://example.com&quot;</a> <em>MUST NOT</em> contain a “Domain” attribute (and will therefore be sent only to “example.com”, and not to “subdomain.example.com”).</li>\n<li>Sent to every request for a host.  That is, a cookie named “__Host-cookie1” MUST contain a “Path” attribute with a value of “/“.</li>\n</ul>\n<p>The following cookies would always be rejected:</p>\n<pre><code>Set-Cookie: __Host-sess=12345\nSet-Cookie: __Host-sess=12345; Secure\nSet-Cookie: __Host-sess=12345; Domain=example.com\nSet-Cookie: __Host-sess=12345; Domain=example.com; Path=/\nSet-Cookie: __Host-sess=12345; Secure; Domain=example.com; Path=/</code></pre><p>While the following would be accepted if set from a secure origin e.g. <code>https://</code>, and rejected otherwise:</p>\n<pre><code>Set-Cookie: __Host-sess=12345; Secure; Path=/</code></pre><p>By setting these prefixes, any compliant browser will be made to enforce them.</p>\n<p>Now, if we include the tips from my first article, and the tips above, we can make the most secure Cookie possible:</p>\n<pre><code>Set-Cookie: __Host-sess=id123; path=/; Secure; HttpOnly; SameSite</code></pre><p>In this most-secure-cookie, we’re utilising the <code>__Host</code> prefix which means the <code>Secure</code> attribute has to be set, and it must be served from a secure host.  There is no <code>Domain</code> attribute set and the <code>Path</code> is /.  We’ve set <code>HttpOnly</code> for XSS protection, and SameSite is enabled too to prevent CSRF.  Of course, this won’t be the best or most practical solution for a lot of people, but it <em>is</em> the most in-theory secure Cookie we could set from our Web App.</p>\n<h2 id=\"Take-a-DApp-Blueprint\"><a href=\"#Take-a-DApp-Blueprint\" class=\"headerlink\" title=\"Take a DApp Blueprint\"></a>Take a DApp Blueprint</h2><p><strong>*Note</strong> - In my opinion, this is one of the most important security steps one can take.*</p>\n<p>Do you know the ins-and-outs of each library your Developers use?  Probably not - it’s near impossible to keep track nowadays, but this is to <em>great</em> detriment.  Are you also aware of which libraries and tools have been given write access to your production servers and databases - and how isolated they are?</p>\n<p>The issue here is that using so much <em>automation</em> in modern development, we grant access to a huge amount of tools/libraries without <em>really</em> knowing exactly what they’re doing.  We take it for granted that each of these libraries is entirely safe and without their security vulnerabilities - or worse - performing malicious activities themselves.</p>\n<p>We all want the most streamlined Dev cycle possible.  We all use automation tools that trigger a whole bunch of processes, doing things that barely any of us are aware of.  The propensity of some Devs to throw <code>sudo</code> commands at package managers if a command fails is also truly terrifying.</p>\n<p>So how do we get around this?  <strong><em>Take a Tech Blueprint!</em></strong>  This needn’t be a complex process, it’s as simple as knowing what each piece of Software is doing on your servers, and what authority they’ve been granted.  Take a note of any new tools / packages before you grant them permissions, and do a little research.  Some simple Googling of key phrases i.e. <code>*package* security vulnerabilities</code> will usually bring up more results than you’d expect.  It’s also worth checking out the <em>Issues</em> tab on the package’s GitHub page.  Vulnerabilities are often discussed there and you’ll be able to act accordingly.  This applies to the top-level Package Managers too.</p>\n<p>Package managers are used by almost ALL of us.  If you really want to scare yourself, go ahead and search <code>*package manager* security vulnerability</code> and take a look at all of the results!  Again, knowing what we are installing and granting permissions to, and especially keeping a note of this, could just save our Bacon.  Take a look at [<a href=\"https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]\" target=\"_blank\" rel=\"noopener\">https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558]</a>(this article for a relevant example!)</p>\n<p><strong>Handy tip:</strong>  if you want to know which hooks an npm package runs, before you install it, run the command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm show <span class=\"variable\">$module</span> scripts</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Security-for-DApp-Users\"><a href=\"#Security-for-DApp-Users\" class=\"headerlink\" title=\"Security for DApp Users\"></a>Security for DApp Users</h2><p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png\" alt=\"Dapp security\"><br><a href=\"https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/\" target=\"_blank\" rel=\"noopener\">Image Source</a></p>\n<p>With more and more DApps being created including web-based exchanges, crypto-based games etc.  The opportunities for bad actors increase with each new DApp released.  Say, for instance, someone released an interactive game built around Web3, and directly interacting with user’s wallets.  On registration for the game, wallets are created, and they collected sensitive data, including user’s private keys being stored in local storage (super insecure).</p>\n<p>The DApp developer, however, didn’t realise that a bad actor has been injecting a remote script during registration that evaluates and sends all of the player’s private keys to the bad actor’s server.</p>\n<ul>\n<li><strong>Protect wallets and private keys:</strong> If user’s wallets are compromised, this is game over. Extreme care needs to be taken when handling this sensitive information.</li>\n<li><strong>Protect user information:</strong> Users do not want their personal data being exposed to the world. Ensure that user data remains private.</li>\n<li><strong>Use <em>MetaMask</em> or similar</strong> to ensure security of wallets and user keys.</li>\n<li><strong>Evaluate wisely what needs to be stored in the blockchain or in your servers.</strong> Only include data that is absolutely necessary for you smart contracts to function within the contracts themselves.</li>\n</ul>\n<p>There is an excellent write-up on DApp security standards you <a href=\"https://github.com/Dexaran/DAPP-security-standards/blob/master/README.md\" target=\"_blank\" rel=\"noopener\">can check out here.</a></p>\n<h2 id=\"Conclusion\"><a href=\"#Conclusion\" class=\"headerlink\" title=\"Conclusion\"></a>Conclusion</h2><p>Without a doubt, the most effective method for maintaining the security of your DApps  is keeping up-to-date with any security protocols on an ongoing basis.  Vulnerabilities are an extremely fickle and dynamic topic, in that they change / pop up so regularly.</p>\n<p>By following the tips in this article, keeping up-to-date with any security announcements, and having an in-depth overview of your systems, you can rest assured that you are well on your way to having a jolly well secured web app.  As stressed in this article, security considerations are not only found on the Back end of our apps, but on the Front end too.  Ensuring that we approach both means we can be confident about the safety of our users (which should be our number one priority).  The best tools in web security are common sense and vigilance.</p>\n<p>So, from enforcing HTTPS with Strict Transport Security, to securing our DApp frontend with a Content Security Policy; we’ve covered the main topics, in my opinion to ensuring Front end to Back end security for our web &amp; decentralised web applications. These topics are all techniques I utilise myself and would advocate for use in your apps on an ongoing basis.</p>\n<p><a href=\"https://twitter.com/rbin\" target=\"_blank\" rel=\"noopener\"> <strong><em>- @rbin</em></strong></a></p>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"ck5ijm3qt00087hegcibl5ffn","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r2000g7hega2otaz32"},{"post_id":"ck5ijm3qj00017heg0hco2qzg","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r5000k7hegc0d6bkl2"},{"post_id":"ck5ijm3qy000d7hegcv9ofwex","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r7000m7hegb2dmf85s"},{"post_id":"ck5ijm3qn00037hegbsrh3c67","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r8000p7heg5s6r5wli"},{"post_id":"ck5ijm3r0000f7heg2sf4hd1t","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3r9000r7hegcv8l1joz"},{"post_id":"ck5ijm3r4000j7hegdff7117g","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3ra000t7heg15x9gyp4"},{"post_id":"ck5ijm3qr00067heg3c3mbo7d","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3rb000v7heg2wkd7sgo"},{"post_id":"ck5ijm3qv000a7hega0m19iy0","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3rc000x7heg5mkjcn8h"},{"post_id":"ck5ijm3tr00247heg5aegaono","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u3002b7heges6sbu9o"},{"post_id":"ck5ijm3tt00267hegay9k9guq","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u4002d7hega93zas0w"},{"post_id":"ck5ijm3tw00287heg7013c23g","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u5002f7hegesvg2std"},{"post_id":"ck5ijm3tz002a7hegau443t3p","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u6002h7heg8llycou5"},{"post_id":"ck5ijm3u4002c7heg00jbexia","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3u7002j7heg43x2adwk"},{"post_id":"ck5ijm3u5002e7heg4c75be4a","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ua002l7heg92kq41du"},{"post_id":"ck5ijm3u6002g7heg2yc1byah","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ub002n7heg1x1sbaaj"},{"post_id":"ck5ijm3u7002i7hegd17nahv0","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ub002o7hegauz374rv"},{"post_id":"ck5ijm3u8002k7hegdpuf24tc","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3ub002p7heg3yzpcroc"},{"post_id":"ck5ijm3ub002m7heg363x7mwy","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5ijm3uc002q7heg6voth90j"},{"post_id":"ck5ijm3ui002r7heg90h8743t","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3uj002u7heghtv0a025"},{"post_id":"ck5ijm3uv002v7heg23u54ek5","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5ijm3uw002w7heg6cue2twv"},{"post_id":"ck5y92ljl0000zf0e4dk642y7","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck5y92lke0002zf0e9475czyn"},{"post_id":"ck5y92ljl0000zf0e4dk642y7","category_id":"ck5y92ljz0001zf0ebip59hx1","_id":"ck5y92lke0003zf0e86890h7s"},{"post_id":"ck5y9bbct0008zf0e0dtpheeq","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck5y9bbcv0009zf0eb0eidc73"},{"post_id":"ck60uz6ai0000bzt4ar0hbppr","category_id":"ck5ijm3qp00057heg5kpz32j7","_id":"ck60uz6aq0001bzt4d8g8cfki"},{"post_id":"ck60uz6ai0000bzt4ar0hbppr","category_id":"ck5y92ljz0001zf0ebip59hx1","_id":"ck60uz6aq0002bzt490ck3lcz"},{"post_id":"ck60uz6cn0003bzt49el1gmkb","category_id":"ck5ijm3r7000n7heg18or2163","_id":"ck60uz6cq0004bzt4gae3fhlw"}],"PostTag":[],"Tag":[]}}
\ No newline at end of file