integrate react into a WebOS application

Web App Development
1

Good morning,
I wanted to know if there was a tutorial or boilerplate that allows me to integrate react into a WebOS application (ares-generate -t basic ./sampleApp), in a single code so that I can also call up WebOs methods and services in the React part.

Thank you

1 Like
2

If your app is a packaged web app, please try again as a hosted web app. Thank you.

3

Thank you for your reply.
I tried creating a Hosted web app by connecting it to a react app, and everything works for me, both on the simulator and the emulator.
But how do I integrate the webOS API into my code?
I tried integrating it with npm ( @procot/webostv ) in the react app.
But in the emulator it doesn’t detect the methods I put in it.
How can I do this?

import logo from './logo.svg';
import './App.css';
import webOS from '@procot/webostv';
import { useEffect, useState } from 'react';

function App() {

  const [deviceInfo, setdeviceInfo] = useState('Non ha caricato nulla');
  const [platform, setplatform] = useState('Non ha caricato nulla');

  useEffect(() => {

      webOS?.platform?.tv ?
        setplatform( `OK ${JSON.stringify(webOS.platform.tv)}`)
        : setplatform('ERROR platform');

        webOS?.deviceInfo ?
          webOS.deviceInfo( (device) => {setdeviceInfo(`OK ${JSON.stringify(device)}`)})
          : setdeviceInfo('ERROR deviceInfo');

  }, [])
  

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <pre> { platform }</pre>
        <pre> { deviceInfo }</pre>
      </header>
    </div>
  );
}

export default App;

Thanks

4

For questions about the procot/webostv package, please contact procot. And if you want to use LG API, please refer to References. Thank you.