Indentation error while executing app.js code using node.js, express.js and socket.io npm

Question

I am newbie in node.js, express.js framework and socket.io please help me. When i execute below code using node app.js command in ubuntu terminal. Its giving indentation error:

oneadmin@openflow1:~/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master$ node app.js
Express server listening on port 1337 in development mode
Warning: missing space before text for line 33 of jade file "/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/views/layout.jade"
Error: unexpected token "indent"
    at Parser.parseExpr (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:229:15)
    at Parser.block (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:689:25)
    at Parser.tag (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:800:26)
    at Parser.parseTag (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:719:17)
    at Parser.parseExpr (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:188:21)
    at Parser.block (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:689:25)
    at Parser.tag (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:800:26)
    at Parser.parseTag (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:719:17)
    at Parser.parseExpr (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:188:21)
    at Parser.block (/home/oneadmin/Desktop/test-projects/nodejs/Datasift-Interaction-Counter-master/node_modules/jade/lib/parser.js:689:25)

app.js code following:

   doctype html
    html(lang='en')
      head
        meta(charset='utf-8')
        //
           Set the viewport width to device width for mobile 
        meta(name='viewport', content='width=device-width')
        title DataSift :: Interaction Analyzer
        //
           Included CSS Files 
        link(rel='stylesheet', href='stylesheets/foundation.css')
        link(rel='stylesheet', href='stylesheets/app.css')
        //if lt IE 9
          link(rel='stylesheet', href='stylesheets/ie.css')
        //
           IE Fix for HTML5 Tags 
        //if lt IE 9
          script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')
        //
           Included JS Files
        script(type='text/javascript', src='/socket.io/socket.io.js')
        script(type='text/javascript', src='http://code.jquery.com/jquery-latest.js')
        script(type='text/javascript', src='javascripts/modernizr.foundation.js')
        script(type='text/javascript', src='javascripts/foundation.js')
        script(type='text/javascript', src='javascripts/d3.js')
        script(type='text/javascript', src='javascripts/d3.geom.js')
        script(type='text/javascript', src='javascripts/d3.layout.js')
        script(type='text/javascript', src='javascripts/d3.time.js')
        script(type='text/javascript', src='javascripts/d3.word.cloud.js')    
        script(type='text/javascript', src='/javascripts/app.js')
        script(type='text/javascript', src='/javascripts/graph-ic.js')
        script
          $(document).ready(function() {
            $('#go').click(function() {
              $.ajax({
                type : 'POST',
                url : '/submit',
                data : $('#stream_creds').serialize(),
                success : function(response) {
                  $('#ContactForm').find('.form_result').html(response);
                }
              });
            });
          });
      body
        //
           container 
        .container
          .row
            .eight.columns
              img(src='images/dslogo.png')
              h4.subheader Interaction Volume
              .panel
                h4
                  | Total interactions:
                  span#countTotal
            .four.columns
              .panel.hide-on-phones
                form#stream_creds.nice
                 input.input-text(type='text', placeholder='User Name', name='username')
                 input.input-text(type='text', placeholder='API Key', name='apikey')
                 input.input-text(type='text', placeholder='Stream ID', name='streamid')
               p
                a#go.nice.radius.blue.button.mobile.src-download(href='#') Subscribe
            .row
              .one.columns
              .ten.columns
                ul.nice.tabs-content
                  li#nice1Tab.active             
                   #interactions
                   style(type='text/css')
                    svg {
                     font: 10px sans-serif;
                    }
                    .line {
                    fill: none;
                    stroke: #333;
                    stroke-width: 1.5px;
                    }
                    .axis path, .axis line {
                    fill: none;
                    stroke: #333;
                    shape-rendering: crispEdges;
                    }
                    .text {
                    fill: #333;
                    }
                    .data-line {
                    stroke: #F00;
                    stroke-width: 2;
                    fill: none;
                    stroke-dasharray: 0;
                    } 
            //
               container 

project link that i was trying to implementing in my local system ubuntu http://www.benh.co.uk/datasift/visualising-a-datasift-feed-with-node-and-d3/

source code in git https://github.com/haganbt/Datasift-Interaction-Counter

how to solve indentation error or how to execute successfully with fresh installation. Please let me help to solve this error

Answer 1

You need to add a dot . after your script/style tags if you're using inline javascript and CSS.

doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    //
       Set the viewport width to device width for mobile 
    meta(name='viewport', content='width=device-width')
    title DataSift :: Interaction Analyzer
    //
       Included CSS Files 
    link(rel='stylesheet', href='stylesheets/foundation.css')
    link(rel='stylesheet', href='stylesheets/app.css')
    //if lt IE 9
      link(rel='stylesheet', href='stylesheets/ie.css')
    //
       IE Fix for HTML5 Tags 
    //if lt IE 9
      script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')
    //
       Included JS Files
    script(type='text/javascript', src='/socket.io/socket.io.js')
    script(type='text/javascript', src='http://code.jquery.com/jquery-latest.js')
    script(type='text/javascript', src='javascripts/modernizr.foundation.js')
    script(type='text/javascript', src='javascripts/foundation.js')
    script(type='text/javascript', src='javascripts/d3.js')
    script(type='text/javascript', src='javascripts/d3.geom.js')
    script(type='text/javascript', src='javascripts/d3.layout.js')
    script(type='text/javascript', src='javascripts/d3.time.js')
    script(type='text/javascript', src='javascripts/d3.word.cloud.js')    
    script(type='text/javascript', src='/javascripts/app.js')
    script(type='text/javascript', src='/javascripts/graph-ic.js')
    script.
      $(document).ready(function() {
        $('#go').click(function() {
          $.ajax({
            type : 'POST',
            url : '/submit',
            data : $('#stream_creds').serialize(),
            success : function(response) {
              $('#ContactForm').find('.form_result').html(response);
            }
          });
        });
      });
  body
    //
       container 
    .container
      .row
        .eight.columns
          img(src='images/dslogo.png')
          h4.subheader Interaction Volume
          .panel
            h4
              | Total interactions:
              span#countTotal
        .four.columns
          .panel.hide-on-phones
            form#stream_creds.nice
             input.input-text(type='text', placeholder='User Name', name='username')
             input.input-text(type='text', placeholder='API Key', name='apikey')
             input.input-text(type='text', placeholder='Stream ID', name='streamid')
           p
            a#go.nice.radius.blue.button.mobile.src-download(href='#') Subscribe
        .row
          .one.columns
          .ten.columns
            ul.nice.tabs-content
              li#nice1Tab.active             
               #interactions
               style(type='text/css').
                svg {
                 font: 10px sans-serif;
                }
                .line {
                fill: none;
                stroke: #333;
                stroke-width: 1.5px;
                }
                .axis path, .axis line {
                fill: none;
                stroke: #333;
                shape-rendering: crispEdges;
                }
                .text {
                fill: #333;
                }
                .data-line {
                stroke: #F00;
                stroke-width: 2;
                fill: none;
                stroke-dasharray: 0;
                } 
        //
           container

Answer 2

html(lang='en')
    <![endif]
  head
    meta(charset='utf-8')
    //
       Set the viewport width to device width for mobile 
    meta(name='viewport', content='width=device-width')
    title DataSift :: Interaction Analyzer
    //
       Included CSS Files 
    link(rel='stylesheet', href='stylesheets/foundation.css')
    link(rel='stylesheet', href='stylesheets/app.css')
    //if lt IE 9
      link(rel='stylesheet', href='stylesheets/ie.css')
    //
       IE Fix for HTML5 Tags 
    //if lt IE 9
      script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')
    //
       Included JS Files
    script(type='text/javascript', src='/socket.io/socket.io.js')
    script(type='text/javascript', src='http://code.jquery.com/jquery-latest.js')
    script(type='text/javascript', src='javascripts/modernizr.foundation.js')
    script(type='text/javascript', src='javascripts/foundation.js')
    script(type='text/javascript', src='javascripts/d3.js')
    script(type='text/javascript', src='javascripts/d3.geom.js')
    script(type='text/javascript', src='javascripts/d3.layout.js')
    script(type='text/javascript', src='javascripts/d3.time.js')
    script(type='text/javascript', src='javascripts/d3.word.cloud.js')    
    script(type='text/javascript', src='/javascripts/app.js')
    script(type='text/javascript', src='/javascripts/graph-ic.js')
    script.
     $(document).ready(function() {
     $('#go').click(function() {
       $.ajax({
       type : 'POST',
       url  : '/submit',
       data : $('#stream_creds').serialize(),
       success : function(response) {
       $('#ContactForm').find('.form_result').html(response);
       }
       });
       });
       });
  body
    //
       container 
    .container
      .row
        .eight.columns
          img(src='images/dslogo.png')
          h4.subheader Interaction Volume
          .panel
            h4
             | Total interactions:
              span#countTotal
        .four.columns
          .panel.hide-on-phones
            form#stream_creds.nice
             input.input-text(type='text', placeholder='User Name', name='username')
             input.input-text(type='text', placeholder='API Key', name='apikey')
             input.input-text(type='text', placeholder='Stream ID', name='streamid')
           p
            a#go.nice.radius.blue.button.mobile.src-download(href='#') Subscribe
        .row
          .one.columns
          .ten.columns
            ul.nice.tabs-content
              li#nice1Tab.active             
               #interactions
               style(type='text/css')
                svg {
                 font: 10px sans-serif;
                }
                .line {
                fill: none;
                stroke: #333;
                stroke-width: 1.5px;
                }
                .axis path, .axis line {
                fill: none;
                stroke: #333;
                shape-rendering: crispEdges;
                }
                .text {
                fill: #333;
                }
                .data-line {
                stroke: #F00;
                stroke-width: 2;
                fill: none;
                stroke-dasharray: 0;
                } 
        //
           container