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

[Adrian Perez de Castro]

Hello Bryan,

On Wed, 13 Mar 2024 18:32:49 +0000 Bryan Evenson <bevenson at melinkcorp.com> wrote:
> > -----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:

Again, my apologies for not replying earlier in the mailing list; but it was
nice chatting on IRC =)
 
> 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:/ &

Now that you are using a custom URI scheme, you should be able to remove
the "--allow-file-access-from-file-urls=true" and
"--allow-universal-access-from-file-urls=false" command line options.

The issue you were experiencing is caused because the file:// URI scheme
is defined to have a null security origin, and null security origins are not
allowed to use XmlHttpRequest or fetch() requests. There are also a few
additional CORS restrictions for file:// URLs -- some of which can be lifted
with the options you found related to file:// URLs, but not all.

> 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!

Glad you got it working!

The reason why using a custom URI scheme works (via "--dir-handler=") is that
it makes the security origin have a valid, non-null value; which makes WebKit
behave is if loading content from an HTTP server, even if the content is
actually loaded from disk without touching the network.

As a bonus, if you want to have more than one webapp *and* you want to isolate
their data (localStorage, IndexedDB, etc.) you can set a different custom URI
scheme for each of them ("--dir-handler=" can be used multiple times) and each
scheme will be a different security origin -- and webapp data is always stored
isolated for each security origin.
 
> > 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.cs
> >
> > [...]

For the record, the message about g_application_activate() can be safely
ignored, and newer versions of Cog will not produce it anymore.


Cheers,
—Adrián
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 195 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-wpe/attachments/20240313/3860c04a/attachment.bin>