You have the starter template of Elder.js running. So what is next? This guide will help you explore the project.
You have the starter template of Elder.js running. So what is next? This guide will help you explore the project.
Building a simple blog with Elder.js is easy. Just toss a few markdown files in a folder of this project!
What types of sites can you build with Elder.js? Can I use it for ______? Find out here.
This example project is made up of 5 routes; you can find them by looking within the ./src/routes/ folder. They are:
The goal in showing off these 3 routes is to give you enough of an example to see how a site is built with Elder.js (but one that isn't too complex to overwhelm you).
If you ran npm start to see this page this is the same as npm run dev which will:
npm run build
: will statically generate this same site so that it can be deployed with a static site
host such as Netlify, Cloudflare Pages, Vercel, or S3.
npm run serve
: will start the server in production SSR mode which can be used with cluster mode or
PM2 to host Elder.js in a SSR fashion.
Svelte.js shines at bringing interactivity to otherwise static websites.
By default, Elder.js statically renders Svelte components, only mounting them in the browser when it encounters a
Svelte component which includes the
hydrate-client={}
prop.
This means that if a page doesn't need dynamic JS it will have 0KB of JS code resulting in faster loading, lighter weight websites.
The clock on this page is an example of a component that has been hydrated on the client.
This approach makes it easy to build SEO friendly websites, with Svelte for interactivity when needed.
By default all hydrated components are lazy loaded with an intersection observer, but you can have full control over how hydration is handled via several different hydration options.
Once you've digested the guides above and understand how to handle client hydration, we encourage you to explore the hook interface below.
Hooks are the primary way to customize Elder.js and the list below outlines exactly what each hook can be used for.
This hook receives the hookInterface.ts file which defines all hook interactions. You can customize all 'props' and 'mutable' of all hooks by using this hook. This is a power user hook and unless you know Elder.js internals don't mess with it.
The main use here is to allow users to adjust the requests that Elder.js is aware of.
NOTE: If you are modifying 'allRequests' you must set 'request.route' key for each request.
If you're looking to use Elder.js with express/polka to build a server rendered website, then you'll be interested in this hook as it includes the familiar 'req' and 'next' objects as often used in Express middleware.
This hook gives access to the entire state of a request lifecycle before it starts.
This hook is mainly used by plugins/hooks to offer functionality at the route level that is dependent on the route's "data" function has returning but isn't suitable to live in multiple data function across many routes due to code duplication.
Examples of things we (ElderGuide.com) have done or have seen users do:
Stacks are made available here so that strings can be added to the head or footer of the page easily.
Elder.js uses this hook to process shortcodes. The vast majority of users won't need to use this hook, but if you were so inclined you could write your own shortcode parser or if you'd like to disable shortcodes completely, you can add 'elderProcessShortcodes' to hooks.disable in your elder.config.js file.
NOTE: Don't use this hook for anything besides shortcodes.
Elder.js uses 'stacks' to manage it's string concatenation. If you are unfamiliar, stacks are basically an array of strings, with a priority, and some meta data. This hook let's you manipulate or view the stacks before they are written to the page and is designed for use by plugins.
This hook will mainly be used when you need to add arbitrary strings to the footer. In most cases, users should be using <svelte:head></svelte:head> to add content to the head.
This hook's headSting represents everything that will be written to <head> tag.
There are many possible SEO uses to this hook, especially for plugins. That said, we recommend users who want to set common SEO elements such as tags <title> and meta descriptions programmatically to do it from within Svelte templates using the <svelte:head></svelte:head> tag. Chances are you won't need this field unless you're a power user and need access to the raw head.
This hook should only be used when you need to have full control over the <html> document. Make sure if you use this to add 'elderCompileHtml' to the 'hooks.disable' array in your elder.config.js or your template will be overwritten.
This hook receives the full html of the document. With great power comes great responsibility.
This hook is triggered on an individual 'request object' completing whether Elder.js is being used in the "build" or a "server" mode.
As the script encounters errors, they are collected and presented on this hook at the end of a request and the end of an entire build.
Contains whether the build was successful. If not it contains errors for the entire build. Also includes average performance details, and a granular performance object. Could be used to fire off additional scripts such as generating a sitemap or copying asset files to the public folder.
Plugins: Because builds are split across processes, a plugin doesn't not have a shared memory space across all processes.