This repository contains the source of the FlowFuse website.
It is hosted on Netlify with each commit to the main branch being automatically deployed to the live site.
This works by the Build Site action updating the live branch, committing onto it the
blueprints pulled from FlowFuse/blueprint-library.
Netlify is then configured to watch the live branch for any changes, once detected, it will automatically pull the contents of this branch and deploy to our production site. Product documentation is not part of that snapshot — Netlify clones it directly from main of FlowFuse/flowfuse during its own build.
This repository is an npm workspace containing two projects:
| Directory | Purpose |
|---|---|
| (root) | Legacy Eleventy site — all existing content lives here |
nuxt/ |
New Nuxt 3 frontend — pages are migrated here incrementally |
The site is being migrated from Eleventy (11ty) to Nuxt 3 using the Strangler Fig pattern. Nuxt acts as the front door on port 3000: pages that have been migrated are served directly by Nuxt; all other routes are transparently proxied to the legacy 11ty server on port 8080.
gitandgitbash(download)nodejs(download)- IMPORTANT: Select the [x] checkbox to install developer tools when asked
choco- Installed as part of the Node JS installer
- Needed for installing
jq
jq(download)- From a administrator terminal, run
choco install jq
- From a administrator terminal, run
Clone the repository, then install all dependencies (workspace packages are included automatically):
npm installnpm run devThis starts three watchers concurrently:
| Process | URL | Description |
|---|---|---|
| Nuxt dev server | http://localhost:3000 | Front door — serves migrated pages and proxies everything else |
| 11ty dev server | http://localhost:8080 | Legacy site (proxied through Nuxt) |
| PostCSS watcher | — | Compiles Tailwind CSS for the legacy site |
Use http://localhost:3000 as your development URL. The legacy 11ty server on port 8080 is also accessible directly if needed.
Note: the first time running this, 11ty may take a little while to process all images in the /docs and /handbook folders.
Note: if you have previously run npm run build:nuxt, clean the generated directories before starting dev or you will get a spawn EBADF error:
npm run clean:nuxtTo run just the legacy 11ty stack (equivalent to the old npm start):
npm startThis starts the full legacy stack on http://localhost:8080 including docs, blueprints, and PostCSS.
The documentation for FlowFuse is maintained in the core FlowFuse repo. To run a local version of the documentation, clone that repository alongside this one:
/<parent_directory>
/website
/flowfuse
The npm run dev (and npm start) commands will retrieve the documentation from that folder and inject them into the site automatically. The docs will be available at http://localhost:3000/docs.
Nothing needs configuring for that to happen. Every build resolves the docs in this order, and logs which one it used:
| Order | Source | Used when |
|---|---|---|
| 1 | FLOWFUSE_DOCS_LOCAL=/path/to/flowfuse |
The env var is set. A path that does not exist is an error, not a fallback. |
| 2 | A sibling checkout: ../flowfuse, ../flowforge or ../dev-env/packages/flowfuse |
One of those has a docs/ directory. This is what CI relies on. |
| 3 | A clone of FLOWFUSE_DOCS_REF (default main) |
Nothing above applied. This is what Netlify production deploys use. |
npm run docs runs that resolution on its own, without a full build, writing nuxt/content/docs and nuxt/public/docs. Both are generated, and neither is committed on main.
See the Blog section of the Marketing Handbook for instructions on writing and publishing blog posts.
When the website is built it will include the documentation
from the main branch of the FlowFuse/flowfuse
repository.
To make a documentation update and make it live on the website:
- PR the documentation update to the
mainbranch of FlowFuse/flowfuse - Get the PR reviewed and merged in the normal manner.
That repository's Publish Documentation workflow builds this site against the PR's docs before it can merge, then
triggers a website rebuild once it lands. A rebuild can also be started by hand with 'Run workflow' on
this page.
This setup was inspired by: