Q&A: Routing integration in Wappler

Request For Comments
1

Hi All and @wappler_ambassadors

As routing is really a hot topic and very often requested we are now integrating it in Wappler.
Just to make sure we are all on the right track, I want to give you a heads up on how we plan to implement it, so you can see if it fits your workflow and give us valuable feedback or request more functionality before we officially add it.

What is Routing (URL rewriting)

So to make all sense to you what we are trying to achieve, it is good to understand the background of Routing (URL rewriting) :
https://aloneonahill.com/blog/url-rewriting-for-beginners/

Why it is needed for example to produce SEO friendly urls:
https://www.commonplaces.com/blog/how-to-create-seo-friendly-urls/

Next to server side URL rewriting, you probably need these days also client side routing with App Connect and Framework7, like for example when you are building SPA:

https://blog.pshrmn.com/entry/how-single-page-applications-work/

With Wappler build websites, you will probably need a combination of server side url rewrites and client side routing (to be able to load for example dynamically views in divs)

Framework7 has its own fully client side routing:
http://framework7.io/docs/routes.html

The Wappler solution

So now that you know what is it for it is time to explain how we plan to integrate it in Wappler.

In Wappler we would like to automate Routes creation as much as possible and make it visually.

As earlier explained, you might need two types of routing: server side and client side.
We would like to combine those two to work together hand in hand. So you will have a part for the server side and routing and a part in client side routing.

1. Routing Project options

The get started with Routing you will have to enable it specifically in your project settings first.

image
image718Ă—274 5.63 KB

WARNING : this will actually create a htaccess url rewrite for all UNKNOWN (or nonexistent) pages on your web site! So regular pages and files will continue to work but everything that normally gets 404 (page not found) will be redirected according to the routes you defined.

** BUT ALSO YOUR DEFAULT WEB ROOT ** will go trough the routes first and only when no route is found it will go to the default index.php

So you have to make sure you are testing it locally first, and being able to define the routes before you go live!

2. The Routing Panel

There is a a new panel in Wappler called "Routing" , where you will be defining all possible routes in your site/app:

image
image417Ă—653 17.7 KB

So primarily this will be the main routes for server side routing. Each route path calls a specific url path.

Next to regular segments, you will also be able to assign dynamically segments, like params in the url:

image
image416Ă—604 16.5 KB

Similar to how those are defined in the Framework7 routes, but they will work for regular web pages using App Connect:

The path definition syntax is actually defined in path-to-regexp library, which has pretty extensive syntax.

The parsed params will be then available as App Connect data bindings, so you can use them on your page as you wish.

3. Dynamic Views

After we have done the basic page routing, server and client side, we will move to client side views. Those are actually routes within the current page that will just load content dynamically based on the url.

So you will be actually loading partially html files (content pages) in containers.

We are still thinking of the best way to implement those partial views and have them work well together with the main server side routing.

They will be probably defined as special custom html tags like <dmx-route> that will defined the routes within the page and what to load.

We will see if we will display them in the main routing panel, or thread them as "local"

4. Route Picker

After you defined all the routes. You will need to make links to them of course on your regular pages.
So we will improve all the link pickers to allow next to just picking a file, to have an extra "route picker" that will present the same routes list as in the routing panel of all the routes that you have defined, so you can just pick a route as link.

If the route has dynamic parameters - those will be show directly on the panel so you can populate them with values.

5. Page structure and links

In normal pages you probably use document relative links to all your assets like images, scripts, links etc.

But now with routing your page comes on a complete different url, so document relative links won't work any more.

To solve this problem, you have to make your links be either site root relative or have a base tag pointing to the path your page is really on so the browser will know how to handle relative links.

We will make those options available as project options, but you will have to convert existing pages using the router to the new links format. This will be automatically for you on save once you enabled those options. But you will have to open and save the page.

Conclusion

So as you can see there is a lot of planning and preparation of doing routing on your web site as it becomes really an integral and very essential part of your website. So you have to make sure it works completely. Otherwise you will be getting a lot of pages not found or javascript/images links not being found.

Feedback

So tell me what you think about our plan to implement routing - are we on the right track? Do you miss some functionality?

10 Likes
2

Wow, Wow, Wow, George this will be a massive turning point for me, thank you so much.

Only question i have is that my .htaccess files are generally quite full of rules, will the Wappler one just append to what i already have or overwrite mine.

Just a rough idea of some of the things I could personally do often in a .htaccess file which would possibly impact routing for some of it.

Options +FollowSymLinks
Options -Indexes

#added from InMotion Hosting for SSL
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$

RewriteEngine On

### FROM http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html
###RewriteRule ^bootstrap/3/css/(.*\.css) combine.php?type=css&files=$1
###RewriteRule ^Styles/(.*\.css) combine.php?type=css&files=$1
RewriteRule ^ScriptLibrary/(.*\.js) combine.php?type=javascript&files=$1

