hosting a react web app from arduino mkr 1010 wifi

I have arduino code that will successfully deploy data to an ip address via some html and css. It does a lot of other things in between but don't worry about those. I will post the code below but instead of using the html_1 and css_1 variables to display the data, How would I do this with a react framework that has been set up in VS code? code below although you probably only need to see the first few lines...


String html_1 = {"\n\n\n\n\nRealtime Garden Monitoring\n>\n\n\n\n\t
\n        Welcome to Your Digital Garden\n    
\n        \n        \n        \n        \n    
\n\n"}; String css_1 = {"@charset \"ISO-8859-1\";\n*, *::before, *::after{\n\tbox-sizing: border-box;\n\tfont-family: Gotham Rounded, sans-serif;\n    font-weight: normal;\n}\n\nbody {\n\tpadding: 0;\n\tmargin: 0;\n    background: linear-gradient(to right, #00AAFF, #00FF6C);\n}\n\n.welcome-title {\n    padding-top: 30px;\n    padding-bottom: 30px;\n    text-align: center;\n    font-size: 3rem;\n        \n}\n\n.sensor-data-grid {\n\tdisplay: grid;\n\tjustify-content: center;\n\talign-content: center;\n\tmin-height: 100vh;\n\tgrid-template-columns: repeat(2, 250px);\n    grid-template-rows: minmax(250px, auto) repeat(2, 250px) \n     \n}\n\n.sensor-data-grid > button {\n    font-size: 2rem;\n    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n\tborder: 1px solid white;\n\toutline: none;\n\tbackground-color: rgba(255, 255, 255, .7);\n}"}; const byte numChars = 64; char idpass[numChars];   // an array to store the received data boolean newData = false; char ssid[numChars];             //  your network SSID (name) between the " " char pass[numChars];      // your network password between the " " int keyIndex = 0;                 // your network key Index number (needed only for WEP) int status = WL_IDLE_STATUS;      //connection status WiFiServer server(80);            //server socket int badPassFlag; boolean badPass = false; void setup() {  Serial.begin(9600); //  while (!Serial);    ownerInfoReadFromPy();  combineWebDev();  enable_WiFi();  connect_WiFi();  if (badPass == true){    Serial.print("Close the program and Retry");    delay(9999999999);  }  server.begin();  printWifiStatus();  owner.validMemory = true;  my_flash_store.write(owner); } void loop() {  client = server.available();  if (client) {    printWEB();  }  delay(5000 / 3); } void ownerInfoReadFromPy(){  if (owner.validMemory == false){    while (strlen(pass) == 0){      recvWithEndMarker();      showNewData();      getId();      getPass();      delay(1000);    }        for (int i=0; i < strlen(ssid); i++){      owner.ssidMemory[i] = ssid[i];    }    for (int j=0; strlen(pass); j++){      owner.passMemory[j] = pass[j];      if (j == strlen(pass)){        Serial.println("Connecting..");      }    }    Serial.println("Connecting...");  } } void combineWebDev(){  html_1.replace("%gardenStyles%", css_1 ); } void recvWithEndMarker() {    static byte ndx = 0;    char endMarker = '\n';    char rc;      while (Serial.available() > 0 && newData == false) {        rc =;        if (rc != endMarker) {            idpass[ndx] = rc;            ndx++;            if (ndx >= numChars) {                ndx = numChars - 1;            }        }        else {            idpass[ndx] = '\0'; // terminate the string            ndx = 0;            newData = true;        }    } } void getId(){  for (int i=0; i < strlen(idpass); i++){    if (idpass[i] == ',' && idpass[i+1] == ' '){      break;    }else{      ssid[i] = idpass[i];    }  } } void getPass(){  int startPoint = strlen(ssid) +2;  for (int i=startPoint; i < strlen(idpass); i++){      pass[i - startPoint] = idpass[i];  } } void showNewData() {    if (newData == true) {      newData = false;    } } void printWifiStatus() {    // print the SSID of the network you're attached to:  Serial.print("SSID: ");  Serial.println(WiFi.SSID());  // print your board's IP address:  IPAddress ipAddress = WiFi.localIP();  Serial.print("IP Address: ");  Serial.println(ipAddress);  // print the received signal strength:  long rssi = WiFi.RSSI();  Serial.print("signal strength (RSSI):");  Serial.print(rssi);  Serial.println(" dBm");  Serial.print("To see this page in action, open a browser to http://");  Serial.println(ipAddress);  Serial.println("You Are Connected!"); } void enable_WiFi() {  // check for the WiFi module:  if (WiFi.status() == WL_NO_MODULE) {    Serial.println("Communication with WiFi module failed!");    // don't continue    while (true);  }  String fv = WiFi.firmwareVersion();  if (fv < "1.0.0") {    Serial.println("Please upgrade the firmware");  } } void connect_WiFi() {  // attempt to connect to Wifi network:    while (status != WL_CONNECTED) {      if (badPassFlag < 3){        Serial.println("Attempting to connect to SSID: ");        // Connect to WPA/WPA2 network. Change this line if using open or WEP network:        status = WiFi.begin(owner.ssidMemory, owner.passMemory);                // wait 10 seconds for connection:        delay(10000);        badPassFlag += 1;              }else{        Serial.println("Failed to connect. Possibly bad password/netid combination or bad/no signal strength. Please disconnect the USB!");        badPass = true;        break;      }    }     } void printWEB() {  if (client) {                             // if you get a client,    Serial.println("new client");           // print a message out the serial port    String currentLine = "";                // make a String to hold incoming data from the client    while (client.connected()) {            // loop while the client's connected      if (client.available()) {             // if there's bytes to read from the client,        char c =;             // read a byte, then        Serial.write(c);                    // print it out the serial monitor        if (c == '\n') {                    // if the byte is a newline character          // if the current line is blank, you got two newline characters in a row.          // that's the end of the client HTTP request, so send a response:          if (currentLine.length() == 0) {            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)            // and a content-type so the client knows what's coming, then a blank line:            client.println("HTTP/1.1 200 OK");            client.println("Content-type:text/html");            client.println();                      moistureReading = analogRead(A1);            if (i <= storageLength - 1){              moistureReadingList[i] = moistureReading;              i += 1;            }            else{              for (int j = 0; j < storageLength; j++){                moistureReadingList[j] = 0;              }              i = 0;            }                        tmpString = html_1;            tmpString.replace("%moistureData%", String(moistureReading) );            Serial.println("");            Serial.print("[");            for (int j=0; j < storageLength; j++){                          Serial.print(moistureReadingList[j]);              Serial.print(" ");            }            Serial.println("]");                        client.flush();            client.print( tmpString );                        // The HTTP response ends with another blank line:            client.println();            // break out of the while loop:            break;          }          else {      // if you got a newline, then clear currentLine:            currentLine = "";          }        }        else if (c != '\r') {    // if you got anything else but a carriage return character,          currentLine += c;      // add it to the end of the currentLine        }      }    }    // close the connection:        client.stop();    Serial.println("client disconnected");  } }

This is a bit old. But maybe some other people will stumble over this. I am planning to do the same stuff that you're trying to do.

So I just want to share a simple approach that worked for me. I want to change my deployment to make it more scalable but at the moment it's a first simple way to get it working.

I used gulp ( to bundle the react project in a simple file. This can then be imported normally as you already are doing in your example. Of course this is limited by the size of the react app. An empty project of my needed ca. 7KB. If I find a better solution I will share it. I'm sure there is one.