CODEWITHSUNDEEP
node.jstemplatesnginx
enator
enator

Reputation: 2599

Can we use NGINX as webapp for template engine

I have a requirement for basic html template webapp such as:

http://localhost:3000/myapp?param1=hello&param2=John is called it should return text/html response which looks like this:

<html>
<body>
    <p>Nice to see you John. Platform greets you "hello".</p>
</body>
</html>

the name and greeting is templated from param. so template is something like this:

 <html>
 <body>
     <p>Nice to see you {{param1}}. Platform greets you "{{param2}}".</p>
 </body>
 </html>

I have currently done this in node server using express.js and then the server is exposed publicly via nginx.conf:

server {
    listen 80;
    # server_name example.com;

    location / {
        proxy_pass http://private_ip_address:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

I was wondering if this could be possible with some plugins or other configuration with bare nginx without hosting the node server on 3000 port.

Upvotes: 5

Views: 6234

Answers (2)

enator
enator

Reputation: 2599

I was able to solve this using only Nginx to program it using OpenResty's lua module.

The https://github.com/openresty/lua-nginx-module gives ability to program in nginx.conf, where one could use the existing lua libraries such as https://github.com/bungle/lua-resty-template for templating!

myapp.lua:

local template = require("resty.template")
local template_string = ngx.location.capture("/templates/greet.html")
template.render(template_string.body, {
    param1 = ngx.req.get_uri_args()["param1"],
    param2 = ngx.req.get_uri_args()["param2"]
})

greet.html:

<html>
<body>
     <p>Nice to see you {{param1}}. Platform greets you "{{param2}}".</p>
</body>
</html>

nginx.conf:

worker_processes  1;
error_log logs/error.log;
events {
    worker_connections 1024;
}
http {
    root ./;
    server {
        listen 8090;

    location /myapp {
        default_type text/html;
        content_by_lua_file ./lua/myapp.lua;
    }
}

content_by_lua_file is where the power of openresty comes.

I described the complete process here: https://yogin16.github.io/2018/03/04/nginx-template-engine/

Hopefully, someone would find this helpful.

Upvotes: 15

Daphoque
Daphoque

Reputation: 4678

You can't render file with nginx.

Just send the file with nginx and the rewrite directive then inside the file just include some javascript to replace text content with query parameters

Nginx conf :

    location / {
        rewrite ^ /static/index.html break;
    }

index.html:

<div>My content <span id="name"></span></div>
<script>



function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

document.getElementById("name").textContent = getParameterByName("foo"):

</script>

Upvotes: 3

Related Questions