Nanananananananana.. Pat Man!

    jhp-serve

    1.0.2 • Public • Published

    What is this?

    JavaScript template strings work pretty elegantly for HTML rendering, but setting up and working on a JavaScript web server, while fairly simple, doesn't quite match the delightful simplicity of doing the same with PHP.

    This project aims to recreate that PHP experience, in JavaScript.

    Usage

    Running the server

    npx jhp-serve ./my-proj  # Assumes you have Node/npm installed 

    Project structure

    Example:

    my-proj/
      index.html.js
      about.html.js
      contact.html.js
    
    // index.html.js
     
    module.exports = (req) =>
      `<h1>Hello!</h1>
       <p>
         Thanks for visiting the page at ${req.path}
       </p>`

    A jhp project is just a directory containing .html.js files and/or static files. .html.js files are analogous to .php files, in that each handles one route and (usually) renders one page. For both kinds of files, the route is the same as the subdirectory relative to the project root. You do not need to restart the server to test changes made to your .html.js files.

    Each .html.js file exports a single function which returns either an HTML string, or a Promise of an HTML string. The latter is useful if, for example, you need to query a database before rendering the HTML.

    Render functions are passed two optional arguments, req and res, which are the ExpressJS Request and Response objects. The response's content type has already been set to HTML, so that the common case of returning an HTML string doesn't have to mess with it. The request body is parsed as being "form-encoded", meaning it will work as expected for native HTML forms.

    Your .html.js files are just regular JavaScript files, so you can import libraries or do whatever additional logic you may want to do in them.

    A full example site can be found here: https://github.com/brundonsmith/jhp-example-site

    Tips

    Your JavaScript functions can construct their HTML strings in whatever way you choose, but for the most PHP-like experience I recommend using arrow functions with template string literals for basic cases.

    When it comes to syntax highlighting of the HTML itself, your mileage may vary depending on your editor. From a quick search it appears that Atom may have this built-in. VSCode at least has some great extensions that give the template strings first-class status as HTML code including syntax highlighting, formatting, autocomplete, etc. Here are a couple of them:

    If you plan on having additional server code, I recommend making your JHP site a subdirectory of your overall project, so that your server code and config files aren't served publicly on the web.

    Install

    npm i jhp-serve

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    4.74 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar