Creando una App de escritorio con Angular, Electron y Firebase Parte 1

  • Node
  • NPM
  • Editor de codigo
  • Para Windows en caso de que vayamos a copilar módulos nativos de node,
    instalar el siguiente paquete (Puede tardar varios minutos).
  • Conocimientos mínimos

Manos a la obra

ng new (nombre de la app)
<base href="./">
npm install electron --save-dev

# Configurando Electron

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
})


win.loadURL(`file://${__dirname}/dist/index.html`)

// 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()
}
})

#Editamos nuestro package.json

{
"name": "angular-electron",
"version": "0.0.0",
"license": "MIT",
"main": "main.js", // <-- update here
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .", // <-- run electron
"electron-build": "ng build --prod && electron ." // <-- build
app, then run electron
},
// ...omitted
}
ng build --prod

#Nuestra primer App

npm run electron-build
Nuestra primer App

#Herramientas de desarrollo

npm i electron-debug -S
const { app, BrowserWindow } = require('electron')require('electron-debug')({showDevTools: true});let win;
//// uncomment below to open the //DevTools.//win.webContents.openDevTools()
  • DevTron
$ npm install --save-dev devtron
DevTron habilitado en nuestras DevTools

# Posibles problemas y dificultades

Referencias y enlaces de ayuda

--

--

光 — Nobody said it would be easy, mijo.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Andrey Bueno Solano

Kevin Andrey Bueno Solano

光 — Nobody said it would be easy, mijo.