index.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <!DOCTYPE html>
  2. <html lang="en" data-base-path="&#x2F;cpp-httplib">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Static File Server - cpp-httplib</title>
  7. <link rel="icon" type="image/svg+xml" href="&#x2F;cpp-httplib/favicon.svg">
  8. <link rel="stylesheet" href="&#x2F;cpp-httplib/css/main.css">
  9. <script>
  10. (function() {
  11. var t = localStorage.getItem('preferred-theme');
  12. if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
  13. if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
  14. })();
  15. </script>
  16. </head>
  17. <body>
  18. <header class="header">
  19. <div class="header-inner">
  20. <a href="&#x2F;cpp-httplib&#x2F;en/" class="header-title">cpp-httplib <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v0.36.0</span></a>
  21. <div class="header-spacer"></div>
  22. <nav class="header-nav">
  23. <a href="&#x2F;cpp-httplib&#x2F;en/">
  24. <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
  25. Home
  26. </a>
  27. <a href="&#x2F;cpp-httplib&#x2F;en/tour&#x2F;">
  28. <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
  29. Tour
  30. </a>
  31. <a href="https:&#x2F;&#x2F;github.com&#x2F;yhirose&#x2F;cpp-httplib" aria-label="GitHub">
  32. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
  33. GitHub
  34. </a>
  35. </nav>
  36. <div class="header-tools">
  37. <button class="search-btn" aria-label="Search (⌘K)">
  38. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  39. </button>
  40. <button class="theme-toggle" aria-label="Toggle theme"></button>
  41. <div class="lang-selector">
  42. <button class="lang-btn" aria-label="Language">
  43. <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
  44. EN
  45. </button>
  46. <ul class="lang-popup">
  47. <li><a href="#" data-lang="en">EN</a></li>
  48. <li><a href="#" data-lang="ja">JA</a></li>
  49. </ul>
  50. </div>
  51. </div>
  52. <button class="sidebar-toggle" aria-label="Menu">&#9776;</button>
  53. </div>
  54. </header>
  55. <div class="layout has-sidebar">
  56. <aside class="sidebar">
  57. <nav class="sidebar-nav">
  58. <div class="nav-section">
  59. <a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;" class="nav-section-title active">A Tour of cpp-httplib</a>
  60. <ul class="nav-list">
  61. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;01-getting-started&#x2F;" class="">Getting Started</a></li>
  62. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;02-basic-client&#x2F;" class="">Basic Client</a></li>
  63. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;03-basic-server&#x2F;" class="">Basic Server</a></li>
  64. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;04-static-file-server&#x2F;" class="active">Static File Server</a></li>
  65. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;05-tls-setup&#x2F;" class="">TLS Setup</a></li>
  66. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;06-https-client&#x2F;" class="">HTTPS Client</a></li>
  67. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;07-https-server&#x2F;" class="">HTTPS Server</a></li>
  68. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;08-websocket&#x2F;" class="">WebSocket</a></li>
  69. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;09-whats-next&#x2F;" class="">What&#x27;s Next</a></li>
  70. </ul>
  71. </div>
  72. </nav>
  73. </aside>
  74. <main class="content">
  75. <article>
  76. <h1>Static File Server</h1>
  77. <p>cpp-httplib can serve static files too — HTML, CSS, images, you name it. No complicated configuration required. One call to <code>set_mount_point()</code> is all it takes.</p>
  78. <h2>The basics of set_mount_point</h2>
  79. <p>Let's jump right in. <code>set_mount_point()</code> maps a URL path to a local directory.</p>
  80. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  81. <span style="color:#b48ead;">#include </span><span style="color:#c0c5ce;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#c0c5ce;">&quot;
  82. </span><span style="color:#b48ead;">#include </span><span style="color:#c0c5ce;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#c0c5ce;">&gt;
  83. </span><span style="color:#c0c5ce;">
  84. </span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#c0c5ce;">() {
  85. </span><span style="color:#c0c5ce;"> httplib::Server svr;
  86. </span><span style="color:#c0c5ce;">
  87. </span><span style="color:#c0c5ce;"> svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">./html</span><span style="color:#c0c5ce;">&quot;);
  88. </span><span style="color:#c0c5ce;">
  89. </span><span style="color:#c0c5ce;"> std::cout &lt;&lt; &quot;</span><span style="color:#a3be8c;">Listening on port 8080...</span><span style="color:#c0c5ce;">&quot; &lt;&lt; std::endl;
  90. </span><span style="color:#c0c5ce;"> svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#c0c5ce;">&quot;, </span><span style="color:#d08770;">8080</span><span style="color:#c0c5ce;">);
  91. </span><span style="color:#c0c5ce;">}
  92. </span></pre>
  93. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  94. <span style="font-weight:bold;color:#a71d5d;">#include </span><span style="color:#183691;">&quot;httplib.h&quot;
  95. </span><span style="font-weight:bold;color:#a71d5d;">#include </span><span style="color:#183691;">&lt;iostream&gt;
  96. </span><span style="color:#323232;">
  97. </span><span style="font-weight:bold;color:#a71d5d;">int </span><span style="font-weight:bold;color:#795da3;">main</span><span style="color:#323232;">() {
  98. </span><span style="color:#323232;"> httplib::Server svr;
  99. </span><span style="color:#323232;">
  100. </span><span style="color:#323232;"> svr.set_mount_point(</span><span style="color:#183691;">&quot;/&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;./html&quot;</span><span style="color:#323232;">);
  101. </span><span style="color:#323232;">
  102. </span><span style="color:#323232;"> std::cout </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt; </span><span style="color:#183691;">&quot;Listening on port 8080...&quot; </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> std::endl;
  103. </span><span style="color:#323232;"> svr.listen(</span><span style="color:#183691;">&quot;0.0.0.0&quot;</span><span style="color:#323232;">, </span><span style="color:#0086b3;">8080</span><span style="color:#323232;">);
  104. </span><span style="color:#323232;">}
  105. </span></pre>
  106. </div></div>
  107. <p>The first argument is the URL mount point. The second is the local directory path. In this example, requests to <code>/</code> are served from the <code>./html</code> directory.</p>
  108. <p>Let's try it out. First, create an <code>html</code> directory and add an <code>index.html</code> file.</p>
  109. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  110. <span style="color:#8fa1b3;">mkdir</span><span style="color:#c0c5ce;"> html
  111. </span></pre>
  112. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  113. <span style="color:#323232;">mkdir html
  114. </span></pre>
  115. </div></div><div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  116. <span style="color:#c0c5ce;">&lt;!</span><span style="color:#bf616a;">DOCTYPE</span><span style="color:#c0c5ce;"> html&gt;
  117. </span><span style="color:#c0c5ce;">&lt;</span><span style="color:#bf616a;">html</span><span style="color:#c0c5ce;">&gt;
  118. </span><span style="color:#c0c5ce;">&lt;</span><span style="color:#bf616a;">head</span><span style="color:#c0c5ce;">&gt;&lt;</span><span style="color:#bf616a;">title</span><span style="color:#c0c5ce;">&gt;My Page&lt;/</span><span style="color:#bf616a;">title</span><span style="color:#c0c5ce;">&gt;&lt;/</span><span style="color:#bf616a;">head</span><span style="color:#c0c5ce;">&gt;
  119. </span><span style="color:#c0c5ce;">&lt;</span><span style="color:#bf616a;">body</span><span style="color:#c0c5ce;">&gt;
  120. </span><span style="color:#c0c5ce;"> &lt;</span><span style="color:#bf616a;">h1</span><span style="color:#c0c5ce;">&gt;Hello from cpp-httplib!&lt;/</span><span style="color:#bf616a;">h1</span><span style="color:#c0c5ce;">&gt;
  121. </span><span style="color:#c0c5ce;"> &lt;</span><span style="color:#bf616a;">p</span><span style="color:#c0c5ce;">&gt;This is a static file.&lt;/</span><span style="color:#bf616a;">p</span><span style="color:#c0c5ce;">&gt;
  122. </span><span style="color:#c0c5ce;">&lt;/</span><span style="color:#bf616a;">body</span><span style="color:#c0c5ce;">&gt;
  123. </span><span style="color:#c0c5ce;">&lt;/</span><span style="color:#bf616a;">html</span><span style="color:#c0c5ce;">&gt;
  124. </span></pre>
  125. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  126. <span style="color:#323232;">&lt;!</span><span style="color:#63a35c;">DOCTYPE</span><span style="color:#323232;"> html&gt;
  127. </span><span style="color:#323232;">&lt;</span><span style="color:#63a35c;">html</span><span style="color:#323232;">&gt;
  128. </span><span style="color:#323232;">&lt;</span><span style="color:#63a35c;">head</span><span style="color:#323232;">&gt;&lt;</span><span style="color:#63a35c;">title</span><span style="color:#323232;">&gt;My Page&lt;/</span><span style="color:#63a35c;">title</span><span style="color:#323232;">&gt;&lt;/</span><span style="color:#63a35c;">head</span><span style="color:#323232;">&gt;
  129. </span><span style="color:#323232;">&lt;</span><span style="color:#63a35c;">body</span><span style="color:#323232;">&gt;
  130. </span><span style="color:#323232;"> &lt;</span><span style="color:#63a35c;">h1</span><span style="color:#323232;">&gt;Hello from cpp-httplib!&lt;/</span><span style="color:#63a35c;">h1</span><span style="color:#323232;">&gt;
  131. </span><span style="color:#323232;"> &lt;</span><span style="color:#63a35c;">p</span><span style="color:#323232;">&gt;This is a static file.&lt;/</span><span style="color:#63a35c;">p</span><span style="color:#323232;">&gt;
  132. </span><span style="color:#323232;">&lt;/</span><span style="color:#63a35c;">body</span><span style="color:#323232;">&gt;
  133. </span><span style="color:#323232;">&lt;/</span><span style="color:#63a35c;">html</span><span style="color:#323232;">&gt;
  134. </span></pre>
  135. </div></div>
  136. <p>Compile and start the server.</p>
  137. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  138. <span style="color:#8fa1b3;">g++</span><span style="color:#bf616a;"> -std</span><span style="color:#c0c5ce;">=c++17</span><span style="color:#bf616a;"> -o</span><span style="color:#c0c5ce;"> server server.cpp</span><span style="color:#bf616a;"> -pthread
  139. </span><span style="color:#8fa1b3;">./server
  140. </span></pre>
  141. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  142. <span style="color:#323232;">g++ -std</span><span style="font-weight:bold;color:#a71d5d;">=</span><span style="color:#323232;">c++17 -o server server.cpp -pthread
  143. </span><span style="color:#323232;">./server
  144. </span></pre>
  145. </div></div>
  146. <p>Open <code>http://localhost:8080</code> in your browser. You should see the contents of <code>html/index.html</code>. Visiting <code>http://localhost:8080/index.html</code> returns the same page.</p>
  147. <p>You can also access it with the client code from the previous chapter, or with <code>curl</code>.</p>
  148. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  149. <span style="color:#c0c5ce;">httplib::Client </span><span style="color:#8fa1b3;">cli</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">http://localhost:8080</span><span style="color:#c0c5ce;">&quot;);
  150. </span><span style="color:#b48ead;">auto</span><span style="color:#c0c5ce;"> res = cli.</span><span style="color:#8fa1b3;">Get</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#c0c5ce;">&quot;);
  151. </span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">(res) {
  152. </span><span style="color:#c0c5ce;"> std::cout &lt;&lt; res-&gt;</span><span style="color:#bf616a;">body </span><span style="color:#c0c5ce;">&lt;&lt; std::endl; </span><span style="color:#65737e;">// HTML is displayed
  153. </span><span style="color:#c0c5ce;">}
  154. </span></pre>
  155. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  156. <span style="color:#323232;">httplib::Client </span><span style="font-weight:bold;color:#795da3;">cli</span><span style="color:#323232;">(</span><span style="color:#183691;">&quot;http://localhost:8080&quot;</span><span style="color:#323232;">);
  157. </span><span style="font-weight:bold;color:#a71d5d;">auto</span><span style="color:#323232;"> res </span><span style="font-weight:bold;color:#a71d5d;">=</span><span style="color:#323232;"> cli.Get(</span><span style="color:#183691;">&quot;/&quot;</span><span style="color:#323232;">);
  158. </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(res) {
  159. </span><span style="color:#323232;"> std::cout </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> res-&gt;body </span><span style="font-weight:bold;color:#a71d5d;">&lt;&lt;</span><span style="color:#323232;"> std::endl; </span><span style="font-style:italic;color:#969896;">// HTML is displayed
  160. </span><span style="color:#323232;">}
  161. </span></pre>
  162. </div></div><div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  163. <span style="color:#8fa1b3;">curl</span><span style="color:#c0c5ce;"> http://localhost:8080
  164. </span></pre>
  165. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  166. <span style="color:#323232;">curl http://localhost:8080
  167. </span></pre>
  168. </div></div>
  169. <h2>Multiple mount points</h2>
  170. <p>You can call <code>set_mount_point()</code> as many times as you like. Each URL path gets its own directory.</p>
  171. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  172. <span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">./public</span><span style="color:#c0c5ce;">&quot;);
  173. </span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/assets</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">./static/assets</span><span style="color:#c0c5ce;">&quot;);
  174. </span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/docs</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">./documentation</span><span style="color:#c0c5ce;">&quot;);
  175. </span></pre>
  176. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  177. <span style="color:#323232;">svr.set_mount_point(</span><span style="color:#183691;">&quot;/&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;./public&quot;</span><span style="color:#323232;">);
  178. </span><span style="color:#323232;">svr.set_mount_point(</span><span style="color:#183691;">&quot;/assets&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;./static/assets&quot;</span><span style="color:#323232;">);
  179. </span><span style="color:#323232;">svr.set_mount_point(</span><span style="color:#183691;">&quot;/docs&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;./documentation&quot;</span><span style="color:#323232;">);
  180. </span></pre>
  181. </div></div>
  182. <p>A request to <code>/assets/style.css</code> serves <code>./static/assets/style.css</code>. A request to <code>/docs/guide.html</code> serves <code>./documentation/guide.html</code>.</p>
  183. <h2>Combining with handlers</h2>
  184. <p>Static file serving and routing handlers — the kind you learned about in the previous chapter — work side by side.</p>
  185. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  186. <span style="color:#c0c5ce;">httplib::Server svr;
  187. </span><span style="color:#c0c5ce;">
  188. </span><span style="color:#65737e;">// API endpoint
  189. </span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">Get</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/api/hello</span><span style="color:#c0c5ce;">&quot;, [](</span><span style="color:#b48ead;">const auto </span><span style="color:#c0c5ce;">&amp;, </span><span style="color:#b48ead;">auto </span><span style="color:#c0c5ce;">&amp;res) {
  190. </span><span style="color:#c0c5ce;"> res.</span><span style="color:#8fa1b3;">set_content</span><span style="color:#c0c5ce;">(</span><span style="color:#b48ead;">R</span><span style="color:#c0c5ce;">&quot;(</span><span style="color:#a3be8c;">{&quot;message&quot;:&quot;Hello!&quot;}</span><span style="color:#c0c5ce;">)&quot;, &quot;</span><span style="color:#a3be8c;">application/json</span><span style="color:#c0c5ce;">&quot;);
  191. </span><span style="color:#c0c5ce;">});
  192. </span><span style="color:#c0c5ce;">
  193. </span><span style="color:#65737e;">// Static file serving
  194. </span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">./public</span><span style="color:#c0c5ce;">&quot;);
  195. </span><span style="color:#c0c5ce;">
  196. </span><span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#c0c5ce;">&quot;, </span><span style="color:#d08770;">8080</span><span style="color:#c0c5ce;">);
  197. </span></pre>
  198. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  199. <span style="color:#323232;">httplib::Server svr;
  200. </span><span style="color:#323232;">
  201. </span><span style="font-style:italic;color:#969896;">// API endpoint
  202. </span><span style="color:#323232;">svr.Get(</span><span style="color:#183691;">&quot;/api/hello&quot;</span><span style="color:#323232;">, [](</span><span style="font-weight:bold;color:#a71d5d;">const auto &amp;</span><span style="color:#323232;">, </span><span style="font-weight:bold;color:#a71d5d;">auto &amp;</span><span style="color:#323232;">res) {
  203. </span><span style="color:#323232;"> res.set_content(</span><span style="font-weight:bold;color:#a71d5d;">R</span><span style="color:#183691;">&quot;({&quot;message&quot;:&quot;Hello!&quot;})&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;application/json&quot;</span><span style="color:#323232;">);
  204. </span><span style="color:#323232;">});
  205. </span><span style="color:#323232;">
  206. </span><span style="font-style:italic;color:#969896;">// Static file serving
  207. </span><span style="color:#323232;">svr.set_mount_point(</span><span style="color:#183691;">&quot;/&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;./public&quot;</span><span style="color:#323232;">);
  208. </span><span style="color:#323232;">
  209. </span><span style="color:#323232;">svr.listen(</span><span style="color:#183691;">&quot;0.0.0.0&quot;</span><span style="color:#323232;">, </span><span style="color:#0086b3;">8080</span><span style="color:#323232;">);
  210. </span></pre>
  211. </div></div>
  212. <p>Handlers take priority. The handler responds to <code>/api/hello</code>. For every other path, the server looks for a file in <code>./public</code>.</p>
  213. <h2>Adding response headers</h2>
  214. <p>Pass headers as the third argument to <code>set_mount_point()</code> and they get attached to every static file response. This is great for cache control.</p>
  215. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  216. <span style="color:#c0c5ce;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#c0c5ce;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">./public</span><span style="color:#c0c5ce;">&quot;, {
  217. </span><span style="color:#c0c5ce;"> {&quot;</span><span style="color:#a3be8c;">Cache-Control</span><span style="color:#c0c5ce;">&quot;, &quot;</span><span style="color:#a3be8c;">max-age=3600</span><span style="color:#c0c5ce;">&quot;}
  218. </span><span style="color:#c0c5ce;">});
  219. </span></pre>
  220. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  221. <span style="color:#323232;">svr.set_mount_point(</span><span style="color:#183691;">&quot;/&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;./public&quot;</span><span style="color:#323232;">, {
  222. </span><span style="color:#323232;"> {</span><span style="color:#183691;">&quot;Cache-Control&quot;</span><span style="color:#323232;">, </span><span style="color:#183691;">&quot;max-age=3600&quot;</span><span style="color:#323232;">}
  223. </span><span style="color:#323232;">});
  224. </span></pre>
  225. </div></div>
  226. <p>With this in place, the browser caches served files for one hour.</p>
  227. <h2>A Dockerfile for your static file server</h2>
  228. <p>The cpp-httplib repository includes a <code>Dockerfile</code> built for static file serving. We also publish a pre-built image on Docker Hub, so you can get up and running with a single command.</p>
  229. <div class="code-block-wrapper"><div data-code-theme="dark"><pre style="background-color:#2b303b;">
  230. <span style="color:#c0c5ce;">&gt; docker run</span><span style="color:#bf616a;"> -p</span><span style="color:#c0c5ce;"> 8080:80</span><span style="color:#bf616a;"> -v</span><span style="color:#c0c5ce;"> ./my-site:/html yhirose4dockerhub/cpp-httplib-server
  231. </span><span style="color:#8fa1b3;">Serving</span><span style="color:#c0c5ce;"> HTTP on 0.0.0.0:80
  232. </span><span style="color:#8fa1b3;">Mount</span><span style="color:#c0c5ce;"> point: / -&gt; ./html
  233. </span><span style="color:#8fa1b3;">Press</span><span style="color:#c0c5ce;"> Ctrl+C to shutdown gracefully...
  234. </span><span style="color:#8fa1b3;">192.168.65.1</span><span style="color:#c0c5ce;"> - - </span><span style="color:#b48ead;">[</span><span style="color:#c0c5ce;">22/Feb/2026:12:00:00 +0000</span><span style="color:#b48ead;">] </span><span style="color:#c0c5ce;">&quot;</span><span style="color:#a3be8c;">GET / HTTP/1.1</span><span style="color:#c0c5ce;">&quot; 200 256 &quot;</span><span style="color:#a3be8c;">-</span><span style="color:#c0c5ce;">&quot; &quot;</span><span style="color:#a3be8c;">Mozilla/5.0 ...</span><span style="color:#c0c5ce;">&quot;
  235. </span><span style="color:#8fa1b3;">192.168.65.1</span><span style="color:#c0c5ce;"> - - </span><span style="color:#b48ead;">[</span><span style="color:#c0c5ce;">22/Feb/2026:12:00:00 +0000</span><span style="color:#b48ead;">] </span><span style="color:#c0c5ce;">&quot;</span><span style="color:#a3be8c;">GET /style.css HTTP/1.1</span><span style="color:#c0c5ce;">&quot; 200 1024 &quot;</span><span style="color:#a3be8c;">-</span><span style="color:#c0c5ce;">&quot; &quot;</span><span style="color:#a3be8c;">Mozilla/5.0 ...</span><span style="color:#c0c5ce;">&quot;
  236. </span><span style="color:#8fa1b3;">192.168.65.1</span><span style="color:#c0c5ce;"> - - </span><span style="color:#b48ead;">[</span><span style="color:#c0c5ce;">22/Feb/2026:12:00:01 +0000</span><span style="color:#b48ead;">] </span><span style="color:#c0c5ce;">&quot;</span><span style="color:#a3be8c;">GET /favicon.ico HTTP/1.1</span><span style="color:#c0c5ce;">&quot; 404 152 &quot;</span><span style="color:#a3be8c;">-</span><span style="color:#c0c5ce;">&quot; &quot;</span><span style="color:#a3be8c;">Mozilla/5.0 ...</span><span style="color:#c0c5ce;">&quot;
  237. </span></pre>
  238. </div><div data-code-theme="light"><pre style="background-color:#ffffff;">
  239. <span style="font-weight:bold;color:#a71d5d;">&gt;</span><span style="color:#323232;"> docker run -p 8080:80 -v ./my-site:/html yhirose4dockerhub/cpp-httplib-server
  240. </span><span style="color:#323232;">Serving HTTP on 0.0.0.0:80
  241. </span><span style="color:#323232;">Mount point: / -</span><span style="font-weight:bold;color:#a71d5d;">&gt;</span><span style="color:#323232;"> ./html
  242. </span><span style="color:#323232;">Press Ctrl+C to shutdown gracefully...
  243. </span><span style="color:#323232;">192.168.65.1 - - </span><span style="font-weight:bold;color:#a71d5d;">[</span><span style="color:#323232;">22/Feb/2026:12:00:00 +0000</span><span style="font-weight:bold;color:#a71d5d;">] </span><span style="color:#183691;">&quot;GET / HTTP/1.1&quot;</span><span style="color:#323232;"> 200 256 </span><span style="color:#183691;">&quot;-&quot; &quot;Mozilla/5.0 ...&quot;
  244. </span><span style="color:#323232;">192.168.65.1 - - </span><span style="font-weight:bold;color:#a71d5d;">[</span><span style="color:#323232;">22/Feb/2026:12:00:00 +0000</span><span style="font-weight:bold;color:#a71d5d;">] </span><span style="color:#183691;">&quot;GET /style.css HTTP/1.1&quot;</span><span style="color:#323232;"> 200 1024 </span><span style="color:#183691;">&quot;-&quot; &quot;Mozilla/5.0 ...&quot;
  245. </span><span style="color:#323232;">192.168.65.1 - - </span><span style="font-weight:bold;color:#a71d5d;">[</span><span style="color:#323232;">22/Feb/2026:12:00:01 +0000</span><span style="font-weight:bold;color:#a71d5d;">] </span><span style="color:#183691;">&quot;GET /favicon.ico HTTP/1.1&quot;</span><span style="color:#323232;"> 404 152 </span><span style="color:#183691;">&quot;-&quot; &quot;Mozilla/5.0 ...&quot;
  246. </span></pre>
  247. </div></div>
  248. <p>Everything in your <code>./my-site</code> directory gets served on port 8080. The access log follows the same format as NGINX, so you can see exactly what's happening.</p>
  249. <h2>What's next</h2>
  250. <p>You can now serve static files. A web server that delivers HTML, CSS, and JavaScript — built with this little code.</p>
  251. <p>Next, let's encrypt your connections with HTTPS. We'll start by setting up a TLS library.</p>
  252. <p><strong>Next:</strong> <a href="../05-tls-setup">TLS Setup</a></p>
  253. </article>
  254. </main>
  255. </div>
  256. <footer class="footer">
  257. © 2026 Yuji Hirose. All rights reserved.
  258. </footer>
  259. <!-- Search modal -->
  260. <div class="search-overlay" id="search-overlay">
  261. <div class="search-modal">
  262. <div class="search-input-wrap">
  263. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  264. <input type="text" id="search-input" placeholder="Search..." autocomplete="off" spellcheck="false">
  265. <kbd class="search-esc">ESC</kbd>
  266. </div>
  267. <ul class="search-results" id="search-results"></ul>
  268. </div>
  269. </div>
  270. <script src="&#x2F;cpp-httplib/js/main.js"></script>
  271. </body>
  272. </html>