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.
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.
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
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
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
Like npm, let's initialize bower:
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:
Let's create Electron entry point:
touch main.js mkdir app
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).
We installed npm and bower and through them installed dependencies for
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.