Build a Music Streaming App with Electron, React & ES6

Developed by GitHub, Electron is a framework that allows you to leverage your web design skills to build slick, cross-platform desktop apps. In this tutorial, I'll demonstrate how to combine the power of Electron with React, ES6 and the Soundcloud API to create a stylish music streaming app that will stream your favorite tunes right to your desktop. I'll also demonstrate how you can package the app and distribute it as a portable, OS-specific bundle.

This tutorial assumes a basic knowledge of React. If you'd like a primer before you begin, check out our getting started tutorial. The code for this tutorial is available from our GitHub repo.

Overview of What We're Building

This is what our app is going to look like:

We will use React to create the UI, the SoundCloud API to get the tracks, and Electron to allow the app to run in a browser-like environment. As you can see, it will have a search field for searching for the music to be played and the results will be the audio players for each of the results. Pretty much like what you see on the SoundCloud website.

If you want to follow along make sure you have a SoundCloud account and a SoundCloud app. Take note of the API key because we will use it later.

Adding Electron and Other Dependencies

Start by cloning the Electron Quick Start repo on Github into a folder titled soundcloud-player:

git clone http://ift.tt/1kWZl0X soundcloud-player

Enter that folder, then open the package.json file and add the following dev dependencies:

"devDependencies": {
  "electron-prebuilt": "^1.2.0",
  "babel-preset-es2015": "^6.9.0",
  "babel-preset-react": "^6.5.0",
  "babelify": "^7.3.0",
  "browserify": "^13.0.1"
}

Here's a brief description of each package:

• electron-prebuilt —installs Electron prebuilt binaries for command-line use.
• babel-preset-es2015—used for transforming ES6 code to ES5 code (which can run in any modern browser).
• babel-preset-react—used for transforming JSX code to JavaScript.
• babelify—the Babel transformer for Browserify.
• browserify—builds a bundle you can serve up to the browser in a single <script> tag.

Add the following under dependencies:

"dependencies": {
  "node-soundcloud": "0.0.5",
  "react": "^0.14.8",
  "react-dom": "^0.14.8",
  "react-loading": "0.0.9",
  "react-soundplayer": "^0.3.6"
}

Here's a brief description of each package:

• node-soundcloud—allows us to make calls to the SoundCloud API.
• react—the React library. Allows us to create UI components.
• react-dom—allows us to render React components into the DOM.
• react-loading—used as a loading indicator for the app.
• react-soundplayer—a React component that allows us to easily create custom audio players for SoundCloud.

Once you've added the dependencies and devDependencies, execute npm install to install all of them.

Finally, add the scripts for compiling and starting the app. This will allow you to run npm run compile to compile the app and npm start to run it.

"scripts": {
  "compile": "browserify -t [ babelify --presets [ react es2015 ] ] src/app.js -o js/app.js",
  "start": "electron main.js"
}

While we're at it, we can remove the electron-quick-start-specific stuff and add sensible defaults of our own.

{
  "name": "electron-soundcloud-player",
  "version": "1.0.0",
  "description": "Plays music from SoundCloud",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js",
    "compile": "browserify -t [ babelify --presets [ react es2015 ] ] src/app.js -o js/app.js"
  },
  "author": "Wern Ancheta",
  ...
}

All in all, your package.json file should now look like this.

Project Structure

This is how we are intending to structure our project:

.
├── css
│   └── style.css
├── index.html
├── js
├── main.js
├── package.json
├── README.md
└── src
    ├── app.js
    └── components
        ├── ProgressSoundPlayer.js
        └── Track.js

Let's create those missing directories:

mkdir -p css js src/components

And the files they should contain:

touch css/style.css src/app.js src/components/ProgressSoundPlayer.js src/components/Track.js

The js directory will hold the compiled JavaScript for our app, the css directory our app's styles and the src directory the app's components.

Of the files we pulled in from the Electron Quick Start repo, we can remove the following:

rm renderer.js LICENSE.md

Which leaves main.js and ìndex.html. Of these two files, it is main.js which is responsible for creating a new browser window in which the app will run. However, we need to make a couple of changes to it. Firstly adjust the width on line 13:

mainWindow = new BrowserWindow({width: 1000, height: 600})

Secondly remove the following from line 19 (as otherwise our app will initialize showing the dev tools):

mainWindow.webContents.openDevTools()

When main.js creates the new browser window, it will load index.html (we'll look at this file later on in the tutorial). From here, the app will run in the same way as it would in a browser window.

Building the App

The Track Component

Next let's create the Track component for the audio player (in src/components/Track.js).

First we require React and a few components provided by React SoundPlayer:

import React, {Component} from 'react';
import { PlayButton, Progress, Timer } from 'react-soundplayer/components';

Note that by using this syntax we are effectively extracting the Component class from React. As the name suggests, Component is used for creating new components.

Continue reading %Build a Music Streaming App with Electron, React & ES6%

by Wern Ancheta via SitePoint