Make ProtonWeb run in Electron

Few changes were required to make it happen: 1. base url must point to ./ and all asset refrences must use relative paths. 2. Angular must be updated to 1.5.10 due to this bug angular/angular.js#11091 3. Second package.json, specifically for electron app, is added. 4. main.js file with electron initalisation code is added.
SevInf · Oct 9, 2016 · 6c3e0e4 · 6c3e0e4
1 parent 032f753
commit 6c3e0e4
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 24 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -236,6 +236,15 @@ module.exports = function(grunt) {
                     nonull: true
                 }]
             },
+            electron_package: {
+                files: [{
+                    src: ["package.json", "main.js"],
+                    filter: "isFile",
+                    expand: true,
+                    dest: "./<%= build_dir %>/",
+                    cwd: "./src"
+                }]
+            }
         },
 
         sass: {
@@ -365,7 +374,8 @@ module.exports = function(grunt) {
                     '<%= build_dir %>/src/**/*.js',
                     '<%= vendor_files.included_js %>',
                     '<%= build_dir %>/assets/application.css',
-                    '<%= build_dir %>/assets/vendor.css'
+                    '<%= build_dir %>/assets/vendor.css',
+                    '!<%= build_dir %>/main.js'
                 ],
                 deployment: false
             },
@@ -503,6 +513,19 @@ module.exports = function(grunt) {
                     'src/app/translations.js': ['po/*.po']
                 }
             }
+        },
+
+        electron: {
+            mac: {
+                options: {
+                    name: 'Charge',
+                    out: 'dist',
+                    dir: '<%= build_dir %>',
+                    version: '<%= pkg.version %>',
+                    platform: 'darwin',
+                    arch: 'x64',
+                }
+            }
         }
     };
 
@@ -553,4 +576,9 @@ module.exports = function(grunt) {
         'babel',
         'index:build'
     ]);
+
+    grunt.registerTask('build:app', [
+        'build',
+        'copy:electron_package',
+    ]);
 };
diff --git a/bower.json b/bower.json
@@ -31,7 +31,7 @@
     "angular-translate-storage-local": "~2.11.0",
     "angular-translate": "~2.11.0",
     "angular-ui-router": "~0.2.15",
-    "angular": "~1.4.10",
+    "angular": "~1.5.8",
     "autofill-event": "~1.0.0",
     "bootstrap-sass": "bootstrap-sass-official#~3.3.6",
     "bootstrap": "~3.3.6",

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "devDependencies": {
     "babel-preset-es2015": "^6.9.0",
     "bower": "^1.7.7",
+    "electron": "^1.4.3",
     "findup-sync": "^0.3.0",
     "grunt": "^0.4.5",
     "grunt-angular-gettext": "https://github.com/bartbutler/grunt-angular-gettext.git",
@@ -24,6 +25,7 @@
     "grunt-contrib-jshint": "~1.0.0",
     "grunt-contrib-uglify": "^2.0.0",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-electron": "^5.0.0",
     "grunt-forever": "^0.4.7",
     "grunt-git": "^0.3.7",
     "grunt-html2js": "^0.3.5",

diff --git a/src/app.html b/src/app.html
@@ -3,35 +3,35 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <base href="/">
+    <base href="./">
     <title>ProtonMail - Log in</title>
     <meta name="description" content="Log in or create an account.">
 
-    <link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-touch-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/assets/favicons/apple-touch-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/assets/favicons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicons/apple-touch-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/assets/favicons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicons/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/assets/favicons/apple-touch-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicons/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon-180x180.png">
-    <link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="/assets/favicons/favicon-194x194.png" sizes="194x194">
-    <link rel="icon" type="image/png" href="/assets/favicons/favicon-96x96.png" sizes="96x96">
-    <link rel="icon" type="image/png" href="/assets/favicons/android-chrome-192x192.png" sizes="192x192">
-    <link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
-    <link rel="manifest" href="/manifest.json">
-    <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#333366">
-    <link rel="shortcut icon" href="/assets/favicons/favicon.ico">
+    <link rel="apple-touch-icon" sizes="57x57" href="assets/favicons/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="assets/favicons/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="assets/favicons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="assets/favicons/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="assets/favicons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="assets/favicons/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="assets/favicons/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="assets/favicons/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon-180x180.png">
+    <link rel="icon" type="image/png" href="assets/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="assets/favicons/favicon-194x194.png" sizes="194x194">
+    <link rel="icon" type="image/png" href="assets/favicons/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="assets/favicons/android-chrome-192x192.png" sizes="192x192">
+    <link rel="icon" type="image/png" href="assets/favicons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="manifest.json">
+    <link rel="mask-icon" href="assets/favicons/safari-pinned-tab.svg" color="#333366">
+    <link rel="shortcut icon" href="assets/favicons/favicon.ico">
     <meta name="apple-mobile-web-app-title" content="ProtonMail">
     <meta name="application-name" content="ProtonMail">
     <meta name="msapplication-TileColor" content="#333366">
-    <meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
+    <meta name="msapplication-TileImage" content="assets/favicons/mstile-144x144.png">
     <meta name="theme-color" content="#333366">
 
     <% styles.forEach(function (file) { %>
-        <link rel="stylesheet" type="text/css" href="/<%= file %>" />
+        <link rel="stylesheet" type="text/css" href="<%= file %>" />
     <% }); %>
 
     <style type="text/css">
@@ -85,14 +85,17 @@
 <proton-loader></proton-loader>
 
 <div id="exiting" ng-class="{ 'show': loggingOut }">
-    <img src="/assets/img/decrypt1.gif" class="loader">
+    <img src="assets/img/decrypt1.gif" class="loader">
     <p>LOGGING OUT...</p>
 </div>
 
 <div ui-view="main" autoscroll="false" id="body"></div>
+
+<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 <% scripts.forEach(function (file) { %>
-    <script type="text/javascript" src="/<%= file %>"></script>
+    <script type="text/javascript" src="<%= file %>"></script>
 <% }); %>
+<script>if (window.module) module = window.module;</script>
 
 <script type="text/javascript">
     if(window.location.href.indexOf("/eo/") > -1) {

diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,9 @@
+const electron = require('electron');
+
+const BrowserWindow = electron.BrowserWindow;
+
+electron.app && electron.app.on('ready', () => {
+    const mainWindow = new BrowserWindow();
+
+    mainWindow.loadURL(`file://${__dirname}/app.html`)
+});
diff --git a/src/package.json b/src/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "charge-app",
+  "version": "0.1.0",
+  "description": "Proton mail desktop client",
+  "main": "main.js",
+  "author": "Sergey Tatarintsev <sergey@tatarintsev.me> (https://github.com/SevInf)",
+  "license": "MIT"
+}