@arcblock/abtnode-docs

Version:

ABT Node Documentation, a help documentation for quickly get started with ABT Node.

1 lines • 20.9 kB

JSON

{"componentChunkName":"component---node-modules-arcblock-gatsby-theme-docs-src-templates-documentation-js","path":"/en/developer/bundle-blocklets","result":{"data":{"file":{"changeTime":"5 minutes ago","childMarkdownRemark":{"frontmatter":{"author":"wangshijun","category":"","date":null,"description":"Bundle Blocklets","draft":null,"keywords":"abtnode, blocklet","language":"en","layout":"documentation","path":"/en/developer/bundle-blocklets","tags":["abtnode"],"title":"Bundle Blocklets"},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Blocklets needs to be bundled before they can deployed to a running ABT Node instance. Blocklet bundling is very similar to bundling a typical web application, here are the steps to bundle your javascript blocklets."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"bundle-the-frontend","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#bundle-the-frontend","ariaLabel":"bundle the frontend permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Bundle the frontend"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your blocklet is built with front-end framework such as React.js, Vue.js, you must bundle them to static files that can be served from a webserver."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"1-get-blocklet-did","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#1-get-blocklet-did","ariaLabel":"1 get blocklet did permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"1. Get Blocklet DID"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Go to your blocklet folder and run "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"abtnode blocklet:meta | grep did"}]},{"type":"text","value":" to get the blocklet did:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"],"blocklet:meta":"","|":"","grep":"","did":""},"children":[{"type":"text","value":"abtnode blocklet:meta | grep did\ndid: z8iZn18zGRm5veEdhmrS2FRrUyw5ZAQcewVMH\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"2-change-asset-path","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#2-change-asset-path","ariaLabel":"2 change asset path permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"2. Change asset path"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For apps bootstrapped with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"create-react-app"}]},{"type":"text","value":", you can use the following build script to bundle the frontend:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-json"],"\"PUBLIC_URL":"\\\"/z8iZn18zGRm5veEdhmrS2FRrUyw5ZAQcewVMH\\\"","react-scripts":"","build\",":""},"children":[{"type":"text","value":"\"build:client\": \"PUBLIC_URL=\\\"/z8iZn18zGRm5veEdhmrS2FRrUyw5ZAQcewVMH\\\" react-scripts build\",\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please remember to replace the blocklet did with yours."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"3-load-assets-with-public_url","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#3-load-assets-with-public_url","ariaLabel":"3 load assets with public_url permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"3. Load assets with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%PUBLIC_URL%"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please change your "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"public/index.html"}]},{"type":"text","value":" to load all assets with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%PUBLIC_URL%"}]},{"type":"text","value":" prefix, just like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"],"html>":""},"children":[{"type":"text","value":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <meta name=\"theme-color\" content=\"#000000\" />\n \n <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n \n <link rel=\"stylesheet\" type=\"text/css\" href=\"%PUBLIC_URL%/icons/css/all.css\" />\n <script src=\"%PUBLIC_URL%/api/session/env\"></script>\n <title>Blockchain Manager</title>\n </head>\n\n <body>\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id=\"root\"></div>\n \n </body>\n</html>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"4-inject-the-blocklet-meta-script","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#4-inject-the-blocklet-meta-script","ariaLabel":"4 inject the blocklet meta script permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"4. Inject the blocklet meta script"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then add a script tag in the head to load blocklet meta:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"],"src":"__meta__.js","></script>":""},"children":[{"type":"text","value":"<script src=\"__meta__.js\"></script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This script will load from any path the blocklet is mounted, the content of the script will be similar to:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"text","value":"window.blocklet = {\n did: 'z8ia4e5vAeDsQEE2P26bQqz9oWR1Lxg9qUMaV',\n name: 'static-demo-blocklet',\n version: '0.9.0',\n prefix: '/admin/static-demo-blocklet/',\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"5-update-client-side-router","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#5-update-client-side-router","ariaLabel":"5 update client side router permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"5. Update client side router"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using a client side router, set router base dynamically is required to make things work correctly:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"],"basename":""},"children":[{"type":"text","value":"<Router basename={window.blocklet ? window.blocklet.prefix : window.env.apiPrefix}>\n <WrappedApp />\n</Router>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"6-adapt-ajax-requests","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#6-adapt-ajax-requests","ariaLabel":"6 adapt ajax requests permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"6. Adapt Ajax requests"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using some ajax request library such as axios, please make following changes:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"],"axios":"","from":"","'axios';":""},"children":[{"type":"text","value":"import axios from 'axios';\n\naxios.defaults.baseURL = '';\naxios.defaults.timeout = 200000;\n\naxios.interceptors.request.use(config => {\n const prefix = window.blocklet ? window.blocklet.prefix : window.env.apiPrefix;\n config.baseURL = prefix || '';\n\n return config;\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"bundle-the-backend","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#bundle-the-backend","ariaLabel":"bundle the backend permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Bundle the backend"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use the following script to bundle the backend:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-json"],"\"DEBUG":"@abtnode/*","NODE_ENV":"production","abtnode":"","bundle":"","-w":"","api/webpack.blocklet.js\",":""},"children":[{"type":"text","value":"\"build:server\": \"DEBUG=@abtnode/* NODE_ENV=production abtnode bundle -w api/webpack.blocklet.js\",\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since we are using webpack internally to bundle the blocklet backend, you can customize the configuration:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"pre","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"module.exports = webpack => ({\n optimization: {\n nodeEnv: false, // @link https://github.com/webpack/webpack/issues/7470#issuecomment-394259698\n },\n plugins: [\n new webpack.DefinePlugin({\n 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),\n }),\n ],\n});\n"}]}]}],"data":{"quirksMode":false}}}}},"pageContext":{"site":{"title":"ABT Node","description":"ABT Node Documentation","siteUrl":"https://docs.arcblock.io","logoUrl":"/abtnode/","sidebarWidth":360,"disableI18n":false,"showGetStarted":true,"defaultBanner":"/abtnode/og-banner.png"},"id":"4460b3de-e070-5e98-8db6-e017da901fcd","language":"en","locale":"en","languages":[{"value":"en","text":"English"},{"value":"zh","text":"简体中文"}],"headings":[{"value":"Bundle the frontend","depth":3},{"value":"1. Get Blocklet DID","depth":4},{"value":"2. Change asset path","depth":4},{"value":"3. Load assets with %PUBLIC_URL%","depth":4},{"value":"4. Inject the blocklet meta script","depth":4},{"value":"5. Update client side router","depth":4},{"value":"6. Adapt Ajax requests","depth":3},{"value":"Bundle the backend","depth":3}],"navItems":[{"group":"/home/runner/work/abtnode-docs/abtnode-docs/src","title":"ABT Node","priority":999,"link":"/"}],"version":"v0.2.20","official":true,"originalPath":"/en/developer/bundle-blocklets","sidebarContent":[{"url":null,"title":null,"pages":[{"title":"ABT Node Docs","path":"/en/"}]},{"url":"/en/introduction","title":"Introduction","pages":[{"title":"ABT Node Overview","path":"/en/introduction/abtnode-overview"},{"title":"ABT Node Setup","path":"/en/introduction/abtnode-setup"},{"title":"ABT Node Access","path":"/en/introduction/abtnode-access"}]},{"url":"/en/marketplace","title":"Marketplace","pages":[{"title":"Find and Install Blocklets","path":"/en/marketplace/find-and-install"},{"title":"Upgrade/downgrade blocklet","path":"/en/marketplace/upgrade-downgrade"}]},{"url":"/en/blocklet","title":"Blocklets","pages":[{"title":"Basic Operations","path":"/en/blocklet/basic-operations"},{"title":"Blocklet Environments","path":"/en/blocklet/environments"},{"title":"Core Blocklets","path":"/en/blocklet/core-blocklets"}]},{"url":"/en/router","title":"Service Gateway","pages":[{"title":"What is Service Gateway?","path":"/en/router/what-is-router"},{"title":"Service Gateway Usage","path":"/en/router/basic-usage"},{"title":"Binding domain names to sites and enabling SSL","path":"/en/router/bind-domain-and-ssl"},{"title":"Certificates for localhost","path":"/en/router/certificates-for-localhost"}]},{"url":"/en/deployment","title":"Deployment","pages":[{"title":"Production Best Practice","path":"/en/deployment/best-practice"},{"title":"Deploy ABT Node Using AWS AMI","path":"/en/deployment/from-aws-ami"},{"title":"Bind domain with reverse proxy server","path":"/en/deployment/behind-reverse-proxy"},{"title":"Run In Docker","path":"/en/deployment/run-in-docker"}]},{"url":"/en/misc","title":"Misc","pages":[{"title":"Node Settings","path":"/en/misc/node-settings"},{"title":"Member Management","path":"/en/misc/member-management"},{"title":"GraphQL Console","path":"/en/misc/graphql-console"}]},{"url":"/en/developer","title":"Developer Guide","pages":[{"title":"Configuring the development environment","path":"/en/developer/config-dev-env"},{"title":"ABT Node CLI","path":"/en/developer/abtnode-cli"},{"title":"Node Configuration","path":"/en/developer/configuration"},{"title":"Storage Structure","path":"/en/developer/storage-structure"},{"title":"Blocklet Specification","path":"/en/developer/blocklet-spec"},{"title":"Create Static Blocklets","path":"/en/developer/static-blocklets"},{"title":"Create DApp Blocklets","path":"/en/developer/dapp-blocklets"},{"title":"Blocklet Hooks","path":"/en/developer/blocklet-hooks"},{"title":"Bundle Blocklets","path":"/en/developer/bundle-blocklets"},{"title":"Publish Blocklets","path":"/en/developer/publish-blocklets"},{"title":"Blocklet Registry","path":"/en/developer/blocklet-registry"},{"title":"Developing Blocklets with Codespaces","path":"/en/developer/blocklet-codespaces"},{"title":"Configure Auth Service for Blocklet","path":"/en/developer/auth-service"},{"title":"Composable blocklet","path":"/en/developer/composable-blocklet"},{"title":"Docker Registry List","path":"/en/developer/docker-registry"}]}],"communityPath":"https://community.arcblockio.cn","githubUrl":"https://github.com/ArcBlock/abtnode-docs/tree/master/src/developer/bundle-blocklets/index.md"}},"staticQueryHashes":["1358860651","1619896071","1812186216","2194038815"]}