Creating Single Page Apps (SPA)

A single page application (SPA) is a website 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.

This tutorial is for PHP and ASP.NET server models. If you are using Nodejs, the. Please go to: Building SPA pages with NodeJS

Setup Template and Views

We created an index.html file in our root folder. It contains a navbar and two sections with content. We are going to convert these two sections into views, which will be loaded into the main template

First, let’s setup the routing options for the main template. Open the Routing panel:

Make sure to check the URL REWRITING DOCUMENTATION before you continue with the docs below!

Assuming that you are already familiar with the URL Rewrite docs, we add new rule:

Add a name for it - we call it home:

We set the path to just / which means load the page, when the users load your

Select the page to load:

This should be the index.html page (or whatever your main page is called):

Close the Routing panel. as we won’t need it anymore:

We have two sections on the page - home and portfolio. As their names suggest we’d like to show the home section when the users are on your home page i.e. when they load your So select the home page content on your main page:

And click the move to include file button:

A dialog appears asking you if you want to create an Include File or a Content Page. For Single Page Apps we select - Content Page:

We save the home page content page (view) as _home.html:

Add an ID for it:

Then add the path where it should be loaded. This is the home page content, so you want to show it only when the users enter So we use / as a path:

And as we need to only show it there on, we enable the Exact match option. This will ensure it won’t be displayed on other paths like: or

We are done with the home page content (view). Let’s setup the portfolio content page (view) now. Select the portfolio section and click the move to include file button:

We select Content Page in the dialog:

And we save this page as _portfolio.html:

Add an ID for it:

Then add a path where it should be loaded into the main template. We enter /portfolio as we want to show this section when our users visit the URL:

And we are done with the portfolio view.

Creating Links

We’ve included special link picker for routing, that should be used with Single Page Apps routing.
Select a link (in our case the link is the Home page link in the Navbar) then click the Routing Link Picker icon:

Select the Home page route and click Select:

Then we select the Portfolio link in the navbar:

And click the Routing Link Picker icon:

We select the path to our Portfolio view and click Select:

Save your page and you are done!

NOTE: You can have multiple main pages (templates) with their own content pages (views) if your site requires this.

Here’s the result, the content changes without reloading the pages, when we click on the links in the Navbar:

Editing Content Pages (Views)

Editing the content pages is as easy as editing any other page in Wappler. All you need to do is to select the Content Page (view) in the App Structure of the main page and click the open page icon:

The Content Page (view) will be opened separately. Here you have the same options as on other pages in Wappler. You have the App Structure and its Properties panel below:

Also you can edit the content inline and save it:

All the changes will be immediately available on your SPA!




You’re welcome :slight_smile:

1 Like

With tutorials like this, can you include a zip file with the result in future? Some of us also learn by fiddling with the code :slight_smile:

I know it will probably work well with whatever route you take regarding sharing code as per latest poll on the community.


3 posts were split to a new topic: Custom styles lost when editing content pages

Is this SPA method using any Ajax or deal with another technology ?

Yes we use Ajax to load the content areas dynamically.

See also for more details on the SPA technology and dynamic loading:


Can you please clarify the following:

  1. The parts of the page that you want to be in a view, you have put them into a ‘section’ tag/element. Is this recommended or is this just your way of preparing the code for an SPA?
  2. When you have named the new file you have preceded it with an underscore “_”, again is this for a reason or just for your own way of identifying an include file?

Hi @UKRiggers

  1. No, it’s not mandatory to be a section, i am using sections for separation of the content, but you can use a div or any other element as well.

  2. No, underscores are not required, i am just storing them like that so i can easily recognize which file is an include, when looking through the files list :slight_smile:


This seems like an implementation of Turbolinks/Pjax which is awesome. Many thanks for sharing.

1 Like

I am a bit lost. I am following the tutorial, but the index.html is a code page. I have index.ejs too. What I am doing wrong?

Two years later I second that motion, Mr. Chairman!

If the created project in a tutorial had its accompanying files zipped up it would really help the speed & accuracy of learning how to use Wappler for different situations!

Used as a Master template (in the traditional meaning of ‘template’) to refer to.

So often tutorials are followed by forum questions regarding

“I followed the tutorial but I’m stuck at this point which didn’t work”


"I don’t understand what happens at this point . . "

It would be an immense help to be able to compare the CORRECT code not just the html on a single page, but the routing files, flows, css, JS, etc in their folders at each step of a Tutorial with our own code that we produce in a separate project created to test our understanding of a Tutorial.

I’m leaving this suggestion here in this forum to see if it gets some feedback from other Developers first.

That would be amazing. Because I am following the steps and it is imposible for me to do nothing.