Add a new example (remote-require) :)

emircem · Sep 1, 2019 · bf41d02 · bf41d02
1 parent 8107b0a
commit bf41d02
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -285,6 +285,21 @@ $ yarn create nextron-app my-app --example parameterized-routing
 
 <p align="center"><img src="https://i.imgur.com/LvPIeIj.png"></p>
 
+### [examples/remote-require](./examples/remote-require)
+
+```bash
+# with `nextron`
+$ nextron init my-app --example remote-require
+
+# with npx
+$ npx create-nextron-app my-app --example remote-require
+
+# with yarn
+$ yarn create nextron-app my-app --example remote-require
+```
+
+<p align="center"><img src="https://i.imgur.com/9fdMREj.png"></p>
+
 ### [examples/store-data](./examples/store-data)
 
 ```bash

diff --git a/examples/remote-require/README.md b/examples/remote-require/README.md
@@ -0,0 +1,31 @@
+<p align="center"><img src="https://i.imgur.com/9fdMREj.png"></p>
+
+## Usage
+
+### Create an App
+
+```bash
+# with `nextron`
+$ nextron init my-app --example remote-require
+
+# with npx
+$ npx create-nextron-app my-app --example remote-require
+
+# with yarn
+$ yarn create nextron-app my-app --example remote-require
+```
+
+### Use it
+
+```bash
+$ cd my-app
+
+# Install dependencies
+$ yarn (or `npm install`)
+
+# Run development mode
+$ yarn dev (or `npm run dev`)
+
+# Build packages
+$ yarn build (or `npm run build`)
+```
diff --git a/examples/remote-require/electron-builder.yml b/examples/remote-require/electron-builder.yml
@@ -0,0 +1,12 @@
+appId: com.example.nextron
+productName: My Nextron App
+copyright: Copyright © 2018 Yoshihide Shiono
+directories:
+  output: dist
+  buildResources: resources
+files:
+  - from: .
+    filter:
+      - package.json
+      - app
+publish: null
diff --git a/examples/remote-require/main/config.js b/examples/remote-require/main/config.js
@@ -0,0 +1,5 @@
+const config = {
+  message: 'This message is from the main process of `config.js`',
+};
+
+export default config;
diff --git a/examples/remote-require/nextron.config.js b/examples/remote-require/nextron.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  webpack: (defaultConfig, env) => Object.assign(defaultConfig, {
+    entry: {
+      background: './main/background.js',
+      config: './main/config.js',
+    },
+  }),
+};
diff --git a/examples/remote-require/package.json b/examples/remote-require/package.json
@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "name": "my-nextron-app",
+  "description": "My application description",
+  "version": "1.0.0",
+  "author": "Yoshihide Shiono <shiono.yoshihide@gmail.com>",
+  "main": "app/background.js",
+  "scripts": {
+    "dev": "nextron",
+    "build": "nextron build",
+    "postinstall": "electron-builder install-app-deps"
+  },
+  "dependencies": {
+    "electron-serve": "^0.3.0",
+    "electron-store": "^4.0.0"
+  },
+  "devDependencies": {
+    "electron": "^6.0.7",
+    "electron-builder": "^21.2.0",
+    "next": "^9.0.5",
+    "nextron": "^5.9.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  }
+}
diff --git a/examples/remote-require/renderer/next.config.js b/examples/remote-require/renderer/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  webpack: (config) => Object.assign(config, {
+    target: 'electron-renderer',
+  }),
+};
diff --git a/examples/remote-require/renderer/pages/home.jsx b/examples/remote-require/renderer/pages/home.jsx
@@ -0,0 +1,40 @@
+import electron from 'electron';
+import React, { useState, useEffect } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+
+// prevent SSR webpacking
+const remote = electron.remote || false;
+
+const Home = () => {
+  const [config, setConfig] = useState({});
+
+  useEffect(() => {
+    // componentDidMount()
+    if (remote) {
+      setConfig(remote.require('./config').default);
+    }
+
+    return () => {
+      // componentWillUnmount()
+    };
+  }, []);
+
+  return (
+    <React.Fragment>
+      <Head>
+        <title>Home - Nextron (remote-require)</title>
+      </Head>
+      <p>
+        ⚡ Electron + Next.js ⚡ -
+        <Link href="/next">
+          <a>Go to next page</a>
+        </Link>
+      </p>
+      <hr/>
+      <p>{config.message}</p>
+    </React.Fragment>
+  );
+};
+
+export default Home;
diff --git a/examples/remote-require/renderer/pages/next.jsx b/examples/remote-require/renderer/pages/next.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+
+const Next = () => {
+  return (
+    <React.Fragment>
+      <Head>
+        <title>Next - Nextron (remote-require)</title>
+      </Head>
+      <p>
+        ⚡ Electron + Next.js ⚡ -
+        <Link href="/home">
+          <a>Go to home page</a>
+        </Link>
+      </p>
+    </React.Fragment>
+  );
+};
+
+export default Next;