FlowRouter Extra

Carefully extended flow-router package. FlowRouter is a very simple router for Meteor.js. It does routing for client-side apps and compatible with React, Vue, Svelte, and Blaze.

It exposes a great API for changing the URL and getting data from the URL. However, inside the router, it's not reactive. Most importantly, FlowRouter is designed with performance in mind and it focuses on what it does best: routing.

Features:

• 📦 Not dependent on Blaze, ready for React.js and other templating/components engines/libs;
• 📦 No underscore package dependency;
• 👨‍💻 TypeScript definition index.d.ts
• 👨‍🔬 Great tests coverage;
• 🥑 Up-to-date dependencies;
• 📦 Support of Fast Render and other great packages;
• 📋 Following semver with regular releases;
• 📋 Great wiki;
• 📋 Great quick start tutorial.

Install

meteor add ostrio:flow-router-extra

Compatibility

• Meteor >=1.4, including latest Meteor 3.4;
• Compatible with ostrio:flow-router-title@3.5.0 and ostrio:flow-router-meta@2.4.0.

ES6 Import

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
// Full list of available classes and instances:
// { FlowRouter, Router, Route, Group, Triggers, BlazeRenderer, RouterHelpers }

Usage

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

// DISABLE QUERY STRING COMPATIBILITY
// WITH OLDER FlowRouter AND Meteor RELEASES
FlowRouter.decodeQueryParamsOnce = true;

FlowRouter.route('/', {
  name: 'index',
  action() {
    // Render a template using Blaze
    this.render('layoutName', 'index');

    // Can be used with BlazeLayout,
    // and ReactLayout for React-based apps
  },
  waitOn() {
    // Dynamically load JS per route
    return [import('/imports/client/index.js')];
  }
});

// Create 404 route (catch-all)
FlowRouter.route('*', {
  action() {
    // Show 404 error page using Blaze
    this.render('notFound');

    // Can be used with BlazeLayout,
    // and ReactLayout for React-based apps
  }
});

Tip

TypeScript: add zodern:types to the app (meteor add zodern:types), enable TypeScript per Meteor docs, then run a build so .meteor/local/types is generated. This package ships index.d.ts and package-types.json for meteor/ostrio:flow-router-extra imports.

Documentation

• Continue with our wiki or README index;
• Quick start tutorial;
• All docs as single document.

AGENTS.md

The repo ships AGENTS.md: a compact implementation map for ostrio:flow-router-extra (routes, groups, catch-all, hooks, globals, RouterHelpers, debugging, testing). It complements narrative API docs under docs/ with file pointers and conventions maintainers rely on.

SKILLS.md

• This repo ships a bundled skill at .agents/skills/meteor-flow-router/SKILL.md (covers ostrio:flow-router-extra, ostrio:flow-router-meta, ostrio:flow-router-title). Install into your project with the Skills CLI (npx skills):

# From a Meteor app repo (install into that app’s .agents/skills for Cursor, etc.)
npx skills add veliovgroup/flow-router --skill meteor-flow-router --agent cursor --yes

# Only list skills discovered in the Flow Router repo (no install)
npx skills add veliovgroup/flow-router --list

# Local clone of flow-router (path can be absolute or ./relative)
npx skills add ./flow-router --skill meteor-flow-router --agent cursor --yes

# User-global Cursor skills dir (~/.cursor/skills)
npx skills add veliovgroup/flow-router --skill meteor-flow-router --agent cursor --global --yes

Related packages:

• ostrio:flow-router-title - Reactive page title (document.title)
• ostrio:flow-router-meta - Per route meta tags, script and link (CSS), set per-route stylesheets and scripts
• communitypackages:fast-render - Fast Render can improve the initial load time of your app, giving you 2-10 times faster initial page loads. fast-render integration tutorial
• communitypackages:inject-data - This is the package used by fast-render to push data to the client with the initial HTML
• flean:flow-router-autoscroll - Autoscroll for Flow Router
• mealsunite:flow-routing-extra - Add-on for User Accounts
• nxcong:flow-routing - Add-on for User Accounts (alternative)
• forwarder:autoform-wizard-flow-router-extra - Flow Router bindings for AutoForm Wizard
• nicolaslopezj:router-layer - Helps package authors to support multiple routers
• krishaamer:flow-router-breadcrumb - Easy way to add a breadcrumb with enough flexibility to your project (flow-router-extra edition)
• krishaamer:body-class - Easily scope CSS by automatically adding the current template and layout names as classes on the body element

Running Tests

1. Clone this package
2. In Terminal (Console) go to directory where package is cloned
3. Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/flow-router-tests" meteor test-packages ./ --port 8888

Running Typescript Test

1. Install dev dependencies with meteor npm install;
2. Run meteor npm run test:tsd (or meteor npm exec tsd) from package root. tsd will find index.test-d.ts and report type errors.

Support this project:

• Upload and share files using ☄️ meteor-files.com — Continue interrupted file uploads without losing any progress. There is nothing that will stop Meteor from delivering your file to the desired destination
• Use ▲ ostr.io for Server Monitoring, Web Analytics, WebSec, Web-CRON and SEO Pre-rendering of a website
• Star on GitHub
• Star on Atmosphere
• Sponsor via GitHub
• Support via PayPal