Known Project Types (for
Create React App
2.x or above. Is effectively a
GenericStatic site with the input directory set to
build and the HTML fallback set to
- Fully client rendered.
- Excellent dev environment and optimised webpack output
- No server-side logic by default
There are definitely things like proxying api requests in development we could autodetect and inject FAB server-side code for, but currently do not. That would be a good way to contribute, if you like.
NextJS 9+ (Dynamic, Serverless)
9.x or above, and
next.config.js to set
target: serverless (or not be present, in which case
fab init will create it). Uses
@fab/input-nextjs to build from the
.next/serverless output directory.
target: serverlessis not automatically applicable, it assumes that you don't have any custom server code already. Thankfully Next has gotten way better at using convention over code so sites on v9+ should be more compatible.
- If you have no
getInitialPropsinvocations throughout the app, there isn't actually any server-side rendering taking place. But it's not clear if there's any meaningful difference, then, between treating this as "dynamic" or as an "exported" NextJS app, below.
NextJS 9+ (Static, Exported)
In recent releases, NextJS has put more emphasis on
Static HTML Exports(https://nextjs.org/docs/advanced-features/static-html-export) using
next export. If
next export is detected, we ask whether you want to be building a FAB from the rendered HTML (in the
out directory). Then we generate a
fab.config.json5 that includes
@fab/input-static, rather than
@fab/input-nextjs, since, at this point, it's a static site, not a Next site.
- I'm no NextJS pro, so I might be missing something about this setup here. Maybe you know more than me, and want to help out?
This checks for
gatsby build in the your
npm run build command, but is then just a
GenericStatic with the input directory hard-coded to
Expo Web (React Native for Web)
Very similarly to a Gatsby project, this checks for
expo start in either of the
npm run start or
npm run web commands, and then uses
GenericStatic with the
web-build directory as its input.
Anything that's not one of the above is considered a "Generic Static site", which covers the following cases:
- Client-side-rendered React, that's not included in the above frameworks
- VueJS, though not NuxtJS
- anything else statically-rendered.
This is all driven off two inputs:
- What command do you build your output with (by default
npm run build)?
- Where does it put its output (by default
If that's enough to build your app, you can run
npx fab init --skip-framework-detection to automatically attempt a
fab init currently doesn't help you set up a
fab.config.json5 file at all if your site isn't using one of the aforementioned setups. Particularly for the most complex cases, where custom server-side-rendering code is needing to be ported