npm package: @kobono-studio/create-webflow-starter
Description: A CLI to generate a Webflow starter project with plugin and config
Author: Pierre Lovenfosse
Latest version: 1.0.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 🌐 create-webflow-starter

A powerful CLI tool to scaffold **modern Webflow projects** using **Vite** and deploy them to GitHub — all with a single command.
Whether you're a beginner or a pro, this tool gets you up and running in minutes.

---

## ✨ Features

- ✅ Interactive prompts to set up your project
- ⚙️ Generates `vite.config.js`, `starter.config.js`, ESLint/Prettier config, and `package.json`
- 🧱 Adds plugins:
  - [`vite-plugin-webflow-bundler`](https://github.com/kobono-studio/vite-plugin-webflow-bundler)
  - [`vite-plugin-github-deploy`](https://github.com/kobono-studio/vite-plugin-github-deploy)
- 🔐 Git + GitHub SSH integration with automatic key generation
- 🚀 Optional GitHub deployment (including split repos for private source/public dist)
- 📦 Installs dependencies and shows you how to start the dev server manually

---

## 💡 Why use this tool?

Using `create-webflow-starter` simplifies the entire workflow of managing Webflow projects with custom code and modern development tools.

### 🚀 Benefits

- 🎯 **One command setup**: Everything is scaffolded and configured in minutes.
- 🧠 **Smart deployment**: Handles GitHub repos, SSH keys, and CDN setup automatically.
- 🧪 **Works out of the box**: ESLint, Prettier, and Vite pre-configured.
- 🔁 **Versioned deployment**: Paired with Git versioning + jsDelivr delivery.

### 🔌 Powered by

#### ➤ `vite-plugin-webflow-bundler`

- 🧠 **Smart script loading**: Automatically chooses between `localhost` and CDN depending on where your Webflow page is opened.
- 🔁 **Hot-reload compatible**: Works with `vite dev` for instant local updates.
- 📋 **Copy-paste ready**: Generates loader snippets you can paste into Webflow custom code areas.
- 📝 **Generates manifest**: Includes all scripts and styles, versioned for CDN use.

#### ➤ `vite-plugin-github-deploy`

- 🔐 **Handles SSH + GitHub auth**
- ⚙️ **Creates public/private repos via GitHub API**
- 🚀 **Pushes build to GitHub for jsDelivr CDN delivery**

---

## 🚀 Quick Start

```bash
npm install -g @kobono-studio/create-webflow-starter
create-webflow-starter
# or
npx @kobono-studio/create-webflow-starter
```

> 💡 If you get a permission error, you may need to prefix the install command with `sudo`:

```bash
sudo npm install -g @kobono-studio/create-webflow-starter
```

You’ll be prompted for:

1. 📛 Project name
2. 📁 Whether to create a new folder
3. 🔧 Git deployment mode:
   - `none`
   - `public-only`
   - `split`
4. (if needed) GitHub user/org, branch name, public repo name
5. 🗝 Auto-setup of SSH key and GitHub authentication

```bash
# Once it's done, follow the instructions:
cd my-project
npm run dev
```

---

## 🧰 Installation Requirements

### ✅ Node.js

Install from [https://nodejs.org](https://nodejs.org) — minimum v18.

### ✅ Git + GitHub CLI

#### macOS

```bash
brew install git
brew install gh
```

> You may need to prefix with `sudo` if you get a permissions error:

```bash
sudo brew install git
sudo brew install gh
```

#### Windows

- [Install Git](https://git-scm.com/download/win)
- [Install GitHub CLI](https://cli.github.com/)

Then run:

```bash
gh auth login
```

> Choose **SSH** when asked for protocol.
> If you don't have a key, one will be generated for you.

---

## 🧠 Git Modes Explained

| Mode          | Description                                                     |
| ------------- | --------------------------------------------------------------- |
| `none`        | No remote Git setup                                             |
| `public-only` | Push entire project to **one public repo**                      |
| `split`       | Push source to **private repo**, `dist/` to **public CDN repo** |

🧩 Perfect for:

- `public-only`: open source
- `split`: Webflow assets via jsDelivr

---

## 📁 Project Structure

```bash
my-project/
├── dist/
├── public/
├── src/
│   ├── css/
│   └── script.js
├── .eslintignore
├── .gitignore
├── .prettierignore
├── .prettierrc
├── eslint.config.js
├── index.html
├── package.json
├── starter.config.js
└── vite.config.js
```

---

## ⚙️ Config Example: `starter.config.js`

```js
export default {
  cdn: {
    baseUrl: 'https://cdn.jsdelivr.net/gh',
    user: 'your-github-user',
    repo: 'your-public-repo',
    branch: 'main',
    org: true, // optional
  },
  deploy: {
    mode: 'split',
    publicRepo: 'webflow-assets',
    privateRepo: 'source-code-repo',
    branch: 'main',
  },
}
```

---

## 🔁 Workflow Summary

1. 👋 You launch: `npx create-webflow-starter`
2. 🧠 You answer a few questions
3. 🔐 If needed:
   - SSH key is created
   - GitHub auth is verified
4. 📦 Project is scaffolded
5. 📁 Git repos are created if required
6. 👨‍💻 Final instructions are shown — just cd into your folder (if needed) and run npm run dev!

---

## 🧪 Webflow Integration Preview

After running:

```bash
npm run dev
```

Visit:

```bash
http://localhost:3000/webflow
```

You'll get a **dedicated interface** with:

- 🔍 A **visual preview** of your loaders (CSS & JS)
- 📋 **Copy-paste buttons** for each loader
- ✅ Snippets that switch **automatically** between:
  - Local dev (`localhost`)
  - Production CDN (`jsDelivr`)

This makes it super easy to integrate modern, versioned scripts directly into Webflow's custom code areas — no guesswork, no manual rewriting.

---

## 🧠 Author

Made with ❤️ by [Pierre Lovenfosse](https://github.com/meetpilou)

## 📄 License

MIT — © [Pierre Lovenfosse](https://github.com/meetpilou)