docs.waku.org/assets/js/25f4bf39.55ce46c1.js

"use strict";(self.webpackChunkwaku_guide=self.webpackChunkwaku_guide||[]).push([[1530],{4865:(e,t,a)=>{a.d(t,{A:()=>h});var s=a(96540),n=a(34164),r=a(23104),i=a(47751),l=a(92303);const o={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var c=a(74848);function u({className:e,block:t,selectedValue:a,selectValue:s,tabValues:i}){const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,r.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=i[n].value;r!==a&&(u(t),s(r))},p=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const a=l.indexOf(e.currentTarget)+1;t=l[a]??l[0];break}case"ArrowLeft":{const a=l.indexOf(e.currentTarget)-1;t=l[a]??l[l.length-1];break}}t?.focus()};return(0,c.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":t},e),children:i.map(({value:e,label:t,attributes:s})=>(0,c.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:e=>{l.push(e)},onKeyDown:p,onClick:d,...s,className:(0,n.A)("tabs__item",o.tabItem,s?.className,{"tabs__item--active":a===e}),children:t??e},e))})}function d({lazy:e,children:t,selectedValue:a}){const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const e=r.find(e=>e.props.value===a);return e?(0,s.cloneElement)(e,{className:(0,n.A)("margin-top--md",e.props.className)}):null}return(0,c.jsx)("div",{className:"margin-top--md",children:r.map((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a}))})}function p(e){const t=(0,i.u)(e);return(0,c.jsxs)("div",{className:(0,n.A)("tabs-container",o.tabList),children:[(0,c.jsx)(u,{...t,...e}),(0,c.jsx)(d,{...t,...e})]})}function h(e){const t=(0,l.default)();return(0,c.jsx)(p,{...e,children:(0,i.v)(e.children)},String(t))}},19365:(e,t,a)=>{a.d(t,{A:()=>i});a(96540);var s=a(34164);const n={tabItem:"tabItem_Ymn6"};var r=a(74848);function i({children:e,hidden:t,className:a}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.A)(n.tabItem,a),hidden:t,children:e})}},24311:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"build/javascript/use-waku-create-app","title":"Scaffold DApps Using @waku/create-app","description":"This guide provides detailed steps to bootstrap your next @waku/sdk project from various example templates using the @waku/create-app package.","source":"@site/docs/build/javascript/use-waku-create-app.md","sourceDirName":"build/javascript","slug":"/build/javascript/use-waku-create-app","permalink":"/build/javascript/use-waku-create-app","draft":false,"unlisted":false,"editUrl":"https://github.com/waku-org/docs.waku.org/tree/develop/docs/build/javascript/use-waku-create-app.md","tags":[],"version":"current","lastUpdatedAt":null,"frontMatter":{"title":"Scaffold DApps Using @waku/create-app","hide_table_of_contents":true,"displayed_sidebar":"build"},"sidebar":"build","previous":{"title":"Build React DApps Using @waku/react","permalink":"/build/javascript/use-waku-react"},"next":{"title":"Bootstrap Nodes and Discover Peers","permalink":"/build/javascript/configure-discovery"}}');var n=a(74848),r=a(28453),i=a(4865),l=a(19365);const o={title:"Scaffold DApps Using @waku/create-app",hide_table_of_contents:!0,displayed_sidebar:"build"},c=void 0,u={},d=[{value:"Usage",id:"usage",level:2},{value:"Contributing new templates",id:"contributing-new-templates",level:2}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["This guide provides detailed steps to bootstrap your next ",(0,n.jsx)(t.code,{children:"@waku/sdk"})," project from ",(0,n.jsx)(t.a,{href:"https://github.com/waku-org/js-waku-examples/tree/master/examples",children:"various example templates"})," using the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@waku/create-app",children:"@waku/create-app"})," package."]}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsxs)(t.p,{children:["Initialise a new ",(0,n.jsx)(t.code,{children:"@waku/sdk"})," template using any of the following methods:"]}),"\n","\n",(0,n.jsxs)(i.A,{children:[(0,n.jsx)(l.A,{value:"npm",label:"NPM",children:(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"npx @waku/create-app [PROJECT DIRECTORY]\n"})})}),(0,n.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-shell",children:"yarn create @waku/app [PROJECT DIRECTORY]\n"})})})]}),"\n",(0,n.jsx)(t.p,{children:"Next, select a template to initialise your app from:"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"waku create app demo",src:a(53453).A+"",width:"1136",height:"742"})}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["If you have previously installed ",(0,n.jsx)(t.code,{children:"@waku/create-app"})," globally, we recommend uninstalling the package to ensure that ",(0,n.jsx)(t.code,{children:"npx"})," always uses the latest version."]})}),"\n",(0,n.jsx)(t.h2,{id:"contributing-new-templates",children:"Contributing new templates"}),"\n",(0,n.jsxs)(t.p,{children:["We welcome and appreciate the contributions of templates for the ",(0,n.jsx)(t.code,{children:"@waku/create-app"})," package. To contribute a template, please follow these steps:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsx)(t.li,{children:"Create the template, ensuring it is user-friendly and thoroughly tested."}),"\n",(0,n.jsxs)(t.li,{children:["Place the template in the ",(0,n.jsx)(t.code,{children:"examples"})," folder in the ",(0,n.jsx)(t.a,{href:"https://github.com/waku-org/js-waku-examples",children:"js-waku-examples"})," repository's root."]}),"\n",(0,n.jsx)(t.li,{children:"Commit your changes with a detailed message and push them to your forked repository."}),"\n",(0,n.jsxs)(t.li,{children:["Finally, submit a pull request to the ",(0,n.jsx)(t.a,{href:"https://github.com/waku-org/js-waku-examples",children:"js-waku-examples"})," repository."]}),"\n",(0,n.jsx)(t.li,{children:"Our team will carefully review and merge your submission upon approval."}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Waku also provides bounties to encourage community members to contribute to the network and earn rewards. To participate in the bounty program, head to ",(0,n.jsx)(t.a,{href:"https://github.com/waku-org/bounties",children:"https://github.com/waku-org/bounties"}),"."]})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},28453:(e,t,a)=>{a.d(t,{R:()=>i,x:()=>l});var s=a(96540);const n={},r=s.createContext(n);function i(e){const t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(r.Provider,{value:t},e.children)}},53453:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/waku-create-app-demo-295aa111853f5a3381c5ed45d4cb9803.gif"}}]);