Build a full-fledge Markdown app with Electron
Amit Merchant Jun 12 '17
What is Electron?
Sweet. Isn't it? You may be wondering which hard parts?! Electron basically makes it easy to implement automatic updates, native menus and APIs, App Crash Reporting, Debugging of your app a lot easier which you won't find in many similar solutions available in the market. Such as nw.js And when any project is backed by GitHub, you can use it with your eyes closed.
Getting started with building the app
My philosophy to learn a new technology is to take a real world idea and try to implement it with that particular technology. In this case, I have decided to build a simple Markdown Editor app which can do following:
- Show live preview of Markdown while writing the same
- Show the relevant HTML for Markdown
- Basic Markdown editing
- Support for GitHub Flavored Markdown
So, taking above requirements into account, I have started building it by first cloning the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start $ ren electron-quick-start electron-markdownify $ cd electron-markdownify $ npm install && npm start
This gave me the very basic structure of Electron and all the necessary node dependencies installed including the
electron-prebuilt which is the heart of any electron app and the starts the very app itself!
The app's folder structure contains a
main.js file, an HTML file and
Electron basically runs two processes when running it : 1) Main Process 2) Renderer Process.
package.json file and executes it. This main file (usually named main.js) then creates application windows which contain rendered web pages with the added power of interacting with the native GUI (graphical user interface) of your operating system.
Next, to make it convenient to user to write Markdowns, I have used CodeMirror which is a web based code editor. This made writing Markdown easy and beautiful.
Further, as my app is a Markdown editor, I needed a Markdown parser which can convert the plain Markdown in to the HTML which can be previewed. So, I have used this awesome Markdown parser named marked. It has all the things I needed including GFM.
Combining all bits and pieces, I have been finally done with my original prototype i.e a Markdown app. You can see the end product over here and take a look into working of it yourself as it is not feasible to include everyting in a single post.
This is how the end product looks like..
Throughout this journey, I have explored many new things about desktop app development such as packaging and distributing the app, handling exceptions for different operating systems, communicating with native resources and so on.
The app is still work in progress and I'm still learning Electron as I try to add more features into this very app. The more I know about Electron, the more I fell in love with it. It sure is a future of desktop apps.
That's all folks!