Creating and Debugging Website Routers

June 6th 2021 new story

@veloVelo by Wix

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.

Creating a router allows you to take complete control when handling certain incoming requests to your site.

0 reactions

This article takes you through what code you have to write in order to make your router work. To learn more about what a router is and why you would want to create one, see About Routers.

0 reactions

Add a Router

To add a router:

0 reactions

1. Click on the

0 reactions

icon that appears when hovering over the Page Code's Main Pages section in the Velo Sidebar and choose Add a Router.

0 reactions

2. Enter a URL prefix for your router and click Add & Edit Code. All incoming requests with the specified URL prefix will be sent to your router for handling.

0 reactions

When adding a router:

0 reactions

Your router's
```
router()
```
and
```
sitemap()
```
functions are added in a routers.js file with sample code for a simple routing scenario. The routers.js file is found in the Code Files's Backend section of the Velo Sidebar.
A new section, Router Pages, is created in the Velo Sidebar for your routers. Router pages are grouped together under a title based on the prefix you chose earlier. One router page is created to start with. For example, if you named your router "myRouter", a page named myRouter-page is added under the title MyRouter Pages (Router).

Sample Scenario

There are four parts to the sample code that's added to the routers.js file:

0 reactions

The
```
import
```
statement.
The sample data.
The
```
router()
```
function.
The
```
sitemap()
```
function.

Import statement

0 reactions

The functionality used to create a router is contained in the Router API. To use this functionality, you need to import it. By default, the

ok()

and

notFound()

functions are imported, as well as the

WixRouterSitemapEntry

object.

0 reactions

import {ok, notFound, WixRouterSitemapEntry} from "wix-router";

If you want to use more of the functionality from the Router API, you need to add it to the

import

statement.

0 reactions

Sample Data

0 reactions

In the sample scenario, the router uses some static data contained in an object named

peopleData

0 reactions

const peopleData = {  
  "Ash": {    
    title: "Ash Stowe",    
    image: "https://static.wixstatic.com/media/b8f383e0fe2b478ea91362b707ef267b.jpg"  
  },  
  "Aiden": {    
    title: "Aiden Johnson",    
    image: "https://static.wixstatic.com/media/ca3c7ac5427e43928aa5f3f443ae2163.jpg"  
  },  
  "Jess": {    
    title: "Jess White",    
    image: "https://static.wixstatic.com/media/147fe6f37fe24e83977b4124e41b6d3d.jpg"  
  },  
  "Morgan": {    
    title: "Morgan James",    
    image: "https://static.wixstatic.com/media/59e1f2f4dbbc4f7c9d6e66e3e125d830.jpg"  
  }
};

The

peopleData

object contains four keys, each representing a person. Each person contains two properties, a

title

that is the person's full name and an

image

that is a link to an image of the person.

0 reactions

Although you can use static data with a router, typically you would use data
from your site's database or an external source. We'll see where you would write code to retrieve that data a little later.

0 reactions

Regardless of where you get the data from, since you'll be writing the code that handles it, the data can be structured in any way you like.

0 reactions

Router Function

0 reactions

Remember, all incoming requests with the URL prefix you specified when creating the router are sent to your router for handling. The

router()

function is where you handle those requests.

0 reactions

The

router()

function is named with the following convention:

0 reactions

<router prefix>_Router(request)

So if you named your router myRouter, the code added to the routers.js file should look like:

0 reactions

