Introduction: PocketServer: Turn Your ESP8266 Into an HTML Web Server (and Connect It to the Internet)

Do you want to turn your ESP8266 into a web server that serves files off an SD card, or make a web server that fits into your pocket? Enter PocketServer: Serve files off of an SD card with your ESP8266. This tutorial will also go over how to connect your server to the internet and set up a domain.

Supplies

What you'll need:

Hardware:

  • ESP8266, one can be found here
  • Female to female wires
  • Arduino compatible SD card reader, one can be found here
  • A USB-B cord to connect the ESP8266 board to your computer

Software:

  • Arduino IDE with http://arduino.esp8266.com/stable/package_esp8266com_index.json added to the boards manager URLs
  • The attached Arduino sketch

Attachments

Step 1: Notes About This Project and Instructable

A few notes before we begin:

  • This Instructable assumes that you know how to use the Arduino IDE to upload sketches to your ESP8266, as well as some background knowledge about web servers
  • PocketServer built with an ESP8266 has a 40kb per file max size due to that being the amount of SRAM that it has.

Without further ado, let's get started!

Step 2: The Hardware

Just connecting some wires.

Connect the pins on your ESP8266 to the pins on the SD card reader as listed:

(ESP8266 -> SD card reader)

3v3 -> +3.3

GND -> GND

D2 -> CS

D7 -> MOSI

D5 -> SCK (or CLK/SCLK, it's called different things on different brands)

D6 -> MISO

Step 3: The Software

Firstly, you will want to put some testing files on the SD card via your computer. Try putting some text files and an index.html file in the root, and maybe try making some folders. Just make sure you remember what they are called so you can test. Then put the SD card into the SD card reader.


Then, open PocketServer.ino in your Arduino IDE. Before you upload, find the variables "ssid" and "password" and replace them with your wifi network name and password. Then, upload the sketch.

Step 4: Testing on the Local Network

Once the sketch has uploaded, open the serial monitor (making sure it is on 9600 baud), and press the reset button on the ESP8266. If all has gone well, you should get to a point that looks like the image but instead of a black bar your wifi SSID is shown (I censored mine because it has a very goofy name lol). Then, try navigating to the IP displayed in your browser, making sure you are connected to the same wifi network. Don't worry, you'll be on the internet soon, but you gotta test first! If you have put an index.html file in the root of the SD card, you should be able to see the content stored in it shown. You can also try navigating to the paths of other files you added to the SD card.


Debugging for step 4: If the wifi does not connect, check the username and password. If the SD card fails, check your wiring. If you can't navigate to the local IP in your browser, make sure you are on the same network as the ESP8266.

Step 5: The Internet: Intro

At this point, you have a fully functional web server on your local network! Play around with it, have some fun! However, what is the point of a web server on the local network? (well actually, there are a lot of reasons, but the rhetorical question sounded cool). Anyways, do you want to make your ESP8266 server accessible via the internet, with your own domain? Then continue on.

Step 6: The Internet: for People Who Know What They Are Doing: a Summary

If you've worked with DNS, port forwarding, and domains before, just read this quick summary of what (you've probably already figured out) to do.

  1. Create a port forwarding from your public IP to the local IP of your ESP8266 on port 80.
  2. Get a Cloudflare account if you don't already have one.
  3. Get a domain you want to use with your ESP8266
  4. Set it up with Cloudflare by adding it to your Cloudflare account and pointing it's nameservers to your Cloudflare assigned nameservers.
  5. Wait for the DNS to propagate. This could take up to 24 hours, but usually takes about 30 minutes.
  6. Add an A record for either the root or some subdomain pointing to your public IP.
  7. Make sure your ESP8266 is plugged in.
  8. Wait for the DNS to propagate. This could take up to 24 hours, but usually takes about 30 minutes.
  9. Go to your domain and see if it has worked!
  10. Don't do the rest of the steps, they are just in depth on these ones.

Step 7: The Internet: Step 1: Port Forward

The first step to connecting your ESP8266 to the internet is to create a port forward for your public IP. To do this, you should go to your admin panel and try to find the port forwarding section. If you can't, look up a tutorial for your internet provider. Then, create a port forward on port 80 to your ESP8266's local IP.

Step 8: The Internet: Step 2: the Domain Name

Next, buy a domain name from a registrar like Namecheap. I feel like I shouldn't have to explain this. If you are confused, look up a tutorial.

Step 9: The Internet: Step 3: Cloudflare

If you haven't already, signup for a Cloudflare account. Once in your Cloudflare account, add your domain to it. Then, go back to your domain registrar and point your nameservers to your Cloudflare assigned nameservers. If you do not know what a nameserver is, go do some research on the DNS system and how domains are used, then come back. You will have to wait for DNS to propagate for the domain to be added to your Cloudflare account. This could take up to 24 hours, but usually takes about 30 minutes. Once this is done, add an A record of either a subdomain of your domain, or the root, pointing to your public IP.

Step 10: The Internet: Step 4: Does It Work?

Wait for the DNS to propagate. This could take up to 24 hours, but usually takes about 30 minutes. Then, go to your domain name! If you have done everything correctly, you should see the index.html file stored on your ESP8266's SD card!