Elder.js Route: An Overview

Step 1: All routes require a route.js and a svelte template. Look at ./src/routes/simple/route.js to follow along.
Step 2: We define an all() function that returns an array of request objects.
Step 3: We define a permalink string or function that transforms the request objects from all() into permalinks.
Step 4: We define a data function that makes data available in your svelte template.

Elder.js' all() Function

Elder.js is a bit different from most frameworks in that for pages to be statically generated it asks you to define all of your request objects in your all() function. While this step may seem a bit different from what you are used to it prevents Elder.js from having to crawl your site to render it which dramatically speeds up the build process.

Elder.js' Permalink Strategy

Elder.js' routing uses the common placeholder strategy that looks like: /blog/:slug/.

For most projects the placeholder strategy works well enough, but If you need more control you can also use a function such as ({ request }) => `/simple/`;

Elder.js' Data Function

The data function is where your "business logic" should live. This is where you prepare all of the data needed for your page to be rendered. This data is passed directly to the route's Svelte template.

Dynamic Routes in Elder.js

If you are looking to use Elder.js as a server (SSR) instead of a static site generator you can set dynamic: true in your route definition and any parameters extracted from your route definition will be available on the request object. Please note that dynamic routing requires using a /:placeholder/ permalink strategy.

Learning Exercise:

Try adding { slug: "another-request" } to the all() function in ./src/simple/route.js and then visit /another-request/ to see that you added another page with the same data.