Lightsail (AMZ) Debian Webhook via js and HTML

First, coming off of electric imp where there is a cloud agent and the device. I want to get a similar setup where I have a web page with a few buttons and status of the end point device. Where I am stuck. I have node on mac and the particle api installed, I have script relay.js that I can run and it will fire the web hook and my photon will get a cycleRelay. All good. I want that code on a webpage on a lightsail instance in amazon.
I have wordpress up there but i have installed the particle command line so I can particle … where I am currently stuck is running that same script on lightsail. When I attempt to install particle-api-js i get

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'particle-api-js@9.4.1',
npm WARN EBADENGINE   required: { node: '>=12.x', npm: '8.x' },
npm WARN EBADENGINE   current: { node: 'v12.22.12', npm: '7.5.2' }
npm WARN EBADENGINE }
npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable
@v3! Check these notes: https://bit.ly/2ZEqIau
npm WARN deprecated superagent@5.3.1: Please upgrade to v7.0.2+ of superagent.  We have fix
ed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (EN
OENT on attach()), and all tests are now passing.  See the releases tab for more informatio
n at <https://github.com/visionmedia/superagent/releases>.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recomme
nded for usage due to the number of issues. Because of the V8 engine whims, feature detecti
on in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled.
 Some versions have web compatibility issues. Please, upgrade your dependencies to the actu
al version of core-j

uname - a Linux ip-172-26-13-180 5.10.0-18-cloud-amd64 #1 SMP Debian 5.10.140-1 (2022-09-02) x86_64 G
NU/Linux

Fixing this will get node relay.js to work – this runs on my mac but not in light sail instance. Then I need a bit of help on the actual calling below.

My js looks like this for relay

var Particle = require('particle-api-js');
var particle = new Particle();

console.log ("loading function");


var fnPr = particle.callFunction({ deviceId: '33xxxxxxxxxxxxxxxxxxx4', name: 'Relay', arg
ument: 'cycle', auth: '4b7db2xxxxxxxxxxxxxx90eafxxx'});

fnPr.then(
  function(data) {
console.log('Function called succesfully:', data);
  }, function(err) {
  console.log('An error occurred:', err);
  });

Gives an error Cannot find module ‘particle-api-js’. I also cannot find it on the lightsail instance.


Second problem: Here is my simple HTML and JS for doing the webhook call on lightsail. I know a lot of languages but JS is not one of them. HTML

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>JavaScript Click Event Tutorial</title> 
<link rel="stylesheet" href="index.css">
    </head> 
<body> 
<p class="name">freeCodeCamp</p> 
<button>Change color</button> 
        <script src="index.js"></script>
    </body>
</html> 

JS. - the comments in var lines where to test if the function was being called.

// Javascript
const name = document.querySelector(".name");
const button = document.querySelector("button");
var Particle = required('particle-api-js');
var Particle = new Particle();
var token;

console.log('loading function');

//button.addEventListener("click", function() {
//name.style.color = "blue";
//})
button.addEventListener("click", function (){
name.style.color = "blue"; // change txt color on page to prove function is called.   This works without the particle var at the top.
var ret = particle.callFunction({ deviceId: '3300xxxxxxxxxxxxxxx323334', name: 'Relay', argume
nt:'cycle', auth: '4b7db2cxxxxxxxxxxxxxxxxxxxxxxxx90eaf37'});

});

Again, I missed something when installing

It looks like your lightsail instance has npm 7.5.2, which is below the minimum required to use particle-api-js. Because if this, it won’t be installed and won’t be available.

npm WARN EBADENGINE   package: 'particle-api-js@9.4.1',
npm WARN EBADENGINE   required: { node: '>=12.x', npm: '8.x' },
npm WARN EBADENGINE   current: { node: 'v12.22.12', npm: '7.5.2' }

The options are:

  • Upgrade your lightsail instance version. I would upgrade to node 16 LTS because node 12 is EOL.
  • Use an older version of particle-api-js that has a lower npm version requirement
  • Skip particle-api-js and use raw HTTP REST calls. Since you only are using the one call now, that’s probably the easiest solution.

so did find a way to updata npm, now trying to install the api

Okay, so now. node relay.js works on lightsail with proper npm installed with particle api js installed.

The index.html and index.js do not work… comment them out, I do see the function change the txt color.
any ideas Where is the "console’ for errors like this on lightsail instance?

Working…Funny how one word “Module” in your script tag messed it up. A static HTML page with a backend JS file along with a style sheet. It calls a webhook on press of a button.

<!doctype html>
<html lang="en"> 
        <head>  
                <meta charset="UTF-8"> 
             <meta name="viewport" content="width=device-width, initial-scale=1.0"> /                <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
               <title>Test text will turn blue on press</title> 
             <link rel="stylesheet" href="index.css">
    </head>
<body>
<script src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.m
in.js"></script>
<p class="name">Photon Button</p>
<button>Change color</button>
<script src="index.js"></script>
   </body>
</html>
!>
~ Nice part is token is hidden in Javascript.  Maybe they could see it in a console?   Turning the txt blue was just a way to know the script was called.

JS file

// Javascript
const name = document.querySelector(".name");
const button = document.querySelector("button");
var particle = new Particle();
var token;

console.log('loading function');

button.addEventListener("click", function (){
name.style.color = "blue";
particle.callFunction({ deviceId: '330xxxxxxxxxxxxxxxxxxxxx34', name: 'Relay', argume
nt:'cycle', auth: '65bxxxxxxxxxxxxxxxxxxxxxxx84'});

});

CSS file

    *{ 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box;
      }

      body { 
      background: #f1f1f1; 
      display: flex; 
      align-items: center; 
        justify-content: center; 
flex-direction: column;
      }

      article { 
              align-items: center; 
                justify-content: center; 
flex-direction: column;
}

article {
width: 400px;
background: #fff;
padding: 20px 20px 0;
font-size:18px;
max-height: 270px;
overflow: hidden;
transition: max-height 1s;
text-align: justify;
margin-top: 20px;
}

p {
margin-bottom: 16px;
}

article.open { max-height: 1000px;
}

button {
background: #0e0b22;
color: #88f;
padding: 0.6rem;
margin-top: 20px;
border: none;
border-radius: 4px;
}

Odd it would install such a down level version, had to find a single site that had the instructions to get NPM to 8x. Thank you.