How use Express as an API web server with custom document renderer as middleware?

Question

I have a code generator that I created, and I would like to have the ability to run it on the server. The generator uses pure native ECMA6 javascript to render HTML markup, but is transpiled to ES5 before runtime via Babel and WebPack.

I wish to leverage this on NodeJS, but without an entire rewrite if possible.

I have used Node with Express + EJS/Pug/HTML/JSX and some other frameworks, however, there is always middleware involved.

Here is the code I tried (runtime/transpiled version @ ES5):

var fs = require('fs');
var _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function (obj) {
    return typeof obj;
} : function (obj) {
    return obj && typeof Symbol === 'function' && obj.constructor === Symbol ? 'symbol' : typeof obj;
};
function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}
var JSML = function () {
'use strict';

  function JSML(stdIn) {
        _classCallCheck(this, JSML);
        this.output = '';
        this.parse(stdIn);
        return this.output;
    }
    JSML.prototype.generateAttributeKeyValueString = function generateAttributeKeyValueString(key, value) {
        return key + '=\'' + value + '\'';
    };
    JSML.prototype.camelCaseToDashes = function camelCaseToDashes(str) {
        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
    };
    JSML.prototype.generateDom = function generateDom(vNode) {
        var self = this, selfClosingTagNames = [
                'area',
                'base',
                'br',
                'col',
                'command',
                'embed',
                'hr',
                'img',
                'input',
                'keygen',
                'link',
                'meta',
                'param',
                'source',
                'track',
                'wbr'
            ], elmStart = '<' + vNode.elm, elmAttrs = '', elmEnd, elmContent;
        selfClosingTagNames.forEach(function (selfClosingTagName) {
            if (vNode.elm === selfClosingTagName)
                elmEnd = '';
            else
                elmEnd = '</' + vNode.elm + '>';
        });
        function parseInput(vNode, key) {
            if (!vNode.hasOwnProperty(key))
                return;
            var value = vNode[key], isActualInnerValueChildContents = key === 'inner' && typeof value === 'string', isChildrenContentArr = key === 'inner' && Array.isArray(value), isSingleChildContent = key === 'inner' && !isChildrenContentArr && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object', isAttributeKeyValuePair = key !== 'elm' && key !== 'inner';
            if (isActualInnerValueChildContents)
                elmContent = value;
            else if (isAttributeKeyValuePair)
                elmAttrs += self.generateAttributeKeyValueString(self.camelCaseToDashes(key), value);
            else if (isChildrenContentArr) {
                elmContent = '';
                value.forEach(function (subValue) {
                    elmContent += JSML.run(subValue).output;
                });
            } else if (isSingleChildContent)
                elmContent = JSML.run(value).output;
        }
      for (var key in vNode){
        if (vNode.hasOwnProperty(key)) parseInput(vNode, key);
      }
      
        elmStart += ' ' + elmAttrs + '>';
        if (elmContent)
            this.output = elmStart + elmContent + elmEnd;
        else
            this.output = elmStart + elmEnd;
    };
    JSML.prototype.parse = function parse(input) {
        var self = this;
        self.generateDom(input);
    };
    return JSML;
}();
JSML.run = function (appCode, target) {
    var defaultTarget = 'body', dom = new JSML(appCode);
    document.getElementsByTagName(target || defaultTarget)[0].innerHTML = dom.output;
    return dom;
};

fs.writeFile("index2.html", JSML.run({
   elm: 'img',
   src: 'http://placehold.it/50x50'
}, function(err) {
    if(err) {
        return console.log(err);
    }

    console.log("The file was saved!");
});

I keep getting "unexpected token ;" in generateView.js at like 98

The main idea is I need to run the JavaScript on my API server, generate the markup needed from my custom templating and data-binding platform in order to serve the content generated from my script to the web.

Thank you, I am open to any helpful suggestions.

What exactly is the problem? You want to run a node webserver, there is no end of tutorials out there. Have you looked? Have you tried something? You want to run the above code under node. What happens when you do? What error messages do you get? What have you done to try to resolve them? — Quentin, Aug 02 '16 at 23:33
I have written several node applications, just as stated using expressjs and other middleware... they all use Jade and EJS. I want to use raw javascript ES6. I am building my own middleware, I need to know how to serve what is generated by it. Here is the link to my repo https://github.com/nicholasmabrams/JSML . It is what generates the code. It works great on the clientside however I need to make it run on node so I can have the choice of rendering on the server or client with it. — AlphaG33k, Aug 02 '16 at 23:39
your attempted code has more than one error - line 4, col 1, Expected an assignment or function call and instead saw an expression. line 5, col 70, Invalid typeof value 'symbol' line 49, col 28, Expected an assignment or function call and instead saw an expression. line 98, col 3, Expected ')' and instead saw ';'. line 98, col 4, Missing semicolon. — Jaromanda X, Aug 03 '16 at 00:18
the main issue is a missing `)` before the last semi colon ... the other issues are things like using `===` where it looks like you should use `=`, and some are not errors, just jshint being stupid — Jaromanda X, Aug 03 '16 at 00:22
Sorry yes I did correct all JS hint errors but it still complaining :( thanks for the help — AlphaG33k, Aug 03 '16 at 00:24
I see - you're expecting a DOM - nodejs doesn't have one of those — Jaromanda X, Aug 03 '16 at 00:27
Where am I expecting DOM? No the variable is meant to say its the final out put and what the DOM will be. Bad naming No real DOM methods should be used in there — AlphaG33k, Aug 03 '16 at 00:28
you are expecting a DOM at line 84 - `document.getElementByTagName` — Jaromanda X, Aug 03 '16 at 00:30

Stan Kondrat · Accepted Answer · 2016-08-03T00:38:58.407

0

If I right understand, just put your code to js file, for example script.js. And run node script.js

Maybe yout have to wrap your class to module, this is good point where start learn https://nodejs.org/api/modules.html

Or if you want server, try Express js:

const express = require('express');
const app = express();

const JSML = express('./JSML'); // <--- your module
let jsml = newJSML();

app.get('/home', function(req, res){
  res.send(jsml.run());
});

app.listen(80);

edited Aug 03 '16 at 00:38

answered Aug 02 '16 at 23:15

Stan Kondrat

147
1
7

Well, the most important part is serving the content up. Lets say 172.0.0.10/home displays the output of my generator – AlphaG33k Aug 02 '16 at 23:17
I would like to use NodeJS directly as a server – AlphaG33k Aug 02 '16 at 23:21
but you need change `run()` method, because it reference to webbrowser `document.querySelectorAll` – Stan Kondrat Aug 03 '16 at 00:41
Or maybe you only need create index.html, include this file, and serve static http-server? :-) – Stan Kondrat Aug 03 '16 at 00:43
Yes you are right, thats what I ended up doing – AlphaG33k Aug 03 '16 at 00:44

How use Express as an API web server with custom document renderer as middleware?

1 Answers1