├── .gitignore ├── .settings └── tasks.json ├── LICENSE ├── README.md ├── app └── index.js ├── browser ├── index.html └── main.ts ├── package.json ├── tsconfig.json └── tsd.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | browser/jspm_packages 29 | typings 30 | dist -------------------------------------------------------------------------------- /.settings/tasks.json: -------------------------------------------------------------------------------- 1 | // Available variables which can be used inside of strings. 2 | // ${workspaceRoot}: the root folder of the team 3 | // ${file}: the current opened file 4 | // ${fileBasename}: the current opened file's basename 5 | // ${fileDirname}: the current opened file's dirname 6 | // ${fileExtname}: the current opened file's extension 7 | // ${cwd}: the current working directory of the spawned process 8 | 9 | /* 10 | // A task runner that calls the Typescipt compiler (tsc) and 11 | // Compiles a HelloWorld.ts program 12 | { 13 | "version": "0.1.0", 14 | 15 | // The command is tsc. Assumes that tsc has been installed using npm install -g typescript 16 | "command": "tsc", 17 | 18 | // The command is a shell script 19 | "isShellCommand": true, 20 | 21 | // Show the output window only if unrecognized errors occur. 22 | "showOutput": "silent", 23 | 24 | // args is the HelloWorld program to compile. 25 | "args": ["HelloWorld.ts"], 26 | 27 | // use the standard tsc problem matcher to find compile problems 28 | // in the output. 29 | "problemMatcher": "$tsc" 30 | } 31 | */ 32 | 33 | // A task runner that calls the Typescipt compiler (tsc) and 34 | // compiles based on a tsconfig.json file that is present in 35 | // the root of the folder open in VSCode 36 | 37 | { 38 | "version": "0.1.0", 39 | 40 | // The command is tsc. Assumes that tsc has been installed using npm install -g typescript 41 | "command": "tsc", 42 | 43 | // The command is a shell script 44 | "isShellCommand": true, 45 | 46 | // Show the output window only if unrecognized errors occur. 47 | "showOutput": "silent", 48 | 49 | // Tell the tsc compiler to use the tsconfig.json from the open folder. 50 | "args": ["--experimentalDecorators", "-p", "."], 51 | 52 | // use the standard tsc problem matcher to find compile problems 53 | // in the output. 54 | "problemMatcher": "$tsc" 55 | } 56 | 57 | // A task runner configuration for gulp. Gulp provides a less task 58 | // which compiles less to css. 59 | /* 60 | { 61 | "version": "0.1.0", 62 | "command": "gulp", 63 | "isShellCommand": true, 64 | "tasks": [ 65 | { 66 | "taskName": "less", 67 | // Make this the default build command. 68 | "isBuildCommand": true, 69 | // Show the output window only if unrecognized errors occur. 70 | "showOutput": "silent", 71 | // Use the standard less compilation problem matcher. 72 | "problemMatcher": "$lessCompile" 73 | } 74 | ] 75 | } 76 | */ 77 | 78 | // Uncomment the following section to use gulp in a watching mode that compiles a 79 | // less file. The gulp task prints "[hh:mm:ss] Starting 'clean-styles'" to the console 80 | // when existing css files get deleted and "[hh:mm:ss] Finished 'styles'" when the 81 | // overall less compilation has finished. When the clean pattern is detect internal less 82 | // problems are cleaned. When the finshed pattern is detected in the output less 83 | // problems are published. 84 | /* 85 | { 86 | "version": "0.1.0", 87 | "command": "gulp", 88 | "isShellCommand": true, 89 | "tasks": [ 90 | { 91 | "taskName": "watch-less", 92 | // Make this the default build command. 93 | "isBuildCommand": true, 94 | // Show the output window only if unrecognized errors occur. 95 | "showOutput": "silent", 96 | // Task is running in watching mode. 97 | "isWatching": true, 98 | "problemMatcher": { 99 | // Use the standard less compilation problem matcher as the base. 100 | "base": "$lessCompile", 101 | // A regular expression signalling that a watched task begins executing (usually triggered through file watching). 102 | "watchedTaskBeginsRegExp": "^\\[\\d+:\\d+:\\d+\\] Starting 'clean-styles'\\.\\.\\.$", 103 | // A regular expression signalling that a watched tasks ends executing. 104 | "watchedTaskEndsRegExp": "^\\[\\d+:\\d+:\\d+\\] Finished 'styles' after \\d+" 105 | } 106 | } 107 | ] 108 | } 109 | */ 110 | 111 | // Uncomment the following section to use jake to build a workspace 112 | // cloned from https://github.com/Microsoft/TypeScript.git 113 | /* 114 | { 115 | "version": "0.1.0", 116 | // Task runner is jake 117 | "command": "jake", 118 | // Need to be executed in shell / cmd 119 | "isShellCommand": true, 120 | "showOutput": "silent", 121 | "tasks": [ 122 | { 123 | // TS build command is local. 124 | "taskName": "local", 125 | // Make this the default build command. 126 | "isBuildCommand": true, 127 | // Show the output window only if unrecognized errors occur. 128 | "showOutput": "silent", 129 | // Use the redefined Typescript output problem matcher. 130 | "problemMatcher": [ 131 | "$tsc" 132 | ] 133 | } 134 | ] 135 | } 136 | */ 137 | 138 | // Uncomment the section below to use msbuild and generate problems 139 | // for csc, cpp, tsc and vb. The configuration assumes that msbuild 140 | // is available on the path and a solution file exists in the 141 | // workspace folder root. 142 | /* 143 | { 144 | "version": "0.1.0", 145 | "command": "msbuild", 146 | "args": [ 147 | // Ask msbuild to generate full paths for file names. 148 | "/property:GenerateFullPaths=true" 149 | ], 150 | "taskSelector": "/t:", 151 | "showOutput": "silent", 152 | "tasks": [ 153 | { 154 | "taskName": "build", 155 | // Show the output window only if unrecognized errors occur. 156 | "showOutput": "silent", 157 | // Use the standard MS compiler pattern to detect errors, warnings 158 | // and infos in the output. 159 | "problemMatcher": "$msCompile" 160 | } 161 | ] 162 | } 163 | */ 164 | 165 | // Uncomment the following section to use msbuild which compiles Typescript 166 | // and less files. 167 | /* 168 | { 169 | "version": "0.1.0", 170 | "command": "msbuild", 171 | "args": [ 172 | // Ask msbuild to generate full paths for file names. 173 | "/property:GenerateFullPaths=true" 174 | ], 175 | "taskSelector": "/t:", 176 | "showOutput": "silent", 177 | "tasks": [ 178 | { 179 | "taskName": "build", 180 | // Show the output window only if unrecognized errors occur. 181 | "showOutput": "silent", 182 | // Use the standard MS compiler pattern to detect errors, warnings 183 | // and infos in the output. 184 | "problemMatcher": [ 185 | "$msCompile", 186 | "$lessCompile" 187 | ] 188 | } 189 | ] 190 | } 191 | */ 192 | // A task runner example that defines a problemMatcher inline instead of using 193 | // a predfined one. 194 | /* 195 | { 196 | "version": "0.1.0", 197 | "command": "tsc", 198 | "isShellCommand": true, 199 | "args": ["HelloWorld.ts"], 200 | "showOutput": "silent", 201 | "problemMatcher": { 202 | // The problem is owned by the typescript language service. Ensure that the problems 203 | // are merged with problems produced by Visual Studio's language service. 204 | "owner": "typescript", 205 | // The file name for reported problems is relative to the current working directory. 206 | "fileLocation": ["relative", "${cwd}"], 207 | // The actual pattern to match problems in the output. 208 | "pattern": { 209 | // The regular expression. Matches HelloWorld.ts(2,10): error TS2339: Property 'logg' does not exist on type 'Console'. 210 | "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$", 211 | // The match group that denotes the file containing the problem. 212 | "file": 1, 213 | // The match group that denotes the problem location. 214 | "location": 2, 215 | // The match group that denotes the problem's severity. Can be omitted. 216 | "severity": 3, 217 | // The match group that denotes the problem code. Can be omitted. 218 | "code": 4, 219 | // The match group that denotes the problem's message. 220 | "message": 5 221 | } 222 | } 223 | } 224 | */ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Santhosh Kumar Bala Krishnan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # electron-angular2 2 | Electron starter app with Angular 2 3 | 4 | I had an idea in mind and decided that I will learn Electron and Angular2 in the process. 5 | 6 | I did not want to clone an existing starter branch and start off from there, rather wanted t0 start from scratch. Here is all that I learnt and did. 7 | 8 | * Set up a Github project. Add a readme and licence. Also add node to gitignore. Here’s mine: https://github.com/bsanth/electron-angular2.git 9 | * Git clone the repo to your system. 10 | 11 | ```git clone https://github.com/bsanth/electron-angular2.git``` 12 | * Get Node Package Manager ready. 13 | 14 | ``` npm init``` 15 | 16 | Here's how mine looks: 17 | 18 | ``` 19 | name: (electron-angular2) 20 | version: (1.0.0) 0.0.0 21 | description: Starter app for electron-angular2 22 | entry point: (index.js) app/index.js 23 | test command: electron . 24 | git repository: (https://github.com/bsanth/electron-angular2.git) 25 | keywords: 26 | author: Santhosh Kumar Bala Krishnan 27 | license: (ISC) MIT 28 | About to write to /Users/sbalakrishnan/repos/electron-angular2/package.json: 29 | 30 | { 31 | "name": "electron-angular2", 32 | "version": "0.0.0", 33 | "description": "Starter app for electron-angular2", 34 | "main": "app/index.js", 35 | "scripts": { 36 | "test": "electron ." 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "git+https://github.com/bsanth/electron-angular2.git" 41 | }, 42 | "author": "Santhosh Kumar Bala Krishnan", 43 | "license": "MIT", 44 | "bugs": { 45 | "url": "https://github.com/bsanth/electron-angular2/issues" 46 | }, 47 | "homepage": "https://github.com/bsanth/electron-angular2#readme" 48 | } 49 | ``` 50 | 51 | * Electron uses a js file as an entry point to the app. Let's create that next. 52 | 53 | ``` 54 | mkdir app 55 | touch app/index.js 56 | ``` 57 | * I installed electron globally and added electron as a dependency to this project next. 58 | 59 | ``` 60 | npm install electron-prebuilt -g 61 | npm install electron-prebuilt --save-dev 62 | ``` 63 | 64 | * Let's create a base index file: 65 | 66 | ``` 67 | touch browser/index.html 68 | ``` 69 | * Let's now write the entry point js file to electron. Go to index.js file and type out the following. This is directly taken from electron starter app. [https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md) 70 | 71 | Only change I made was the path to the index.html file. 72 | 73 | ``` 74 | const app = require('app'); // Module to control application life. 75 | const BrowserWindow = require('browser-window'); // Module to create native browser window. 76 | 77 | 78 | // Keep a global reference of the window object, if you don't, the window will 79 | // be closed automatically when the JavaScript object is GCed. 80 | var mainWindow = null; 81 | 82 | // Quit when all windows are closed. 83 | app.on('window-all-closed', function() { 84 | // On OS X it is common for applications and their menu bar 85 | // to stay active until the user quits explicitly with Cmd + Q 86 | if (process.platform != 'darwin') { 87 | app.quit(); 88 | } 89 | }); 90 | 91 | // This method will be called when Electron has finished 92 | // initialization and is ready to create browser windows. 93 | app.on('ready', function() { 94 | // Create the browser window. 95 | mainWindow = new BrowserWindow({width: 800, height: 600}); 96 | 97 | // and load the index.html of the app. 98 | mainWindow.loadURL('file://' + __dirname + '/../browser/index.html'); 99 | 100 | // Open the devtools. 101 | mainWindow.openDevTools(); 102 | 103 | // Emitted when the window is closed. 104 | mainWindow.on('closed', function() { 105 | // Dereference the window object, usually you would store windows 106 | // in an array if your app supports multi windows, this is the time 107 | // when you should delete the corresponding element. 108 | mainWindow = null; 109 | }); 110 | }); 111 | ``` 112 | 113 | * Let's tell electron where to look for the entry point js file. Edit package.json and add the following line if not already added. 114 | 115 | ``` 116 | "main": "app/index.js", 117 | ``` 118 | * Just to make sure I got the electron part working, I ran the following command to see if I can see my app running - after adding some content to index.html. HOORAY! 119 | 120 | ``` 121 | electron . 122 | ``` 123 | * **Let's get to the angular2 part!** 124 | 125 | * Angular2 is based off TypeScript. Let's install TypeScript next. These are taken from [AngularJS QuickStart guide](https://angular.io/docs/js/latest/quickstart.html) 126 | 127 | ``` 128 | npm install -g tsd@^0.6.0 129 | tsd install angular2 es6-promise rx rx-lite 130 | npm install -g typescript 131 | ``` 132 | 133 | * Let's init TSD so that we have the config file set up. 134 | 135 | ``` 136 | tsd init 137 | ``` 138 | * Get angular2.js, systemJS and reflect-metadata from NPM. 139 | 140 | ``` 141 | npm install angular2 --save 142 | npm install systemjs --save 143 | npm install reflect-metadata --save 144 | ``` 145 | * Moving on to index.html inside browser folder. Added all the dependent js file scripts and SystemJS configuration. 146 | 147 | * Create new main.ts file as found in this git repo. This is also form the [angular quickstart guide](https://angular.io/docs/js/latest/quickstart.html). 148 | 149 | * Watch and compile the .ts file. 150 | 151 | ``` 152 | tsc -m commonjs -t es5 --emitDecoratorMetadata browser/main.ts --watch 153 | ``` 154 | * Once the compile completes, run electron again and **you're done!** 155 | 156 | ### Heavily inspired from 157 | * https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md 158 | * http://www.dotnet-rocks.com/2015/05/04/writing-an-electron-atom-shell-app-using-angular-and-es6/ 159 | * https://github.com/SebastianM/angular2-bootstrap/blob/01e0e99a51466772af77aa351217a1d87aabe7b6/examples/index.html 160 | 161 | Thank you both! -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | const electron = require('electron'); 2 | // Module to control application life. 3 | const {app} = electron; 4 | // Module to create native browser window. 5 | const {BrowserWindow} = electron; 6 | 7 | // Keep a global reference of the window object, if you don't, the window will 8 | // be closed automatically when the JavaScript object is GCed. 9 | let mainWindow = null; 10 | 11 | // Quit when all windows are closed. 12 | app.on('window-all-closed', function() { 13 | // On OS X it is common for applications and their menu bar 14 | // to stay active until the user quits explicitly with Cmd + Q 15 | if (process.platform != 'darwin') { 16 | app.quit(); 17 | } 18 | }); 19 | 20 | // This method will be called when Electron has finished 21 | // initialization and is ready to create browser windows. 22 | app.on('ready', function() { 23 | // Create the browser window. 24 | mainWindow = new BrowserWindow({width: 800, height: 600}); 25 | 26 | // and load the index.html of the app. 27 | mainWindow.loadURL('file://' + __dirname + '/../browser/index.html'); 28 | 29 | // Open the devtools. 30 | mainWindow.openDevTools(); 31 | 32 | // Emitted when the window is closed. 33 | mainWindow.on('closed', function() { 34 | // Dereference the window object, usually you would store windows 35 | // in an array if your app supports multi windows, this is the time 36 | // when you should delete the corresponding element. 37 | mainWindow = null; 38 | }); 39 | }); -------------------------------------------------------------------------------- /browser/index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |