Coding a desktop app with Electron and Angular

Everybody knows about Electron, it's one of those open-source tools that the community is really grateful for as it gives us the liberty to develop amazing things such as the text editor I'm currently using: Atom.

If you're not familiar with Electron, it's a framework that allows anyone to develop cross platform desktop applications using Javascript, HTTP and CSS, pretty cool, huh?

In this blog post, we'll be coding a small app to track accomplishments (a glorified to-do application).

Getting started

Since Angular is my framework of choice to discover Electron, I'll be using the awesome bootstrapping project angular-electron in order to get started as quickly as possible. This project offers great features, such as packaging my app into executables for Linux, Windows & Mac as easily as running npm run electron:os.

So I clone the repository, install the dependencies & run it:

1git clone https://github.com/maximegris/angular-electron.git
2npm install
3npm start
4

Which opens the following window:

Note the inspection tool on the right, that's because Electron uses Chromium to render my project, therefore I have access to the usual inspection tool.

Tweaking everything to my liking

There are two things that I wish to change:

• I'll use Sass instead of Scss
• I want to use the CSS framework Bulma

Scss to Sass

All I need to do is tell angular-cli that I'm using Sass instead of Scss, change the existing file extensions and change a line in the webpack configuration.

I first run ng set defaults.styleExt sass, then I change the extensions of the following files: styles.scss, app.component.scss, home.component.scss without forgetting to adjust the syntax of their contents.
And finally, I head to webpack.config.js and update the following block:

1const styles = ["./src/styles.scss"];
2

I can now use Sass in my Angular project.

Using Bulma

First, run:
npm install bulma

Then head to styles.sass and add the following lines:

1@import ../node_modules/bulma/sass/utilities/initial-variables
2@import ../node_modules/bulma/sass/utilities/functions
3
4// Contents of the file
5
6@import "~bulma"
7

Now that everything is ready, I can start coding my application.

Step 1: The initial requirements

My application will contains a navigation bar to move from one list to another and a content panel to display the TODOs (and their status).

Therefore I'll need two distinct components, let's generate the nav with angular-cli and use the existing home component as our content panel:

ng g component nav

Which generates a nav folder containing my template, style sheet, component and test files.

As my navigation is independent to the currently existing routing, I'll add it parallel to my router-outlet like such:

1<app-nav></app-nav> <router-outlet></router-outlet>
2

Which displays:

Note the little "nav works!" on top of the window.

Let's now make it look like an actual navigation bar:

As you can see, I have made some changes:

• The navbar is now a section with a fixed position, containing several Lists that will allow our user to navigate through the application.
• I have added a background picture I find pretty, if you know where it is, please let me know :-)

Step 2: The essential feature

I now want to add actual Todos for each list and display them. Here is the current model for a List:

1export class List {
2  // A list has a generic default name
3  name: string = "New List";
4  // Each list contains a list of Todos
5  todos: Todo[] = [];
6}
7

And the model for a Todo element:

1export class Todo {
2  name: string = "New TODO";
3  description: string;
4  // A Todo element is either done or in progress
5  done: boolean = false;
6}
7

All I have to do, is to add a button to create a new Todo, once clicked, I'll simply push a newly created Todo into my currently displayed Lists array and display said array with an ngFor. With all of that said, here is the result:

Note the undocumented changes such as the ability to create a new List (which uses the same concept applied to create a new Todo), the ability to mark a Todo as done and the ability to edit the name of a List. All of this is very basic and doesn't really need to be detailed.

To be continued

Next steps will involve having a clean and professional design, saving the TODOs locally (in order to retrieve them from one session to another) and many more steps to make this little application as perfect as it can be.