Build a Music Player with Angular 2+ & Electron I : Setup & Basics Concepts
- We need a way to ask Electron to refresh our app once a change occurs in the application.
- The app was able to run as a desktop app because we employed Electron.
- http://localhost:4000 is where Angular CLI will run our Angular app at if we run ng serve .
- In the next article , we will get more awesome by creating the presentation components of our music app.
- Your app most time will have few container components depending on how large the app is.
Last year, I wrote a series on how we can make a music player using React. The app was able to run as…
@AudainDesigns: Build a Music Player with Angular 2+ & Electron
#webdev #angular #js
Last year, I wrote a series on how we can make a music player using React. The app was able to run as a desktop app because we employed Electron. Soundcloud was also used as the database for a music library. The series did well and helped a lot of us to get started with React, and for that reason, I am doing it again. As a matter of fact, developers who love Angular 2 reached out and wondered if I could make the same piece for Angular.
This time, we are about to go on an adventure with Angular, building a fun music player while dancing and running the player right from our Mac, Windows or Linux environment. This is beginning to feel exciting already.
This article will be structured the same way as that of React, borrow a lot of its approach and utilize most of the techniques you see there.
The following diagram shows what our app will look at the end of this journey:
If this feels exciting, read on.
One of the most challenging aspects of creating a desktop app with Electron and Angular is setting up the environment. This section will walk you through this process, in a stepwise manner.
1. Creating a New Angular App
The Angular CLI is a utility tool that helps developers effortlessly create and Angular app as wells generate its parts (components, pipes, services, etc.). It hides the application bundling details and exposes a JSON file for configuring how the app is bundled which makes things more declarative.
First, of course, is to install this CLI tool:
You can create a new app using the CLI by running the following command:
An Angular app has been setup with just a single command. No Webpack a headache, nor SystemJS troubles, just a single line command.
2. Install Electron
Electron amongst all other options has become the most popular tool for building desktop apps using web technologies. As a matter of fact, Electron was used to build some of the popular tools you use as a developer including VSCode and Atom. It has become so popular that it won’t be surprising to see that one or more software(s) running on your machine was built on top of this awesome tool.
We need to install Electron in the just created Angular app. That is simple:
and configure it’s dimension.
method shows the developer tools for debugging purposes. This is not needed when the app is being distributed and therefore should be removed before that.
Run the following command to start Angular in one terminal:
…and the following to start Electron in another
4. Distribution Config
There are few points to consider while preparing the app for distribution:
file at the root of the project folder with the following values:
event handler behavior accordingly:
is NOT the case, then we just continue what we were doing before.
We just considered the 2nd and 3rd points, how about the 1st point, on base URL?
command allows you to pass in options of base URL so you can do something like this:
That’s not fun to always type at the console so you can add it as a script to package.json:
in .env as well as running the following commands in different terminal:
5. Live Reload
Our productivity gets a boost when we do not have to stop electron and restart it to see our changes. Therefore, we need a way to ask Electron to refresh our app once a change occurs in the application.
exists for this so go ahead to install:
file you just need to require the module and pass in a directory to watch:
UI components as they are also called are responsible for rendering contents in the view. Contents and styles are what they specialties. They never care about how this content come about; they just know how to render it.
directive which we will use while building our app.
directive. We will also see how while building the music app.
The reason why presentation components do not hold data models or handle events is, these components have high tendency to be re-used anywhere in your app and if data or events are bound directly to them, they become very difficult to re-use or move around.
The following are good examples of UI components:
This component does less to no content and more data models. Container components are responsible for how data is manufactured or fetched, how data is structured, formatted and so on.
Container components are the guys responsible for sending data down to presentation component and handling events delegated to them from the presentation component.
Your app most time will have few container components depending on how large the app is. Sometimes a container component to a page or section and sometimes a container component to house the whole app if the app is really small or a just a single view app.
A very good example is the app component that comes with every Angular quickstart or starter kit.
What we have just done is the most intimidating aspect of creating an Angular + Electron project which is setting it up. Explaining the basic types of components will explain why our app is structured the way it is while we build the app out. In the next article, we will get more awesome by creating the presentation components of our music app.