Skip to content

Instantly share code, notes, and snippets.

@ah-cog
Forked from matthewjberger/notes.md
Last active August 31, 2017 10:48

Revisions

  1. ah-cog revised this gist Aug 31, 2017. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions framework-electron-react.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,12 @@
    This note describes how I assembled an application framework with:
    - Electron: for cross platform application frame
    - React: for UI
    - Node
    - (maybe) Postgres in Docker (with persistence via shared volume)
    - (maybe) SQLite
    - (maybe) Sequelize (in Node/React to interface with DB)
    - (maybe) Docker

    # Prerequisites

    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
  2. ah-cog revised this gist Aug 31, 2017. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions framework-electron-react.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    ### Note: This post is a summary of information paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c).

    # Prerequisites

    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
    * [Yarn](https://yarnpkg.com/en/)

    @@ -101,4 +100,8 @@ Run using:

    ```bash
    yarn start
    ```
    ```

    ### References

    This note is based on the blog post by [Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c).
  3. ah-cog renamed this gist Aug 31, 2017. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  4. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -88,7 +88,7 @@ Ensure that the `name`, `description`, `author`, and `version` fields of your pa
    }
    ```

    ## Note: [The electron-builder quick-start instructions can be found here.](https://github.com/electron-userland/electron-builder#quick-setup-guide)
    #### Note: [The electron-builder quick-start instructions can be found here.](https://github.com/electron-userland/electron-builder#quick-setup-guide)

    Create a file called `Procfile` in the root folder of the app and put the following code in it:

  5. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -60,7 +60,7 @@ client.on('error', (error) => {
    });
    ```

    Make package.json look like this at the bottom:
    Ensure that the `name`, `description`, `author`, and `version` fields of your package.json are filled out. Then make the package.json look like this at the bottom:

    ```bash
    "homepage": "./",
    @@ -88,6 +88,8 @@ Make package.json look like this at the bottom:
    }
    ```

    ## Note: [The electron-builder quick-start instructions can be found here.](https://github.com/electron-userland/electron-builder#quick-setup-guide)

    Create a file called `Procfile` in the root folder of the app and put the following code in it:

    ```bash
  6. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -88,14 +88,14 @@ Make package.json look like this at the bottom:
    }
    ```

    Add `Procfile` to root
    Create a file called `Procfile` in the root folder of the app and put the following code in it:

    ```bash
    react: npm run react-start
    electron: npm run electron-start
    ```

    Run using
    Run using:

    ```bash
    yarn start
  7. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ### Note: This post is a summary of information paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c). Check out that post for more details.
    ### Note: This post is a summary of information paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c).

    # Prerequisites
    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
  8. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ## Note: This post is a summary of information paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c). Check out that post for more details.
    ### Note: This post is a summary of information paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c). Check out that post for more details.

    # Prerequisites
    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
  9. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,13 @@
    Paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c)
    ## Note: This post is a summary of information paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c). Check out that post for more details.

    # Prerequisites
    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
    * [Yarn](https://yarnpkg.com/en/)

    # Instructions

    Create the app and download the necessary dependencies.

    ```bash
    create-react-app my-app
    cd my-app
    @@ -17,7 +19,7 @@ yarn install

    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-starter.js`.

    Make the `mainWindow.loadUrl` section look like this:
    Make the `mainWindow.loadUrl` call look like this instead:

    ```javascript
    // load the index.html of the app.
  10. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,8 @@ Paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.
    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
    * [Yarn](https://yarnpkg.com/en/)

    # Instructions

    ```bash
    create-react-app my-app
    cd my-app
  11. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,9 @@
    Paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c)

    # Prerequisites
    * [Create-React-App](https://github.com/facebookincubator/create-react-app)
    * [Yarn](https://yarnpkg.com/en/)

    ```bash
    create-react-app my-app
    cd my-app
  12. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -91,9 +91,4 @@ Run using

    ```bash
    yarn start
    ```

    #### TODO:
    * Add Typescript instructions
    * Add electron-builder instructions
    * Add Spectron instructions
    ```
  13. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -66,7 +66,7 @@ Make package.json look like this at the bottom:
    "electron-start": "node src/electron-wait-react",
    "react-start": "react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build,
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
    },
    "build": {
  14. @matthewjberger matthewjberger revised this gist Jun 21, 2017. No changes.
  15. @matthewjberger matthewjberger revised this gist Jun 21, 2017. 1 changed file with 19 additions and 6 deletions.
    25 changes: 19 additions & 6 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,10 @@ Paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.
    ```bash
    create-react-app my-app
    cd my-app
    npm install --save-dev electron
    npm install -g foreman # for process management
    npm install
    yarn add electron --dev
    yarn add electron-builder --dev
    yarn global add foreman # for process management
    yarn install
    ```

    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-starter.js`.
    @@ -63,8 +64,20 @@ Make package.json look like this at the bottom:
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": "node src/electron-wait-react",
    "react-start": "react-scripts start"
    }
    "react-start": "react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build,
    "postinstall": "install-app-deps"
    },
    "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
    "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
    "buildResources": "public"
    }
    }
    ```
    Add `Procfile` to root
    @@ -77,7 +90,7 @@ electron: npm run electron-start
    Run using
    ```bash
    npm start
    yarn start
    ```
    #### TODO:
  16. @matthewjberger matthewjberger revised this gist Jun 20, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -83,4 +83,4 @@ npm start
    #### TODO:
    * Add Typescript instructions
    * Add electron-builder instructions
    * Add photon instructions
    * Add Spectron instructions
  17. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -82,5 +82,5 @@ npm start

    #### TODO:
    * Add Typescript instructions
    * Add instructions for electron-builder
    * Add electron-builder instructions
    * Add photon instructions
  18. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -78,4 +78,9 @@ Run using

    ```bash
    npm start
    ```
    ```

    #### TODO:
    * Add Typescript instructions
    * Add instructions for electron-builder
    * Add photon instructions
  19. @matthewjberger matthewjberger revised this gist Jun 19, 2017. No changes.
  20. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -3,12 +3,12 @@ Paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.
    ```bash
    create-react-app my-app
    cd my-app
    yarn add electron --dev
    yarn add foreman --dev # for process management
    yarn install
    npm install --save-dev electron
    npm install -g foreman # for process management
    npm install
    ```

    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-start.js`.
    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-starter.js`.

    Make the `mainWindow.loadUrl` section look like this:

    @@ -77,5 +77,5 @@ electron: npm run electron-start
    Run using

    ```bash
    yarn start
    npm start
    ```
  21. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion notes.md
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/
    Make the `mainWindow.loadUrl` section look like this:

    ```javascript
    // and load the index.html of the app.
    // load the index.html of the app.
    const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
  22. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 6 additions and 7 deletions.
    13 changes: 6 additions & 7 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -14,13 +14,12 @@ Make the `mainWindow.loadUrl` section look like this:

    ```javascript
    // and load the index.html of the app.
    5 months ago @csepulv specify prod/dev url via environment variable
    19 const startUrl = process.env.ELECTRON_START_URL || url.format({
    20 pathname: path.join(__dirname, '/../build/index.html'),
    21 protocol: 'file:',
    22 slashes: true
    23 });
    24 mainWindow.loadURL(startUrl);
    const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
    });
    mainWindow.loadURL(startUrl);
    ```

    Create a file called `electron-wait-react.js` in `src` directory:
  23. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 8 additions and 60 deletions.
    68 changes: 8 additions & 60 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -10,69 +10,17 @@ yarn install

    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-start.js`.

    Make it look like this:
    Make the `mainWindow.loadUrl` section look like this:

    ```javascript
    const electron = require('electron');
    // Module to control application life.
    const app = electron.app;
    // Module to create native browser window.
    const BrowserWindow = electron.BrowserWindow;

    const path = require('path');
    const url = require('url');

    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let mainWindow;

    function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
    });
    mainWindow.loadURL(startUrl);
    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
    })
    }

    // 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', createWindow);

    // Quit when all windows are closed.
    app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
    app.quit()
    }
    });

    app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
    createWindow()
    }
    });

    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.
    5 months ago @csepulv specify prod/dev url via environment variable
    19 const startUrl = process.env.ELECTRON_START_URL || url.format({
    20 pathname: path.join(__dirname, '/../build/index.html'),
    21 protocol: 'file:',
    22 slashes: true
    23 });
    24 mainWindow.loadURL(startUrl);
    ```

    Create a file called `electron-wait-react.js` in `src` directory:
  24. @matthewjberger matthewjberger revised this gist Jun 19, 2017. 1 changed file with 65 additions and 0 deletions.
    65 changes: 65 additions & 0 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,71 @@ yarn install

    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-start.js`.

    Make it look like this:

    ```javascript
    const electron = require('electron');
    // Module to control application life.
    const app = electron.app;
    // Module to create native browser window.
    const BrowserWindow = electron.BrowserWindow;

    const path = require('path');
    const url = require('url');

    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let mainWindow;

    function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
    });
    mainWindow.loadURL(startUrl);
    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
    })
    }

    // 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', createWindow);

    // Quit when all windows are closed.
    app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
    app.quit()
    }
    });

    app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
    createWindow()
    }
    });

    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.
    ```

    Create a file called `electron-wait-react.js` in `src` directory:

    ```javascript
  25. @matthewjberger matthewjberger created this gist Jun 19, 2017.
    69 changes: 69 additions & 0 deletions notes.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    Paraphrased from an [excellent blog post by Christian Sepulveda](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c)

    ```bash
    create-react-app my-app
    cd my-app
    yarn add electron --dev
    yarn add foreman --dev # for process management
    yarn install
    ```

    Add [electron-quick-start's main.js](https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js) to `src` folder as `electron-start.js`.

    Create a file called `electron-wait-react.js` in `src` directory:

    ```javascript
    const net = require('net');
    const port = process.env.PORT ? (process.env.PORT - 100) : 3000;

    process.env.ELECTRON_START_URL = `http://localhost:${port}`;

    const client = new net.Socket();

    let startedElectron = false;
    const tryConnection = () => client.connect({port: port}, () => {
    client.end();
    if(!startedElectron) {
    console.log('starting electron');
    startedElectron = true;
    const exec = require('child_process').exec;
    exec('npm run electron');
    }
    }
    );

    tryConnection();

    client.on('error', (error) => {
    setTimeout(tryConnection, 1000);
    });
    ```

    Make package.json look like this at the bottom:

    ```bash
    "homepage": "./",
    "main": "src/electron-starter.js",
    "scripts": {
    "start": "nf start -p 3000",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": "node src/electron-wait-react",
    "react-start": "react-scripts start"
    }
    ```

    Add `Procfile` to root

    ```bash
    react: npm run react-start
    electron: npm run electron-start
    ```

    Run using

    ```bash
    yarn start
    ```