> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Create a Router
## Article: Create a Router
## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/routers/create-a-router.md
## Article Content:
# Create a Router
Create a [router](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/routers/about-routers.md) to customize how your site handles certain incoming requests.
> **Note**: Routers currently require Velo APIs and file naming conventions. While you can use the JavaScript SDK alongside Velo, router handlers must be defined using Velo syntax in the `routers.js` backend file.
To create a router you first need to add the router in the site editor to set up the frontend pages, then code the router logic to handle requests and generate responses.
## Step 1 | Add the router in the site editor
Whether you're working in the editor, [Wix IDE](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/wix-ide/about-the-wix-ide.md), or your [local IDE](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/git-integration/about-git-integration-with-wix-cli.md), you must first set up the router in the site editor. If you skip this step, Wix won't create the frontend router pages that are displayed to site visitors, and you won't have another way to add them. Once you create your router in the site editor, you can add the code in your preferred IDE.
At the end of this step, you'll have a router with a URL prefix configured in your site, along with the necessary files and pages created automatically.
To add a router to your site:
::::tabs
:::Wix-Studio
1. Click the **Pages** icon  to open the **Site Pages** panel.
1. Click the **Add New Page** icon . Then, click **Add** under Router.
>**Note:** You can also add a router from the **Page Code** section of the Code panel. Next to **Main Pages**, click the **Add Page** icon , and then click **Add router**.
1. Enter a [URL prefix](https://support.wix.com/en/article/velo-about-routers#url-prefix) for your router and click **Add & Edit Code** to add the router to your site. All incoming requests with the specified URL prefix will be sent to your router for handling.
:::
:::Wix-Editor
1. In the sidebar, go to **Page Code** > **Main Pages**. Click the **Add Page** icon , and then click **Add router**.
2. Enter a [URL prefix](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/routers/about-routers.md#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.
:::
::::
Depending on which development environment you're using, the following occurs once you've added the router:
::::tabs
:::Editor
* The [`router()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/router.md) and [`sitemap()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/sitemap.md) methods for your router are added in a `routers.js` file with sample code for a simple routing scenario. The `routers.js` file is located in the **Backend & Public** section of the Code panel.
* A section called **Router Pages** is created in the **Page Code** section of the Code panel. 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)**.
:::
:::Wix-IDE
* The `router()` and `sitemap()` methods for your router are added in a `routers.js` file with sample code for a simple routing scenario. The `routers.js` file is located in `src/backend`.
* In the site editor, a section called **Router Pages** is created in the **Page Code** section of the Code panel. 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)**.
Add any router pages in the site editor. In the Wix IDE, those pages then appear under `src/pages`. Note that in the Wix IDE the router pages aren't grouped by router, so if you create more than 1 router, name each router page clearly to avoid confusion.
:::
:::Local-IDE
* A modal opens in your site editor containing sample code and instructions on how to add the code to your site. We recommend copying the code to make sure your `router()` and `sitemap()` methods are set up correctly.
* A **Router Pages** section, is created in **Page Code** section of the Code panel. Router pages are grouped together under a title based on the prefix you chose earlier. One router page is created to start with. This page and any other router pages you create are added to your GitHub repository. You can then pull them to your local repo and write the code in your IDE.
:::
::::
## Step 2 | Code the router
This step involves writing the actual router logic that handles incoming requests and generates appropriate responses. The code for the router works the same way no matter which IDE you're working in. All your router logic goes in the `routers.js` file.
At the end of this step, you'll have a fully functional router that can handle custom URL patterns, process requests, and return dynamic content with proper SEO metadata.
There are 4 parts to the sample code that's added to the `routers.js` file:
* **The `import` statement:** The default code imports some basic router functionality from the [Router API](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/introduction.md), including the [ok()](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/ok.md) and [notFound()](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/not-found.md) methods, as well as the [`WixRouterSitemapEntry`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-sitemap-entry.md) object.
```javascript
import {ok, notFound, WixRouterSitemapEntry} from "wix-router";
```
Keep this `import` statement when you customize your code, and use it to add any further functionality from the Router API. You may also need to import additional modules, such as the [Data API](https://dev.wix.com/docs/sdk/backend-modules/data/items/introduction?apiView=SDK.md).
* **The sample data:** The sample code includes an object called `peopleData`, which is the data the sample router displays on the router page. For your own code, delete, or replace this object. You can use the Data API to [retrieve data items](https://dev.wix.com/docs/sdk/backend-modules/data/items/query?apiView=SDK.md) from a collection.
* **The [`router()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/router.md) method:** Every time you add a router to a site, Wix adds a `router()` method for it in `routers.js`. The first `router()` method added contains sample code below that does the following:
The router gets the path from the `request` parameter (a [`WixRouterRequest`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-request/introduction.md) object) and searches for it in the `peopleData` object. If found, it creates a [`HeadOptions`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-response/head.md) object for SEO data, stores it in `seoData`, then passes both the data and SEO information to the [`ok()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/ok.md) method to render the page. If not found, it returns a 404 page using the [`notFound()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/not-found.md) method.
```javascript
export function myRouter_Router(request) {
// Get the 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 the item page.
return ok("myRouter-page", data, seoData);
}
// Return 404 if the item is not found.
return notFound();
}
```
You can build off the sample code to customize your `router()` method:
1. Replace lines 3-6 with your own code to retrieve data from an external source or a collection on your site.
1. Change the conditional statement to match your own router logic. For example, if you need to display either an index or an item page, build a logical statement that renders one or the other based on the contents of the `path` parameter.
1. Change the [`HeadOptions`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-response/head.md) object to generate your SEO data. You can use any information you want to create the object. For example, the sample code creates `title` and `description` properties based on data from `peopleData`. You can create your own properties from the data you retrieve and populate `metaTags` with this data as well.
You can also add a `keywords` property to the `HeadOptions` object with a string containing the page's keywords.
1. Your router method must return a [`WixRouterResponse`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-response/data.md) object. This object is responsible for telling the router which page to display on the frontend when a visitor makes a request:
* Use the `ok()` method to render a requested page if it exists. Pass 3 arguments to `ok()`:
* The name of the router page to render.
* A data object containing the data to pass to the router page.
* An object containing SEO data for the router page.
* Use the `notFound()` method if the requested page isn't found. You can also use the [`forbidden()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/forbidden.md), [`redirect()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/redirect.md), or [`sendStatus()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/send-status.md) methods.
* **The [`sitemap()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/sitemap.md) method:** In addition to the `router()` method, Wix adds a `sitemap()` method to `routers.js` every time you add a router. The first `sitemap()` method added contains sample code below that does the following:
The `sitemap()` method takes the keys of the `peopleData` sample object and uses the JavaScript `map()` method to create an array of [`WixRouterSitemapEntry`](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/routers/add-seo-to-your-router.md) objects, 1 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.
```javascript
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);
// Name of the page for the Wix Editor to render.
entry.pageName = "myRouter-page";
// Relative URL of the page.
entry.url = `/myRouter/${name}`;
// Title for better SEO.
entry.title = data.title;
return entry;
});
// Return the site map entries.
return siteMapEntries;
}
```
Replace the sample code with code of your own that generates `WixRouterSitemapEntry` objects for each page. Then return these objects for SEO to use.
> **Note:** Certain module export formats aren't supported in `routers.js`. For more information, see [Module Export Syntax](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/code-with-java-script/module-export-syntax.md).
## See also
* [About routers](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/routers/about-routers.md)
* [About SEO and routing](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/routers/add-seo-to-your-router.md)
* [Tutorial: Create dynamic pages with a custom router](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-create-dynamic-pages-with-custom-router.md)
* [About Router Caching](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/best-practices/caching/about-router-caching.md)
