Difference between revisions of "Electron Build"
Yvonne.milne (Talk | contribs) (Created page with "''Under Construction'' [[{{ns:file}}:electron1.png|450px|thumb|left|link={{filepath:electron1.png}}|Electron Workspace]] <br clear=all> {{ns:file}}:electron2.png|450px...") |
Yvonne.milne (Talk | contribs) (→Deploy) |
||
(24 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== | ||
+ | [[{{ns:file}}:electron1.png|450px|thumb|left|link={{filepath:electron1.png}}|Electron Build]] | ||
+ | |||
+ | |||
+ | |||
+ | Click the '''Init''' button. | ||
+ | |||
+ | This copies the template Electron files to the ''electron'' sub-directory of your App. | ||
<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]] |
+ | |||
+ | When the copy is complete, the ''App is now ready to build with Electron'' message will be displayed. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}:electron3.png|450px|thumb|left|link={{filepath:electron3.png}}|Electron | + | ==Files== |
+ | [[{{ns:file}}:electron3.png|450px|thumb|left|link={{filepath:electron3.png}}|Electron Build]] | ||
+ | |||
+ | From the '''Files''' pulldown, select the template files you want to edit in a popup editor. | ||
<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]] |
+ | |||
+ | 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. | ||
<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}}: | + | [[{{ns:file}}:electron5a.png|450px|thumb|left|link={{filepath:electron5a.png}}|Electron Build]] |
+ | |||
+ | When building in '''Release''' mode, the '''release-main.js''' file is used. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}: | + | ==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. | ||
+ | |||
+ | Then click '''Save''' to save your changes or '''Cancel''' to exit without saving. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}: | + | ==Build== |
+ | [[{{ns:file}}:electron7.png|450px|thumb|left|link={{filepath:electron7.png}}|Electron 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. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}: | + | ==Run== |
+ | [[{{ns:file}}:electron8.png|450px|thumb|left|link={{filepath:electron8.png}}|Electron Build]] | ||
+ | |||
+ | |||
+ | |||
+ | 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}}: | + | [[{{ns:file}}:electron9.png|450px|thumb|left|link={{filepath:electron9.png}}|Electron Build]] |
+ | |||
+ | Your App will be displayed in a popup window. | ||
+ | |||
+ | Log in as usual. | ||
<br clear=all> | <br clear=all> | ||
− | [[Category:Electron]] | + | [[{{ns:file}}:electron10.png|450px|thumb|left|link={{filepath:electron10.png}}|Electron Build]] |
+ | |||
+ | |||
+ | |||
+ | |||
+ | 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> | ||
+ | |||
+ | ==Deploy== | ||
+ | The files required to deploy your Electron App are created in: | ||
+ | <pre><drive>:\lianja\apps\<appname>\electron\dist\<app>-<platformname>-<architecture></pre> | ||
+ | |||
+ | For example, in the screenshots above the files are created in: | ||
+ | <pre>C:\lianja\apps\lianja_mobiledemo\electron\dist\lianja_mobiledemo-win32-ia32</pre> | ||
+ | |||
+ | [[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