{"slug": "how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step", "title": "How to Render Web Pages with JavaScript and Caddy using AxonASP: Step-by-Step", "summary": "A developer demonstrates how to render server-side JavaScript pages natively within the Caddy web server using the AxonASP module. The zero-process architecture eliminates the need for FastCGI workers or reverse proxies, enabling secure dynamic services with automatic HTTPS.", "body_md": "Web development is constantly evolving, and sometimes the best way to move forward is to rethink how we serve our applications. If you are looking for a lightning-fast, zero-friction way to render server-side JavaScript pages natively within your web server, it is time to look at **AxonASP** integrated with the **Caddy web server**.\n\nWe are rewriting the future of server-side page rendering. By embedding the AxonASP runtime directly into Caddy, you get a powerful environment that executes server-side JavaScript right inside your HTTP handlers. Add Caddy's automatic HTTPS, and you can launch secure, dynamic services in seconds.\n\nHere is a step-by-step guide on how to create a JavaScript-powered web page and launch it immediately using Caddy and AxonASP.\n\nAxonASP provides a custom Caddy module that handles everything internally. This **Zero-Process Architecture** means you don't have to configure FastCGI workers, reverse proxies, or external daemons.\n\nYou have two simple options to get the server:\n\nThe fastest way to start is to download a pre-compiled Caddy executable containing the embedded AxonASP module directly from the AxonASP repository release channel. Grab the version for your OS (Windows, Linux, or macOS) and place it in your system's binary path.\n\nIf you prefer compiling it yourself or want to add other Caddy plugins, you can use `xcaddy`\n\n(the official Caddy builder tool).\n\n```\n# Install xcaddy\ngo install github.com/caddyserver/xcaddy/cmd/xcaddy@latest\n\n# Build Caddy with the AxonASP module\nxcaddy build --with g3pix.com.br/axonasp/caddy\n```\n\nCaddy's configuration is famously simple. To enable AxonASP processing, you just need to add the `axonasp`\n\ndirective inside a `route`\n\nblock alongside the standard `file_server`\n\n.\n\nCreate a file named `Caddyfile`\n\nin your project folder with the following configuration:\n\n```\n:8080 {\n    root * ./www\n    route {\n        axonasp {\n            site_name My_Web_site\n            global_asa_path ./www/global.asa\n        }\n        file_server\n    }\n}\n```\n\nThis tells Caddy to serve files from the `./www`\n\ndirectory and route applicable pages through the AxonASP execution engine.\n\nNow for the fun part. Let's create a dynamic web page using server-side JavaScript.\n\nCreate a folder named `www`\n\nin the same directory as your Caddyfile. Inside that folder, create a file named `default.asp`\n\n.\n\nAdd the following code to `default.asp`\n\n:\n\n``` js\n<%@Language=\"JavaScript\"%>\n<%\n    // Server-side JavaScript logic\n    var serverTime = new Date();\n    var engine = Request.ServerVariables(\"SERVER_SOFTWARE\");\n    var visitorIP = Request.ServerVariables(\"REMOTE_ADDR\");\n%>\n<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <title>AxonASP JavaScript Rendering</title>\n    <style>\n        body { font-family: system-ui, sans-serif; background: #f4f4f9; color: #333; padding: 2rem; }\n        .card { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; }\n        h1 { color: #0056b3; }\n        .metric { font-weight: bold; color: #e83e8c; }\n    </style>\n</head>\n<body>\n    <div class=\"card\">\n        <h1>Rendered Natively with JS! 🚀</h1>\n        <p>This page was generated completely server-side using JavaScript inside Caddy.</p>\n        <hr>\n        <ul>\n            <li><strong>Current Server Time:</strong> <span class=\"metric\"><%=serverTime.toUTCString()%></span></li>\n            <li><strong>Powered by:</strong> <span class=\"metric\"><%=engine%></span></li>\n            <li><strong>Your IP:</strong> <span class=\"metric\"><%=visitorIP %></span></li>\n        </ul>\n    </div>\n</body>\n</html>\n```\n\nBy declaring `<%@Language=\"JavaScript\"%>`\n\nat the top, AxonASP knows to evaluate the server-side blocks using its JavaScript engine before sending the final HTML to the client.\n\nWith your `Caddyfile`\n\nand your `default.asp`\n\npage ready, it is time to go live.\n\nOpen your terminal, navigate to the folder containing your `Caddyfile`\n\n, and run:\n\n```\ncaddy run\n```\n\nOpen your browser and navigate to `http://localhost:8080`\n\n.\n\nYou will immediately see your page, dynamically rendered by JavaScript on the server. Because AxonASP integrates deeply with Caddy, it natively respects standard index files (like `default.asp`\n\n), meaning you don't even need to type the file name in the URL.\n\nYou just spun up a fully functional server-side JavaScript rendering engine in less than a minute. This setup scales beautifully, natively supports Caddy's automatic HTTPS for production domains, and gives you a rapid, highly performant environment for building the next generation of web services.\n\nHave you built any dynamic services with Caddy recently? Drop your thoughts in the comments below!", "url": "https://wpnews.pro/news/how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step", "canonical_source": "https://dev.to/lucas_guimaraes/how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step-4i2d", "published_at": "2026-07-26 23:10:52+00:00", "updated_at": "2026-07-27 00:01:36.517898+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["AxonASP", "Caddy", "Caddyfile"], "alternates": {"html": "https://wpnews.pro/news/how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step", "markdown": "https://wpnews.pro/news/how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step.md", "text": "https://wpnews.pro/news/how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step.txt", "jsonld": "https://wpnews.pro/news/how-to-render-web-pages-with-javascript-and-caddy-using-axonasp-step-by-step.jsonld"}}