[wpe-webkit] Need help getting started with a React web app to use with cog

[Bryan Evenson]

> -----Original Message-----
> From: Bryan Evenson <bevenson at melinkcorp.com>
> Sent: Wednesday, March 13, 2024 8:28 AM
> To: Bryan Evenson <bevenson at melinkcorp.com>; webkit-
> wpe at lists.webkit.org
> Subject: RE: Need help getting started with a React web app to use with cog
> 
> 
> 
> > -----Original Message-----
> > From: Bryan Evenson <bevenson at melinkcorp.com>
> > Sent: Friday, March 8, 2024 2:13 PM
> > To: webkit-wpe at lists.webkit.org
> > Subject: [wpe-webkit] Need help getting started with a React web app
> > to use with cog
> >
> > Our group is getting started with trying to build a React web app that
> > cog can run on an NXP i.MX8M board.  We're using the meta-webkit layer
> > for Yocto to get WPE Webkit and cog on the hardware.  We're a little
> > confused on what to use for a framework for buildilng our React web app.
> >
> > Our group is used to using the Ionic framework with React.  They have
> > also used Electron.  Both create more support package files than
> > necessary and don't immediately work on our hardware.  I'm sure we're
> > overthinking this and there is a simpler way to approach this.  Is
> > anyone else on this list building React apps that cog can run?  If so, what are
> you using for development?
> 
> I'm getting closer, but I still don't have a working build.  I am using the React
> Native Tools extension in VS Code.  I used 'create-react-app' to create a basic
> react application and was then able to bundle everything into a single
> directory.  The i.MX8M demo board has a demo web app with simple HTML
> that starts with a systemd service.  I replaced the /srv/www/ directory on my
> system with the bundled React app directory.  The systemd service starts cog
> with this command:
> 
> cog --allow-file-access-from-file-urls=true  --allow-universal-access-from-file-
> urls=false  --enable-offline-web-application-cache=false --enable-page-
> cache=false --allow-modal-dialogs=true --enable-write-console-messages-to-
> stdout=true /srv/www/index.html &
> 

After getting some assistance on the IRC channel, I got it working.  I had to add the dir-handler option so it would properly handle the directory listing requests.  The full command line for my case was:

cog --allow-file-access-from-file-urls=true  --allow-universal-access-from-file- urls=false  --enable-offline-web-application-cache=false --enable-page-cache=false --allow-modal-dialogs=true --enable-write-console-messages-to-stdout=true --dir-handler=app:/srv/www app:/ &

Once I made that change everything started working fine.  I was even able to run some more complex React apps created with Ionic.  Thanks for the help!

> I'm getting a white screen when the service runs.  I see these error messages in
> the log:
> 
> Your application does not implement g_application_activate() and has no
> handlers connected to the 'activate' signal.  It should do one of these.
> CONSOLE SECURITY ERROR Not allowed to load local resource:
> file:///static/js/main.bbda826d.js
> file:///srv/www/index.html:1:530: CONSOLE SECURITY ERROR Not allowed to
> load local resource: file:///static/css/main.f855e6bc.css
> 
> I changed the --allow-universal-access-from-file-urls to true and restarted the
> service.  The two console security error messages disappeared but I'm still
> seeing a blank white screen instead of the application.  Is there something I
> need to change in the default web app created with 'create-react-app', or any
> other cog options to correctly run this web app under cog?
> 
> >  _______________________________________________
> > Do not post admin requests to the list. They will be ignored.
> > webkit-wpe mailing list      (webkit-wpe at lists.webkit.org)
> > Help/Unsubscribe/Update your Subscription:
> > https://lists.webkit.org/mailman//listinfo/webkit-wpe