- To host a local server using NodeMCU
- To display a sample webpage on the local server
- NodeMCU (quantity: 1 no.)
- Micro USB cable (quantity: 1 no.)
- Breadboard (quantity: 1 no.)
- Arduino IDE on your computer
Websites on most pages are usually written in HTML for the content, and the structured using CSS. Let’s use a sample HTML+CSS script to display a website on NodeMCU’s local server.
Let’s first take a sample CSS page which already has HTML code and CSS code. We will use a Gourmet Catering Template. We can get the HTML code for this. We will need to convert the HTML code to a single C++ string so that we can use it in an Arduino Code.
To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.
Uploading the code
Step 1: Enter the final code in the Arduino IDE window.
- When you click on New to open a new blank code in the Arduino IDE, you will get a new window with two functions: void setup() and void loop()
- You can either type commands as shown in the final code under void setup() and void loop() functions or
- delete the contents of this window. Then copy and paste the final code in the Arduino IDE window.
Step 2: Compile/ verify the code by clicking on the verify button.
- Make sure the board is connected to your computer
- Check if the correct board and port is selected.
Step 3: Upload the code by clicking on the upload button, which is right next to the verify button.
- The Arduino IDE provides a progress bar when it’s uploading.
- After it is done, you will see “Done uploading” on the bottom left of your IDE.
- If you encounter any errors, you need to go back to the code and fix the errors.