Skip to content

Commit 212f719

Browse files
author
Rahul Vashishtha
committed
Initial Commit
1 parent f4802b4 commit 212f719

File tree

16 files changed

+339
-0
lines changed

16 files changed

+339
-0
lines changed

‎README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# nodegui-mvc-starter
2+
3+
**Clone and run to build complex applications in simple modular way.**
4+
5+
## About
6+
7+
This starter boilerplate is the modified version of the official [nodegui-starter](https://github.com/nodegui/nodegui-starter). This boilerplate aims to provide a basic structure and format to build large complex application using NodeGUI.
8+
This uses the [nodegui-deb-builder](https://github.com/RinneganTech/nodegui-deb-builder "NodeGUI Debian Builder") to generate `.deb` package.
9+
10+
## To Use
11+
12+
To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer.
13+
14+
Make sure you have met the requirements listed here: https://docs.nodegui.org/#/tutorial/development-environment
15+
16+
From your command line:
17+
18+
```bash
19+
# Clone this repository
20+
git clone https://github.com/RinneganTech/nodegui-mvc-starter
21+
# Go into the repository
22+
cd nodegui-mvc-starter
23+
# Install dependencies
24+
npm install
25+
# Run the app
26+
npm start
27+
```
28+
29+
## Resources for Learning NodeGui
30+
31+
- [docs.nodegui.org](https://nodegui.github.io/nodegui) - all of NodeGui and React Desktop's documentation
32+
33+
## Packaging app as a distributable
34+
35+
In order to distribute your finished app, you can use [@nodegui/packer](https://github.com/nodegui/packer).
36+
37+
**Note:** For building on Debian, Follow the [nodegui-deb-builder](https://github.com/RinneganTech/nodegui-deb-builder "NodeGUI Debian Builder") guide to build .deb executable.
38+
39+
### Step 1: (_**Run this command only once**_)
40+
41+
```sh
42+
npx nodegui-packer --init MyAppName
43+
```
44+
45+
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.
46+
47+
### Step 2: (_**Run this command every time you want to build a new distributable**_)
48+
49+
Next you can run the pack command:
50+
51+
```sh
52+
npm run build
53+
```
54+
55+
This will produce the js bundle along with assets inside the `./dist` directory
56+
57+
```sh
58+
npx nodegui-packer --pack ./dist
59+
```
60+
61+
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.
62+
63+
More details about packer can be found here: https://github.com/nodegui/packer
64+
65+
## License
66+
67+
MIT

‎assets.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module "*.svg";
2+
declare module "*.png";
3+
declare module "*.jpg";
4+
declare module "*.jpeg";
5+
declare module "*.gif";
6+
declare module "*.bmp";

‎assets/fonts/Montserrat.ttf

240 KB
Binary file not shown.

‎assets/images/logo.png

13.7 KB
Loading

‎assets/styles/style.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
* {
2+
font-family: "Montserrat", sans-serif;
3+
font-size: 1rem;
4+
font-weight: 400;
5+
line-height: 1.5;
6+
7+
margin: 0;
8+
9+
text-align: left;
10+
11+
color: #444444;
12+
background-color: #f3f3f3;
13+
}
14+
15+
QLabel {
16+
color: #1b1b1b;
17+
background-color: #00000000;
18+
font-size: 20px;
19+
}

‎build-deb.js

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎control

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Package: packagename
2+
Version: 1.0
3+
Section: custom
4+
Priority: optional
5+
Architecture: all
6+
Essential: no
7+
Installed-Size: 1024
8+
Maintainer: Rinnegan Technologies
9+
Description: Debian Control Template.

‎package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "nodegui-mvc-starter",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"author": "TeckFreak",
6+
"repository": {
7+
"url": "https://github.com/RinneganTech/nodegui-mvc-starter"
8+
},
9+
"license": "MIT",
10+
"private": true,
11+
"scripts": {
12+
"build": "webpack -p",
13+
"start": "webpack && qode ./dist/index.js",
14+
"debug": "webpack && qode --inspect ./dist/index.js",
15+
"start:watch": "nodemon -e js,ts,css --ignore dist/ --ignore node_modules/ --exec pnpm start"
16+
},
17+
"dependencies": {
18+
"@nodegui/nodegui": "^0.19.0"
19+
},
20+
"devDependencies": {
21+
"@nodegui/packer": "^1.4.1",
22+
"@types/node": "^13.7.7",
23+
"clean-webpack-plugin": "^3.0.0",
24+
"file-loader": "^5.1.0",
25+
"native-addon-loader": "^2.0.1",
26+
"ts-loader": "^6.2.1",
27+
"typescript": "^3.8.3",
28+
"webpack": "^4.42.0",
29+
"webpack-cli": "^3.3.11"
30+
}
31+
}

‎src/components/AboutFolder.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Use this folder for storing your custom widgets.

‎src/helpers/AboutFolder.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Use this folder for storing your helper methods, utilities and classes.

‎src/index.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import UI = require("@nodegui/nodegui");
2+
import { MainWindow } from "./views/MainWindow";
3+
4+
class Application {
5+
constructor() {
6+
this.loadAssets();
7+
}
8+
9+
/**
10+
* Load application wide assets.
11+
*/
12+
private loadAssets(): void {
13+
UI.QFontDatabase.addApplicationFont("../assets/fonts/Montserrat.ttf");
14+
}
15+
16+
public start(): void {
17+
let mainWindow: MainWindow = new MainWindow();
18+
mainWindow.show();
19+
20+
this.GlobalWindow = mainWindow;
21+
}
22+
23+
/**
24+
* Return the current global windows.
25+
*/
26+
public get GlobalWindow(): UI.QMainWindow {
27+
return (global as any).win;
28+
}
29+
30+
/**
31+
* Saves Window in Global variable to prevent it collected by GC.
32+
*/
33+
public set GlobalWindow(v: UI.QMainWindow) {
34+
(global as any).win = v;
35+
}
36+
}
37+
38+
const application = new Application();
39+
application.start();

‎src/interfaces/AboutFolder.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Use this folder for storing your Interfaces.

‎src/models/AboutFolder.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Use this folder for storing your models.

‎src/views/MainWindow.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import UI = require("@nodegui/nodegui");
2+
import fs = require("fs");
3+
import path = require("path");
4+
5+
export class MainWindow extends UI.QMainWindow {
6+
constructor() {
7+
super();
8+
9+
this.initializeComponents();
10+
}
11+
12+
/**
13+
* This method initializes all the UI components required to be loaded initially.
14+
* This can be overriden by the child class of this class
15+
*/
16+
protected initializeComponents() {
17+
this.setWindowTitle("NodeGUI Boilerplate");
18+
this.setMinimumSize(400, 400);
19+
this.setStyleSheet(fs.readFileSync(path.resolve(__dirname, "../assets/styles/style.css"), "utf8"));
20+
this.setWindowIcon(new UI.QIcon(path.resolve(__dirname, "../assets/images/logo.png")));
21+
22+
const centralWidget = new UI.QWidget();
23+
centralWidget.setInlineStyle(`
24+
height: '100%';
25+
align-items: 'center';
26+
justify-content: 'center';
27+
flex-direction: column;
28+
`);
29+
centralWidget.setLayout(new UI.FlexLayout());
30+
this.setCentralWidget(centralWidget);
31+
32+
const lblHello = new UI.QLabel();
33+
lblHello.setText("Hello");
34+
lblHello.setInlineStyle(`
35+
font-size: 32px;
36+
`);
37+
38+
const lblWorld = new UI.QLabel();
39+
lblWorld.setText("World");
40+
41+
centralWidget.layout!.addWidget(lblHello);
42+
centralWidget.layout!.addWidget(lblWorld);
43+
}
44+
}

‎tsconfig.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"incremental": true,
4+
"target": "es2016",
5+
"module": "commonjs",
6+
"allowJs": true,
7+
"checkJs": false,
8+
"outDir": "./dist",
9+
"sourceMap": true,
10+
"strict": true,
11+
"alwaysStrict": true,
12+
"moduleResolution": "node",
13+
"esModuleInterop": true
14+
},
15+
"include": ["**/*"]
16+
}

‎webpack.config.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const path = require("path");
2+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3+
4+
module.exports = {
5+
mode: process.NODE_ENV || "development",
6+
entry: "./src",
7+
target: "node",
8+
node: {
9+
__dirname: false,
10+
__filename: false,
11+
},
12+
output: {
13+
path: path.resolve(__dirname, "dist"),
14+
filename: "index.js",
15+
},
16+
module: {
17+
rules: [
18+
{
19+
test: /\.tsx?$/,
20+
use: "ts-loader",
21+
exclude: /node_modules/,
22+
},
23+
{
24+
test: /\.(png|jpe?g|gif|svg)$/i,
25+
use: [
26+
{
27+
loader: "file-loader",
28+
options: { publicPath: "dist" },
29+
},
30+
],
31+
},
32+
{
33+
test: /\.node$/,
34+
use: [
35+
{
36+
loader: "native-addon-loader",
37+
options: { name: "[name]-[hash].[ext]" },
38+
},
39+
],
40+
},
41+
],
42+
},
43+
resolve: {
44+
extensions: [".tsx", ".ts", ".js", ".jsx"],
45+
},
46+
plugins: [new CleanWebpackPlugin()],
47+
};

0 commit comments

Comments
 (0)