2016-08-18 62 views
2

我已经能够通过管理系统如如何在电子内运行表达?

https://github.com/theallmightyjohnmanning/electron-express

https://github.com/frankhale/electron-with-express

成功运行电子应用中的表现。然而,有人建议我不要这样做由于GNU通用公共许可证,他们强加。我正在尝试创建一个可以货币化的商业应用。因此,像麻省理工学院这样的liscene可能会做,但不知道GNU。

不管怎样,我一直在努力追随他的过程: https://gist.github.com/maximilian-ruppert/a446a7ee87838a62099d

但在运行了一些问题。 这就是我迄今为止所做的。

# Clone the Quick Start repository 
$ git clone https://github.com/electron/electron-quick-start 

# Go into the repository 
$ cd electron-quick-start 

# Install the dependencies and run 
$ npm install && npm start 

然后得到表达

$ express myapp 
$ cd myapp 

$ npm install 
renamed myapp to just app 

,现在我被困在那里我需要配置电子main.js文件或部分/和渲染index.html文件链接到的快递应用程序,并有运行而不是index.html

任何帮助,将不胜感激。

我在Windows 10

回答

2

包装的Express应用程序在电子运行

首先,在您的应用程序

npm install --save electron 

创建包含index.html文件安装的电子快递申请

我们需要在我们的快速应用程序中加载的顶级文件。如果您没有使用像Webpack这样的模块打包程序,那么只需将您的应用程序依赖的所有html,cs和js文件导入到此index.html文件中。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>QuickMap</title> 
    <link href='public/css/boostrap.min.css' rel='stylesheet'> 
    <link href='public/css/layout.css' rel='stylesheet'> 
    </head> 
    <body> 
    <div id='root' /> 
    <script src='public/js/appBundle.js' type='text/javascript'></script> 
    <script src='public/js/bootstrap.min.js' type='text/javascript'></script> 
    <script src='public/js/jquery-3.1.1.min.js' type='text/javascript'></script> 
    </body> 
</html> 

确保您需要为您的应用程序这个index.html的文件进口一切运行-i.e所有必要的HTML,CSS,JS和其他文件。请记住包含您的应用程序需要的任何外部文件,例如我们在上面的示例中加载的jQuery。

顺便 - 包装使用的WebPack

在这个例子中我们整个快速应用程序是由通过的index.html加载的WebPack束表示的电子应用程序。

请记住,您不需要使用Webpack将Express应用程序与Electron打包在一起。只要确保index.html加载你需要的所有文件,以启动你的快速应用程序。

如果你使用的是Webpack,你的包应该被导入到这个index.html文件中。

这里是导入包含我们明确的应用程序的捆绑的WebPack的例子index.html文件。

现在在项目中创建的根加载包含您的快速应用

这里的index.html是电子将利用推出自己的主文件的电子配置文件。铝电子相关的配置和链接到我们的明确程序(通过导入的WebPack束)包含在这里。

注意下面的文件是属于我们的根项目目录,并从电子快速入门指南与线除外主要由样板解释高于进口,它加载整个应用我们的index.html文件。

main.js

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

// Keep a global reference of the window object, if you don't, the window will 
// be closed automatically when the JavaScript object is garbage collected. 
let win 

function createWindow() { 
    // Create the browser window. 
    win = new BrowserWindow({width: 800, height: 600}) 

    // and load the index.html of the app. 
    win.loadURL(url.format({ 
    pathname: path.join(__dirname, 'index.html'), 
    protocol: 'file:', 
    slashes: true 
    })) 

    // Open the DevTools. 
    win.webContents.openDevTools() 

    // Emitted when the window is closed. 
    win.on('closed',() => { 
    // Dereference the window object, usually you would store windows 
    // in an array if your app supports multi windows, this is the time 
    // when you should delete the corresponding element. 
    win = null 
    }) 
} 

// This method will be called when Electron has finished 
// initialization and is ready to create browser windows. 
// Some APIs can only be used after this event occurs. 
app.on('ready', createWindow) 

// Quit when all windows are closed. 
app.on('window-all-closed',() => { 
    // On macOS it is common for applications and their menu bar 
    // to stay active until the user quits explicitly with Cmd + Q 
    if (process.platform !== 'darwin') { 
    app.quit() 
    } 
}) 

app.on('activate',() => { 
    // On macOS it's common to re-create a window in the app when the 
    // dock icon is clicked and there are no other windows open. 
    if (win === null) { 
    createWindow() 
    } 
}) 

// In this file you can include the rest of your app's specific main process 
// code. You can also put them in separate files and require them here. 

以下行加载我们的index.html我们之前创建一个指向我们的电子实例,以我们的应用程序的入口点。

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

改变你的package.json启动脚本启动电子

"scripts": { 
    "start": "ENV=development electron .", 
    }, 

现在,当我们运行

npm start 

电子会自动寻找并运行main.js文件在我们项目的根。

相关问题