Add GUI dev environment (#114)
Setup dev tools to build GUI using ReasonML + Electron Use react-scripts instead of custom build config Add electron command Rename command
This commit is contained in:
Gael du Plessix
committed by
Brendan Le Glaunec
Brendan Le Glaunec
parent
89647ae457
commit
71046216ce
@@ -0,0 +1,17 @@
|
|||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# build
|
||||||
|
/build
|
||||||
|
|
||||||
|
# bucklescript
|
||||||
|
/lib
|
||||||
|
/types
|
||||||
|
.merlin
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# Cameradar GUI
|
||||||
|
|
||||||
|
## WIP
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "reason-scripts",
|
||||||
|
"sources": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"bs-dependencies": [
|
||||||
|
"reason-react",
|
||||||
|
"bs-jest"
|
||||||
|
],
|
||||||
|
"reason": {
|
||||||
|
"react-jsx": 2
|
||||||
|
},
|
||||||
|
"bsc-flags": [
|
||||||
|
"-bs-super-errors"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
// This is the entry point of the electron app
|
||||||
|
// It manages the overall state of the native app (menus, windows, ...)
|
||||||
|
// TODO: launch cameradar process
|
||||||
|
|
||||||
|
const { app, BrowserWindow } = require('electron');
|
||||||
|
const path = require('path');
|
||||||
|
const url = require('url');
|
||||||
|
|
||||||
|
let mainWindow;
|
||||||
|
|
||||||
|
// This method will be called when Electron has finished
|
||||||
|
// initialization and is ready to create browser windows.
|
||||||
|
// Some APIs can only be used after this event occurs.
|
||||||
|
app.on('ready', () => {
|
||||||
|
// create the browser window.
|
||||||
|
mainWindow = new BrowserWindow({ width: 800, height: 600 });
|
||||||
|
|
||||||
|
// and load the index.html of the app.
|
||||||
|
mainWindow.loadURL(
|
||||||
|
url.format({
|
||||||
|
pathname: `${__dirname}/../build/index.html`,
|
||||||
|
protocol: 'file:',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Open the DevTools.
|
||||||
|
mainWindow.webContents.openDevTools({
|
||||||
|
mode: 'bottom',
|
||||||
|
});
|
||||||
|
|
||||||
|
mainWindow.on('closed', () => {
|
||||||
|
mainWindow = null;
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "gui",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "electron_app/index.js",
|
||||||
|
"homepage": ".",
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^16.0.0",
|
||||||
|
"react-dom": "^16.0.0",
|
||||||
|
"reason-scripts": "0.6.11"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"electron": "electron ."
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"bs-jest": "^0.2.0",
|
||||||
|
"electron": "^1.7.9",
|
||||||
|
"electron-packager": "^9.1.0",
|
||||||
|
"reason-react": "^0.2.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<title>Cameradar</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="index"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainWindow {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 50vw;
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
open Utils;
|
||||||
|
|
||||||
|
requireCSS "./MainWindow.css";
|
||||||
|
|
||||||
|
let logo = requireAssetURI "./images/logo.png";
|
||||||
|
|
||||||
|
let component = ReasonReact.statelessComponent "MainPage";
|
||||||
|
|
||||||
|
let make _children => {
|
||||||
|
...component,
|
||||||
|
render: fun _self =>
|
||||||
|
<div className="mainWindow">
|
||||||
|
<h1 className="title"> (textEl "Coming soon !") </h1>
|
||||||
|
<img className="logo" src=logo />
|
||||||
|
</div>
|
||||||
|
};
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
/* require css file for side effect only */
|
||||||
|
external requireCSS : string => unit = "require" [@@bs.val];
|
||||||
|
|
||||||
|
/* require an asset (eg. an image) and return exported string value (image URI) */
|
||||||
|
external requireAssetURI : string => string = "require" [@@bs.val];
|
||||||
|
|
||||||
|
let textEl str => ReasonReact.stringToElement str;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
@@ -0,0 +1 @@
|
|||||||
|
ReactDOMRe.renderToElementWithId <MainWindow /> "index";
|
||||||
+7364
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user