Node.js and Johnny-Five "document is not defined" error

Question

I am using Node.js and Johnny-Five with an Arduino Uno micro controller. My goal is to, upon pressing the button hooked up to the Arduino, the webpage will display a count of the number of times it has been pressed in the form of a bar.

In console I get an error when I press the button that says "document is not defined" and references my variable that is supposed to change the css styling:

var bar1 = document.getElementById('bar1');

Not sure why that is giving an error. Any thoughts? Below is my javascript:

var five = require("johnny-five"),
  bumper, led, counter, toggleState;
  toggleState = false;

five.Board().on("ready", function() {

  bumper = new five.Button(7);
  led = new five.Led(13);
  counter = 200;

  bumper.on("hit", function() {

    led.on();
    console.log( "Button has been pressed" );
            counter += 10; //add 10 everytime the button is pressed

            console.log(counter);
            toggleState = true;
            console.log("on");

    //function increaseBarSize () {
    if(toggleState == true) {
        var bar1 = document.getElementById('bar1');
        bar1.style.width = counter;
        console.log(bar1);
    }

    }).on("release", function() {
        led.off();
        console.log("off");

    });

    });

Answer 1

It's happening because there isn't DOM on the server side, you need to send this value and manage the DOM at the client side.

Try this:

SERVER SIDE

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io').listen(http);
var five = require("johnny-five"),
bumper, led, counter, toggleState;
toggleState = false;
five.Board().on("ready", function() {

    bumper = new five.Button(7);
    led = new five.Led(13);
    counter = 200;

    bumper.on("hit", function() {

        led.on();
        console.log( "Button has been pressed" );
        counter += 10; //add 10 everytime the button is pressed

        console.log(counter);
        toggleState = true;
        console.log("on");

        //function increaseBarSize () {
        if(toggleState == true) {
            io.on('connection', function(socket){
              socket.emit('counter', counter);
            });
        }

    }).on("release", function() {
        led.off();
        console.log("off");

    });
});
app.get('/', function(req, res){
    res.sendFile(__dirname + '/<client page>.html'); //change <client page> to the client document
});
http.listen(3000, function(){
    console.log('listening on *:3000');
});

CLIENT SIDE

 <script src="/socket.io/socket.io.js"></script>
 <script>
 var socket = io('http://localhost:3000');
 var bar1 = document.getElementById('bar1');
 socket.on('counter', function(counter){
     bar1.style.width = counter;
 });
 <script>

NOTE: assume that you already installed Socket.io and express modules.