myRouter_Router(request) {  // routing code ...}

The

router()

function has a request parameter which receives a

WixRouterRequest

object that contains information about the incoming request. The object has information about the URL used to reach the router, where the request came from, and who the request came from.

0 reactions

Typically, the

router()

function will decide which page to show (if any) and what data to pass to the page. A response is then sent using the

forbidden()

notFound()

ok()

redirect()

or

sendStatus()

functions.

0 reactions

Let's take a look at the sample

router()

function code:

0 reactions

export function myRouter_Router(request) {

  // Get item name from URL request
  const name = request.path[0];

  // Get the item data by name
  const data = peopleData[name];

  if (data) {

    //define SEO tags 
    const seoData = { 
      title: data.title, 
      description: `This is a description of ${data.title} page`,
      noIndex: false,
      metaTags: [
         {"og:title": data.title,
          "og:image": data.image,
          content: "People Data"
         }
      ]
    };

    // Render item page 
    return ok("myRouter-page", data, seoData); 
  }

  // Return 404 if item is not found 
  return notFound();
}

The

router()

function begins by parsing the request's path to pull out a name value.

0 reactions

const name = request.path[0];

For example, a user might reach this

router()

function by browsing to

https://mysite.com/myRouter/Ash

. The received

WixRouterRequest

object's

path

property will be an array with one element:

["Ash"]

. Now the value of name is "

Ash

0 reactions

Next, the

router()

function retrieves data based on the

name

it received.

0 reactions

const data = peopleData[name];

Continuing our example above, we pull out Ash's information from the

peopleData

object.

0 reactions

data

now holds:

0 reactions

{ 
  title: "Ash Stowe",
  image: "https://static.wixstatic.com/media/b8f383e0fe2b478ea91362b707ef267b.jpg"
}

If you want to retrieve data from an external source, this is where you place the call to retrieve that data.

0 reactions

After attempting to retrieve the data that corresponds to the incoming request, we check to see if any data was found:

0 reactions

if (data) {
  // ...
}

If nothing was found, the

if

is skipped and we return a 404 error using the

notFound()

function.

0 reactions

return notFound();

Assuming we found the data we were looking for, we now prepare some header data for our page:

0 reactions

const seoData = { 
  title: data.title, 
  description: `This is a description of ${data.title} page`,
  noIndex: false,
  metaTags: {
    "og:title": data.title,
    "og:image": data.image
  }
};

Here we create a

HeadOptions

object that defines what will be put in the HTML head of the page we respond to the request with. That object is stored in the seoData variable.

0 reactions

The sample code creates a

title

and

description

based on the

title

property of the retrieved

data

object. It also sets

noIndex

to false, meaning search engines should index the page. Finally, some

metaTags

properties are added as well.

0 reactions

You can create the

HeadOptions

object using any information you want.

0 reactions

You can also add a keywords property to the

HeadOptions

object with a string containing the page's keywords.

0 reactions

Finally, we return a

WixRouterResponse

object using the

ok()

function:

0 reactions

return ok("myRouter-page", data, seoData);

Here we route the user to the router page named "

myRouter-page

" and pass it the

data

that was retrieved and the

seoData

that was built for the page.

0 reactions

Depending on the situation, you can return a number of different responses from the

router()

function. So far we've seen the

notFound()

and

ok()

functions in use. You can also use the

forbidden()

function to return a

response, the

redirect()

function to return a

response, or the

sendStatus()

function to return a response with any status code you choose.

0 reactions

Router Data

0 reactions

To use the data that was returned with a

WixRouterResponse

using the

ok()

function, use the

wix-

window

getRouterData()

function.

0 reactions

For example, we can take the data passed by the sample router code and use it to present a person's information on the myRouter-page page that was created.

0 reactions

First, we need to add a text and image element to serve as placeholders for a person's title and image.

0 reactions

Next, in the page's code we retrieve the router data and set the text and image elements to display the

title

and

image

from the data.

0 reactions

import wixWindow from 'wix-window';

$w.onReady(function () {
  let data = wixWindow.getRouterData();
  $w("#text1").text = data.title;
  $w("#image1").src = data.image;
});

If you preview the page, you'll see that the placeholders we put on the page are filled in with information from the data that was passed to the page. You can use the preview widget to see what the page looks like for any of the people in the

peopleData

object that was defined in the routers.js file.

0 reactions

The preview widget gets populated with the

title

values from the

WixRouterSitemapEntry

objects that are returned by the router's

sitemap()

function.

0 reactions

Sitemap Function

0 reactions

Like the

router()

function, the

sitemap()

function is named with the following convention:

0 reactions

<router prefix>_Sitemap(sitemapRequest)

So if you named your router myRouter, the code added to the routers.js file should look like:

0 reactions

myRouter_Sitemap(sitemapRequest) {  // routing code ...}

The

sitemap()

function has a

sitemapRequest

parameter which receives a

WixRouterSitemapEntry

object that contains information about the incoming request. The object has information about the URL used to reach the router, the pages in the router, and who the request came from.

0 reactions

Typically, the

sitemap()

function creates a

WixRouterSitemapEntry

object for each item in the data used by the router. So, in our example, we create an entry for each person in the

personData

object. You also might want to include entries for other pages, like an index page or a search page.

0 reactions

Let's take a look at the sample

sitemap()

function code:

0 reactions

export function myRouter_SiteMap(sitemapRequest) {

  // Convert the data to site map entries
  const siteMapEntries = Object.keys(peopleData).map( (name) => {
    const data = peopleData[name];
    const entry = new WixRouterSitemapEntry(name);
    entry.pageName = "myRouter-page"; // The name of the page in the Wix Editor to render
    entry.url = `/myRouter/${name}`; // Relative URL of the page
    entry.title = data.title;   // For better SEO - Help Google
    return entry;
  } );

  // Return the site map entries
  return siteMapEntries;
}

The

sitemap()

function takes the keys of the peopleData object and uses the JavaScript

map()

function to create an array of

WixRouterSitemapEntry

objects, one object for each key. Each entry is given values for the

pageName

url

, and

title

properties. Then the array is wrapped in a

Promise

and returned.

0 reactions

A sitemap entry can also contain

changeFrequecy

lastModified

, and

priority

properties to give search engines more information about each page.

0 reactions

In a case where you're using a router with external data, in the

sitemap()

function you would retrieve that data and build sitemap entries for each item that was retrieved.

0 reactions

Previously published at https://support.wix.com/en/article/velo-creating-a-router

0 reactions

by Velo by Wix @velo. Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.Develop Smarter, Deliver Faster

Join Hacker Noon

Create your free account to unlock your custom reading experience.

Creating and Debugging Website Routers

Creating and Debugging Website Routers

@veloVelo by Wix

Add a Router

Sample Scenario

Recommend

迈阿密比特币大会沦为作秀场？以太坊社区：就凭这个比特币大会，我们就活该承受 10...

龙树菩萨《中论》

The Future of Education in the 21st Century

#Learn2Trade Crypto - What Is a MACD Indicator and How To Use It Correctly?

阿里云SLS多云日志采集、处理及分析最佳实践

nginx中server_name与host匹配优先级

How Harold Can Generate A Website For You

Accepting Payments With The Wix Payment API

How to identify if a crypto or blockchain project is a scam or not?

10 DeFi Projects to Keep Your Eye On in 2021

About Joyk