stand-alone codepod app with all kernels working

Author: lihebi

README.md

@@ -7,6 +7,54 @@ docker stop $(docker ps  -a  | grep cpkernel_ | awk '{print $1}')
 docker rm $(docker ps  -a  | grep cpkernel_ | awk '{print $1}')
 ```
 
+# User Guide
+Install kernels:
+
+python:
+
+```
+python -m pip install ipykernel
+python -m ipykernel install --user
+```
+
+racket:
+
+```
+brew install zmq
+raco pkg install --auto iracket
+raco iracket install
+```
+
+On mac, zeromq lib cannot be found by racket due to [a known
+issue](https://github.com/rmculpepper/racket-zeromq/issues/6). To side-step it
+(replace the version numbers with your installation):
+
+```
+cp /opt/homebrew/Cellar/zeromq/4.3.4/lib/libzmq.5.dylib ~/Library/Racket/8.2/lib
+```
+
+julia:
+
+```
+julia
+]add add IJulia
+import IJulia
+IJulia.installkernel("Julia nodeps", "--depwarn=no")
+```
+
+Or just
+
+```
+julia -e 'import Pkg; Pkg.add("IJulia"); using IJulia; installkernel("Julia nodeps", "--depwarn=no")'
+```
+
+Javascript
+
+```
+npm install -g ijavascript
+ijsinstall
+```
+
 # About electron:
 
 - electron does not support ES6 modules

app/README.md

@@ -2,6 +2,37 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+# Development
+
+1. run `npm run start` in cpkernel
+2. run `npm run start` in ui
+3. run `npm run ele` in app
+   - so the app is only a manager session to launch kernel and ui in the
+     package. It is completely useless during development.
+
+UPDATE: now just run `npm run dev`
+
+The cpkernel is linked, so need to run `npm link ../cpkernel`. Otherwise, the
+cpkernel is copied to node_modules and won't be built.
+
+# Build
+
+1. run `npm run build` in cpkernel
+2. run `npm run bulid` in ui
+3. run `npm run build` in app
+4. run `npm run package` in app
+   - the packaged app is in dist/
+
+Since electron app cannot console.log to stdout, I need a way to see the errors.
+Currently I log into a file /tmp/a.txt and use `tail -f /tmp/a.txt` to monitor
+the results.
+
+To extract app.asar:
+
+```
+npx asar extract app.asar destfolder
+```
+
 ## Available Scripts
 
 In the project directory, you can run:
@@ -28,43 +59,3 @@ The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

app/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "codepod-app",
+  "name": "codepod",
   "version": "0.1.0",
   "private": true,
   "main": "./public/electron.js",
@@ -10,17 +10,25 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "cpkernel": "file:../cpkernel",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
   "build": {
     "appId": "com.electron.myapp",
-    "productName": "My Electron App",
+    "productName": "CodePod",
     "files": [
       "build/**/*",
-      "node_modules/**/*"
+      "node_modules/**/*",
+      {
+        "from": "../ui/build",
+        "to": "build/ui",
+        "filter": [
+          "**/*"
+        ]
+      }
     ],
     "directories": {
       "buildResources": "public"
@@ -36,14 +44,17 @@
     }
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=13001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "electron:start": "concurrently -k \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electronmon .\"",
-    "electron:package:mac": "yarn build && electron-builder -m -c.extraMetadata.main=build/electron.js",
-    "electron:package:win": "yarn build && electron-builder -w -c.extraMetadata.main=build/electron.js",
-    "electron:package:linux": "yarn build && electron-builder -l -c.extraMetadata.main=build/electron.js"
+    "package": "electron-builder -m -c.extraMetadata.main=build/electron.js",
+    "electron:start": "concurrently -k \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:13001 && electronmon .\"",
+    "electron:package:mac": "npm run build && electron-builder -m -c.extraMetadata.main=build/electron.js",
+    "electron:package:win": "npm run build && electron-builder -w -c.extraMetadata.main=build/electron.js",
+    "electron:package:linux": "npm run build && electron-builder -l -c.extraMetadata.main=build/electron.js",
+    "dev": "concurrently -k \"cd ../ui && BROWSER=none npm run start\" \"cd ../cpkernel && npm run dev\" \"cross-env BROWSER=none npm run start\" \"wait-on http://127.0.0.1:13001 && wait-on http://127.0.0.1:14322 && electronmon .\"",
+    "build:all": "cd ../cpkernel && npm run build && cd ../ui && npm run build && cd ../app && npm run build && npm run package"
   },
   "eslintConfig": {
     "extends": [
@@ -71,4 +82,4 @@
     "electronmon": "^2.0.2",
     "wait-on": "^6.0.0"
   }
-}
+}

app/package.json

@@ -1,8 +1,38 @@
 // Module to control the application lifecycle and the native browser window.
-const { app, BrowserWindow, protocol } = require("electron");
+const {
+  app,
+  BrowserWindow,
+  protocol,
+  Tray,
+  Menu,
+  nativeImage,
+} = require("electron");
 const path = require("path");
 const url = require("url");
 
+
+if (app.isPackaged) {
+  const { startServer } = require("cpkernel");
+  const express = require("express");
+
+  // if packaged, run the backend:
+  // 1. the graphql on :14321
+  // 2. the static UI on :14322
+
+  // during development, I'm going to start the two server manually
+  console.log("Starting repo/kernel server ..")
+  startServer(path.join(app.getPath("userData"), "repos"));
+
+  const static_dir = path.join(__dirname, "ui");
+  console.log("===", static_dir);
+  const expapp = express();
+  expapp.use("/", express.static(static_dir));
+  console.log("starting UI server ..")
+  expapp.listen(14322, () => {
+    console.log("UI server started on port :14322");
+  });
+}
+
 // Create the native browser window.
 function createWindow() {
   const mainWindow = new BrowserWindow({
@@ -18,13 +48,19 @@ function createWindow() {
   // In production, set the initial browser path to the local bundle generated
   // by the Create React App build process.
   // In development, set it to localhost to allow live/hot-reloading.
+  const indexurl = url.format({
+    pathname: path.join(__dirname, "index.html"),
+    protocol: "file:",
+    slashes: true,
+  });
   const appURL = app.isPackaged
     ? url.format({
-        pathname: path.join(__dirname, "index.html"),
-        protocol: "file:",
-        slashes: true,
-      })
-    : "http://localhost:3000";
+      pathname: path.join(__dirname, "ui/index.html"),
+      protocol: "file:",
+      slashes: true,
+    })
+    : // : "http://localhost:13001";
+    "http://localhost:14322";
   mainWindow.loadURL(appURL);
 
   // Automatically open Chrome's DevTools in development mode.
@@ -48,13 +84,39 @@ function setupLocalFilesNormalizerProxy() {
   );
 }
 
+let tray;
+
 // This method will be called when Electron has finished its initialization and
 // is ready to create the browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
   createWindow();
   setupLocalFilesNormalizerProxy();
 
+  const icon = nativeImage.createFromPath("./favicon.ico");
+  tray = new Tray(icon);
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: "Open in Browser",
+      type: "normal",
+      click: () => {
+        require("electron").shell.openExternal("http://localhost:14322");
+      },
+    },
+    { label: "Preference", type: "normal" },
+    { label: "Dashboard" },
+    { label: "Public Access", type: "checkbox" },
+    {
+      label: "Quit", click: () => {
+        app.quit();
+      }
+    },
+  ]);
+
+  tray.setContextMenu(contextMenu);
+  // tray.setToolTip("This is my application");
+  tray.setTitle("CP");
+
   app.on("activate", function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.

app/public/electron.js

@@ -6,6 +6,7 @@ function App() {
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
+        <p>Go to http://localhost:14322 with your browser.</p>
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>