Electron + AngularJS - Preparing dev environment

This is first part of introduction series to create application with Electron and AngularJS.

Before starting to write any application code, we should install some prerequisites for running Electron apps as well as necessary libs.

Installing Node.js

First we need to have Node installed. This is required since we need npm (Node Package Manager) to run things. I suggest installing version 0.12.9 because of this and this.

First, install brew and then run:

brew tap homebrew/version  
brew install homebrew/versions/node012  

This should install older version of Node.js which is fine for running content and managing packages. Don't mistake this version with the one that your Electron app will be run with. Electron is shipping with its own version of Node.

Install packages

Bower is a package manager for web. It is required for fetching AngularJS lib. Its best to install it once and make it global.

npm install bower -g  

Now we have prepared global libraries. It is time to create project.

mkdir ea-todo  
cd ea-todo  

Before installing anything, let's create package.json:

npm init  

First we need to install Electron binary. I suggest to install this locally for every project since versions may differ.

npm install electron-prebuilt --save  

This will create folder node_modules and place electron-prebuilt folder in it. Any npm package dependencies will be available in this folder as well.

Note: We are using --save to add this dependency to our package.json. Keeping dependencies listed in package.json is a handy way to distribute/share you project since later on you can run npm install and it will install all of dependencies listed in package.json.

Note: Npm creates also hidden folder .bin which contains executable binaries for installed packages. So binary to execute you Electron app can be found in node_modules/.bin/electron.

Like npm, let's initialize bower:

bower init  

Now, to install AngularJS and Angular Material:

bower install angular --save  
bower install angular-material --save  

Like npm, this will create folder bower_components and place packages there. And like npm, we are using --save for the same reason.

To include it in your project you would simply do something like:

<script src="/bower_components/my_component/component.js"></script>  

Wrapping up

Let's create Electron entry point:

touch main.js  
mkdir app  

In app folder we'll put our app code, and main.js is used as entry point to our app (or if you specified some other name while running npm init use that).

To recap...

We installed npm and bower and through them installed dependencies for electron-prebuilt, angular and angular-material. Our app structure should be something like this:

[ea-todo]
├── [app]
├── [node_modules]
├── [bower_components]
├── bower.json
├── package.json
├── main.js

Now we have all the things preinstalled to start writing some code.

Continue to create sample application.

About Vjekoslav Ratkajec

Software developer from Zagreb, Croatia. Love programming, running, hiking and biking. Adore nature and animals. Also author of this blog.

Comments