title: not able to load static files using express
body: <p>her is my app.js which is confugaration file of express.js</p>
  
  <p>&lt;</p>
  
  <pre><code>var express = require('express')
    , argv = require("optimist").argv
    , fs = require("fs")
    , hbs = require("hbs")
    , WatsonClient = require("watson-js");
  
  
  var clientId        = argv.key || '5b1cb9a9c097e1100eeeebaf66117265'
    , clientSecret    = argv.secret || '01b8417ac6872450'
    , appPort         = argv.port || '3000';
  
  
  function cp(source, destination, callback) {
  
      // Read a buffer from `source`
      fs.readFile(source, function(err, buf) {
          if (err) { return callback(err); }
  
          // Write that buffer to the new file `destination`
          fs.writeFile(destination, buf, callback);
      })
  }
  
  
  var Watson = new WatsonClient.Watson({ client_id: clientId, client_secret: clientSecret });
  
  
  var app = express();
  
  
  app.configure(function() {
      console.log('inside function');
      // Set the location of views and type of view engine
      app.set('views',__dirname + '/app/views');
          console.log(__dirname + '/app/views');
      app.set('view engine', 'html');
      app.engine('html', require('hbs').__express);
         console.log('after view');
  
      // Set up a standard Express configuration
      app.use(express.logger());
      app.use(express.cookieParser());
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(express.session({
          secret: "This is an example."
      }));
      app.use(app.router);
      console.log('before public');
      // Set the location of static assets
      app.use(express.static(__dirname+'/public'));
          console.log(__dirname+'/public');
          console.log('after public');
  
  });
  
  
  app.get('/', function(req, res) {
      res.render('layout');
  });
  
  
  app.post('/upload', function(req, res) {
  
  
      cp(req.files.upload_file.filename.path, __dirname + req.files.upload_file.filename.name, function() {
  
  
          res.send({ saved: 'saved' });
      });
  });
  
  app.post('/speechToText', function(req, res) {
  
      // Traditionally, you would store this access token somewhere safe like a database. For the purposes of this example, we're going to generate a new one on the first request and store it in the session so we don't have to deal with a database or tracking expiry and refreshing access tokens.
      if(!req.session.accessToken) {
  
          // !AT&amp;T API: Get Access Token
          Watson.getAccessToken(function(err, accessToken) {
              if(err) {
                  // Handle an error getting an access token
                  res.send(err);
                  return;
              } else {
                  req.session.accessToken = accessToken;
  
                  token.
                  Watson.speechToText(__dirname + '/public/audio/audio.wav', req.session.accessToken, function(err, reply) {
                      if(err) {
  
                          res.send(err);
                          return;
                      }
  
                      res.send(reply);
                      return;
                  });
              }
          });
      } else {
  
          Watson.speechToText(__dirname + '/public/audio/audio.wav', req.session.accessToken, function(err, reply) {
              if(err) {
  
                  res.send(err);
                  return;
              }
  
              return;
          });
      }
  });
  
  
  app.listen(appPort);
  console.log('AT&amp;T Speech API Basic Walkthrough App started on Port ' + appPort + '.');
  </code></pre>
  
  <p>// !USAGE: node app.js --key= --secret= --port=</p>
  
  <p>// !SETUP: Dependencies
  /*
   * Express:     Minimal web application framework
   * FS:          Node.js File System module
   * Optimist:    Lightweight option parsing
   * HBS:         Express View Engine wrapper for Handlebars
   * Watson.js:   Simple API Wrapper for the AT&amp;T Speech API
   */</p>
  
  <p>and my layout.html is</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;AT&amp;amp;T Speech API Example: Basic Walkthrough&lt;/title&gt;
      &lt;meta name="description" content="Application for the AT&amp;T Speech API Deep Dive Presentation at DevLab 2012"&gt;
      &lt;meta name="author" content="Michael Owens"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="public/styles/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="public/styles/example-basic.css"&gt;
      &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
       &lt;a  onclick="Recorder.playBack('audio');" href="javascript:void(0);" title="Play"&gt;
                                               Play
                                           &lt;/a&gt; 
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="span4"&gt;
              &lt;h2 id="progress-title"&gt;Progress (Step &lt;span id="progress-step"&gt;1&lt;/span&gt; of 5)&lt;/h2&gt;
              &lt;div id="progress-indicator" class="progress progress-striped"&gt;
                  &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;ol class="progress-list"&gt;
                  &lt;li id="progress-01" class="active"&gt;Access User's Microphone&lt;/li&gt;
                  &lt;li id="progress-02"&gt;Record Audio from Mic&lt;/li&gt;
                  &lt;li id="progress-03"&gt;Save Audio to File&lt;/li&gt;
                  &lt;li id="progress-04"&gt;POST File to AT&amp;amp;T Speech API&lt;/li&gt;
                  &lt;li id="progress-05"&gt;Receive Results from AT&amp;amp;T Speech API&lt;/li&gt;
              &lt;/ol&gt;
              &lt;div&gt;
                  &lt;a href="/" class="btn"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt; Start Over&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span8"&gt;
              &lt;h2&gt;Current Status&lt;/h2&gt;
              &lt;div id="status-mic" class="alert alert-info"&gt;
                  Audio Status: &lt;strong&gt;waiting&lt;/strong&gt;
              &lt;/div&gt;
              &lt;div id="status-upload" class="alert alert-info"&gt;
                  File Status: &lt;strong&gt;waiting&lt;/strong&gt;
              &lt;/div&gt;
              &lt;div id="control_panel"&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;button id="button-connect" class="btn btn-large btn-success"&gt;&lt;i class="icon-off icon-white"&gt;&lt;/i&gt; &lt;span class="action"&gt;Connect&lt;/span&gt;&lt;/button&gt;
                      &lt;button id="button-recorder" class="btn btn-large" disabled="disabled"&gt;&lt;i class="icon-music"&gt;&lt;/i&gt; &lt;span class="action"&gt;Record&lt;/span&gt;&lt;/button&gt;
                      &lt;span id="button-save" class="btn"&gt;
                          &lt;button disabled="disabled" class="btn btn-large"&gt;&lt;i class="icon-download-alt"&gt;&lt;/i&gt; &lt;span class="action"&gt;Save&lt;/span&gt;&lt;/button&gt;
                          &lt;span id="save_button"&gt;&lt;span id="flashcontent"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;/span&gt;
                      &lt;button id="button-transcribe" class="btn btn-large" disabled="disabled"&gt;&lt;i class="icon-share-alt"&gt;&lt;/i&gt; &lt;span class="action"&gt;Transcribe&lt;/span&gt;&lt;/button&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="transcribe-container"&gt;
                  &lt;h2&gt;Speech API Response&lt;/h2&gt;
                  &lt;div id="transcribe-response"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;form id="uploadForm" name="uploadForm" action="/upload" &gt;
          &lt;input name="authenticity_token" value="xxxxx" type="hidden"&gt;
          &lt;input name="upload_file[parent_id]" value="1" type="hidden"&gt;
          &lt;input name="format" value="json" type="hidden"&gt;
      &lt;/form&gt;
      &lt;script type="text/javascript" src="public/scripts/swfobject.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/scripts/example-basic.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When i run app.js on node in cmd, it gives me error of not able to load static files  i.e js and css files but it load view part i.e layout.html</p>
  
  <p>exact errors is</p>
  
  <p>&lt;</p>
  
  <p>GET h://ip:3000/public/scripts/swfobject.js 404 (Not Found) </p>
  
  <p>GET h://ip:3000/public/scripts/example-basic.js 404 (Not Found) </p>
  
  <p>GET h://ip:3000/public/styles/bootstrap.css 404 (Not Found) </p>
  
  <p>GET h://ip:3000/public/styles/example-basic.css 404 (Not Found) </p>
  
  <p>></p>
  
  <p>ip -localhost
  h -https</p>
  
  <p>my foldr structute is</p>
  
  <p>example(parent folder)</p>
  
  <p>subfolders</p>
  
  <p>app/views/layout.html(code is given above)</p>
  
  <p>public/scripts/js files</p>
  
  <p>public/styles/css files</p>
  
  <p>app.js(code is given above)</p>
  
  <p>all the above subfolder(app,public,app.js) at the same level</p>
  
  <p>so please suggest me some thing</p>