Revisions
-
ah-cog revised this gist
Aug 31, 2017 . 1 changed file with 9 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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) -
ah-cog revised this gist
Aug 31, 2017 . 1 changed file with 6 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,5 @@ # 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). -
ah-cog renamed this gist
Aug 31, 2017 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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) Create a file called `Procfile` in the root folder of the app and put the following code in it: -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -60,7 +60,7 @@ client.on('error', (error) => { }); ``` 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 -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -88,14 +88,14 @@ Make package.json look like this at the bottom: } ``` 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: ```bash yarn start -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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). # Prerequisites * [Create-React-App](https://github.com/facebookincubator/create-react-app) -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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. # Prerequisites * [Create-React-App](https://github.com/facebookincubator/create-react-app) -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 4 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,11 +1,13 @@ ## 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` call look like this instead: ```javascript // load the index.html of the app. -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 4 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 1 addition and 6 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -91,9 +91,4 @@ Run using ```bash yarn start ``` -
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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", "postinstall": "install-app-deps" }, "build": { -
matthewjberger revised this gist
Jun 21, 2017 . No changes.There are no files selected for viewing
-
matthewjberger revised this gist
Jun 21, 2017 . 1 changed file with 19 additions and 6 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 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", "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 yarn start ``` #### TODO: -
matthewjberger revised this gist
Jun 20, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -83,4 +83,4 @@ npm start #### TODO: * Add Typescript instructions * Add electron-builder instructions * Add Spectron instructions -
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -82,5 +82,5 @@ npm start #### TODO: * Add Typescript instructions * Add electron-builder instructions * Add photon instructions -
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 6 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 -
matthewjberger revised this gist
Jun 19, 2017 . No changes.There are no files selected for viewing
-
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 5 additions and 5 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 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-starter.js`. Make the `mainWindow.loadUrl` section look like this: @@ -77,5 +77,5 @@ electron: npm run electron-start Run using ```bash npm start ``` -
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 // 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:', -
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 6 additions and 7 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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. 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: -
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 8 additions and 60 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 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); ``` Create a file called `electron-wait-react.js` in `src` directory: -
matthewjberger revised this gist
Jun 19, 2017 . 1 changed file with 65 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 -
matthewjberger created this gist
Jun 19, 2017 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 ```