67 lines
32 KiB
HTML
67 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"main":["/main.f66713773e9ba37b90fe.css","/main.3c22308242e28ead5e64.js"],"component---site-src-pages-index-jsc-4-f-f99":["/component---site-src-pages-index-jsc-4-f-f99.71bf8f44fd9ac59b6a50.css","/component---site-src-pages-index-jsc-4-f-f99.505b05deaa8813d82ea6.js"],"component---theme-blog-post-pageccc-cab":["/component---theme-blog-post-pageccc-cab.eaf730b8c654a212f785.js"],"content---blog-welcome-286-e55":["/content---blog-welcome-286-e55.76c213cf9ce75984ae91.js"],"metadata---blog-welcome-27-a-91f":["/metadata---blog-welcome-27-a-91f.ef07fafa6070c2acef91.js"],"component---theme-blog-list-pagea-6-a-7ba":["/component---theme-blog-list-pagea-6-a-7ba.697ec326a8cebf60b287.js"],"content---blogaf-1-856":["/content---blogaf-1-856.f79900332b57f969c09a.js"],"metadata---blog-83-c-2b0":["/metadata---blog-83-c-2b0.46c7be8f307d8da2c120.js"],"component---theme-doc-legacy-page-9-e-7-ca5":["/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css","/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"],"docsMetadata---docs-150-2d6":["/docsMetadata---docs-150-2d6.6e875209659be13f2970.js"],"component---theme-doc-legacy-item-031-769":["/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css","/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"],"content---docs-doc-1-b-2-f-e80":["/content---docs-doc-1-b-2-f-e80.b11e6221286a094dd836.js"],"metadata---docs-doc-12-a-3-5a1":["/metadata---docs-doc-12-a-3-5a1.bb87820e31f222c12801.js"],"content---docs-faq-048-db5":["/content---docs-faq-048-db5.a3f7755c1443136d038e.js"],"metadata---docs-faq-59-d-2b9":["/metadata---docs-faq-59-d-2b9.985713e75ca070fdde14.js"],"content---docs-mdxce-3-7d1":["/content---docs-mdxce-3-7d1.36f8da190939bb0f0b99.js"],"metadata---docs-mdx-786-f56":["/metadata---docs-mdx-786-f56.6c0450d5f4f4bf4b0f24.js"],"content---docs-api-component-4-ef-195":["/content---docs-api-component-4-ef-195.1ebedb4f37e2304eb832.js"],"metadata---docs-api-component-3-e-5-43d":["/metadata---docs-api-component-3-e-5-43d.0893689f20edabdccdd1.js"],"content---docs-api-event-widgetac-6-11b":["/content---docs-api-event-widgetac-6-11b.b87fa94e0cd874003d59.js"],"metadata---docs-api-event-widget-39-a-9ea":["/metadata---docs-api-event-widget-39-a-9ea.34b0ce562deb2ec0ae92.js"],"content---docs-api-flex-layout-3-dc-a16":["/content---docs-api-flex-layout-3-dc-a16.d5ab9ac7b90d9ed88203.js"],"metadata---docs-api-flex-layoutecf-540":["/metadata---docs-api-flex-layoutecf-540.7db8561c2c23b0d92b67.js"],"content---docs-api-node-layoutd-28-11a":["/content---docs-api-node-layoutd-28-11a.f1324fa8676e4bf64b44.js"],"metadata---docs-api-node-layout-1-e-9-c15":["/metadata---docs-api-node-layout-1-e-9-c15.192849fc91407c883037.js"],"content---docs-api-node-widget-080-a39":["/content---docs-api-node-widget-080-a39.e39bcda58fa051ef8f58.js"],"metadata---docs-api-node-widgeta-92-a4f":["/metadata---docs-api-node-widgeta-92-a4f.dc800d76f7062b65b2ed.js"],"content---docs-api-q-abstract-scroll-area-3-e-6-d7f":["/content---docs-api-q-abstract-scroll-area-3-e-6-d7f.ce07722700328be8dfa5.js"],"metadata---docs-api-q-abstract-scroll-area-59-d-279":["/metadata---docs-api-q-abstract-scroll-area-59-d-279.378868b047b4e7fc733c.js"],"content---docs-api-q-abstract-slider-3-e-0-54d":["/content---docs-api-q-abstract-slider-3-e-0-54d.b7e761ae58b36fe089f1.js"],"metadata---docs-api-q-abstract-sliderdfa-ab7":["/metadata---docs-api-q-abstract-sliderdfa-ab7.73efd891b1be587b529b.js"],"content---docs-api-q-applicationd-3-e-0a3":["/content---docs-api-q-applicationd-3-e-0a3.039f8c83760f87eef546.js"],"metadata---docs-api-q-applicationc-1-d-8a4":["/metadata---docs-api-q-applicationc-1-d-8a4.dba24314be49483727c4.js"],"content---docs-api-q-check-boxd-9-b-c95":["/content---docs-api-q-check-boxd-9-b-c95.54af9594d82de2f1c65c.js"],"metadata---docs-api-q-check-box-132-293":["/metadata---docs-api-q-check-box-132-293.363eb2c9b2bdc95e76bb.js"],"content---docs-api-q-clipboard-69-d-2ef":["/content---docs-api-q-clipboard-69-d-2ef.2facddd2ce7d03c7d364.js"],"metadata---docs-api-q-clipboard-486-b21":["/metadata---docs-api-q-clipboard-486-b21.5efa03bad36d45e62cbe.js"],"content---docs-api-q-cursor-362-d51":["/content---docs-api-q-cursor-362-d51.72e3b873d390560e1917.js"],"metadata---docs-api-q-cursor-887-11e":["/metadata---docs-api-q-cursor-887-11e.af1b21b104f06148557b.js"],"content---docs-api-q-dial-80-b-99a":["/content---docs-api-q-dial-80-b-99a.facd48a52570d2fd7472.js"],"metadata---docs-api-q-dialbfb-aef":["/metadata---docs-api-q-dialbfb-aef.e5ded32011b7d6927cdc.js"],"content---docs-api-q-grid-layouta-4-e-552":["/content---docs-api-q-grid-layouta-4-e-552.f8384f91986e144a1e06.js"],"metadata---docs-api-q-grid-layout-7-db-030":["/metadata---docs-api-q-grid-layout-7-db-030.f3764e551a2bc1cf18a8.js"],"content---docs-api-q-icone-5-f-b0d":["/content---docs-api-q-icone-5-f-b0d.016d00e28e5a87f3cf94.js"],"metadata---docs-api-q-icone-6-d-093":["/metadata---docs-api-q-icone-6-d-093.1c4c72d6ff116744c296.js"],"content---docs-api-q-label-2-f-9-04b":["/content---docs-api-q-label-2-f-9-04b.9f8c2e203f083cedfdf8.js"],"metadata---docs-api-q-label-165-210":["/metadata---docs-api-q-label-165-210.1dba411adf86a92ae91f.js"],"content---docs-api-q-line-editea-0-53d":["/content---docs-api-q-line-editea-0-53d.f606b13ced935ec46509.js"],"metadata---docs-api-q-line-edit-13-f-b8a":["/metadata---docs-api-q-line-edit-13-f-b8a.df4fef6cc6001cbc07a7.js"],"content---docs-api-q-main-window-0-e-7-299":["/content---docs-api-q-main-window-0-e-7-299.7a1bf20062e23ed6c510.js"],"metadata---docs-api-q-main-window-04-f-efb":["/metadata---docs-api-q-main-window-04-f-efb.699f6e2eb1ac78330311.js"],"content---docs-api-q-pixmap-8-dd-cb2":["/content---docs-api-q-pixmap-8-dd-cb2.343e5d75db3125ddfa81.js"],"metadata---docs-api-q-pixmapfdf-820":["/metadata---docs-api-q-pixmapfdf-820.087e26967d50eb06140d.js"],"content---docs-api-q-plain-text-edit-7-c-8-081":["/content---docs-api-q-plain-text-edit-7-c-8-081.f6a618e75ea9b4f15f6b.js"],"metadata---docs-api-q-plain-text-edit-161-ecc":["/metadata---docs-api-q-plain-text-edit-161-ecc.e89eb96f17b29e76629e.js"],"content---docs-api-q-progress-barc-46-afe":["/content---docs-api-q-progress-barc-46-afe.2a5c874c4e33ecb7a2b8.js"],"metadata---docs-api-q-progress-bar-43-d-07e":["/metadata---docs-api-q-progress-bar-43-d-07e.a527e07318808cde454e.js"],"content---docs-api-q-push-button-06-c-73e":["/content---docs-api-q-push-button-06-c-73e.9e1e6d8a0e7c17941efd.js"],"metadata---docs-api-q-push-button-96-d-c92":["/metadata---docs-api-q-push-button-96-d-c92.b15a45966fb25f5f9917.js"],"content---docs-api-q-radio-buttone-54-746":["/content---docs-api-q-radio-buttone-54-746.0eceb96f43e589853010.js"],"metadata---docs-api-q-radio-button-367-f7c":["/metadata---docs-api-q-radio-button-367-f7c.11484c432455585a7ef3.js"],"content---docs-api-q-scroll-area-8-c-4-3fd":["/content---docs-api-q-scroll-area-8-c-4-3fd.fd580650b1d2ac9eee33.js"],"metadata---docs-api-q-scroll-area-46-a-96e":["/metadata---docs-api-q-scroll-area-46-a-96e.a5c480374e3f8b5fcea2.js"],"content---docs-api-q-spin-box-1-ce-bfd":["/content---docs-api-q-spin-box-1-ce-bfd.fc03e9106b39d9c9e23c.js"],"metadata---docs-api-q-spin-box-809-ae0":["/metadata---docs-api-q-spin-box-809-ae0.1fcda0244eebb91ff1bf.js"],"content---docs-api-q-tab-widget-508-95e":["/content---docs-api-q-tab-widget-508-95e.b35876b3da49da08bcb5.js"],"metadata---docs-api-q-tab-widgetebc-5aa":["/metadata---docs-api-q-tab-widgetebc-5aa.558f01cb9860e9184f4f.js"],"content---docs-api-q-widget-04-a-59f":["/content---docs-api-q-widget-04-a-59f.789a0ca241a0fb6ad49d.js"],"metadata---docs-api-q-widget-287-e6c":["/metadata---docs-api-q-widget-287-e6c.1a1aa4d570d756d63bb4.js"],"content---docs-api-qt-enumsfd-7-cf3":["/content---docs-api-qt-enumsfd-7-cf3.1eed426a340d4c937b0a.js"],"metadata---docs-api-qt-enums-423-cf9":["/metadata---docs-api-qt-enums-423-cf9.fb1940e1fff15d344906.js"],"content---docs-api-yoga-widgeta-42-cc7":["/content---docs-api-yoga-widgeta-42-cc7.d048cabe40533b903ea2.js"],"metadata---docs-api-yoga-widget-95-c-f8b":["/metadata---docs-api-yoga-widget-95-c-f8b.bdbc70e8a3ba6a1d1808.js"],"content---docs-api-process-5-ec-b1e":["/content---docs-api-process-5-ec-b1e.81baa4658f7e9a835392.js"],"metadata---docs-api-process-32-d-09e":["/metadata---docs-api-process-32-d-09e.9dd820231565148c88a2.js"],"content---docs-api-synopsis-7-bb-e1c":["/content---docs-api-synopsis-7-bb-e1c.2cede4e9cd42a20dcab1.js"],"metadata---docs-api-synopsis-21-f-a62":["/metadata---docs-api-synopsis-21-f-a62.a376081207def93aa340.js"],"content---docs-development-readme-149-437":["/content---docs-development-readme-149-437.115b92599d48666d0070.js"],"metadata---docs-development-readm-ec-6-c-332":["/metadata---docs-development-readm-ec-6-c-332.49158ed40eba176b8d72.js"],"content---docs-development-common-errorsf-15-a5b":["/content---docs-development-common-errorsf-15-a5b.e038ab8ec8bf334300fb.js"],"metadata---docs-development-common-errors-402-ef4":["/metadata---docs-development-common-errors-402-ef4.7ea9ca2120cf1ce1bce9.js"],"content---docs-development-debuggingb-54-9ed":["/content---docs-development-debuggingb-54-9ed.750c6b37dab541484a83.js"],"metadata---docs-development-debuggingc-36-26a":["/metadata---docs-development-debuggingc-36-26a.3bf9d58aef0157443ea5.js"],"content---docs-development-getting-started-139-387":["/content---docs-development-getting-started-139-387.91c824c53e601bdee051.js"],"metadata---docs-development-getting-started-89-b-c7a":["/metadata---docs-development-getting-started-89-b-c7a.863d1b0e22372d87282e.js"],"content---docs-development-setting-up-28-c-666":["/content---docs-development-setting-up-28-c-666.3ed03febaee8901fd048.js"],"metadata---docs-development-setting-up-979-75f":["/metadata---docs-development-setting-up-979-75f.8f9fc5a72c685e8d0e31.js"],"content---docs-development-signal-and-event-handling-7-d-4-f3f":["/content---docs-development-signal-and-event-handling-7-d-4-f3f.ce2b82a97ac1f368a896.js"],"metadata---docs-development-signal-and-event-handling-0-b-5-692":["/metadata---docs-development-signal-and-event-handling-0-b-5-692.b16a5b795c3eef3ce5dc.js"],"content---docs-development-styling-293-cad":["/content---docs-development-styling-293-cad.b3394daf132a97f6e2c2.js"],"metadata---docs-development-styling-1-c-2-0d6":["/metadata---docs-development-styling-1-c-2-0d6.c1ae40b22fc3b93cd6fc.js"],"content---docs-development-wrapping-widgets-84-b-538":["/content---docs-development-wrapping-widgets-84-b-538.8591cd36dcfe1c65b14a.js"],"metadata---docs-development-wrapping-widgets-303-fb8":["/metadata---docs-development-wrapping-widgets-303-fb8.bfc04ad3ffc9ee24e861.js"],"content---docs-guides-custom-nodegui-native-plugin-632-9db":["/content---docs-guides-custom-nodegui-native-plugin-632-9db.ae1162899d532c588845.js"],"metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f":["/metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f.184a7a6a1f10e05c6c54.js"],"content---docs-guides-debugging-in-vscodebd-7-cec":["/content---docs-guides-debugging-in-vscodebd-7-cec.a37b675eceeff564dcc8.js"],"metadata---docs-guides-debugging-in-vscodebf-8-5b0":["/metadata---docs-guides-debugging-in-vscodebf-8-5b0.d26c0a02667ed3c9416d.js"],"content---docs-guides-debuggingf-3-f-cf5":["/content---docs-guides-debuggingf-3-f-cf5.6a9f350b152e911795d0.js"],"metadata---docs-guides-debugging-970-fb8":["/metadata---docs-guides-debugging-970-fb8.4834f7c20eceaaaee536.js"],"content---docs-guides-getting-startedc-9-e-20f":["/content---docs-guides-getting-startedc-9-e-20f.058d1e127795274285bb.js"],"metadata---docs-guides-getting-started-2-b-7-1a4":["/metadata---docs-guides-getting-started-2-b-7-1a4.cfc3dec8bc5f547dfbb8.js"],"content---docs-guides-handle-events-160-4b0":["/content---docs-guides-handle-events-160-4b0.c02ea0616d11beafddb3.js"],"metadata---docs-guides-handle-events-5-eb-540":["/metadata---docs-guides-handle-events-5-eb-540.61bb8e8da8eeda4cc040.js"],"content---docs-guides-images-991-065":["/content---docs-guides-images-991-065.914359cdc22f4b9051ef.js"],"metadata---docs-guides-images-915-5ee":["/metadata---docs-guides-images-915-5ee.175b82933d61d3e5deb4.js"],"content---docs-guides-layoutdf-5-a64":["/content---docs-guides-layoutdf-5-a64.bbcbc44e5156b817cb02.js"],"metadata---docs-guides-layoutf-65-d7d":["/metadata---docs-guides-layoutf-65-d7d.3bdf6df942a2264f480b.js"],"content---docs-guides-networking-374-03e":["/content---docs-guides-networking-374-03e.17133e9de15be6e64aff.js"],"metadata---docs-guides-networkingdfd-ce0":["/metadata---docs-guides-networkingdfd-ce0.332c039b051021fe2724.js"],"content---docs-guides-nodegui-architecture-262-19e":["/content---docs-guides-nodegui-architecture-262-19e.245edae39f1ddac01224.js"],"metadata---docs-guides-nodegui-architecture-550-b82":["/metadata---docs-guides-nodegui-architecture-550-b82.72d9e2773d4e285ca973.js"],"content---docs-guides-scroll-view-76-e-87c":["/content---docs-guides-scroll-view-76-e-87c.73c89be82bf124b2e125.js"],"metadata---docs-guides-scroll-view-9-a-9-2ac":["/metadata---docs-guides-scroll-view-9-a-9-2ac.f6039a7dd2d1fa4c6ca6.js"],"content---docs-guides-stylingfec-977":["/content---docs-guides-stylingfec-977.c0e2691c9103260d4124.js"],"metadata---docs-guides-styling-9-ea-213":["/metadata---docs-guides-styling-9-ea-213.d5570c147002ef8e6bfe.js"],"content---docs-guides-tutoriale-53-6ab":["/content---docs-guides-tutoriale-53-6ab.3001eaf77a6eeaf068aa.js"],"metadata---docs-guides-tutorial-1-f-1-23b":["/metadata---docs-guides-tutorial-1-f-1-23b.4e417b24befa6a685ab5.js"],"content---docs-guides-using-native-node-modules-3-ab-104":["/content---docs-guides-using-native-node-modules-3-ab-104.3bc40951d03693eaff7d.js"],"metadata---docs-guides-using-native-node-modules-31-f-551":["/metadata---docs-guides-using-native-node-modules-31-f-551.0accd417ae132a661bdf.js"],"component---theme-blog-tags-posts-page-687-b6c":["/component---theme-blog-tags-posts-page-687-b6c.7cbecfb8c53ab9b2f9ba.js"],"metadata---blog-tags-nodegui-632-d46":["/metadata---blog-tags-nodegui-632-d46.73df93301c6a1152b2fe.js"],"metadata---blog-tags-hellob-02-3e8":["/metadata---blog-tags-hellob-02-3e8.cdf356c9ee24382e453e.js"],"component---theme-blog-tags-list-page-01-a-d0b":["/component---theme-blog-tags-list-page-01-a-d0b.f9af53c8c6b12587c378.js"],"tags---blog-tags-8-d-7-36d":["/tags---blog-tags-8-d-7-36d.1243f2728e886299c73e.js"]};/*]]>*/</script>
|
||
|
||
<title data-react-helmet="true">Getting started</title>
|
||
|
||
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="viewport" content="width=device-width"/><meta data-react-helmet="true" property="og:title" content="Getting started"/><meta data-react-helmet="true" name="description" content="NodeGui enables you to create desktop applications with JavaScript. You could see it"/><meta data-react-helmet="true" property="og:description" content="NodeGui enables you to create desktop applications with JavaScript. You could see it"/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/getting-started"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
|
||
|
||
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
||
|
||
|
||
<link rel="stylesheet" type="text/css" href="/main.f66713773e9ba37b90fe.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/1.196ce05925ea6d776920.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/2.702de9bbb01fe4f46fa1.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css" />
|
||
|
||
</head>
|
||
<body >
|
||
<div id="__docusaurus">
|
||
<nav class="navbar navbar--light 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 aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a aria-current="page" class="navbar__item navbar__link navbar__link--active" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" label="API" position="right" href="/docs/api/QApplication">API</a><a class="navbar__item navbar__link" label="Blog" position="right" href="/blog">Blog</a><a class="navbar__item navbar__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a><div class="react-toggle displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_16vC moon_1N64"></span></div><div class="react-toggle-track-x"><span class="toggle_16vC sun_3CZP"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"/></div></div></div><div role="presentation" class="navbar__sidebar__backdrop"></div><div class="navbar__sidebar"><div class="navbar__sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" label="API" position="right" href="/docs/api/QApplication">API</a></li><li class="menu__list-item"><a class="menu__link" label="Blog" position="right" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a></li></ul></div></div></div></nav><div class="container container--fluid"><div class="row"><div class="col col--3"><div class="sidebar_Qb2S"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_1uhT" 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"><a class="menu__link" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/guides/getting-started">Getting started</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/styling">Styling</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/handle-events">Handle Events</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/scroll-view">Scroll View</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/images">Images</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/networking">Networking</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/nodegui-architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging-in-vscode">Debugging in VSCode</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/using-native-node-modules">Native Node Modules</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/custom-nodegui-native-plugin">Custom NodeGui Plugin</a></li></ul></li></ul></div></div></div><main class="col"><div><div class="padding-vert--lg"><div class="row"><div class="col"><div class="docItemContainer_3Gws"><header><h1 class="margin-bottom--lg">Getting started</h1></header><article><div class="markdown"><p>NodeGui enables you to create desktop applications with JavaScript. You could see it
|
||
as a lightly modified variant of the Node.js runtime that is focused on desktop applications
|
||
instead of web servers.</p><p>NodeGui is also an efficient JavaScript binding to a cross platform graphical user interface
|
||
(GUI) library <code>Qt</code>. Qt is one of the most mature and efficient library for building desktop applications.
|
||
This enabled NodeGui to be extrememly memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions. A hello world app built with NodeGui runs on less than 20Mb of memory.</p><h2><a aria-hidden="true" class="anchor" id="developer-environment"></a><a aria-hidden="true" class="hash-link" href="#developer-environment">#</a>Developer environment</h2><p>To turn your operating system into an environment capable of building desktop apps with NodeGui, you would need Node.js, npm,a code editor of your choice, and a rudimentary understanding of your operating system's command line client.</p><p>Along with these, there are a few operating system dependent instructions that are listed below.</p><h3><a aria-hidden="true" class="anchor" id="setting-up-on-macos"></a><a aria-hidden="true" class="hash-link" href="#setting-up-on-macos">#</a>Setting up on macOS</h3><p><strong>Requirements:</strong></p><ul><li>NodeGui supports macOS 10.10 (Yosemite) and up. NodeGui currently only supports 64bit OS.</li><li>CMake 3.1 and up (Installation instructions can be found here: <a href="https://cmake.org/install/">https://cmake.org/install/</a>)</li><li>Make, GCC v7</li><li>Currently supported Node.Js versions are 12.x and up.</li></ul><p>We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend <code>nvm</code>: <a href="https://github.com/nvm-sh/nvm">https://github.com/nvm-sh/nvm</a></p><p>Confirm that both <code>node</code> and <code>npm</code> are available by running:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-sh codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain"># This command should print the version of Node.js</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">node -v</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># This command should print the version of npm</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">npm -v</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>If both commands printed a version number, you are all set! Before you get
|
||
started, you might want to install a <a href="#a-good-editor">code editor</a> suited
|
||
for JavaScript development.</p><h3><a aria-hidden="true" class="anchor" id="setting-up-on-windows"></a><a aria-hidden="true" class="hash-link" href="#setting-up-on-windows">#</a>Setting up on Windows</h3><blockquote><p>NodeGui supports Windows 7 and later versions – attempting to develop NodeGui
|
||
applications on earlier versions of Windows might not work. NodeGui currently only supports 64bit OS.</p></blockquote><p><strong>Requirements:</strong></p><ul><li>Visual studio 2017 and up.</li><li>CMake 3.1 and up (Installation instructions can be found here: <a href="https://cmake.org/install/">https://cmake.org/install/</a>)</li><li>Currently supported Node.Js versions are 12.x and up.</li></ul><p>We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend <code>nvm</code>: <a href="https://github.com/nvm-sh/nvm">https://github.com/nvm-sh/nvm</a></p><p>We strongly recommend Powershell as preferred terminal in Windows.</p><p>Confirm that both <code>node</code> and <code>npm</code> are available by running:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-powershell codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain"># This command should print the version of Node.js</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">node -v</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># This command should print the version of npm</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">npm -v</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>If both commands printed a version number, you are all set! Before you get
|
||
started, you might want to install a <a href="#a-good-editor">code editor</a> suited
|
||
for JavaScript development.</p><h3><a aria-hidden="true" class="anchor" id="setting-up-on-linux"></a><a aria-hidden="true" class="hash-link" href="#setting-up-on-linux">#</a>Setting up on Linux</h3><blockquote><p>NodeGui currently supports Ubuntu 16.04 and Debian 10 and up. Although other Linux distributions can also be easily supported. NodeGui currently only supports 64bit OS.</p></blockquote><p><strong>Requirements:</strong></p><ul><li>Make, GCC v7</li><li>CMake 3.1 and up (Installation instructions can be found here: <a href="https://cmake.org/install/">https://cmake.org/install/</a>)</li><li>Currently supported Node.Js versions are 12.x and up.</li><li>On Ubuntu and Ubuntu-based distros it is advisable to run <code>sudo apt-get update</code>, followed by <code>sudo apt-get install pkg-config build-essential</code></li></ul><p>We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend <code>nvm</code>: <a href="https://github.com/nvm-sh/nvm">https://github.com/nvm-sh/nvm</a></p><p>Confirm that both <code>node</code> and <code>npm</code> are available by running:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-sh codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain"># This command should print the version of Node.js</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">node -v</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># This command should print the version of npm</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">npm -v</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>If both commands printed a version number, you are all set! Before you get
|
||
started, you might want to install a <a href="#a-good-editor">code editor</a> suited
|
||
for JavaScript development.</p><h3><a aria-hidden="true" class="anchor" id="a-good-editor"></a><a aria-hidden="true" class="hash-link" href="#a-good-editor">#</a>A Good Editor</h3><p>We might suggest two free popular editors:
|
||
GitHub's <a href="https://atom.io/">Atom</a> and Microsoft's <a href="https://code.visualstudio.com/">Visual Studio Code</a>. Both of
|
||
them have excellent JavaScript support.</p><p>If you are one of the many developers with a strong preference, know that
|
||
virtually all code editors and IDEs these days support JavaScript.</p><h3><a aria-hidden="true" class="anchor" id="hello-world"></a><a aria-hidden="true" class="hash-link" href="#hello-world">#</a>Hello World</h3><p>Clone and run the code in this tutorial by using the
|
||
<a href="https://github.com/nodegui/nodegui-starter"><code>nodegui/nodegui-starter</code></a> repository.</p><p><strong>Note</strong>: Running this requires <a href="https://git-scm.com">Git</a> and <a href="https://www.npmjs.com/">npm</a>.</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-sh codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain"># Clone the repository</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ git clone https://github.com/nodegui/nodegui-starter</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># Go into the repository</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ cd nodegui-starter</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># Install dependencies</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ npm install</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># Run the app</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ npm start</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>That's it!</p><p>Congratulations! You've successfully run and modified your first NodeGui app.</p><h3><a aria-hidden="true" class="anchor" id="now-what"></a><a aria-hidden="true" class="hash-link" href="#now-what">#</a>Now what?</h3><p>If you're curious to learn more about NodeGui, continue on to the <a href="/docs/guides/tutorial">tutorial</a>.</p></div></article><div class="margin-top--xl margin-bottom--lg"><nav class="pagination-nav"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/tutorial"><h5 class="pagination-nav__link--sublabel">Next</h5><h4 class="pagination-nav__link--label">Learn the Basics<!-- --> »</h4></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_2wxO"><ul class="contents contents__left-border"><li><a href="#developer-environment" class="contents__link">Developer environment</a><ul class=""><li><a href="#setting-up-on-macos" class="contents__link">Setting up on macOS</a></li><li><a href="#setting-up-on-windows" class="contents__link">Setting up on Windows</a></li><li><a href="#setting-up-on-linux" class="contents__link">Setting up on Linux</a></li><li><a href="#a-good-editor" class="contents__link">A Good Editor</a></li><li><a href="#hello-world" class="contents__link">Hello World</a></li><li><a href="#now-what" class="contents__link">Now what?</a></li></ul></li></ul></div></div></div></div></div></main></div></div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="/runtime~main.7a412b5ea073938bd334.js"></script>
|
||
|
||
<script type="text/javascript" src="/main.3c22308242e28ead5e64.js"></script>
|
||
|
||
<script type="text/javascript" src="/0.821df7f17f7288aebb5e.js"></script>
|
||
|
||
<script type="text/javascript" src="/1.9b3d421a0f44576af60f.js"></script>
|
||
|
||
<script type="text/javascript" src="/2.27a81c22b5dfa23bfe9b.js"></script>
|
||
|
||
<script type="text/javascript" src="/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"></script>
|
||
|
||
<script type="text/javascript" src="/docsMetadata---docs-150-2d6.6e875209659be13f2970.js"></script>
|
||
|
||
<script type="text/javascript" src="/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"></script>
|
||
|
||
<script type="text/javascript" src="/content---docs-guides-getting-startedc-9-e-20f.058d1e127795274285bb.js"></script>
|
||
|
||
<script type="text/javascript" src="/metadata---docs-guides-getting-started-2-b-7-1a4.cfc3dec8bc5f547dfbb8.js"></script>
|
||
|
||
</body>
|
||
</html> |