Login

Display a website on NodeMCU’s local server

Objectives

  • To host a local server using NodeMCU
  • To display a sample webpage on the local server

Things

  1. NodeMCU (quantity: 1 no.)
  2. Micro USB cable (quantity: 1 no.)
  3. Breadboard (quantity: 1 no.)
  4. Arduino IDE on your computer

Let’s begin!

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.

Final 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.
SEE ALL Add a note
YOU
Add your Comment

We would love to see what you build out of these learnings!

Click here to submit your projects, share it with the world and stand a chance to be rewarded.

top

Knowledge and Content by Li2 Technologies | © 2021 NASSCOM Foundation | All rights reserved

X