Control your home using only Javascript

francesco marassi
Apr 26, 2017 · 5 min read

How to use React, Node.js and Espruino on ESP8266 to build some smart home components

Image for post
Image for post
NodeMCU, the base component of my Smart Home

In the last 2 months I spent some nights creating a smart home architecture, based exclusively on Javascript.

Why? There are already plenty of solutions on the internet.

Two main reasons:


The project (that I called Aurora) is based on:

Image for post
Image for post

As you can see, there are three main components in this architecture:

Progressive Web App

Here I can switch on/off the lights, share nodes with other people and schedule some events for the future.

Image for post
Image for post
Iper-Cool web app

It’s using React and Redux to handle all the state, and this is also saved on LocalStorage. A service worker is caching all the GET requests, so after the first load the app is really fast to open and to interact. And with the last Chrome for Android, you can also install it as a normal app :)

Node.js server

The server it’s where all the information about the nodes, the users and all the interaction between them resides. It’s composed by:

The server is really lightweight and I tried to use fewer possible packages and write lots of things by myself.

Nodes

Every node is based on ESP8266, a microcontroller with integrated WI-FI. I found that it is possible to program them with Javascript, using Espruino… and not only plain Javascript, also all the commands from ES2016 are supported!

For now I’m using a NodeMCU and some Sonoff, but you can also buy some other official Espruino boards from their site (I’m really tempted by Puck.js).

Image for post
Image for post
Pushing the code on my first Sonoff

NodeMCU and Sonoff don’t have Espruino installed by default, so I used ThingsSDK and their Flasher.js App to flash them in less than a minute. After that, pushing the code on the node is easy as npm run dev.

At the first boot of a new node, it starts an Access Point to configure the Network SSID, Password and the Aurora Code, a 4-digit code that is used by the node to obtain the right MQTT channel and to register himself on the server.

Image for post
Image for post

The interface for the Wi-Fi setup is really simple: this is caused by the fact that all the HTML code for the page is inside the node, and they have limited memory. To avoid lots of Out Of Memory! errors, I had to remove lots of lines of fancy CSS.

The structure of a node is simple:

{
“_id” : ObjectId(“58e915b7e2ae848bee319642”),
“user” : “464636e0–0587–11e7–84a3-a38b03337b96”,
“type” : “switch”,
“name” : “LED 2”,
“image” : “/assets/star-lights.jpg”,
“users” : [],
“schedules” : [],
“registered” : true,
“uuid” : “ffdedc00–1q7b-11e7-a400–6109474f8f1e”,
“code” : “4838”, //used on first node setup
“state” : {
“open” : false
}
}

A type describes the type of the node: for now I created a temperature node that sends the temperature to the server, and some switch nodes, that turn on/off lights or other electronic devices (a TV).

Every time a user make a change on the Web App, a new state is saved on MongoDB and sent via MQTT to the node. A node can also publish via MQTT: I currently have a temperature node that push my bedroom temperature and humidity every hour to the server.


The first nodes prototypes were based on Particle Photons, a great service (and hardware) but every Photon costs around 20$: too much for this use. The Sonoff is the perfect hardware for a simple switch: you can find them at less than 10$ (5$ from the official site). I bought them from Amazon only because I wanted them to arrive in 2 days.

Everything is Open Source

All the code I wrote is accessible in 2 different Github repository:

There is also an Aurora Repository, that has the prototype React app used with Particle.io.

Next Steps

I’m currently doing 2 different things:


Thoughts or suggestions? Write a comment or ping me on Twitter!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store