built in serve command

Author: thescientist13

package.json

@@ -18,7 +18,7 @@
     "clean:deps": "rimraf **/node_modules/**",
     "lint": "ls-lint && eslint \"*.js\" \"./packages/**/**/*.js\" \"./test/*.js\" \"./www/**/**/*.js\"",
     "build": "node . build",
-    "serve": "yarn build && cd ./public && npx http-server .",
+    "serve": "node . serve",
     "develop": "node . develop",
     "test": "export BROWSERSLIST_IGNORE_OLD_DATA=true && nyc mocha",
     "test:tdd": "yarn test --watch"

packages/cli/src/commands/build.js

@@ -2,7 +2,7 @@ const { execSync } = require('child_process');
 const fs = require('fs');
 const generateCompilation = require('../lifecycles/compile');
 const serializeBuild = require('../lifecycles/serialize');
-const { server } = require('../lifecycles/serve');
+const { devServer } = require('../lifecycles/serve');
 
 module.exports = runProductionBuild = async () => {
 
@@ -13,7 +13,7 @@ module.exports = runProductionBuild = async () => {
       const port = compilation.config.devServer.port;
       const outputDir = compilation.context.outputDir;
 
-      await server.listen(port);
+      devServer(compilation).listen(port);
 
       if (!fs.existsSync(outputDir)) {
         fs.mkdirSync(outputDir);

packages/cli/src/commands/serve.js

@@ -0,0 +1,20 @@
+const generateCompilation = require('../lifecycles/compile');
+const { prodServer } = require('../lifecycles/serve');
+
+module.exports = runProdServer = async () => {
+
+  return new Promise(async (resolve, reject) => {
+
+    try {
+      const compilation = await generateCompilation();
+      const port = 8080;
+      
+      prodServer(compilation).listen(port, () => {
+        console.info(`Started production test server at localhost:${port}`);
+      });
+    } catch (err) {
+      reject(err);
+    }
+
+  });
+};

packages/cli/src/index.js

@@ -10,6 +10,7 @@ process.setMaxListeners(0);
 const program = require('commander');
 const runProductionBuild = require('./commands/build');
 const runDevServer = require('./commands/develop');
+const runProdServer = require('./commands/serve');
 // const ejectConfigFiles = require('./tasks/eject');
 const greenwoodPackageJson = require('../package.json');
 
@@ -36,13 +37,21 @@ program
   .action((cmd) => {
     command = cmd._name;
   });
+
 program
   .command('develop')
   .description('Start a local development server.')
   .action((cmd) => {
     command = cmd._name;
   });
 
+program
+  .command('serve')
+  .description('View a production build locally with a basic web server.')
+  .action((cmd) => {
+    command = cmd._name;
+  });
+
 program
   .command('eject')
   .option('-a, --all', 'eject all configurations including babel, postcss, browserslistrc')
@@ -66,13 +75,20 @@ const run = async() => {
 
     switch (command) {
 
-      case 'build':        
+      case 'build':   
         await runProductionBuild();
 
         break;
       case 'develop':
         await runDevServer();
 
+        break;
+      case 'serve':
+        process.env.__GWD_COMMAND__ = 'build';
+        
+        await runProductionBuild();
+        await runProdServer();
+
         break;
         // TODO
         // case 'eject'

packages/cli/src/lifecycles/serve.js

@@ -19,7 +19,7 @@ function getDevServer(compilation) {
   const { userWorkspace, scratchDir } = context;
   const app = new Koa();
 
-  // TODO export this an async function
+  // TODO use url.endsWith!!
   app.use(async ctx => {
     // console.debug('URL', ctx.request.url);
 
@@ -32,7 +32,6 @@ function getDevServer(compilation) {
 
     // make sure this only happens for "pages", nor partials or fixtures, templates, et)
     if (ctx.request.url.indexOf('.html') >= 0) {
-      // TODO get this stuff from compilation
       let title = config.title;
       const metaOutletContent = config.meta.map(item => {
         let metaHtml = '';
@@ -250,6 +249,7 @@ function getDevServer(compilation) {
       }
     }
 
+    // TODO break up into distinct font / icons / svg handlers, not related to assets/
     if (ctx.request.url.indexOf('assets/') >= 0 && ctx.request.url.indexOf('.css') < 0) {
       const assetPath = path.join(userWorkspace, ctx.request.url);
       const ext = path.extname(assetPath);
@@ -285,6 +285,75 @@ function getDevServer(compilation) {
   return app;
 }
 
+function getProdServer(compilation) {
+  const app = new Koa();
+
+  app.use(async ctx => {
+    // console.debug('URL', ctx.request.url);
+    const { outputDir } = compilation.context;
+
+    if (ctx.request.url.endsWith('/')) {
+      ctx.redirect(`http://localhost:8080${ctx.request.url}index.html`);
+    }
+
+    if (ctx.request.url.endsWith('.html')) {
+      const contents = await fsp.readFile(path.join(outputDir, ctx.request.url), 'utf-8');
+
+      ctx.set('Content-Type', 'text/html');
+      ctx.body = contents;
+    }
+
+    if (ctx.request.url.endsWith('.js')) {
+      const contents = await fsp.readFile(path.join(outputDir, ctx.request.url), 'utf-8');
+
+      ctx.set('Content-Type', 'text/javascript');
+      ctx.body = contents;
+    }
+
+    if (ctx.request.url.endsWith('.css')) {
+      const contents = await fsp.readFile(path.join(outputDir, ctx.request.url), 'utf-8');
+
+      ctx.set('Content-Type', 'text/css');
+      ctx.body = contents;
+    }
+
+    // TODO break up into distinct font / icons / svg handlers, decouple from to assets/
+    if (ctx.request.url.indexOf('assets/')) {
+      const assetPath = path.join(outputDir, ctx.request.url);
+      const ext = path.extname(assetPath);
+      const type = ext === '.svg'
+        ? `${ext.replace('.', '')}+xml`
+        : ext.replace('.', '');
+
+      if (['.jpg', '.png', '.gif', '.svg'].includes(ext)) {
+        ctx.set('Content-Type', `image/${type}`);
+
+        if (ext === '.svg') {
+          ctx.body = await fsp.readFile(assetPath, 'utf-8');
+        } else {
+          ctx.body = await fsp.readFile(assetPath); 
+        }
+      } else if (['.woff2', '.woff', '.ttf'].includes(ext)) {
+        ctx.set('Content-Type', `font/${type}`);
+        ctx.body = await fsp.readFile(assetPath);
+      } else if (['.ico'].includes(ext)) {
+        ctx.set('Content-Type', `image/x-icon`);
+        ctx.body = await fsp.readFile(assetPath);
+      }
+    }
+
+    if (ctx.request.url.endsWith('.json')) {
+      const contents = await fsp.readFile(path.join(outputDir, 'graph.json'), 'utf-8');
+
+      ctx.set('Content-Type', 'application/json');
+      ctx.body = JSON.parse(contents);
+    }
+  });
+    
+  return app;
+}
+
 module.exports = {
-  devServer: getDevServer
+  devServer: getDevServer,
+  prodServer: getProdServer
 };