{"id":102201,"date":"2021-02-25T15:01:03","date_gmt":"2021-02-25T15:01:03","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=102201"},"modified":"2021-02-25T15:01:08","modified_gmt":"2021-02-25T15:01:08","slug":"esp32-web-server-microsd-card","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-web-server-microsd-card\/","title":{"rendered":"ESP32 Web Server Hosting Files from MicroSD Card"},"content":{"rendered":"\n<p>In this tutorial, you&#8217;ll learn how to build an ESP32 web server to serve files from a microSD card using a microSD card module that communicates using SPI protocol. You&#8217;ll learn how to serve your HTML, CSS, JavaScript files, images, and other assets saved on the microSD card. This can be especially useful if your files are too big to fit on the filesystem (SPIFFS), or it can also be more convenient depending on your project. To build the web server, we&#8217;ll use the ESPAsyncWebServer library.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-Web-Server-MicroSD-Card-Files.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Web Server Hosting Files from MicroSD Card\" class=\"wp-image-102247\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-Web-Server-MicroSD-Card-Files.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-Web-Server-MicroSD-Card-Files.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-Web-Server-MicroSD-Card-Files.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-Web-Server-MicroSD-Card-Files.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n\n<p>If you want to build a web server with files from SPIFFS, follow the next tutorial instead:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-spiffs-spi-flash-file-system\/\">ESP32 Web Server using SPIFFS (SPI Flash File System)<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n\n<p>To show you how to build a web server with files from a microSD card, we&#8217;ll build a simple HTML page that displays some text formatted with CSS. We&#8217;ll also serve a favicon. The following image shows the web page we&#8217;ll serve:<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"731\" height=\"418\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?resize=731%2C418&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Web Server with Files from microSD card\" class=\"wp-image-102219\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?w=731&amp;quality=100&amp;strip=all&amp;ssl=1 731w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?resize=300%2C172&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>The web server is built using the <a href=\"https:\/\/github.com\/me-no-dev\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noreferrer noopener\">ESPAsyncWebServer library<\/a>;<\/li><li>The HTML, CSS, and favicon files are saved on the microSD card;<\/li><li>The microSD card communicates with the ESP32 via SPI communication protocol;<\/li><li>When the client makes a request to the ESP32, it serves the files saved on the microSD card;<\/li><li>You can apply what you&#8217;ll learn here to any web server project that you are working on.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Web-Server-How-it-Works.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Web-Server-How-it-Works.png?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Web Server with Files from microSD Card How it Works\" class=\"wp-image-102263\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Web-Server-How-it-Works.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Web-Server-How-it-Works.png?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">MicroSD Card Module<\/h2>\n\n\n\n<p>There are different microSD card modules compatible with the ESP32. We&#8217;re using the microSD card module sown in the following figure &#8211; it communicates using SPI communication protocol. You can use any other microSD card module with an SPI interface.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"microSD card module for ESP32 ESP8266 Arduino SPI\" class=\"wp-image-102279\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Where to Buy?<\/h3>\n\n\n\n<p>You can click the link below to check different stores where you can get the microSD card module:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noreferrer noopener\">MicroSD card module<\/a><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noopener\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"317\" height=\"288\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-ESP8266-Arduino.png?resize=317%2C288&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"MicroSD card module for ESP32 ESP8266 Arduino SPI\" class=\"wp-image-102297\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-ESP8266-Arduino.png?w=317&amp;quality=100&amp;strip=all&amp;ssl=1 317w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-ESP8266-Arduino.png?resize=300%2C273&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 317px) 100vw, 317px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">MicroSD Card Module Pinout<\/h3>\n\n\n\n<p>The microSD card module communicates using SPI communication protocol. We&#8217;ll use the default ESP32 SPI pins as shown in the following table:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>microSD card module<\/strong><\/td><td><strong>ESP32<\/strong><\/td><\/tr><tr><td>3V3<\/td><td><span class=\"rnthl rntcred\">3.3V<\/span><\/td><\/tr><tr><td>CS<\/td><td><span class=\"rnthl rntclblue\">GPIO 5<\/span><\/td><\/tr><tr><td>MOSI<\/td><td><span class=\"rnthl rntclblue\">GPIO 23<\/span><\/td><\/tr><tr><td>CLK<\/td><td><span class=\"rnthl rntclblue\">GPIO 18<\/span><\/td><\/tr><tr><td>MISO<\/td><td><span class=\"rnthl rntclblue\">GPIO 19<\/span><\/td><\/tr><tr><td>GND<\/td><td><span class=\"rnthl rntcblack\">GND<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"rntbox rntclblue\">Recommended reading: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\">ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preparing the MicroSD Card<\/h2>\n\n\n\n<p>Before proceeding with the tutorial, make sure you <strong>format your microSD card as FAT32<\/strong>. Follow the next instructions to format your microSD card or use a software tool like <a href=\"https:\/\/www.sdcard.org\/downloads\/formatter\/\" target=\"_blank\" rel=\"noreferrer noopener\">SD Card Formater<\/a> (compatible with Windows and Mac OS).<\/p>\n\n\n\n<p><strong>1.<\/strong>&nbsp;Insert the microSD card in your computer. Go to&nbsp;<strong>My Computer<\/strong>&nbsp;and right click on the SD card. Select&nbsp;<strong>Format<\/strong>&nbsp;as shown in figure below.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/rntlab.com\/wp-content\/uploads\/2018\/05\/format-SD-card-1.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Preparing the MicroSD Card format microSD Card\" class=\"wp-image-11805\"\/><\/figure><\/div>\n\n\n\n<p><strong>2.&nbsp;<\/strong>A new window pops up. Select&nbsp;<strong>FAT32<\/strong>, press&nbsp;<strong>Start<\/strong>&nbsp;to initialize the formatting process and follow the onscreen instructions.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/rntlab.com\/wp-content\/uploads\/2018\/05\/format-SD-card-2.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Preparing the MicroSD Card format microSD Card\" class=\"wp-image-11806\"\/><\/figure><\/div>\n\n\n\n<p>After formatting the microSD card, you can paste the files used to build the web server there. We&#8217;ll move the <span class=\"rnthl rntliteral\">index.html<\/span>, <span class=\"rnthl rntliteral\">style.css<\/span>, and <span class=\"rnthl rntliteral\">favicon.png<\/span> files into there. Follow the next section to get your files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML File<\/h3>\n\n\n\n<p>Create a file called <span class=\"rnthl rntliteral\">index.html<\/span> with the following content:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!DOCTYPE HTML&gt;&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n  &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;style.css&quot;&gt;\r\n  &lt;link rel=&quot;icon&quot;  type=&quot;image\/png&quot; href=&quot;favicon.png&quot;&gt;\r\n  &lt;title&gt;ESP Web Server&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;h1&gt;Hello World!&lt;\/h1&gt;\r\n  &lt;p&gt;This page was built with files from a microSD card.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/MicroSD_Card\/files\/index.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS File<\/h3>\n\n\n\n<p>Create a file called <span class=\"rnthl rntliteral\">style.css<\/span> with the following content:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-css\">html {\r\n    font-family: Arial; \r\n    text-align: center;\r\n}\r\nbody {\r\n    max-width: 400px; \r\n    margin:0px auto;\r\n}<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/MicroSD_Card\/files\/style.css\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Favicon<\/h3>\n\n\n\n<p>We&#8217;ll also serve a favicon. It is a png image with 15&#215;15 pixels. You can use the same favicon as ours, or your own icon, or none favicon at all.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/favicon-example.png?resize=16%2C16&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-102204\"\/><\/figure><\/div>\n\n\n\n<p>You can click on the following link to download the favicon:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/RuiSantosdotme\/build-web-servers-dl\/raw\/main\/favicon.zip\" target=\"_blank\" rel=\"noreferrer noopener\">Download favicon.png file<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Copy Files to MicroSD Card<\/h3>\n\n\n\n<p>After having all files prepared, open the microSD card directory and paste the files.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"216\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-folder-files-web-server.png?resize=633%2C216&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"microSD Card Folder with Files to Build Web Server\" class=\"wp-image-102216\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-folder-files-web-server.png?w=633&amp;quality=100&amp;strip=all&amp;ssl=1 633w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-folder-files-web-server.png?resize=300%2C102&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-card-module-wiring-breadboard.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 microSD card module wiring breadboard\" class=\"wp-image-102281\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-card-module-wiring-breadboard.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-card-module-wiring-breadboard.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n\n<p>For this tutorial you need the following parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a style=\"font-size: inherit; background-color: initial;\" rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\">ESP32&nbsp;<\/a><span style=\"font-size: inherit; background-color: initial;\">(read&nbsp;<\/span><a style=\"font-size: inherit; background-color: initial;\" href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP32 development boards<\/a><span style=\"font-size: inherit; background-color: initial;\">)<\/span><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noreferrer noopener\">MicroSD card module<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/microsd-card-raspberry-pi-16gb-class-10\/\" target=\"_blank\" rel=\"noreferrer noopener\">MicroSD card<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\">Breadboard<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\">Jumper wires<\/a><\/li><\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematic Diagram<\/h2>\n\n\n\n<p>Wire the microSD card module to the ESP32 as shown in the following schematic diagram. We&#8217;re using the default ESP32 SPI pins.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Wiring-Diagram.png?resize=742%2C910&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 microSD Card Module Wiring Diagram\" class=\"wp-image-102217\" width=\"742\" height=\"910\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Wiring-Diagram.png?w=742&amp;quality=100&amp;strip=all&amp;ssl=1 742w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-microSD-Card-Wiring-Diagram.png?resize=245%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 245w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>Copy the following code to your Arduino IDE. <\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n  Rui Santos\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-web-server-microsd-card\/\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files.\n  \n  The above copyright notice and this permission notice shall be included in all\n  copies or substantial portions of the Software.\n*\/\n\n#include &lt;Arduino.h&gt;\n#include &lt;WiFi.h&gt;\n#include &lt;AsyncTCP.h&gt;\n#include &lt;ESPAsyncWebServer.h&gt;\n#include &quot;FS.h&quot;\n#include &quot;SD.h&quot;\n#include &quot;SPI.h&quot;\n\n\/\/ Replace with your network credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nvoid initSDCard(){\n  if(!SD.begin()){\n    Serial.println(&quot;Card Mount Failed&quot;);\n    return;\n  }\n  uint8_t cardType = SD.cardType();\n\n  if(cardType == CARD_NONE){\n    Serial.println(&quot;No SD card attached&quot;);\n    return;\n  }\n\n  Serial.print(&quot;SD Card Type: &quot;);\n  if(cardType == CARD_MMC){\n    Serial.println(&quot;MMC&quot;);\n  } else if(cardType == CARD_SD){\n    Serial.println(&quot;SDSC&quot;);\n  } else if(cardType == CARD_SDHC){\n    Serial.println(&quot;SDHC&quot;);\n  } else {\n    Serial.println(&quot;UNKNOWN&quot;);\n  }\n  uint64_t cardSize = SD.cardSize() \/ (1024 * 1024);\n  Serial.printf(&quot;SD Card Size: %lluMB\\n&quot;, cardSize);\n}\n\nvoid initWiFi() {\n  WiFi.mode(WIFI_STA);\n  WiFi.begin(ssid, password);\n  Serial.print(&quot;Connecting to WiFi ..&quot;);\n  while (WiFi.status() != WL_CONNECTED) {\n    Serial.print('.');\n    delay(1000);\n  }\n  Serial.println(WiFi.localIP());\n}\n\nvoid setup() {\n  Serial.begin(115200);\n  initWiFi();\n  initSDCard();\n\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(SD, &quot;\/index.html&quot;, &quot;text\/html&quot;);\n  });\n\n  server.serveStatic(&quot;\/&quot;, SD, &quot;\/&quot;);\n\n  server.begin();\n}\n\nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/MicroSD_Card\/ESP32_Web_Server_MicroSD_Card.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Insert your network credentials in the following variables and the code should work straight away:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>We&#8217;ve covered how to build a web server with the <a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">ESP32 in previous tutorials<\/a>. So, we&#8217;ll just take a look at the relevant parts for this tutorial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Libraries<\/h3>\n\n\n\n<p>First, make sure you include the <span class=\"rnthl rntliteral\">FS.h<\/span>, <span class=\"rnthl rntliteral\">SD.h<\/span> and <span class=\"rnthl rntliteral\">SPI.h<\/span> libraries to be able to communicate with the microSD card and handle files.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include \"FS.h\"\n#include \"SD.h\"\n#include \"SPI.h\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Initialize MicroSD Card<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">initSDCard()<\/span> function initializes the microSD card on the default SPI pins.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void initSDCard(){\n  if(!SD.begin()){\n    Serial.println(\"Card Mount Failed\");\n    return;\n  }\n  uint8_t cardType = SD.cardType();\n\n  if(cardType == CARD_NONE){\n    Serial.println(\"No SD card attached\");\n    return;\n  }\n  Serial.print(\"SD Card Type: \");\n  if(cardType == CARD_MMC){\n    Serial.println(\"MMC\");\n  } else if(cardType == CARD_SD){\n    Serial.println(\"SDSC\");\n  } else if(cardType == CARD_SDHC){\n    Serial.println(\"SDHC\");\n  } else {\n    Serial.println(\"UNKNOWN\");\n  }\n  uint64_t cardSize = SD.cardSize() \/ (1024 * 1024);\n  Serial.printf(\"SD Card Size: %lluMB\\n\", cardSize);\n}<\/code><\/pre>\n\n\n\n<p>Then, you need to call this function in the <span class=\"rnthl rntliteral\">setup()<\/span>:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>initSDCard();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Serve Files From microSD Card<\/h3>\n\n\n\n<p>When you access the ESP32 IP address on the root (<span class=\"rnthl rntliteral\">\/<\/span>) URL, send the HTML file saved on the microSD card.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send(SD, \"\/index.html\", \"text\/html\");\n});<\/code><\/pre>\n\n\n\n<p>The first argument of the <span class=\"rnthl rntliteral\">send()<\/span> function is the filesystem where the files are saved. In this case, it is saved in the SD card (<span class=\"rnthl rntliteral\">SD<\/span>). The second argument is the path where the file is located <span class=\"rnthl rntliteral\">\/index.html<\/span>). The third argument refers to the content type (<span class=\"rnthl rntliteral\">text\/html<\/span>).<\/p>\n\n\n\n<p>When the HTML file loads on your browser, it will request the CSS and the favicon files. These are static files saved on the same directory (<span class=\"rnthl rntliteral\">SD<\/span>). We can add the following line to serve static files in a directory when requested by the root URL. It serves the CSS and favicon files automatically.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.serveStatic(\"\/\", SD, \"\/\");<\/code><\/pre>\n\n\n\n<p>If your web server needs to handle more routes, you can add them to the <span class=\"rnthl rntliteral\">setup()<\/span>. Don&#8217;t forget to set <span class=\"rnthl rntliteral\">SD<\/span> as the first argument to the <span class=\"rnthl rntliteral\">send()<\/span> function. This way, it will look for the files in the microSD card.<\/p>\n\n\n\n<p>It&#8217;s as simple as this. This can be applied to any other web server project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>After uploading the code, open the Serial Monitor at a baud rate of 115200. Press the on-board RST button. <\/p>\n\n\n\n<p>You should get something similar on the Serial Monitor: the ESP32 IP address and information about the microSD card.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"541\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/web-server-microsd-card-serial-monitor-ip-address.png?resize=761%2C541&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Web Server with Files from MicroSD card Serial Monitor IP Address\" class=\"wp-image-102218\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/web-server-microsd-card-serial-monitor-ip-address.png?w=761&amp;quality=100&amp;strip=all&amp;ssl=1 761w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/web-server-microsd-card-serial-monitor-ip-address.png?resize=300%2C213&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure><\/div>\n\n\n\n<p>Open a browser on your local network and paste the ESP32 IP address. It will load the following web page with the files saved on the microSD card. Notice the favicon on the web browser title bar.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"731\" height=\"418\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?resize=731%2C418&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Web Server with Files from microSD card\" class=\"wp-image-102219\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?w=731&amp;quality=100&amp;strip=all&amp;ssl=1 731w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/Web-Server-MicroSD-Card-Example.png?resize=300%2C172&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial, you&#8217;ve learned how to build a web server with the ESP32 with files saved on the microSD card. Instead of writing the HTML, CSS, and JavaScript text directly on the Arduino sketch, you can save them on separate files on a microSD card. This can also be useful to store other data that you might want to display on your web server.<\/p>\n\n\n\n<p>If you don&#8217;t have a microSD card module, you can save the files on the ESP32 filesystem (SPIFFS) if they fit. You might also like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-data-logging-temperature-to-microsd-card\/\">ESP32 Data Logging Temperature to MicroSD Card<\/a><\/li><\/ul>\n\n\n\n<p>We hope you\u2019ve found this tutorial useful.<\/p>\n\n\n\n<p>Learn more about the ESP32 with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\">Build Web Servers with ESP32 and ESP8266<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">More ESP32 Projects and Tutorials\u2026<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn how to build an ESP32 web server to serve files from a microSD card using a microSD card module that communicates using SPI protocol. You&#8217;ll &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32 Web Server Hosting Files from MicroSD Card\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-microsd-card\/#more-102201\" aria-label=\"Read more about ESP32 Web Server Hosting Files from MicroSD Card\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":102247,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[281,276,277,299,264],"tags":[],"class_list":["post-102201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-project","category-esp32","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/ESP32-Web-Server-MicroSD-Card-Files.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/102201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=102201"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/102201\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/102247"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=102201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=102201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=102201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}