title: Setting up static assets paths, routing endpoints with koa and various middleares
body: <h2><strong>Question:</strong></h2>
  
  <ol>
  <li>How can I set up my static files so that both directories are visible to my <code>index.html</code>. </li>
  <li>How can I send my <code>index.html</code> when you hit the default route using koa-router vs. just a <code>.json</code> file when I make an AJAX Get request?</li>
  </ol>
  
  <p><strong>Requirements:</strong>  </p>
  
  <p><em>I need static directories to be visible in my apps <code>src/index.html</code></em></p>
  
  <ul>
  <li><code>node_modules</code> needs to be open for js libs.</li>
  <li><code>src/assets</code> needs to be open for images.</li>
  </ul>
  
  <p><em>I need a router for 2 purposes :</em></p>
  
  <ul>
  <li><p>1) serving up the initial <code>index.html</code></p></li>
  <li><p>2) CRUD endpoints to my DB.</p></li>
  </ul>
  
  <p>Notes: I'm totally willing to add/subtract any middleware.  But I would rather not change how I organize my directories.</p>
  
  <p><strong>Directory Structure:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/2grmG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2grmG.png" alt="directory structure"></a></p>
  
  <p><strong>Middleware:</strong></p>
  
  <ul>
  <li><a href="https://github.com/koajs/static" rel="nofollow noreferrer">koa-static</a>  // cant serve node_modules + src directory.</li>
  <li><a href="https://github.com/koajs/send" rel="nofollow noreferrer">koa-send</a>  // can send static files but then breaks koa-static</li>
  <li><a href="https://github.com/alexmingoia/koa-router" rel="nofollow noreferrer">koa-router</a> // cannot </li>
  </ul>
  
  <p><strong><code>app.js</code></strong></p>
  
  <pre><code>var serve = require('koa-static');
  var send = require('koa-send');
  var router = require('koa-router')();
  var koa = require('koa');
  var app = koa();
  
  
  // need this for client side packages.
  app.use(serve('./node_modules/'));
  
  // need this for client side images, video, audio etc.
  app.use(serve('./src/assets/'));
  
  // Will serve up the inital html until html5 routing takes over.
  router.get('/', function *(next) {
      // send up src/index.html
  });
  
  // will serve json open a socket
  router.get('/people', function *(next) {
    // send the people.json file
  });
  
  app.use(router.routes()).use(router.allowedMethods());
  
  // errors
  app.on('error', function(err, ctx){
    log.error('server error', err, ctx);
  });
  
  app.listen(3000);
  </code></pre>
  
  <p><strong><code>index.html</code></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Morningharwood&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;suchwow&lt;/h1&gt;
    &lt;img src="./assets/image1.png" alt="butts"&gt; &lt;!-- will 404 with routing --&gt;
  
    &lt;script src="./node_modules/gun/gun.js"&gt;&lt;/script&gt; &lt;!-- will always 404 --&gt;
    &lt;script&gt;
      var gun = Gun(options);
      console.log(gun);
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>