How to have SPA with content pages

[webmaster]

Hi Everyone,

I am a little bit confused when working with both content pages and SPA on a NodeJS project.

At first I thought having content/template structure is the same thing as SPA? (correct me if I am wrong), but then I figured that the pages are refreshing every time I change a page, so clearly I am not implementing the SPA correctly.

I have a template called main, and I am using it for most of my views, and I have followed this guide to implementing it.

Creating template based pages and layout in Wappler with NodeJS

Now I am not sure how to implement the SPA guide in the template page which I have. Below is an example of the code which I have on the template page.

<!-- pages views -->
	<section class="content-wrapper" id="pages">
		<%- await include(content, locals); %>
		<div is="dmx-route" id="dashboard" url="../views/dashboard.ejs" path="/dashboard" exact="true"></div>
		<div is="dmx-route" id="appointments" url="../views/index.ejs" path="/index" exact="true"></div>
	</section>
	<!-- /pages views --> 

I tried following this guide Creating Single Page Apps (SPA). But having both routes and content views confuses me a little bit and its not working with me, can someone tell me what is the right way to implement SPA in this case?

[Teodor]

@webmaster

tried following this guide Creating Single Page Apps (SPA)

That's not the documentation you should be following. SPA for NodeJS is different. You need follow:

Building SPA pages with NodeJS

A single page application (SPA) is a web site/app that re-renders its content in response to navigation actions like clicking a link, without reloading the whole page. It consists of main template and different views, which are rendered in the main template. SPA for NodeJS It’s possible to build SPA pages and enable partial refresh thanks to NodeJS templating system. In our example we will show you a simple SPA page, containing of a main layout with navbar and two views, which will be loaded …

[webmaster]

Thank you for the prompt response.

I tried following the NodeJS guide for SPA, and the url is changing correctly, but the content page is not loading, so I only see the initial content page that loads the first time, then when I click on a different page the url changes but the content page stays the same.

I checked the routing and here is one example of how they all look like:

[Teodor]

Are you sure you haven’t messed the page layout experimenting different things?
Please just create a new layout page and add a couple of views to it, following the tutorial to test.

[webmaster]

I had the div container that is wrapping the content include missing so I added it and it is working now. Thanks

<div is="dmx-view" id="content">
			<%- await include(content, locals); %>
		</div>