Introduction: Diy Small But Powerful Miniature ESP32 NAS
Disclaimer: While TinyNAS bears a resemblance to a Synology NAS with Synology's logo on it, it's crucial to clarify that this project is not sponsored by Synology. The inclusion of the Synology logo on my project is purely for the purpose of enhancing realism.
What is TinyNAS?
TinyNAS takes inspiration from Tobychui's original USB form factor WebStick designed for the ESP8266. I've adapted and enhanced the concept, transforming it into a TinyNAS specifically built for the ESP32, offering improved performance and support for up to 3 SD cards. Resembling a miniature NAS, TinyNAS serves as a web server that connects to your home WiFi. It enables local access through mDNS in your network and can be accessed remotely by configuring port-forwarding settings on your home router.
Functionality:
Designed with the limitations of a compact form factor in mind, TinyNAS boasts an interface reminiscent of ArozOS File Manager. It provides a user-friendly platform with utilities allowing you to store, stream music, videos, and photos directly onto TinyNAS's SD card. Additionally, it facilitates hosting static web files like HTML, CSS, and JS, offering a web programming interface for easy website modifications without the need to unplug the SD cards.
Project Origin:
This project is derived from Tobychui's original WebStick, which featured a USB form factor and was designed for the ESP8266. Recognizing the potential for enhanced performance with the ESP32, I've modified and optimized the concept to create TinyNAS. While it maintains the spirit of a real NAS, it distinguishes itself by its compact size and the power of the ESP32.
Note: While this project has made significant progress, there are still some issues that require resolution. Your assistance is invaluable in addressing these challenges. If you're interested in contributing, please reach out via email at loicdaigle31@gmail.com.
Note: While this project is capable of serving a personalized homepage, it has certain limitations in handling a large number of simultaneous visitors. If you're keen on establishing a web server designed to accommodate a broader audience, I encourage you to explore my dedicated tutorial on this subject, accessible on my website: Creating Your Own Apache Server. Additionally, if you spot any errors or feel that something is missing, please share your feedback in the comments. Your input is invaluable, and I'll promptly address any corrections or additions suggested.
Supplies
For this project, expertise in SMD soldering is crucial, and it's essential to procure all the components listed in the included BOM (Bill of Materials) below. In addition to basic soldering tools, custom PCBs, and the 3D printed parts, you'll also need access to a computer for flashing firmware onto your TinyNAS. You will also need three SD cards (You can find some HERE) and a ribbon cable (You can find it HERE).
Step 1: Order the PCBs
As the PCBs constitute the primary components of this build, you have the flexibility to order them from your preferred PCB manufacturer. Notably, this project is proudly sponsored by JLCPCB. If you've never ordered PCBs before, I encourage you to explore JLC's services using the link provided:
For the PCBs to fit, they need to be 0.8mm thick to ensure a proper fit.
To further clarify, there are a total of 8 PCBs in this project, comprising 4 different types. Here's the breakdown of the number of PCBs needed for each type:
- Gerber_Main_PCB.zip = 1
- Gerber_PCB_Pads_NAS.zip = 1
- Gerber_PCB_Pads_SD_Card.zip = 3
- Gerber_PCB_SD_Cards.zip = 3
Note: When placing an order for the PCBs, they are automatically provided in a 5-pack by default. Hence, there is no need to order them multiple times (e.g., three times).
You can access the Gerber files on my GitHub repository:
Step 2: Print or Order the 3D Parts
For this project, you'll need 12 essential 3D printed parts. If you don't have a 3D printer, don't worry! Simply order them from JLCPCB's site, with prices starting at just $1. For the best visual appeal, I recommend opting for the 'Imagine Black' color option.
Here's the breakdown of the quantity required for each part:
- DIY TinyNAS Body With Logo.stl = 1
- DIY TinyNAS Bottom.stl = 1
- DIY TinyNAS Backplate.stl = 1
- SD Enclosure Body.stl = 3
- SD Enclosure Lever.stl = 3
- SD Enclosure Lid.stl = 3
You can access the 3D files on my GitHub repository:
Step 3: Solder the Components Onto the PCB
This step is relatively straightforward. Begin by preparing all the necessary components for soldering and then proceed to solder them onto your PCB one by one.
It took me approximately 1 hour and 30 minutes to solder all the boards.
For your convenience in component placement, I've provided IBOM files (HTML files) on my GitHub. These files can be found HERE. They offer guidance on where to place each component during the soldering process.
Step 4: Solder the SD Cards PCBs
In this step, the task is to connect the seven pads on the smallest PCB to the corresponding seven pads on the SD card PCB using small wires. Follow the guidance provided in the included image and repeat this process 3 times.
Step 5: Check for Shorts
Ensuring the integrity of your TinyNAS is crucial before connecting it to your computer. Chips of this size often come with potential soldering defects, such as pin bridging or, more critically, short circuits between VCC (5V from USB) and ground. To verify the quality of your TinyNAS soldering, it is advisable to conduct a thorough check for shorts. A best practice is to insert it into a protected power supply, such as a dedicated lab bench power supply, before connecting it to your computer. This precautionary measure helps safeguard against potential issues during the initial power-up.
Step 6: Put All in the 3D Printed Parts
Now, it's time to position all the PCBs into their respective slots in the 3D printed parts. Refer to the provided pictures for guidance on proper placement. If needed, you can use a small amount of liquid glue for secure attachment, but be cautious not to apply excessive amounts.
Step 7: Backend Programming Via Arduino IDE
To flash the firmware for your TinyNAS, you'll need the Arduino IDE. Begin by installing the ESP32 from the board manager and selecting the TTGO T7 V1.4 Mini32 as your target board.
Once all the options are correctly configured, connect your TinyNAS to your computer using a USB-C cable. Click "Compile and Upload," and the firmware will be downloaded to the board.
Arduino Code:
The source code for the backend server can be found HERE.
WiFi Setup Notes:
Notably, WiFi, admin, and mDNS settings are loaded from the SD card. Therefore, there's no need to make changes in the Arduino source code to set up your TinyNAS. Refer to the SD card section below for further details.
Step 8: Preparing & Installing Front-end to SD Card
For the SD card, you need a SD card formatted in FAT file system to make this work, as the ESP32 can only access the SD card in FAT file system.
In my case, I am using three 16GB micro SD card with FAT file system from Aliexpress.
Download and copy everything from the SD Card Files folder to your SD card and follow the instructions below to setup your TinyNAS with a few clicks.
- Navigate into the cfg/ folder
- Edit wifi.txt with first line as your home's WiFi SSID and 2nd line password
- Edit admin.txt with first line as your admin username and 2nd line the admin password
- Edit mdns.txt and modify it to something you want. For example, the default "tinynas" will allow you to access your TinyNAS using "http://tinynas.local" later in your mDNS supported web browser.
After you are done setting it up, you can start replacing the html files in the SD card. For example, you might want to swap out the index.html to something you write for your home homepage, or delete unwanted demo folders. However, these folders are reserved and shell not be deleted or renamed.
Reserved Folders
- /www/ - The web root, do not remove this
- /www/admin/ - The admin web root, required for admin functions
- /www/store/ - The private storage folder, can only accessible via Web File Manager after login and will not be served as static web files
Lastly, insert your micro SD card into your TinyNAS SD PCB and you are ready to get it running!
Notes
The mDNS name must be unique if you have multiple TinyNAS in the same network
Step 9: Insert Your TinyNAS Into a Power Supply
To initiate your web server, simply connect your TinyNAS to a power supply. If connected to your computer's USB port, you'll observe it providing debug information on Serial @ 115200 baudrate.
Towards the end of the debug information, you'll discover the reported IP address of your TinyNAS. In my instance, it's 192.168.0.114. You can connect directly to it using either mDNS or the IP address by entering the following link in your browser:
or
Upon doing so, your homepage will be displayed.
Step 10: Accessing the File Manager
In the Web UI Tobychui developed, it got a build in File Manager where you can do all the file access and operations there. Simply click on the "admin panel" or navigate to /admin (i.e. http://{your_device_ip}/admin) and login with the username and password you set in the admin.txt file.
Afterward, you will see all file contents in your SD card's web/ folder. If you want to open or edit any of them, just double click them and the File manager will pick the correct web apps to open them. Some build in webapps includes
- Music player (recommend < 5MB mp3 files)
- Video player (recommend < 5MB webm files)
- Photo viewer (web supported formats only)
- Markdown Editor
- Code Editor
Step 11: Changing HTML Files in Your Browser
To effortlessly edit your webpage without unplugging the SD card, follow these steps:
Direct Editing:
- Simply select the HTML files you wish to edit. You can choose individual files or use multi-select by holding Ctrl and clicking.
- Click "Open," and the built-in Notepad editor will enable you to make direct changes to your HTML files directly within your browser.
Local Editing and Upload:
- If you prefer local editing and then uploading to the TinyNAS, you can achieve this by drag-and-dropping files from your local File Explorer (or Finder) into the File Manager for upload.
- Keep in mind that the ESP32 may take a bit of time to process the upload and write to the SD card.
While the ESP32 theoretically supports network speeds up to 8 Mbps, real-world performance typically hovers around 1Mbps for concurrent read and write operations. This could be influenced by SD card capabilities. Consequently, I recommend avoiding large resources, such as pictures or CSS files, on the TinyNAS. Opt for using CDNs for scripts or employing compressed image formats like JPEG to enhance efficiency.
Step 12: (Optional) Setup Port Forward
How to Access Your Website from the Internet:
If you wish to access your TinyNAS from the internet, consider enabling port forwarding on your home router. This involves directing external port 80 to your TinyNAS's IP address. Given the non-technical nature of this post and the abundance of tutorials available on port forwarding to specific IP addresses, I won't delve into the specifics here.
Obtaining Your Own Domain:
For those interested in accessing their TinyNAS using a custom domain name (e.g., http://yourdomain.com rather than http://{your_home_ip_here}), acquiring a domain from a domain name service provider is essential.
Step 13: Your TinyNAS Is Done!
Congratulations! Your TinyNAS web server is now ready for action!
This compact web server operates on less than 4W, ensuring negligible impact on your electricity bill, even if left running 24/7 when plugged into your wall adapter. Dive in and enjoy hosting your personalized homepage hassle-free!
