I’ll try to show you how to start your own project, or “Electronify” the existing one.<\/p>\n\n
Bootstrap your project<\/h1>\n\n
Using an Angular CLI generate a new application and test the first run. After following command you should be able to see the result in the browser on URL http:\/\/localhost:4200<\/a>.<\/p>\n\n Add main file for the electron called main.js<\/p>\n\n ${PROJECT_FOLDER}\/main.js:<\/p>\n\n And update the package.json file by few additional properties:\n${PROJECT_FOLDER}\/package.json:<\/p>\n\n I recommend to install the electron platform globaly with command:<\/p>\n\n The first simple manual run could be done by calling following commands (these must be run in separate terminal windows as the \u201cng serve\u201d is blocking)<\/p>\n\n Command \u201cng serve\u201d will start development server on http:\/\/localhost:4200<\/a>, you can notice the this url is used in main.js file. The “electron .” will start the electron app by executing the main.js file.<\/p>\n\n You can use concurrently<\/a> tool to run these two commands concurrently. Also it can be incorporated to package.json file as an npm script.<\/p>\n\n ${PROJECT_FOLDER}\/package.json<\/p>\n\n Serving angular application via development server is not very comfortable and permanent solution. Better approach is serving a static files from the build output folder (let’s call it distribution folder). The main.js file need to be changed to open the index.html file located in distribution folder of your angular application.<\/p>\n\n ${PROJECT_FOLDER}\/main.js<\/p>\n\n After you open electron you will receive \u201cFailed to load resource\u201d error.\nThere is one step missing to get the change work.\n The one small change that need to be done is in your index.html file. We need to define the base for the file as absolute but from the actual working directory like \u201c.\/\u201d. This is done in ${PROJECT_FOLDER}\/index.html :<\/p>\n\n That’s it. Desktop application with Angular. The same approach could be used with other JS frameworks or just pure static HTML. I was excited how easy it is.<\/p>\n\n The repository with example project https:\/\/github.com\/sohlich\/angular_on_electron<\/a><\/p>\n\n> ng new electron_app\n> ng serve\n<\/code><\/pre>\n\n const { app, BrowserWindow } = require('electron');\n \n \/\/ Executes when the application \n \/\/ is initialized.\n app.on('ready', function() {\n console.log('Starting application!');\n \/\/ Create browser window \n \/\/ with given parameters\n mainWindow = new BrowserWindow({ width: 1280, height: 960 });\n mainWindow.loadURL("http:\/\/localhost:4200");\n \n \/\/ It is useful to open dev tools\n \/\/ for debug.\n mainWindow.webContents.openDevTools();\n mainWindow.on('closed', function() {\n mainWindow = null;\n });\n });\n \n \/\/ Defines the behavior on close.\n app.on('window-all-closed', function() {\n app.quit();\n });\n<\/code><\/pre>\n\n {\n "name": "electron_app",\n "version": "0.0.0",\n "main": "main.js",\n "license": "MIT",\n "scripts": {\n "ng": "ng",\n "start": "ng serve",\n "build": "ng build",\n "test": "ng test",\n "lint": "ng lint",\n "e2e": "ng e2e"\n },\n "private": true,\n "dependencies": {\n "@angular\/animations": "^4.0.0",\n "@angular\/common": "^4.0.0",\n "@angular\/compiler": "^4.0.0",\n "@angular\/core": "^4.0.0",\n "@angular\/forms": "^4.0.0",\n "@angular\/http": "^4.0.0",\n "@angular\/platform-browser": "^4.0.0",\n "@angular\/platform-browser-dynamic": "^4.0.0",\n "@angular\/router": "^4.0.0",\n "core-js": "^2.4.1",\n "rxjs": "^5.4.1",\n "zone.js": "^0.8.14"\n },\n "devDependencies": {\n "@angular\/cli": "1.2.4",\n "@angular\/compiler-cli": "^4.0.0",\n "@angular\/language-service": "^4.0.0",\n "@types\/jasmine": "~2.5.53",\n "@types\/jasminewd2": "~2.0.2",\n "@types\/node": "~6.0.60",\n "codelyzer": "~3.0.1",\n "jasmine-core": "~2.6.2",\n "jasmine-spec-reporter": "~4.1.0",\n "karma": "~1.7.0",\n "karma-chrome-launcher": "~2.1.1",\n "karma-cli": "~1.0.1",\n "karma-coverage-istanbul-reporter": "^1.2.1",\n "karma-jasmine": "~1.1.0",\n "karma-jasmine-html-reporter": "^0.2.2",\n "protractor": "~5.1.2",\n "ts-node": "~3.0.4",\n "tslint": "~5.3.2",\n "typescript": "~2.3.3"\n }\n }\n<\/code><\/pre>\n\n > npm install -g electron\n<\/code><\/pre>\n\n > ng serve\n > electron .\n<\/code><\/pre>\n\nnpm install -g concurrently\n<\/code><\/pre>\n\n"scripts": {\n ...\n "electrondev": "concurrently -k \\"ng serve\\" \\"electron .\\""\n },\n<\/code><\/pre>\n\nServing static files<\/h1>\n\n
const { app, BrowserWindow } = require('electron');\n path = require('path');\n url = require('url');\n app.on('ready', function() {\n console.log('Starting application!');\n mainWindow = new BrowserWindow({ width: 1280, height: 960 });\n \n \/\/ Change loadUrl to load index.html\n \/\/ using url and path package \n \/\/ to format the file url\n mainWindow.loadURL(url.format({\n \/\/__dirname is the current working dir\n pathname: path.join(__dirname, 'dist', 'index.html'),\n protocol: 'file:',\n slashes: true\n }));\n \n \/\/ Opens dev tools\n mainWindow.webContents.openDevTools();\n mainWindow.on('closed', function() {\n mainWindow = null;\n });\n });\n app.on('window-all-closed', function() {\n app.quit();\n });\n<\/code><\/pre>\n\n![](\"https:\/\/d2mxuefqeaa7sj.cloudfront.net\/s_F68920300BC018EB3E1E88614B689BAD376E939D730AA4BF30888F46A4DF2F8A_1501387336733_image.png\"\/)
<\/p>\n\n <!doctype html>\n <html lang="en">\n <head>\n <meta charset="utf-8">\n <title>Electron<\/title>\n <!-- Change the href attribute \n to reference to cur. working dir -->\n <base href=".\/">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" type="image\/x-icon" href="favicon.ico">\n <\/head>\n <body>\n <app-root><\/app-root>\n <\/body>\n <\/html>\n<\/code><\/pre>\n\nSeries:<\/h3>\n\n