https://fab.dev • https://github.com/fab-spec/fab • @fab_spec

Frontend Application Bundles (💎 FABs) are a bundle format for frontend applications.

They unify static sites, single page applications (SPAs), server-side rendering (SSR) & server-side logic in a single format, one that is universally compatible with and easy to deploy to a wide range of hosting providers, even your own infrastructure!

What can I use FABs for?

Because FABs include server-side JavaScript capabilities but deploy with a single command, you can start to add server-side logic without the complexity of managing servers. Making it easy to do things like:

• Deploy anything, even a server-rendered NextJS app, to Cloudflare workers.
• Add server-side logic like redirects & proxying to a Create React App project, without ejecting.
• Use Gatsby to generate a logged-in vs logged-out homepage and dynamically choose which one to serve to each user.
• Guard your application against unauthenticated users, by checking a cookie before you serve any JS or HTML.
• Deploy every commit to a unique URL to share your progress with colleagues.
• ...and more

👉 These examples will be being fleshed out in the coming days, for now the best place to learn is the Adding Server-Side Logic step of the guide, or join our Discord channel to discuss your use-case.

What frameworks & projects are supported?

At the moment, the FAB project is focussing on supporting the following projects, to try to give the best possible experience for the most users.

👉 If your app is in the following list, npx fab init should be all you need to run to get started!

See fab.dev/guides/getting-started for more info.

• Client-side rendered React (e.g. Create React App & friends)
• Server-side, client-side & static pre-rendered NextJS
• VueJS, AngularJS, Svelte etc projects that compile to static assets
• Anything else that's fully static (i.e. any app that can be hosted on S3, Netlify, Surge, etc.)
• An existing server-side rendered applications, with some conversion.

However, any server-side application that runs in (or compiles to) JavaScript, plus any amount of client-side code, should be able to be supported. If your application is not covered by the above list, it's worth reading the FAB project goals and then getting involved to make sure your needs will be supported in future.

Where can I host them?

Currently, we have first-class support for releasing FABs to:

• Cloudflare Workers, using @fab/deployer-cf-workers
  • Free or \$5+/month
  • 200 cities worldwide
  • Extremely high-performance
• AWS Lambda@Edge, using @fab/deployer-aws-lambda
  • 84 cities worldwide
  • Some [limitations]
  • Good performance
  • Ideal for companies already running infrastructure on AWS
• Anywhere that can run NodeJS, using @fab/server, e.g.
  • Docker
  • Heroku
  • Now.sh v1

👉 Releases can be triggered manually using fab deploy on the command line or automatically using Linc, a preconfigured CI/CD pipeline from the team behind FABs, with a generous free tier.

See fab.dev/guides/deploying for more info.

How does it work?

A FAB is a special ZIP file with two components, a single server-side JavaScript file, and a folder full of assets.

From a fully static site, single-page app, to a fully server-rendered JS site, the FAB tooling compiles your application down to these two primitives.

👉 Read more about the FAB structure at fab.dev/kb/fab-structure.

What is a Frontend Application?

The term Frontend Application encompasses a wide range of modern web projects, from purely static sites with no client-side JS, to entirely client-rendered apps hitting an API, or those with a significant server-side-rendering component. But they are defined in opposition to a more traditional "backend" application, which may emit HTML across the wire as well, but usually has a persistent server, with direct connections to databases and a local filesystem.

This is synonymous with some of the more common web app development methodologies in the React/Angular/Vue/Ember ecosystems—a self-contained single-page-app, potentially pre-rendered or server-rendered, talking to a separate backend app or collection of services via HTTP.

Why a new bundle format?

The Frontend Application Bundle is designed to fill a gap between existing options for frontend application deployment and hosting environments. Usually, you have a choice between a static site host, which prevents you from having any active server-side components, or a more traditional web app host designed for hosting backends.

And while deploying frontend apps to backend-centric hosts works reasonably well, it misses a crucial aspect of frontend web development—iteration speed. UI development benefits greatly from rapid prototyping and feedback, and since frontend apps, having no direct dependencies on databases or filesystems, can be cloned & deployed freely, backend-centric workflows can feel overly constrained.

As such, static site hosting has grown in popularity among the frontend application community, and static site generators along with them. But there are many reasons why it's preferable or even essential to include a server-side component in your application, which these projects can't take advantage of without fundamentally changing how they build & deliver their app.

Frontend Application Bundles are the container format that work equally well for fully-static through to full server-rendered frontend apps, making your choice of technology independent from your choice of hosting.

Contributors

This project is being led by Glen Maddern, previously a creator of Styled Components & CSS Modules, and supported by the whole team at Linc, which is a pre-configured CI/CD pipeline for sites built with FABs.

Special thanks also must go to:

• Jed Schmidt for donating the fab package name on NPM, replacing his super original and inventive streaming JavaScript framework from 2011!
• Charlie Gleason for the awesome FAB logo design!

Code Contributors

Thank you to everyone who has contributed code so far. [Get involved yourself, if you like].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

FAB version 0.x docs

Prior to the v1 release, FABs were in a v0 experimental phase, with a different design, and many different packages. For the docs related to FAB v0, (e.g. standalone tools like @fab/static & @fab/compile) which are now in maintenance mode, see fab-docs--production--v0.branch.linc-preview.sh.