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!
👉 Want to get started? Head to fab.dev/guides/getting-started to start building your own FABs, or read on for more information about the project.
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.
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 initshould 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.
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 deployon 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.
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.
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.
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, meaning you're free to choose your technology independent from your preferred hosting.
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
fabpackage name on NPM, replacing his super original and inventive streaming JavaScript framework from 2011! - Charlie Gleason for the awesome FAB logo design!
Thank you to everyone who has contributed code so far. [Get involved yourself, if you like].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
