{"plugin":{"id":3,"name":"cloudflare-base","icon":"🛠️","description":"Optimized | React - Tailwindcss | for Cloudflare pages","longDescription":"# Frame Master Template: Cloudflare Base\n\nA modern, high-performance base starter template for building React applications deployed to Cloudflare Pages, styled with Tailwind CSS, and orchestrated by Frame Master. This template is based on the `cloudflare-react-tailwindcss` template but serves as the foundational base.\n\n![Frame Master Template](https://img.shields.io/badge/Frame%20Master-Template-blueviolet)\n![React](https://img.shields.io/badge/React-19-blue)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1-38bdf8)\n![Cloudflare Pages](https://img.shields.io/badge/Cloudflare-Pages-orange)\n![Bun](https://img.shields.io/badge/Bun-1.3-black)\n\n## 🚀 Features\n\n- **React 18/19**: The latest version of React for building interactive UIs.\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.\n- **Cloudflare Pages**: Deploys instantly to the edge with global low latency.\n- **Frame Master**: Integrated workflow for seamless development and plugin management.\n- **Bun**: Lightning-fast JavaScript runtime and package manager.\n- **Image Optimization**: Built-in image optimizer supporting WebP and responsive sizes.\n- **SVG Loader**: Import and use SVGs directly as React components.\n- **SEO Optimization**: Comprehensive SEO configuration out-of-the-box.\n- **Client-Side HMR**: Instant feedback during development.\n- **TypeScript**: Type-safe development for better code quality.\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- [Bun](https://bun.sh) (v1.3 or later)\n\n### Installation\n\n1. **Clone the repository (or use the template):**\n\n   ```bash\n   git clone <your-repo-url>\n   cd <your-project-directory>\n   ```\n\n2. **Install dependencies:**\n\n   ```bash\n   bun install\n   ```\n\n3. **Initialize Frame Master:**\n\n   ```bash\n   bun frame-master init\n   ```\n\n### Development\n\nStart the development server with Hot Module Replacement (HMR):\n\n```bash\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `src/pages/index.tsx`. The page auto-updates as you edit the file.\n\n## 📦 Building for Production\n\nTo create a production build:\n\n```bash\nbun run build\n```\n\nThe build artifacts will be stored in the `.frame-master/build` directory (or your configured output directory).\n\n## ☁️ Deployment\n\n### Cloudflare Pages\n\n1. Push your code to a GitHub repository.\n2. Log in to the [Cloudflare Dashboard](https://dash.cloudflare.com/) and go to **Pages**.\n3. Click **Create a project** > **Connect to Git**.\n4. Select your repository.\n5. Configure the build settings:\n   - **Framework preset**: None / Custom\n   - **Build command**: `bun run build`\n   - **Build output directory**: `.frame-master/build`\n6. Click **Save and Deploy**.\n\n## 📂 Project Structure\n\n```\n.\n├── src/\n│   ├── pages/          # Application pages\n│   │   ├── index.tsx   # Home page\n│   │   └── layout.tsx  # Main layout component\n│   ├── shell.tsx       # App shell configuration\n│   └── client-wrapper.tsx\n├── static/             # Static assets (images, global CSS)\n├── frame-master.config.ts # Frame Master configuration\n├── tailwind.config.js  # Tailwind CSS configuration\n├── tsconfig.json       # TypeScript configuration\n└── package.json\n```\n\n## 📄 License\n\nThis project is licensed under the MIT License.\n","author":"shpaw415","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"cdn","tags":["react","cloudflare","cloudflare-pages"],"published":true,"githubReleaseUrl":"https://github.com/shpaw415/frame-master-template-cloudflare-base/releases/tag/v1.0.1","githubRepoUrl":"https://github.com/shpaw415/frame-master-template-cloudflare-base","defaultVersion":"1.0.1","installation":"frame-master create --template cloudflare-base","features":["image-optimization","SVG as React Component","import image optimized","easy SEO managment","auto SSG","React with Nextjs like file structure and Layout","Auto SiteMap"],"includedPlugins":["frame-master-plugin-apply-react","frame-master-plugin-assets-to-build","frame-master-plugin-auto-sitemap","frame-master-plugin-image-optimizer","frame-master-plugin-react-to-html","frame-master-plugin-seo","frame-master-plugin-tailwind","frame-master-svg-to-jsx-loader"],"previewUrl":"","createdAt":"2026-03-04T19:25:33.000Z","updatedAt":"2026-04-08T17:36:19.000Z"}}