nodejs-html v0.1.3
nodejs-html
For rapid prototyping & building of webpages or apps in as few lines as possible.
nodejs-html is small lib with a set of convenience functions to get you quickly going with a functional HTML/CSS/JS page or app - including one-liners for generating an HTML skeleton, starting an Express server, serving a static directory, and building a client-side bundle (compile or watch)
The watch & compile functions are pre-configured to accommodate using ES6 module import + CommonJS require formats at the same time - such that you can use either format including both formats in the same JS file if you so please.
usage
npm install nodejs-html//In my nodejs file ie: server.js
const no = require('nodejs-html')api
htmlno.html(css,body,script)
Outputs an HTML skeleton string. Optionally provide CSS (in the form of a raw CSS string), HTML content to go in the body, or a script filename. See template
no.html(null,`<h1>hello world</h1>`, 'client.bundle.js')
// <html><head><style></style></head><body>
// <h1>hello world</h1>
// <script src="client.bundle.js"></script>
// </body></html> makeIndexno.makeIndex(path,html)
Writes an HTML file to the filesystem. Provide an optional path (defaults to cwd + 'index.html') and html (string) If html is not provided it will write the default no.html() skeleton.
let html = no.html(null,`<h1>hello world</h1>`, 'client.bundle.js')
no.makeIndex(null,html)
// outputs index.html to cwd with the html output from previous exampleserverno.server(port)
Creates and returns an Express web server on optional port (default 8000).
no.server(8555)
// Express server created at: http://localhost:8555staticno.static(route, directory)
Serves a given filesystem directory with optional route. Run this after no.server()
Both params are optional, will use '/' and your cwd by default.
no.server()
no.static()
//^ all files in your cwd now being served by Express
no.static('/assets', __dirname + '/assets')
//^ or call on specific directoriesindexno.index(html, port)
Serves the given html (string) at optional port. If a server is not already running it will be created.
no.index( no.html(null,null,'myscript.js') )
// http://localhost:8000/ now serving a blank HTML page + <script src="myscript.js">indexno.css(html, port)
Returns a string of MassCSS
no.html(no.css,`<h1 class="green">Now we can use CSS</h1>`))
// > HTML skeleton with the above h1 tag in the <body> and MassCSS loaded into the <head><style> tagjqueryno.jquery()
Let's you run jquery on a given string of HTML, useful in conjunction with no.html() for quickly hacking in some content in your HTML skeleton. A wrapper for cheerio.load
let $ = no.jquery( no.html() )
$('body').append( `<h1>hello world</h1>` )
$('h1').html( `<h1>hello flat world</h1>` )
$.html()
// <html><head></head>
// <body>
// <h1>hello flat world</h1>
// </body></html>compileno.compile(watch, compress, clientJsName, bundleName)
Runs browserify with a preconfigured set of transforms including stringify and babelify (and Babel presets,plugins, and additional pre-configuration).
Supply booleans as first params to indicate whether to watch or compress the bundle, and specify a clientJsName (ie- the script you want bundled) as well as output bundle name (if the latter two params are not provided will default to client.js and client.bundle.js)
This 'holy grail' build configuration if all goes well should allow you to use ES6 imports and Node/CommonJS require calls interchangeably. And allows you to require .html, .css, and .svg extensions.
Note: see compiling for potential prerequisite
let html = no.html(null,null, 'client.bundle.js')
no.makeIndex(html) //< writes the html to disk
no.compile(false,true)
//> outputs a compressed bundle of a file called `client.js` in your cwd watchno.watch(clientJsName, bundleName)
Alias for no.compile(true,false) this will watch the optional clientJsName and output bundleName (defaults to client.js and client.bundle.js)
Note: see compiling for potential prerequisite
let html = no.html(null,null, 'client.bundle.js')
no.watch(null, '/public/client.bundle.js')
//> creates a bundle of a file named `client.js` and ouptuts to /public/client.bundle.js
// rebundles anytime you make changes to client.js including any changes to modules within it loaded via import or requireAlso note: this particular build configuration makes for a rather system intensive process, especially when watching.
compiling/watching extra step
To use the no.compile() and/or no.watch() functions you may need to install the following dependencies (copy/paste and run in your local project):
npm install @babel/core@7.5.5 @babel/preset-env@7.5.5 @babel/runtime@7.11.2 @babel/plugin-transform-runtime@7.11.5 @babel/plugin-external-helpers@7.10.4 babelify@10.0.0 --saveDevThis is necessary to give Browserify & Babel context within your project's local directory (ie- so it can watch/re-compile as any files in your project change).
MIT