Skip to content

Add cloudflare deploy support #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vladimirbalaur18 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add cloudflare deploy support #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ vite.config.ts.*
# next.js
/.next
/out/
/.open-next

# production
/build
Expand Down
90 changes: 58 additions & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,22 @@

## 📖 Table of Contents

* [About](#about)
* [Features](#features)
* [Tech Stack](#tech-stack)
* [Getting Started](#getting-started)

* [Prerequisites](#prerequisites)
* [Installation](#installation)
* [Running Locally](#running-locally)
* [Building for Production](#building-for-production)
* [Environment Variables](#environment-variables)
* [Project Structure](#project-structure)
* [Deployment](#deployment)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)
- [About](#about)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)

- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running Locally](#running-locally)
- [Building for Production](#building-for-production)

- [Environment Variables](#environment-variables)
- [Project Structure](#project-structure)
- [Deployment](#deployment)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)

---

Expand All @@ -30,35 +31,35 @@

## ✨ Features

* **Responsive Design** – Mobile-first layouts that adapt seamlessly to all screen sizes
* **Server-Side Rendering** – Blazing fast initial page loads and excellent SEO
* **Image Optimization** – Built-in Next.js `<Image>` component for automatic resizing & lazy loading
* **Dynamic Routing** – Clean URL structure for project detail pages
* **CMS-Ready** – Easy integration with headless CMS or Markdown content
* **Dark & Light Mode** – Toggle between themes with system preference detection
* **Accessibility** – Follows WCAG standards for keyboard navigation & screen readers
* **Animations** – Subtle scroll and hover effects (e.g. Framer Motion)
- **Responsive Design** – Mobile-first layouts that adapt seamlessly to all screen sizes
- **Server-Side Rendering** – Blazing fast initial page loads and excellent SEO
- **Image Optimization** – Built-in Next.js `<Image>` component for automatic resizing & lazy loading
- **Dynamic Routing** – Clean URL structure for project detail pages
- **CMS-Ready** – Easy integration with headless CMS or Markdown content
- **Dark & Light Mode** – Toggle between themes with system preference detection
- **Accessibility** – Follows WCAG standards for keyboard navigation & screen readers
- **Animations** – Subtle scroll and hover effects (e.g. Framer Motion)

---

## 🛠️ Tech Stack

* **Framework:** Next.js
* **Language:** TypeScript / JavaScript
* **Styling:** Tailwind CSS
* **Components:** React, ShadCN UI (optional)
* **Animation:** Framer Motion
* **Linting & Formatting:** ESLint, Prettier
* **Hosting:** Vercel (recommended)
- **Framework:** Next.js
- **Language:** TypeScript / JavaScript
- **Styling:** Tailwind CSS
- **Components:** React, ShadCN UI (optional)
- **Animation:** Framer Motion
- **Linting & Formatting:** ESLint, Prettier
- **Hosting:** Vercel (recommended)

---

## 🚀 Getting Started

### Prerequisites

* **Node.js** v16 or higher
* **npm** v8 or higher (or **Yarn** v1.22+)
- **Node.js** v16 or higher
- **npm** v8 or higher (or **Yarn** v1.22+)

### Installation

Expand All @@ -68,3 +69,28 @@
git clone https://github.com/vladimirbalaur18/xLineDesignWeb.git
cd xLineDesignWeb
```

### Deploying on CloudFlare Workers and Pages

For CloudFlare deployment, wrangler.toml is the configuration file.

1. You must login using wrangler before running the `wrangler` CLI (`wrangler login`)
2. Run the commands via `wrangler`, (` wrangler build`, `wrangler dev`) since the `opennextjs-cloudflare` from official documentation doesn't work
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix code span formatting.

Extra spaces inside the backticks break markdown formatting.

Apply this diff:

-2. Run the commands via `wrangler`, (` wrangler build`, `wrangler dev`) since the `opennextjs-cloudflare` from official documentation doesn't work
+2. Run the commands via `wrangler` (`wrangler build`, `wrangler dev`) since the `opennextjs-cloudflare` from official documentation doesn't work
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
2. Run the commands via `wrangler`, (` wrangler build`, `wrangler dev`) since the `opennextjs-cloudflare` from official documentation doesn't work
2. Run the commands via `wrangler` (`wrangler build`, `wrangler dev`) since the `opennextjs-cloudflare` from official documentation doesn't work
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)

78-78: Spaces inside code span elements

(MD038, no-space-in-code)

🤖 Prompt for AI Agents 
In README.md around line 78, the code spans contain extra spaces (e.g. "(`
wrangler build`, `wrangler dev`") which breaks Markdown formatting; remove the
stray space after the opening backticks so each command is a proper code span
(e.g. "`wrangler build`, `wrangler dev`"), and ensure other inline code uses
backticks without surrounding spaces.


3. **Run the build**

```bash
npm run build
```

4. **Preview the Cloudflare build locally**

```bash
npm run preview
```

5. **Deploy the Cloudflare build**

```bash
npm run deploy
```
3 changes: 3 additions & 0 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,6 @@ const nextConfig = {
};

export default nextConfig;

import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
initOpenNextCloudflareForDev();
3 changes: 3 additions & 0 deletions open-next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig();
Loading