Clone

Overview

API2HTML is a dynamic web server that allows you to create sites by transforming API output into nice HTML. API2HTML retrieves the API responses for you and injects them into the views in a predictable way, allowing you to focus only on how to iterate it and surround it with HTML.

How API2HTML works?

To create a new site just define in a configuration .json file all the pages you want to serve (URL patterns) along with its associated view (template) and external API call where the data is (backend). In a nutshell you create a json file similar to this:

"pages":[
    {
    "URLPattern": "/posts/:post_id",
    "BackendURLPattern": "https://jsonplaceholder.typicode.com/posts/:post_id",
    "Template": "post",
    ...

API2HTML will take it from here and will serve pages like /post/23, calling the defined backend API and injecting the data in the post template. Your only work is to write a nice post template and associate it a little bit of styling.

API2HTML does server-side rendering meaning that is perfect to have a SEO site and maintaining only an API.

As you can see API2HTML is a simplification of the MVC model: You have the controller totally parametrized in the configuration file and the model is deducted from the API response and enriched with any fields you add in the extraconfiguration section.

This overview is a simplification of what API2HTML can do for you as the server can provide you with base layouts, multi-site generation, caching and other interesting features that make it very powerful.

What do I need to code/learn?

If you are familiar withHTML, you are almost ready to go!

API2HTML requires you to write the templates using the logic-less template engine mustache. If you are unfamiliar with mustache, don’t worry, there’s nothing much to learn and is not like learning any of the template engines you might be familiar with. For now, basically know that {{ Data }} is the object with the API response that you can access directly using a dot . separator to retrieve its fields. Example:

<h1>Products for sale in {{ Data.category }}</h1>
<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
    <tr>
{{#Data.products}}
    <tr>
        <td><a href="/product/{{name}}">{{title}}</a></td>
        <td>{{price.amount}} {{price.currency}}</td>
    </tr>
{{/Data.products}}

{{^Data.products}}
    <tr><td colspan="2">Sorry, there are no products in this category :(</td></tr>
{{/Data.products}}
</table>

Know more about mustache


Continue to Installation