Using Angular and Firebase Project with Electron App Workaround

main.js

require('./server');
const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1200,
    height: 720,
    backgroundColor: '#ffffff',
    icon: `http://localhost:3007/assets/favicon.ico`
  });

  // clear web contents for testing
  //   win.webContents.session.clearCache(function(){
  //     console.log('Cache Cleared!')
  //   });

  //   win.webContents.session.clearStorageData(function(){
  //     console.log('Storage Cleared!');
  //   });

  win.loadURL(`http://localhost:3007`)

  // uncomment below to open the DevTools.
  // win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
});

server.js

var express = require('express');
var http = require('http');
var path = require('path');

var appServer = express();
appServer.use(express.static(path.join(__dirname, 'dist','penguin-messenger'))); // this determines the destination of served files

appServer.get('*', (req, res) => {
  res.sendFile(__dirname + 'index.html');
});

http.createServer(appServer).listen(3007, function() {
  console.log('Express server listening on port');
});

Initially found at:

• https://stackoverflow.com/questions/37327515/using-firebase-with-electron
• https://www.oipapio.com/question-8911132

Some useful links on getting started with Electron Apps:

• https://medium.com/@yannmjl/how-to-build-native-cross-platform-desktop-apps-with-angular-electron-bd1d6e3919b2
• https://tutorials.ubuntu.com/tutorial/snap-a-website#0
• https://github.com/jiahaog/nativefier
• https://medium.com/cameron-nokes/how-to-store-user-data-in-electron-3ba6bf66bc1e
• https://www.blog.bdauria.com/?p=806
• https://angularfirebase.com/lessons/desktop-apps-with-electron-and-angular/
• https://www.sitepoint.com/build-a-desktop-application-with-electron-and-angular/
• https://github.com/johnmakridis/angular-electron-starter