McFly is a no-framework metaframework
that assists in leveraging the web platform
I often wonder what it would look like to build sites & apps knowing just the basics.
I thought:
- What if I knew how to write HTML and I can have a dynamic web page from that?
- What if I knew how to build custom elements and that's all the component system I needed?
- What if I can write HTML fragments and assemble them easily in a page?
- What if I did not have to worry about the ever-growing number of ways to have a place on the Web?
McFly is my reimagination of web development: Back to the basics. Into the future.
We are currently in a Proof of Concept phase. All parts are subject to breaking changes in minor releases.
Run the following to generate a McFly starter project.
npm create mcfly@latest
✅ Use vanilla custom elements (or sugar-coated web components)
✅ Write server-powered .html pages
✅ "Use the Platform™" on both server runtimes & browsers
✅ Use server-side rendering
✅ Deploy anywhere, even the Edge
1. ./src/pages/
- file-based routing for
.htmlfiles - directly use custom elements & static fragments (no imports or registry maintenance needed)
- use
<script server:setup>to define logic that runs on the server, which then gets stripped away
2. ./src/components/
- custom element constructor files (only
.jsfiles for now) - all components are automatically registered using their file names; a
hello-world.jscomponent can be used as<hello-world> - static
.htmlfragments; amy-header.htmlfragment can be directly used as<my-header>
3. ./src/api/
- file-based routing for REST API endpoints
- e.g.,
./src/api/users.jscan be accessed viahttp://<domain>/api/users
The following are the project packages published on the NPM registry:
| Package | Description | Version |
|---|---|---|
@mcflyjs/config |
Nitro server config for McFly projects |  |
@mcflyjs/core |
Route event and config handlers |  |
create-mcfly |
Script for scaffolding a new McFly workspace |  |
After cloning the project, you will need node and pnpm installed. When you are sure that you have node and pnpm, then run the following to download the dependencies:
corepack enable
pnpm i
The following commands are available to you on this project. Add more, or modify them as needed in your ./package.json file.
| Command | Action |
|---|---|
| pnpm run site | Start the development server for https://mcfly.js.org |
| pnpm run template:basic | Start the development server for the basic template |
| pnpm run build | Locally generate the app's build files to ./output |
| pnpm run preview | Preview the built app locally |
This framework is a result of an exploration for using Nitro and custom elements using a minimal Web Component Base class.
Nitro is the same production-grade web server powering Nuxt
Just keep building
A project by Ayo Ayco