Like everything these days, powered by Vite. Learn More
We abstract projects into one overarching "Frontier" project for consistency. You Learn more about monorepo infrastructure and tools. Learn More

The Application Framework

At the heart of it, any frontend application is built on top of these 3 key players:

  • The Builder (Vite)
  • The Interfacer (Svelte)
  • The Designer (UnoCSS)

For several scenarios, we could stop here and via a few configs and plugins

build these frontends:

  • Single Page Application (SPA)
  • Static Site
  • Browser Extensions
  • Embeddable Widgets
  • Mobile
  • Desktop

However, if we need a backend, we call on this guy:

  • The Server (FeathersJS)

And naturally, we might store stuff and want to interact with our data.

For that, we pull in:

  • The Inquirer (Prisma)

When things get this big, sometimes you end up working with 3rd-party tools. We integrate with the outside world via The Integrator: n8n.

But now, things might get outside of the static hosting world.

We can package up our projects with Docker and manage it all easily with:

  • The Manager (Caprover)

In the end, we might end up with a structure much like this one below:

Frontier Framework

What’s Cool About This

What’s really cool about this is the ability to work on multiple projects without losing flow. You can switch between a web app or browser extension or desktop app and infrastructure and dev flow will be closely the same.

Digging Deeper

Chain of Responsibility with data flow

Once you understand this, you simply hook into the chain and implement your code at the appropriate point.

Frontier Flow CoR

What could a big Frontier project look like?

Click to find out!

Example of a frontend / backend with embeddable widgets

└── My Frontier Project
  ├── frontier.config.js
  ├── api
  │   ├── config
  │   ├── deploy
  │   ├── dist
  │   ├── public
  │   ├── src
  │   │   ├── core
  │   │   ├── middleware
  │   │   ├── models
  │   │   └── services
  │   └── test
  ├── db
  │   ├── backups
  │   └── prisma
  │       └── migrations
  ├── embeds
  │   ├── deploy
  │   ├── dist
  │   ├── src
  │   └── test
  ├── tests
  ├── web
  │   ├── config
  │   ├── deploy
  │   ├── dist
  │   ├── public
  │   ├── src
  │   │   ├── components
  │   │   ├── core
  │   │   ├── layouts
  │   │   ├── routes
  │   │   └── resources
  │   └── test
  └── wiki

Notice the consistency of some folders between all sub-projects:

├── config
├── deploy
├── dist
├── public
├── src
│   ├── core
└── test

Look at them in a different order and notice a nice development flow:

├── config (configure you're settings)
├── src (develop your project)
├── public (include an static assets)
├── test (test your code)
├── dist (build and get ready for distribution)
└── deploy (everything related to shipping the app)

Some Key Concepts

  • Everything has a Context, so we expose that and use it to our advantage
  • Hooks are good, but they’re GREAT in context. We use conventions of before and after a lot.

What else is out there and how does Frontier compare?

Frontier falls into the latest “trendy” stuff out there called “Fullstack JAMstack”.

Frontier Redwood Blitz Bison
Routing Routify Redwood Router Next.js Next.js
Frontend Svelte React Next Next
Not-an-ORM Prisma Prisma Prisma Prisma
Code Generation Frontier CLI Redwood CLI Blitz CLI Hygen
Styling UnoCSS Tailwind Import CSS Chakra UI
Forms Frontier React Hook Form Vanilla JS/TS React Hook Form
Testing Jest / Vitest Jest Jest, RTL Jest, RTL, Cypress
Deploy Cloudflare / Caprover Netlify Vercel Vercel
Backend FeathersJS N/A N/A N/A

Some others of note

You can research more at

What is the root directory for

The root directory handles several things: