diff --git a/nuxt/utils/navIcons.ts b/nuxt/utils/navIcons.ts index a0c2eb2037..b0fe9649a1 100644 --- a/nuxt/utils/navIcons.ts +++ b/nuxt/utils/navIcons.ts @@ -49,6 +49,7 @@ import iServerStack from '../../src/_includes/components/icons/server-stack.svg? import iShare from '../../src/_includes/components/icons/share.svg?raw' import iShieldCheck from '../../src/_includes/components/icons/shield-check.svg?raw' import iSparkles from '../../src/_includes/components/icons/sparkles.svg?raw' +import iSquares2x2 from '../../src/_includes/components/icons/squares-2x2.svg?raw' import iSquaresPlus from '../../src/_includes/components/icons/squares-plus.svg?raw' import iStar from '../../src/_includes/components/icons/star.svg?raw' import iUns from '../../src/_includes/components/icons/uns.svg?raw' @@ -99,6 +100,7 @@ export const navIcons: Record = { 'share': iShare, 'shield-check': iShieldCheck, 'sparkles': iSparkles, + 'squares-2x2': iSquares2x2, 'squares-plus': iSquaresPlus, 'star': iStar, 'uns': iUns, diff --git a/src/_data/chrome.json b/src/_data/chrome.json index 6ba6b99864..7f446cd5b1 100644 --- a/src/_data/chrome.json +++ b/src/_data/chrome.json @@ -8,8 +8,13 @@ { "title": "Overview", "titleGrid": "xl:col-start-2 xl:row-start-1", - "listClasses": "row-span-6 xl:col-start-2 xl:row-start-2", + "listClasses": "row-span-[7] xl:col-start-2 xl:row-start-2", "links": [ + { + "label": "Platform", + "href": "/platform/", + "icon": "squares-2x2" + }, { "label": "Product", "href": "/product/", @@ -437,6 +442,10 @@ { "title": "Overview", "links": [ + { + "label": "Platform", + "href": "/platform/" + }, { "label": "Product", "href": "/product/" diff --git a/src/platform/index.njk b/src/platform/index.njk new file mode 100644 index 0000000000..267d904a84 --- /dev/null +++ b/src/platform/index.njk @@ -0,0 +1,348 @@ +--- +layout: page +nohero: true +title: "The FlowFuse Platform" +sitemapPriority: 0.9 +meta: + title: "The FlowFuse Platform" + description: "What FlowFuse is made of and how the pieces fit together. The major components of the platform, the two ways it distributes and manages code, and the design patterns that turn one working application into a fleet." +hero: + eyebrow: "Platform" + heading: "FlowFuse is an app platform" + subheading: "Not because of what it draws on a screen, but because of how it distributes and manages code. This page covers the major components, how they fit together, and the patterns that take one working application to every site." +distribution: + heading: "Why we call it an app platform" + intro: "Most industrial platforms give you one way to ship what you build. FlowFuse gives you two, and they cover opposite ends of how teams actually work." + models: + - label: "One to many, fully controlled" + icon: "queue-list" + title: "Ship the whole application" + detail: "Build the application once, capture it as a snapshot, and promote that exact snapshot through a pipeline to every instance and every device that should run it. Each target supplies its own configuration, so one artifact runs everywhere without an edit." + points: + - "Central team owns the application and the release" + - "Every site runs a known, identical version" + - "Per-site differences live in configuration, not in forked flows" + - label: "One to many, partially controlled" + icon: "puzzle-piece" + title: "Ship the building blocks" + detail: "Publish the parts worth standardizing, subflows and nodes, as packages into a library your teams pull from. Local teams assemble their own application out of blocks the platform team maintains." + points: + - "Local teams keep ownership of their own application" + - "Central team still controls the parts that matter" + - "Improvements to a block propagate by version bump" + closer: "The choice between these two is the first decision on any FlowFuse project, and it is what the design patterns below formalize." +components: + heading: "The major components" + intro: "Five groups. Everything FlowFuse does sits in one of them." + groups: + - title: "Where applications run" + items: + - name: "Instances" + icon: "cloud" + detail: "Managed Node-RED runtimes, hosted by FlowFuse or in your own infrastructure." + - name: "Devices" + icon: "device-agent" + detail: "The Device Agent runs the same applications on edge hardware, including networks with no inbound access." + url: "/platform/device-agent/" + - name: "Groups" + icon: "squares-2x2" + detail: "Devices addressed as a fleet, so a deployment target can be a hundred machines rather than one." + url: "/docs/user/device-groups/" + - title: "How applications get built" + items: + - name: "Node-RED" + icon: "code-bracket" + detail: "The open runtime and flow editor underneath everything. The build surface, not the platform." + url: "/node-red/" + - name: "FlowFuse Expert" + icon: "sparkles" + detail: "Describe what you need and get starting flows, function code and explanations in the editor." + url: "/ai/" + - name: "FlowFuse Dashboard" + icon: "dashboard" + detail: "The operator-facing interface, built from the same flows rather than bolted on from a separate tool." + url: "/platform/dashboard/" + - name: "Blueprint Library" + icon: "building-library" + detail: "Working starting points for common industrial problems." + url: "/blueprints/" + - title: "How code is distributed and managed" + items: + - name: "Snapshots" + icon: "camera" + detail: "A versioned, restorable point in time for an application. The unit everything else moves around." + url: "/docs/user/snapshots/" + - name: "DevOps Pipelines" + icon: "arrow-long-right" + detail: "Promote a snapshot from development to test to production, and out to device groups." + url: "/docs/user/devops-pipelines/" + - name: "Environment Variables" + icon: "cog-6-tooth" + detail: "Per-target configuration held outside the flows, which is what lets one artifact run at every site." + url: "/docs/user/envvar/" + - name: "Shared Team Library" + icon: "rectangle-stack" + detail: "Flows and subflows shared across the team instead of copied between editors." + url: "/docs/user/shared-library/" + - name: "Custom Node Packages" + icon: "puzzle-piece" + detail: "Publish your own nodes and subflows as packages and install them like any other dependency." + url: "/docs/user/custom-npm-packages/" + - title: "What applications connect to" + items: + - name: "Integrations" + icon: "squares-plus" + detail: "Industrial protocols and enterprise systems, from OPC-UA and Modbus to ERP and cloud services." + url: "/integrations/" + - name: "Team Broker" + icon: "wifi" + detail: "A managed MQTT broker, so a Unified Namespace does not start with procuring infrastructure." + url: "/docs/user/teambroker/" + - name: "FlowFuse Tables" + icon: "circle-stack" + detail: "Managed storage for applications that need to keep state rather than pass it on." + url: "/docs/user/ff-tables/" + - name: "Project Nodes" + icon: "project-nodes" + detail: "Instance-to-instance messaging without wiring up a broker or opening ports." + url: "/docs/user/projectnodes/" + - title: "How it is governed" + items: + - name: "Role-Based Access Control" + icon: "role-based-access" + detail: "Who can edit, who can deploy, who can only look, per team and per application." + url: "/docs/user/role-based-access-control/" + - name: "Single Sign-On" + icon: "single-sign-on" + detail: "SAML and LDAP against your existing identity provider." + url: "/docs/admin/sso/" + - name: "Audit Logs" + icon: "audit-logs" + detail: "A record of who changed and deployed what, at team and instance level." + - name: "Self-hosted and certified" + icon: "shield-check" + detail: "SOC 2 Type 1 and Type 2, with a self-hosted option for air-gapped environments." + url: "/platform/security/" +diagram: + placeholder: true + src: "https://placehold.co/1200x630/eef2ff/4338ca?text=FlowFuse+Platform+Architecture" + alt: "How the FlowFuse platform components fit together: edge devices and hosted instances running Node-RED applications, snapshots promoted through pipelines, configuration supplied per target, connected to brokers, databases and enterprise systems, under central access control." + caption: "Where each component sits and what moves between them: applications on instances and devices, snapshots travelling through pipelines, configuration applied per target, and the connections out to brokers, storage and enterprise systems." + heading: "How the pieces fit together" + intro: "The components are not a menu of unrelated features. They are one path from a flow in an editor to the same application running across a fleet." +patterns: + heading: "The design patterns" + intro: "You do not start with Node-RED and later work out how to scale it. You choose the pattern first, then build inside it. There are six, split by where the application runs." + families: + - label: "Hardware patterns" + note: "Applications running on edge devices." + items: + - name: "Pipeline plus environment variables" + detail: "One application, distributed by pipeline. Everything site-specific lives in environment variables." + - name: "Pipeline plus external configuration" + detail: "One application, distributed by pipeline, reading its configuration at runtime from a central source so changes need no redeploy." + - name: "Edge building blocks" + detail: "Subflows published as packages and pulled from the team library, with each site assembling its own application." + - label: "Software patterns" + note: "Applications running on hosted instances." + items: + - name: "Packaged application" + detail: "Self-contained. Everything the application needs travels with it." + - name: "Data-driven application" + detail: "Behaviour driven by an external database rather than by what is wired into the flows." + - name: "Shared building blocks" + detail: "The hosted equivalent of edge building blocks, assembled per team from shared packages." + closer: "Naming the pattern up front is what makes an application scalable or not, whether or not the platform makes it easy." +nodeRed: + heading: "Where Node-RED fits" + intro: "Node-RED is how the logic gets built. It is not what makes FlowFuse a platform, and treating it as the headline gets the order wrong." + points: + - title: "Platform first, then Node-RED" + detail: "Decide how the application will be distributed and governed, then open the editor. The reverse order produces flows that work on one machine and transfer to none." + - title: "The runtime stays open" + detail: "FlowFuse runs standard Node-RED. Your flows are portable and the foundation stays yours." + - title: "The platform is everything after the build" + detail: "Deployment across sites, versioning, access control, configuration, connectivity and audit. That is the part no editor gives you." +--- + +
+ + +
+
+

{{ hero.eyebrow }}

+

{{ hero.heading }}

+

{{ hero.subheading }}

+
+ Book a demo + Get started +
+
+
+ + +
+
+

01 · How code moves

+

{{ distribution.heading }}

+

{{ distribution.intro }}

+
+ {% for model in distribution.models %} +
+
+
+ {% include "components/icons/" + model.icon + ".svg" %} +
+ {{ model.label }} +
+

{{ model.title }}

+

{{ model.detail }}

+
    + {% for point in model.points %} +
  • + {% include "components/icons/check.svg" %} + {{ point }} +
    • + {% endfor %} +
+
+ {% endfor %} +
+

{{ distribution.closer }}

+
+
+ + +
+
+

02 · Major components

+

{{ components.heading }}

+

{{ components.intro }}

+
+ {% for group in components.groups %} +
+

{{ group.title }}

+
+ {% for item in group.items %} +
+
+ {% include "components/icons/" + item.icon + ".svg" %} +
+

{{ item.name }}

+

{{ item.detail }}

+ {% if item.url %} + + Learn more + {% include "components/icons/arrow-right.svg" %} + + {% endif %} +
+ {% endfor %} +
+
+ {% endfor %} +
+
+
+ + +
+
+

03 · How it fits together

+

{{ diagram.heading }}

