Cross-platform Desktop Apps development using HTML, CSS, JS with Electron
- 3. What I do FullStack Developer, Facilitator and Technical Writer Founder, Author & Mobile Apps Developer at Devplus Evolution Web Application Developer at Qingdom Technologies Trainer & Instructor at FoundersHub #CodeSquad
- 4. DO YOU HAVE AN IDEA OF: HTML CSS JAVASCRIPT Requirement Passion and Fuel (e.g. Coffee) Yea, you’re good to go #CodeSquad
- 6. Desktop Apps An application that runs stand alone in a desktop or laptop computer. Contrast with "Web- based application," which requires the Web browser to run. The term may be used to contrast desktop applications with mobile applications that run in smartphones and tablets.
- 7. Desktop Apps with Electron
- 8. Let Electron do the hard work for you while you sit back, watch and sip your coffee
- 9. Been in existence since 2013 Github released Atom-Shell, the core of its famous open-source editor Atom, and renamed it to Electron for the special occasion. Electron, unlike other competitors in the category of Node.js-based desktop applications, brings its own twist to this already well-established market by combining the power of Node.js (io.js until recent releases) with the Chromium Engine to bring us the best of both server and client-side JavaScript. Imagine a world where we could build performant, data-driven, cross-platform desktop applications powered by not only the ever-growing repository of NPM modules, but also the entire Bower registry to fulfill all our client-side needs.
- 11. Electron PROS: • HTML + CSS + JS • NodeJs + Chrome • No deplyoment Dependencies
- 12. Electron CONS: • HTML + CSS + JS • JavaScript • Native Module in C/C++
- 13. Electron Features • Rapid Development • Themes • Shared Code/UI • Deployment + Silent Updates • Native UX
- 15. Popular Apps that are built on electron
- 16. Let’s get started Make sure that nodejs is installed as well as electron. To check, open command line and type node –v electron –v New to node, it is easy, just dive to https://nodejs.org And download the latest version of nodejs
- 17. Todo 1 • Make sure you’re in the desired directory, In my own case, I use desktop, so fire up your command line, navigate to the directory and it should be something like this
- 18. Todo 2 • Create a directory where your project will reside. On windows you can use mkdir command like this mkdir testapps This will create a folder named testapps on desktop. Then go inside the directory using this command: cd testapps
- 19. So far you should have this This means • you’re on desktop • You’ve successfully created a folder named testapps where your project will reside and • You’re inside the testapps folder to begin operation NOTE: Please don’t close the command line, if you have to test your progress, just minimize it and go back their later, it doesn’t have effect, it will just save you time to have to navigate to the directory all over again
- 20. Set up your apps Initialize your apps with this command npm init This will ask your information about your apps and then create package.json file inside folder testapps
- 21. You should have this, once you fill out the entries:
- 22. Keynote 1 • Press enter key if what the command line suggested is what you want to use, else type your desired entries. Example, npm suggested testapps as the name of my project, since it is okay by me, I pressed enter key. You can later change the properties in package.json file • So far, package.json file has been created for us, which contain information about the apps. • Index.js is the entrypoint, that is where we will define our project details and initialize electron
- 23. Install electron in your current directory using command line type: npm install electron -save --dev --verbose The command is pretty straight-forward. --verbose is used to display information about the installation process since it can take a while, and you’d want to be sure it hasn’t stopped working.
- 24. If everything worked fine, you should have this:
- 25. Now in your testapps folder, you should have a file and a folder • Package.json file • node_modules folder You can play around with package.json file Please don’t touch the node_modules folder Fire up your text editor to create index.js file Recall: That’s your project entry point
- 26. Put these codes in your index.js file const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; var myWindow; app.on('ready',function(){ myWindow = new BrowserWindow({width: 800, height: 720}); //myWindow.loadURL('https://google.com'); myWindow.loadURL('file://' + __dirname + '/index.html'); });
- 27. Explanation • First, we include electron using the require statement, then electron object returned by the line 1, then we create the app object, this will represent our application and we can just be assigning values to it later on. • Second, we create application window, where the app will be loaded using BrowserWindow object in electron. • Then define window object using var mainWindow; • Then, we bind the app with ready event when your app is loaded
- 28. Explanation cont’d • Then define properties for your myWindow object, we can give it many properties Height, Width, "use-content-size": false, resizable: true, center: true and many more You can load a webpage using loadURL and you can as well load your index.html file NOTE: To load the url, comment out //mainWindow.loadURL('file://' + __dirname + '/index.html'); And to load the index.html file, comment out //mainWindow.loadURL('https://google.com');
- 29. Then, modify the package.json file, change the line "test": "echo "Error: no test specified" && exit 1“ To "start": "electron . " This is to execute electron app at the specified location
- 30. Create a sample index.html page <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Electron Apps</title> </head> <body> <header> <h1 style="text-align: center;">Electron Apps</h1> </header> <main> <p style="text-align: center; font-size: 24px" > I am a sample web page, I can be built using <b>HTML</b>, <b>CSS</b> and <b>JS</b>, packaged with <b>Electron</b></p> </main> </body> </html>
- 31. Then go to command line and type npm start This will execute the “ electron . ” Specified in package.json If everything works fine without errors, you will see the interface in the next slide
- 34. To Package the Apps Use electron-packager, In the command line type: npm install electron-packager This may take a while, after successful installation, start electron-packager using electron-packager . The first command will install electron-packager inside the node_modules folder The second command will write executable of your apps targetting the machine you’re building on
- 35. “electron-packager .” will build the executable of your files targetting the machine you’re working on. The downside is that, your source code will be displayed alongside the executable, in order to make our source code hidden, use electron-packager . --asar --asar will create asar files for your source code so that it won’t be visible to prying eyes
- 36. The folder structure should look like this “testapps-win32-x64” folder contain the executable file and other accompanying files
- 37. For all platforms deployment electron-packager . --all This will deploy for all platforms, although this may take a while
- 39. Electron packager build installable for you There are quite lots of apps out their to create installer for your apps. Example • Install Creator • Install Forge And many more In this case, we’ll be using #Installforge
- 41. Let’s go back and Test
- 42. If you have an existing web project that you want to turn desktop apps • Just open commandline in the directory. • Initialize npm and follow the procedure • In no time you will get your executable file. For more information and documentation, https://electron.atom.io/
- 43. Thanks for Listening Information about building installable package for your apps will be made available on request. The apps created with electron, with this slides and detailed information are on this github repository https://github.com/devesin/electron-typingmaster devesindevesindevesin1
- 44. Screenshot of the typing practice apps