### START WWW & HTTPS
### ensure https
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

### ensure www.
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
### END WWW & HTTPS

### add a trailing /.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)([^/])$        /$1$2/ [L,R=301]

RedirectMatch 301 /sitemap.xml /Sitemap.xml

<ifModule mod_headers.c>
    Header set Vary "Accept-Encoding"
</ifModule>

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##


<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

#############################################################
################ COMPRESSION (`DEFLATE` method)  ############
# Description:  send compressed data to visitor, thus saving Bandwith and SPEED-UP site.
# NOTE 1: If your hosting cant use `DEFLATE` method, use GZIP: http://goo.gl/qEW8Zb
#############################################################
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/css text/html text/javascript text/plain text/xml
    AddOutputFilterByType DEFLATE font/opentype font/otf font/ttf image/svg+xml image/x-icon
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-opentype application/x-font-otf
    AddOutputFilterByType DEFLATE application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml application/xml application/rss+xml
</IfModule>

AddType  application/font-woff2  .woff2
2 Likes
3

Yes - you existing rules stay as you want them. Wappler will only append this:

## Wappler routing
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . routes.php [L]
## End Wappler routing

which basically means - redirect everything that is NOT Found as file - to our main router routes.php - which will be the Wappler routing file and will re-route from there everything as you have defined in the Routing panel.

So basically we are avoiding having all rules in htaccess - but taking control of them with our own Wappler routes dispatcher

5 Likes
4

BRILLIANT, thanks so very much, what amazing news.

3 Likes
5

Do note that on the routes you define in Wappler - the route “params” (dynamic id’s and other vars) - will be available to client side app connect only and not in the php code.

So it is advisable to use them just for client side stuff.

So for our own custom PHP scripts stuff you should stick to the routing you already have.

4 Likes
6

im am very impressed about that! Such a strongly needed feature hits finally wappler! I just want to add that for multilang what would change and have any impact then? And how can we still have a flexibilty with such a powerful new feature? I guess trough these dynamc segments/params… :thinking:

1 Like
7

Good job. Will we be able to use Framework7’s router with app connect onclick event to route like it was before(will you fix this bug) or will I have to switch my whole app connect client side routing?

8

Great work George! Maybe you can setup a sample for the process of applying a dynamic redirect in order to better understand how this is meant to work? Like

www.website.com/shop/products.php?PRODCATID=2&PRODUCERID=23&PRODID=34
to
www.website.ch/shop/wines/lafitte/chateau-mouton-fine-2018

?

9

Will Asp.net iis routing be supported?? @George

1 Like
10

This is great news for SPA webapps
i wish you guys make it as close to framework7 implementation as possible.
this will save the users alot of time to understand the system and much less tutorials since the same principle apply to websites and mobile

1 Like
11

Yes the Wappler routing will use totally the Framework7 routing method and file when you have a mobile F7 project.

As for the app connect onclick - it is very difficult as framework7 currently takes full control of any clicks, but @patrick is investigating

1 Like
12

@swf - yes that is about how it will work indeed

EXAMPLE

you will enter

  • path:
    /shop/wines/lafitte/chateau-mouton-fine-2018/:PRODCATID/:PRODUCERID/:PRODID

  • url:
    /shop/products.php

so in that case if you have a link to:
/shop/wines/lafitte/chateau-mouton-fine-2018/2/23/34

will redirect internally to
/shop/products.php?PRODCATID=2&PRODUCERID=23&PRODID=34

and if you have App Connect on the page, even if the url looks like:
/shop/wines/lafitte/chateau-mouton-fine-2018/2/23/34

the query parameters PRODCATID, PRODUCERID, PRODID will be available to bind

13

@johnny.hajjar Yes full support for IIS routing as well!

The routes will be fully written in web.config directly.
IIS7 of higher is required together with IIS Rewrite module installed (is standard installed)

2 Likes
14

@psweb - slightely change of plan :slight_smile: :

Now we are writing the precise routes directly to htaccess for Apache (or web.config for IIS)! So no more general dispatcher.

You just write the routes you need and those get redirected!

Everything is simple and effective! For example see above

17

I’m not sure if I understand this George, or maybe my example was not well explained.

wines/lafitte/chateau-mouton-fine-2018 are also dynamic so shouldn’t the path be

/shop/:PRODCATID/:PRODUCERID/:PRODID

and the result only

/shop/wines/lafitte/chateau-mouton-fine-2018

?

18

Yes - all dynamic parts of the path should start with : and a name to identify them

19

And the link on the page would then be:

/shop/{{category}}/{{producer}}/{{product}}

I guess?

20

Yes something like this, we will have a picker for it.

Also you have to probably two types of path parameters - one “slug” that is just the human readable form and an id’s usually at the end

So your links looks something like:

/shop/my-great-superb-wine/22

21

Just like the url of this page then :slight_smile:

...q-a-routing-integration-in-wappler/6142/14

2 Likes