38 lines
14 KiB
HTML
38 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.64">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-145065218-1","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Packaging | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Packaging | NodeGui"><meta data-react-helmet="true" name="description" content="In order to distribute your finished app, you can use @nodegui/packer"><meta data-react-helmet="true" property="og:description" content="In order to distribute your finished app, you can use @nodegui/packer"><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/packaging"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/packaging"><link rel="stylesheet" href="/styles.920797bd.css">
|
|
<link rel="preload" href="/styles.d0bb17fa.js" as="script">
|
|
<link rel="preload" href="/runtime~main.8209f908.js" as="script">
|
|
<link rel="preload" href="/main.8f913cf4.js" as="script">
|
|
<link rel="preload" href="/1.919a4e30.js" as="script">
|
|
<link rel="preload" href="/2.0d1d100d.js" as="script">
|
|
<link rel="preload" href="/3.c139a1eb.js" as="script">
|
|
<link rel="preload" href="/1be78505.6f6a62ae.js" as="script">
|
|
<link rel="preload" href="/413.081b2fd3.js" as="script">
|
|
<link rel="preload" href="/935f2afb.f6ee5b50.js" as="script">
|
|
<link rel="preload" href="/17896441.0d773395.js" as="script">
|
|
<link rel="preload" href="/5b170ac4.a91b37c3.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"><strong class="navbar__title">NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/api/manual/synopsis">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/nodegui/nodegui" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"><strong class="navbar__title">NodeGui</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/api/manual/synopsis">API</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/nodegui/nodegui" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/getting-started">Getting started</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/styling">Styling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/handle-events">Handle Events</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/scroll-view">ScrollArea</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/drag-drop">Drag and drop</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/networking">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/guides/helpful-links">Helpful Links</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/nodegui-architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/debugging-in-vscode">Debugging in VSCode</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/using-native-node-modules">Native Node Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/custom-nodegui-native-plugin">Custom NodeGui Plugin</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/guides/packaging">Packaging</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Packaging</h1></header><div class="markdown"><p>In order to distribute your finished app, you can use <a href="https://github.com/nodegui/packer" target="_blank" rel="noopener noreferrer">@nodegui/packer</a></p><ul><li><p><strong>Step 1: (Run this command only once)</strong></p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npx nodegui-packer --init MyAppName</span></div></div></div></div></div><p>This will produce the deploy directory containing the template. You can modify this to suit your needs. Like add icons, change the name, description and add other native features or dependencies. Make sure you commit this directory.</p></li><li><p><strong>Step 2: (Run this command every time you want to build a new distributable)</strong></p><p>Next you can run the pack command:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npm run build</span></div></div></div></div></div><p>This will produce the js bundle along with assets inside the ./dist directory</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npx nodegui-packer --pack ./dist</span></div></div></div></div></div><p>This will build the distributable using @nodegui/packer based on your template. The output of the command is found under the build directory. You should gitignore the build directory.</p><p>More details about packer can be found here: <a href="https://github.com/nodegui/packer" target="_blank" rel="noopener noreferrer">https://github.com/nodegui/packer</a></p></li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/packaging.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/custom-nodegui-native-plugin"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Custom NodeGui Plugin</div></a></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2022 NodeGui</div></div></div></footer></div>
|
|
<script src="/styles.d0bb17fa.js"></script>
|
|
<script src="/runtime~main.8209f908.js"></script>
|
|
<script src="/main.8f913cf4.js"></script>
|
|
<script src="/1.919a4e30.js"></script>
|
|
<script src="/2.0d1d100d.js"></script>
|
|
<script src="/3.c139a1eb.js"></script>
|
|
<script src="/1be78505.6f6a62ae.js"></script>
|
|
<script src="/413.081b2fd3.js"></script>
|
|
<script src="/935f2afb.f6ee5b50.js"></script>
|
|
<script src="/17896441.0d773395.js"></script>
|
|
<script src="/5b170ac4.a91b37c3.js"></script>
|
|
</body>
|
|
</html> |