diff --git a/.all-contributorsrc b/.all-contributorsrc
deleted file mode 100644
index d724c39..0000000
--- a/.all-contributorsrc
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "files": [
- "README.md"
- ],
- "imageSize": 100,
- "commit": false,
- "contributors": [
- {
- "login": "pepf",
- "name": "Pepijn",
- "avatar_url": "https://avatars1.githubusercontent.com/u/1265435?v=4",
- "profile": "http://blog.pepf.nl",
- "contributions": [
- "code"
- ]
- }
- ],
- "contributorsPerLine": 7,
- "projectName": "react-nodegui-starter",
- "projectOwner": "nodegui",
- "repoType": "github",
- "repoHost": "https://github.com"
-}
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..307d965
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,8 @@
+{
+ "presets": [
+ ["@babel/preset-env", { "targets": { "node": "12" } }],
+ "@babel/preset-typescript",
+ "@babel/preset-react"
+ ],
+ "plugins": []
+}
diff --git a/README.md b/README.md
index e5a6fa2..ed0571d 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
# react-nodegui-starter
-[](#contributors)
-**Clone and run for a quick way to see React NodeGUI in action.**
+**Clone and run for a quick way to see React NodeGui in action.**
+
+
+
+ Welcome to NodeGui 🐕
+ 1. Play around
+ 2. Debug
+
+
+ );
+ }
+}
+
+const containerStyle = `
+ flex: 1;
+`;
+
+const styleSheet = `
+ #welcome-text {
+ font-size: 24px;
+ padding-top: 20px;
+ qproperty-alignment: 'AlignHCenter';
+ font-family: 'sans-serif';
+ }
+
+ #step-1, #step-2 {
+ font-size: 18px;
+ padding-top: 10px;
+ padding-horizontal: 20px;
+ }
+`;
+
+export default hot(App);
diff --git a/src/components/dog.js b/src/components/dog.js
new file mode 100644
index 0000000..dab0f46
--- /dev/null
+++ b/src/components/dog.js
@@ -0,0 +1,30 @@
+module.exports = `data:image/png;base64,
+iVBORw0KGgoAAAANSUhEUgAAADIAAAAzCAMAAADivasmAAACglBMVEUAAABPPz9RQj9QQUBPPj5PPz5TRENQQEBTQUFRQUFRQUFTQ0J
+RQUFQQEBkWFdXSkpVSUhTQEFRQUFUQUFQQUBQQEBOPj1QQD9WQkVdUE5RRERZTEtWRkdRQUFQQEBQQEBSQUJRQUFRQEBURUVQQEBPPT
+1aRUVOPT1VRkZPQUBRQEBRQUBSQUFPQEBTQUFSQ0NRQEFQQkFUPkFUQkNOPz5RPj9SP0BTRERVRUVUQEFWRUX///+jnpz+//6lnpykn
+pz9/f2inpyinZv9/v2kn538+/v///6inpv7+vmknZv+/v/+/f22s7KnoJ6Xj4+ln51SQkJVP0ClnZtTQEK0sa6koJ38/Pr19fTT0c+m
+oJ6Gfn3w7u6wrKuhm5lOQkBSPj/l5OLBv72sp6Wmo6CdlpSblJL6f4f3gIRRQD9NQD78/fv5+fbz8/Lr6enf3dzFw8G/u7qkm5qgmJa
+MhoV6cnF/T1D8/f3y8vLt7Ovh4N/a2NjLx8bIxsWuqaeknp+nn52akZCTi4mRiIePhoV/eXjKcnh5bWxrYmFpYF9gVVVdUVJYSklMPT
+v49/jl5OTd29nOy8rMycjHxsS8uLaopKShmZf2goiLg4KIfn2DeXh5cG9yaGdvZmVoXV1cTU9VR0dLPzry8O/p6Ofm5ubZ1tbW1NLS0
+tHRzszDwb+6trS1srD4gomEfXt1a2q0ZWpsZWT29/Xo5ePV0tO7ubicl5iYkpKVjY3ofofde4KMgYHNc3qtZmuRWFhZTUxPQ0RbQEG1
+sLGyrq6qqqr4gYbzhYXpfYXxhISJfHx+dHPDbnO/bnOAcnK+bHG5a3B0bGy2ZWqgZGicWVxlXFqWXFlyUE9KQ0GhVcLgAAAAO3RSTlM
+AB9CjBc/izbaqZzInDf759e7DbmtGGxYR+fj29cm5rpaNXT07A/3669mdkoV7elJPLSHz6d3UfV9UML/w/okAAAWkSURBVEjHhZZlVx
+tBFIaXUqAtdXd3d8vszmp2kwBpQkJKDCkUd0pb3IpTijvU3d3dXf9PZzbaNpy+n/acO8+ZK+/chHBq8taoLZOWEENp/YiGCfOnE96a1
+1cK4y9NnOYbWLJgbFlWdvcE7/D6aiNDUdqLgaN9EWNG9tmgFlJvVhIejSgHkRl7AF8euOhfYurEXIZlY4p4/bLhhFsBYfA8d6AIsKWz
+tv9NLArsAiLVRO8Gobu8kGFhqhAFmWoQqezabcP/IKaMKwOqPdEaNUb8/kTUCkVKDOCz+uYFL1w9NyggIGji/FHBawbieWC1cErSJ0J
+y0hGWonIH+7orwuLjS8vNVY/62wE4Z9JofCIKJGVEPqVS6bUqIIsvofR6NkNCkSERWkqPpbCgg4EQaItPN9LkkAh9IITVeiMMw7AQxh
+6klT4RkpRORQJfgmzGVR8IG0JLLSLwKR6KBhN3mvkHkWJYMJQgtJr+RuJhSAEKoSJUFAUckmtyVAUBb2iGoYNjvAwTB5HDcJCNDImJs
+TIOiI3NjGltc14eCUMHFruJ4cvaoXzKGJt/lVMqNZYCxIut1yRSyUnR50Un1O9B/HaFyveLISaOIxUKNak53sacitCQaCAcLRU623Bp
+oRtZ3M8DrKJUdMYh8ng+7frWSJlGXBBzcZUbmZQLZEXTCrdIr0/StEdGbs91IyNzRJzWuQhSofYc9bBk8hmMAP3MMa5SJthkd6RzKCp
+o8jgPRguCgJlUESFU6JV1rldUIxtlTwqnIKXMysp8wUVwaW1XbqZqUGqZGKE6/d15AawMDacQCjMK7HXHSLUDicg5lpPIRqCvJhnJmu
+1YTBvHsRRuYboSpdU2UBueeNJ1i+lRTZKuBzdlPyuPoWeNjCzo5jHCpqKc8zISdbp6iwsRzFE63U2McFaMiPEr8GYYPd4GMGJNxu0Ur
+N97rgvu6k/k1N2yYCSvQEb4S6PwDuviIUYKOXxILUg0zSmUSGq1mkSjp+WRcgdle1Jxy8cQC/uLKWxeMZ1WDC3cZoeju/2JQHOkFiPs
+ftITpzlSo9HQ3mbgrPLsjKV2InhOrh6iPA0aT1x54JzBYHgacpL0Qo7gJ1TSuXwKmn1ANQ+Y4utqD6Ix66KiUK/CD3vdk8aiVO5tmib
+vcDMDQPF+hUf0xXAkXXiSl09JwYBqiZuNXRY8I4sBtsI8TxJqrqkWM3aD4IXQuGclH9aiFxlUoaLgs0YXoUy2SHmk5UZvfVFThJo7Jr
+mpiLNQD22zRhOTe1V6isqU3EiavVBADr5Vm5JMk8cftwhuZDdaHvy9EcSksXF4k2SaXMyBpGKENH7edQ25tDmx2YmQEmoZ1LJVIwli1
+LhyLaofbVGalMs0DzZLJmuiPceSnF5dt9/Z47QQBhHxY1f5YZMFvAUQjf9Gmpy2cLhmV/3jcN0T+6+BpMEznEyYWkQegpKKpTucO8m/
+JptisAEcDUs/+vPh+wf77n/bl9jq2B/CcxSm9D1zNhJO4eSMenBK40ji8NFDLxK+7HvZcUcXo3Q6OhKC0rELvH8T59exVKRrcCca7if
+svbyv48Ir3Vm1YyaWIhHkziG8FVSm5QF/JCUZp45uwciFvXdkhKalfLSU+PZZU72RwM4SlK0q9mQjbrMLuRtVgBITDhoYgJCw+g3eyN
+QVlUZeXjMt0SkpV3683nvoQcfeT1HREWlnYkXAMCqqc8IU4g/5jazOptALQn1Rnb8d9bEjISHh7tKqViMAPH6N2b0TdxJ/a/J4M4WjE
+DJ8r/3hu0Nfn9S2Q4AlZnWNn+zrb9QG/xlmG3p3AIr6rrqkpPrcLIik0trMM/ynEb4V7D++qow1AkYE2uw4VssyjJEtq5q9cjQxtKaP
+mjuzurIiLM5GUWxcWEVlzcx5k6YS/5HforX+iUkNDQ32zUH+q9dN/+fAbySYWHnCNGc5AAAAAElFTkSuQmCC`;
diff --git a/src/components/stepone.tsx b/src/components/stepone.tsx
new file mode 100644
index 0000000..cf29453
--- /dev/null
+++ b/src/components/stepone.tsx
@@ -0,0 +1,30 @@
+import { Text, View } from "@nodegui/react-nodegui";
+import React from "react";
+const dogImg = require("./dog");
+
+export function StepOne() {
+ return (
+
+
+ Edit App.tsx to make changes to this screen. Then come back to see your
+ changes. Changes should reflect live thanks to Hot Reloading. 🔥
+
+
+ {`
+
+
+
+ You can even use Rich Html
+
+
+
+ );
+}
+
+const containerStyle = `
+ margin-horizontal: 20px;
+ padding-horizontal: 10px;
+`;
diff --git a/src/components/steptwo.tsx b/src/components/steptwo.tsx
new file mode 100644
index 0000000..3193f23
--- /dev/null
+++ b/src/components/steptwo.tsx
@@ -0,0 +1,53 @@
+import { Text, View, Button, useEventHandler } from "@nodegui/react-nodegui";
+import { QPushButtonSignals } from "@nodegui/nodegui";
+import React from "react";
+import open from "open";
+
+export function StepTwo() {
+ const btnHandler = useEventHandler(
+ {
+ clicked: () => open("https://react.nodegui.org").catch(console.log)
+ },
+ []
+ );
+ return (
+
+
+ {`
+
+
+ Open chrome and navigate to chrome://inspect. You should see a target below with your app.
+
+
+ Next click on "Open dedicated DevTools for Node"
+
+
+ On the dedicated devtools. Click on Source > Node > "Your node process"
+
+
+ `}
+
+
+ );
+}
+
+const containerStyle = `
+ flex: 1;
+ justify-content: 'space-around';
+`;
+
+const textStyle = `
+ padding-right: 20px;
+`;
+
+const btnStyle = `
+ margin-horizontal: 20px;
+ height: 40px;
+`;
diff --git a/src/index.tsx b/src/index.tsx
index 6427d2b..b4b11a6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,63 +1,12 @@
-import {
- Renderer,
- View,
- Text,
- Button,
- Window,
- Image,
- useEventHandler
-} from "@nodegui/react-nodegui";
-import path from "path";
-import React, { useState } from "react";
-import { AspectRatioMode, QPushButtonEvents } from "@nodegui/nodegui";
-
-import imageUrl from "../assets/sample.jpg";
-const distImgUrl = path.resolve(__dirname, imageUrl);
-
-const fixedSize = { width: 500, height: 500 };
-const App = () => {
- const [time, setTime] = useState(new Date());
- const btnHandler = useEventHandler(
- { [QPushButtonEvents.clicked]: () => setTime(new Date()) },
- []
- );
- return (
-
-
- {`${time}`}
- {`Time in epoc: ${time.getTime()}`}
-
-
- );
-};
-
-const imageStyle = `
- height: "70%";
-`;
-
-const styleSheet = `
- #container {
- flex: 1;
- flex-direction: column;
- min-height: '100%';
- align-items: 'center';
- justify-content: 'center';
- background-color: black;
- }
- #opBtn {
- font-size: 20px;
- }
- #result {
- font-size: 12px;
- flex: 1;
- color: cyan;
- }
-`;
+import { Renderer } from "@nodegui/react-nodegui";
+import React from "react";
+import App from "./app";
+process.title = "My NodeGui App";
Renderer.render( 
## To Use
@@ -10,34 +11,53 @@ To clone and run this repository you'll need [Git](https://git-scm.com) and [Nod
```bash
# Clone this repository
git clone https://github.com/nodegui/react-nodegui-starter
+# Install CMake
+brew install cmake
# Go into the repository
cd react-nodegui-starter
# Install dependencies
npm install
-# Run the app
+# Run the dev server
+npm run dev
+# Open andother terminal and run the app
npm start
```
-## Resources for Learning NodeGUI/React NodeGUI
+## Installation & Resources for learning React NodeGui
-- [nodegui.github.io/nodegui](https://nodegui.github.io/nodegui) - all of NodeGui and React NodeGUI's documentation
+- [Documentation](https://react.nodegui.org) - all of React NodeGui's documentation.
+- [NodeGui](https://nodegui.org) - all of NodeGui's documentation.
-## License
+## Packaging app as a distributable
-MIT
+In order to distribute your finished app, you can use [@nodegui/packer](https://github.com/nodegui/packer)
+
+### Step 1: (_**Run this command only once**_)
-## Contributors ✨
+```sh
+npx nodegui-packer --init MyAppName
+```
+
+This will produce the deploy directory containing the template. You can modify this to suite your needs. Like add icons, change the name, description and add other native features or dependencies. Make sure you commit this directory.
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+### Step 2: (_**Run this command every time you want to build a new distributable**_)
-
-
-