Require your render process code in the script tag at the bottom of the template.Sample code is read and added to the DOM by adding the path to the code in the data-path.If you are displaying main or renderer process sample code, include or remove that markup accordingly.If demo includes a response written to the DOM, update that id, otherwise delete:.Start by copying and pasting an existing blocks from the template page.The renderer process code you add will be read and displayed within the demo and then required on the template page so that it runs in that process (see below). Remove the demos and pro-tips as needed.Īny code that you create for your demo should be added to the 'main-process' or 'renderer-process' directories depending on where it runs.Īll JavaScript files within the 'main-process' directory are run when the app starts but you'll link to the file so that it is displayed within your demo (see below).Update all the text in the header tag with text relevant to your new section.In the sections directory, copy an existing template html file from the category you're adding a section to.This template is added to the index.html in the app. Add demo template path to the import links in the head of index.html.
Add demo to sidebar in the appropriate category in index.html.This page contains the sidebar list of sections as well as each section template that is imported with HTML imports. General tip-for some of these just copy the line or file of a similar existing item to get started! New SectionĪ whole new page with one or more demos. Here are tips for covering the bases when adding a new section or demo. Elements that belong together are prefixed with their parent ction.Styling elements directly should be avoided, but ok in some cases.Nothing too strict and used more as a guide: The files: CODE_OF_CONDUCT, README, docs and CONTRIBUTING files make up the documentation for the project. It contains details on the app: the author, dependencies, repository and points to main.js as the application's main process file. This file is required when using npm and Electron.js. The package.json sets this file as the main file. js file in the main-process directory and executes. This file contains the lifecycle instructions for the app like how to start and quit, it is the app's main process. It contains the sidebar with navigation and uses HTML imports to append each section HTML page to the body. Each of these files is appended to index.html, located at the root. These subfolders contain the HTML files for each of the demo pages.
This directory contains sub folders for each demo section. js files that it needs for its demo.Įach page view reads the content of its relevant main and renderer process files and adds them to the page for the snippets.
This structure is mirrored in the main-process directory.Įach of the HTML page views requires the corresponding renderer-process. This directory contains sub folders for each demo section that requires JavaScript in the renderer process. js file in these directories and executes them. The main.js file, located in the root, takes each. This structure is mirrored in the renderer-process directory. This directory contains sub folders for each demo section that requires JavaScript in the main process. This directory contains assets for the app itself: CSS, fonts, images and shared JavaScript libraries or helpers. html files which are appended onto the index.html using HTML imports.Īre you looking to add a demo? Jump to the add a new demo section. This was done for maintainability-code updates only have to be made in one place-and organization-it's easy to find the sample code you're looking for.Īll of the pages (or views) are separate. These JavaScript bits have been pulled out into their own file and organized by process (main or renderer) and then by section (communication, menus, native UI, media, system, windows). This app has been developed to be a lightweight Electron app, demonstrating how to create a basic Electron app with a few exceptions that have been made for the sake of code organization in regards to the demos themselves.Īll of the sample code shown in the app is the actual code used in the app.
0 kommentar(er)
