chore: McFly CLI commands section in readme
This commit is contained in:
parent
9584c2731c
commit
5170463d0b
5 changed files with 78 additions and 37 deletions
19
README.md
19
README.md
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
Run the following to generate a McFly starter project:
|
Run the following to generate a McFly starter project.
|
||||||
```
|
```
|
||||||
npm create mcfly@latest
|
npm create mcfly@latest
|
||||||
```
|
```
|
||||||
|
@ -44,6 +44,23 @@ The time has come for vanilla Web tech. 🎉
|
||||||
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
|
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
|
||||||
- TypeScript or JavaScript welcome!
|
- TypeScript or JavaScript welcome!
|
||||||
|
|
||||||
|
## McFly CLI (In-Progress)
|
||||||
|
|
||||||
|
The **McFly CLI** can assist further in scaffolding new projects and building blocks:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm i -g @mcflyjs/cli
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, you can run the following **McFly CLI** commands:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| --- | --- |
|
||||||
|
| `mcfly new` | Creates a new McFly project. |
|
||||||
|
| `mcfly generate` | Generates building blocks for a McFly app. |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## McFly config
|
## McFly config
|
||||||
|
|
||||||
To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
|
To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
|
||||||
|
|
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -3124,7 +3124,7 @@
|
||||||
},
|
},
|
||||||
"packages/cli": {
|
"packages/cli": {
|
||||||
"name": "@mcflyjs/cli",
|
"name": "@mcflyjs/cli",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"citty": "^0.1.4",
|
"citty": "^0.1.4",
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
# McFly CLI
|
# McFly CLI
|
||||||
|
|
||||||
|
|
||||||
The **McFly CLI** is the command-line tooling for [McFly](https://ayco.io/gh/McFly) -- a no-framework framework that assists in leveraging the web platform.
|
The **McFly CLI** is the command-line tooling for [McFly](https://ayco.io/gh/McFly) -- a no-framework framework that assists in leveraging the web platform.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
@ -11,15 +10,15 @@ Install the CLI using npm:
|
||||||
npm i -g @mcflyjs/cli
|
npm i -g @mcflyjs/cli
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Commands
|
## Commands
|
||||||
|
|
||||||
You can the following commands
|
You can run the following **McFly CLI** commands:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| `mcfly prepare` | prepare the development environment |
|
| `mcfly prepare` | Prepares the McFly workspace. |
|
||||||
|
| `mcfly new` | Creates a new McFly project. |
|
||||||
|
| `mcfly generate` | Generates building blocks for a McFly app. |
|
||||||
|
|
||||||
---
|
---
|
||||||
*Just keep building*<br />
|
*Just keep building*<br />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@mcflyjs/cli",
|
"name": "@mcflyjs/cli",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"description": "McFly CLI tools",
|
"description": "McFly CLI tools",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|
|
@ -1,42 +1,67 @@
|
||||||
# Nitro Minimal Starter
|
<p align="center">
|
||||||
|
<img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
|
||||||
|
</p>
|
||||||
|
|
||||||
Look at the [Nitro documentation](https://nitro.unjs.io/) to learn more.
|
<h1 align="center">McFly</h1>
|
||||||
|
|
||||||
## Setup
|
<p align="center"><strong>McFly</strong> is a no-framework framework<br />that assists in leveraging the web platform</p>
|
||||||
|
|
||||||
Make sure to install the dependencies:
|
<p align="center">
|
||||||
|
<img src="https://img.shields.io/badge/from-the_future-blue?style=flat" />
|
||||||
|
<img src="https://img.shields.io/badge/status-legit-purple?style=flat" />
|
||||||
|
<a href="https://mc-fly.vercel.app/demo" target="_blank"><img src="https://img.shields.io/badge/see-the_demo_↗️-blue?style=flat&colorB=28CF8D" /></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
```bash
|
## Installation
|
||||||
# npm
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# yarn
|
Run the following to generate a McFly starter project:
|
||||||
yarn install
|
```
|
||||||
|
npm create mcfly@latest
|
||||||
# pnpm
|
|
||||||
pnpm install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development Server
|
## Features
|
||||||
|
The time has come for vanilla Web tech. 🎉
|
||||||
|
|
||||||
Start the development server on <http://localhost:3000>
|
✅ Create web apps with vanilla custom elements<br>
|
||||||
|
✅ Write real .HTML files<br>
|
||||||
|
✅ Have no frameworks or reactivity libraries on the browser<br>
|
||||||
|
✅ Use server-side rendering<br>
|
||||||
|
✅ Deploy anywhere<br>
|
||||||
|
|
||||||
|
## Special directories
|
||||||
|
**1. `./src/pages/`**
|
||||||
|
- file-based routing for `.html` files
|
||||||
|
- 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 `.js` files for now)
|
||||||
|
- all components are automatically registered using their file names; a `hello-world.js` component can be used as `<hello-world>`
|
||||||
|
- static `.html` fragments; a `my-header.html` fragment can be directly used as `<my-header>`
|
||||||
|
|
||||||
|
**3. `./routes/api/`**
|
||||||
|
- file-based routing for REST API endpoints
|
||||||
|
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
|
||||||
|
- TypeScript or JavaScript welcome!
|
||||||
|
|
||||||
|
## McFly config
|
||||||
|
|
||||||
|
To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
|
||||||
|
|
||||||
|
```js
|
||||||
|
import defineConfig from "./packages/define-config";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
components: "js",
|
||||||
|
});
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Production
|
## More info
|
||||||
|
This framework is a result of [an exploration](https://social.ayco.io/@ayo/111195315785886977) for using [**Nitro**](https://nitro.unjs.io) and vanilla JS custom elements using a minimal [**Web Component Base**](https://ayco.io/n/web-component-base) class.
|
||||||
|
|
||||||
Build the application for production:
|
**Nitro** is the same production-grade web server powering [**Nuxt**](https://nuxt.com/)
|
||||||
|
|
||||||
```bash
|
---
|
||||||
npm run build
|
*Just keep building*<br />
|
||||||
```
|
*A project by [Ayo Ayco](https://ayco.io)*
|
||||||
|
|
||||||
Locally preview production build:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run preview
|
|
||||||
```
|
|
||||||
|
|
||||||
Check out the [deployment documentation](https://nitro.unjs.io/deploy) for more information.
|
|
||||||
|
|
Loading…
Reference in a new issue