Routing fails in a PWA + NodeJS app

[jamesw]

OS info

• Operating System : Windows 10.0.17134
• Wappler Version : 3.4.1

Problem description

When building a NodeJS based PWA app using this structure:

public/index.html
public/views/partials/_users.html

Where index.html defines routes inside the page using <div is="dmx-route" elements, the routing fails with {"status":"404","message":"/users not found."}. This may be do to a flaw in the concatenation logic in the lib/setup/routes.js file. You have this on line 61:

I think you fail to take into account parent pages based on URLs to the .html file have a path / and a child path may also start with /, causing the resulting route path `//users’. Here was my debug output when testing your routing code (since my site refused to work on a refresh):

The line should perhaps be this:

if (parent && parent.path) path = parent.path + path.replace(/^\//, '');

That change fixes my problem and the site works properly now.

[George]

How comes your views folder is under your public folder? This is wrong.

[jamesw]

Because it’s a NodeJS based PWA and it doesn’t work any other way. If you have another way to set up a PWA app for NodeJS please do tell. This is the only way to get it to work in the editor, because the editor is using the NodeJS service, and it only serves properly from the public folder (otherwise some resources cannot be found, and server connect doesn’t work).

[George]

You should just setup it as any other NodeJS project. Make sure you create a new project and choose NodeJS initially.

[jamesw]

I’m not sure you are understanding the situation. I’m creating a PWA app, and it requires index.html to be in the ROOT of the project. Other partials for the index are also .html files. Setting web root to the root of the project causes the server connect to fail. I just tried with a new NodeJS app and the same thing still happens.

Also, when I create a new NodeJS project and put index.html in the root I get this:

It seems to be because the system is expecting the .html to be in public (web root). Once I change the web root to the project root the error goes away. The only other way is to put the .html files into public, point the project’s web root and target to public then edit the files there. In fact, that’s the only way to get the server connect to work in this case.

[George]

See also:

Node.js PWA

Let me explain more in detail the special situation with NodeJS and PWA caching. In NodeJS and its templating support, we introduced the so called partial refresh for a view. So instead of loading the full page only the content view is loaded in a hybrid refreshing approach. So guarantee that and the full page (for full browser refresh or SEO) as well only the view can be loaded, we have a smart routing solution. It detects based on accept header what content is required and set it out. While…

[jamesw]

Thanks for that info, it really helps to understand things on a more technical level, which I need. However, it’s not the underlying issue for this thread. My issue is I was trying to use HTML instead of .ejs and that was causing issues. Using .html causes the need to serve the static files differently causing server connect to fail fining the configurations. I think the main issue was trying to have a default index.html in the project root for PWA. I’m going to switch back to .ejs files in the views folder and just use that.