+

{{ diagram.intro }}

+
+
+ {# width/height reserve the box before the image arrives, so + the sections below do not jump on load. #} + {{ diagram.alt }} +
+
{% if diagram.placeholder %}Placeholder diagram, pending art request. {% endif %}{{ diagram.caption }}
+
+
+
+ + +
+
+

04 · Design patterns

+

{{ patterns.heading }}

+

{{ patterns.intro }}

+
+ {% for family in patterns.families %} +
+ {{ family.label }} +

{{ family.note }}

+
+ {% for item in family.items %} +
+ {% if loop.index < 10 %}0{% endif %}{{ loop.index }} +
+

{{ item.name }}

+

{{ item.detail }}

+
+
+ {% endfor %} +
+
+ {% endfor %} +
+

{{ patterns.closer }}

+
+
+ + +
+
+

05 · Node-RED

+

{{ nodeRed.heading }}

+

{{ nodeRed.intro }}

+
+ {% for point in nodeRed.points %} +
+ {% if loop.index < 10 %}0{% endif %}{{ loop.index }} +

{{ point.title }}

+

{{ point.detail }}

+
+ {% endfor %} +
+
+ What is Node-RED + + See the full feature list + {% include "components/icons/arrow-right.svg" %} + +
+
+
+ + +
+
+

See the platform on your operations

+

Talk to an expert about which pattern fits your estate, or start building today.

+
+ Book a demo + Get started +
+
+
+ +