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) |
||
| Line 1: | Line 1: | ||
''Under Construction'' | ''Under Construction'' | ||
| + | ==1. Init== | ||
[[{{ns:file}}:electron1.png|450px|thumb|left|link={{filepath:electron1.png}}|Electron Workspace]] | [[{{ns:file}}:electron1.png|450px|thumb|left|link={{filepath:electron1.png}}|Electron Workspace]] | ||
| + | |||
| + | Click the '''Init''' button. | ||
| + | |||
| + | This copies the template Electon files to the ''electron'' sub-directory of your App. | ||
<br clear=all> | <br clear=all> | ||
| Line 12: | Line 17: | ||
| + | |||
| + | When the copy is complete, the ''App is now ready to build with Electron'' message will be displayed. | ||
<br clear=all> | <br clear=all> | ||
| + | ==2. Files== | ||
[[{{ns:file}}:electron3.png|450px|thumb|left|link={{filepath:electron3.png}}|Electron Workspace]] | [[{{ns:file}}:electron3.png|450px|thumb|left|link={{filepath:electron3.png}}|Electron Workspace]] | ||
| + | |||
| + | From the '''Files''' pulldown, select the template files you want to edit in a popup editor. | ||
<br clear=all> | <br clear=all> | ||
| Line 26: | Line 36: | ||
| + | |||
| + | 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> | ||
| Line 33: | Line 49: | ||
| + | |||
| + | Edit the '''main.js''' file as required. | ||
| + | |||
| + | For example, uncomment the ''mainWindow.webContents.openDevTools();'' line to enable debug mode. | ||
<br clear=all> | <br clear=all> | ||
| + | ==3. Edit== | ||
[[{{ns:file}}:electron6.png|450px|thumb|left|link={{filepath:electron6.png}}|Electron Workspace]] | [[{{ns:file}}:electron6.png|450px|thumb|left|link={{filepath:electron6.png}}|Electron Workspace]] | ||
| + | |||
| + | Edit the '''Electron App Settings''' as required. | ||
<br clear=all> | <br clear=all> | ||
| + | ==4. Build== | ||
[[{{ns:file}}:electron7.png|450px|thumb|left|link={{filepath:electron7.png}}|Electron Workspace]] | [[{{ns:file}}:electron7.png|450px|thumb|left|link={{filepath:electron7.png}}|Electron Workspace]] | ||
| + | |||
| + | 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> | ||
| + | ==5. Run== | ||
[[{{ns:file}}:electron8.png|450px|thumb|left|link={{filepath:electron8.png}}|Electron Workspace]] | [[{{ns:file}}:electron8.png|450px|thumb|left|link={{filepath:electron8.png}}|Electron Workspace]] | ||
| + | |||
| + | Once the '''Electron Build Log''' output window displays ''Build complete'', click the '''Run''' button to run your App. | ||
<br clear=all> | <br clear=all> | ||
| Line 61: | Line 92: | ||
| + | |||
| + | Your App will be displayed in a popup window. | ||
| + | |||
| + | Log in as usual. | ||
<br clear=all> | <br clear=all> | ||
| Line 68: | Line 103: | ||
| + | |||
| + | And test your App. | ||
<br clear=all> | <br clear=all> | ||
[[Category:Electron]] | [[Category:Electron]] | ||
Revision as of 06:29, 6 October 2016
Under Construction
Contents
1. Init
Click the Init button.
This copies the template Electon 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.
2. 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.
Edit the main.js file as required.
For example, uncomment the mainWindow.webContents.openDevTools(); line to enable debug mode.
3. Edit
Edit the Electron App Settings as required.
4. 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.
5. Run
Once the Electron Build Log output window displays Build complete, click the Run button to run your App.
Your App will be displayed in a popup window.
Log in as usual.
And test your App.
