Difference between revisions of "Electron Build"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (→Deploy) |
||
(17 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{DISPLAYTITLE:Building Electron Apps}} | ||
+ | Electron Apps require a connection to Lianja Cloud Server running either on-premises or in the Cloud. | ||
+ | |||
+ | <div style="height:120px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;"> | ||
+ | [[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Quick Start Guide</b> | ||
+ | Select the "Build" workspace.<br> | ||
+ | You configure Electron Apps in the "Electron" Tab of the “Build” workspace.<br/> | ||
+ | You can build electron Apps for Windows x86, Windows x64, Linux x64 and macOS.<br> | ||
+ | When you click the build button the electron App will be built locally.<br> | ||
+ | </div> | ||
+ | <span style="height:6px;"> </span> | ||
+ | </div> | ||
+ | <br> | ||
+ | |||
+ | ==Building an Electron App step by step== | ||
+ | |||
==Init== | ==Init== | ||
− | [[{{ns:file}}:electron1.png|450px|thumb|left|link={{filepath:electron1.png}}|Electron | + | [[{{ns:file}}:electron1.png|450px|thumb|left|link={{filepath:electron1.png}}|Electron Build]] |
Line 11: | Line 27: | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}:electron2.png|450px|thumb|left|link={{filepath:electron2.png}}|Electron | + | [[{{ns:file}}:electron2.png|450px|thumb|left|link={{filepath:electron2.png}}|Electron Build]] |
Line 21: | Line 37: | ||
==Files== | ==Files== | ||
− | [[{{ns:file}}:electron3.png|450px|thumb|left|link={{filepath:electron3.png}}|Electron | + | [[{{ns:file}}:electron3.png|450px|thumb|left|link={{filepath:electron3.png}}|Electron Build]] |
Line 30: | Line 46: | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}:electron4.png|450px|thumb|left|link={{filepath:electron4.png}}|Electron | + | [[{{ns:file}}:electron4.png|450px|thumb|left|link={{filepath:electron4.png}}|Electron Build]] |
Line 43: | Line 59: | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}:electron5.png|450px|thumb|left|link={{filepath:electron5.png}}|Electron | + | [[{{ns:file}}:electron5.png|450px|thumb|left|link={{filepath:electron5.png}}|Electron Build]] |
− | + | The '''debug-main.js''' file is used when you build in '''Debug''' mode. | |
− | + | It includes the instruction to automatically open the developer tools when the App is run. | |
+ | |||
+ | (mainWindow.webContents.openDevTools()) | ||
<br clear=all> | <br clear=all> | ||
− | + | [[{{ns:file}}:electron5a.png|450px|thumb|left|link={{filepath:electron5a.png}}|Electron Build]] | |
− | [[{{ns:file}}: | + | |
− | + | When building in '''Release''' mode, the '''release-main.js''' file is used. | |
+ | |||
+ | <br clear=all> | ||
+ | |||
+ | ==Electron App Settings== | ||
+ | [[{{ns:file}}:electron6.png|450px|thumb|left|link={{filepath:electron6.png}}|Electron Build]] | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | Click '''New''' to create a new configuration then edit the '''Electron App Settings''' as required. | ||
Specify the Lianja Cloud Server URL and any optional settings. | Specify the Lianja Cloud Server URL and any optional settings. | ||
Line 69: | Line 96: | ||
==Build== | ==Build== | ||
− | [[{{ns:file}}:electron7.png|450px|thumb|left|link={{filepath:electron7.png}}|Electron | + | [[{{ns:file}}:electron7.png|450px|thumb|left|link={{filepath:electron7.png}}|Electron Build]] |
Line 81: | Line 108: | ||
==Run== | ==Run== | ||
− | [[{{ns:file}}:electron8.png|450px|thumb|left|link={{filepath:electron8.png}}|Electron | + | [[{{ns:file}}:electron8.png|450px|thumb|left|link={{filepath:electron8.png}}|Electron Build]] |
Line 87: | Line 114: | ||
Once the '''Electron Build Log''' output window displays ''Build complete'', click the '''Run''' button to run your App. | Once the '''Electron Build Log''' output window displays ''Build complete'', click the '''Run''' button to run your App. | ||
+ | |||
+ | |||
+ | Note that here the App has been built in '''Debug''' mode, so the developer tools are automatically loaded. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}:electron9.png|450px|thumb|left|link={{filepath:electron9.png}}|Electron | + | [[{{ns:file}}:electron9.png|450px|thumb|left|link={{filepath:electron9.png}}|Electron Build]] |
Line 101: | Line 131: | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}:electron10.png|450px|thumb|left|link={{filepath:electron10.png}}|Electron | + | [[{{ns:file}}:electron10.png|450px|thumb|left|link={{filepath:electron10.png}}|Electron Build]] |
Line 107: | Line 137: | ||
And test your App. | And test your App. | ||
+ | |||
+ | <br clear=all> | ||
+ | |||
+ | [[{{ns:file}}:electron10a.png|450px|thumb|left|link={{filepath:electron10a.png}}|Electron Build]] | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | And here's the same App built in '''Release''' mode. | ||
<br clear=all> | <br clear=all> | ||
Line 117: | Line 156: | ||
<pre>C:\lianja\apps\lianja_mobiledemo\electron\dist\lianja_mobiledemo-win32-ia32</pre> | <pre>C:\lianja\apps\lianja_mobiledemo\electron\dist\lianja_mobiledemo-win32-ia32</pre> | ||
− | [[Category:Electron | + | [[Category:Electron Apps]] |
− | + |
Latest revision as of 07:42, 28 September 2020
Electron Apps require a connection to Lianja Cloud Server running either on-premises or in the Cloud.
Select the "Build" workspace.
You configure Electron Apps in the "Electron" Tab of the “Build” workspace.
You can build electron Apps for Windows x86, Windows x64, Linux x64 and macOS.
When you click the build button the electron App will be built locally.
Contents
Building an Electron App step by step
Init
Click the Init button.
This copies the template Electron files to the electron sub-directory of your App.
When the copy is complete, the App is now ready to build with Electron message will be displayed.
Files
From the Files pulldown, select the template files you want to edit in a popup editor.
Edit the package.json file to define the configuration of your Electron App.
The template file shows the format required.
Note: the version refers to your App version.
The debug-main.js file is used when you build in Debug mode.
It includes the instruction to automatically open the developer tools when the App is run.
(mainWindow.webContents.openDevTools())
When building in Release mode, the release-main.js file is used.
Electron App Settings
Click New to create a new configuration then edit the Electron App Settings as required.
Specify the Lianja Cloud Server URL and any optional settings.
Then click Save to save your changes or Cancel to exit without saving.
Build
Check that the Platform, Architecture and Config pulldowns are displaying the correct values for your intended build.
Then click the Build button to build your Electron App.
Run
Once the Electron Build Log output window displays Build complete, click the Run button to run your App.
Note that here the App has been built in Debug mode, so the developer tools are automatically loaded.
Your App will be displayed in a popup window.
Log in as usual.
And test your App.
And here's the same App built in Release mode.
Deploy
The files required to deploy your Electron App are created in:
<drive>:\lianja\apps\<appname>\electron\dist\<app>-<platformname>-<architecture>
For example, in the screenshots above the files are created in:
C:\lianja\apps\lianja_mobiledemo\electron\dist\lianja_mobiledemo-win32-ia32