Skip to content
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

Vite plugin README updates #7837

Merged
merged 3 commits into from
Jan 21, 2025
Merged

Vite plugin README updates #7837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
429a296
Fix link in README
jamesopstad Jan 20, 2025
cf98cca
Used semicolons in README code examples
jamesopstad Jan 20, 2025
4d35f0d
Match default prettier config in README
jamesopstad Jan 21, 2025
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
3 changes: 1 addition & 2 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@
"files": "packages/vite-plugin-cloudflare/README.md",
"options": {
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"plugins": []
}
}
Expand Down
60 changes: 30 additions & 30 deletions packages/vite-plugin-cloudflare/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# `@cloudflare/vite-plugin`

[Intro](#intro) | [Quick start](#quick-start) | [Tutorial](#tutorial) | [API](#api) | [Cloudflare environments](#worker-environments) | [Migrating from `wrangler dev`](#migrating-from-wrangler-dev)
[Intro](#intro) | [Quick start](#quick-start) | [Tutorial](#tutorial) | [API](#api) | [Cloudflare environments](#cloudflare-environments) | [Migrating from `wrangler dev`](#migrating-from-wrangler-dev)
Copy link
Contributor

Choose a reason for hiding this comment

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

Good spot. Sorry I missed this before.


## Intro

Expand All @@ -27,12 +27,12 @@ npm install @cloudflare/vite-plugin wrangler --save-dev
```ts
// vite.config.ts

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
plugins: [cloudflare()],
})
});
```

### Create your Worker config file
Expand All @@ -52,9 +52,9 @@ main = "./src/index.ts"

export default {
fetch() {
return new Response(`Running in ${navigator.userAgent}!`)
return new Response(`Running in ${navigator.userAgent}!`);
},
}
};
```

You can now develop (`vite dev`), build (`vite build`), preview (`vite preview`), and deploy (`wrangler deploy`) your application.
Expand Down Expand Up @@ -88,13 +88,13 @@ npm install @cloudflare/vite-plugin wrangler --save-dev
```ts
// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
plugins: [react(), cloudflare()],
})
});
```

#### Create your Worker config file
Expand Down Expand Up @@ -181,22 +181,22 @@ The assets `binding` defined here will allow you to access the assets functional
// api/index.ts

interface Env {
ASSETS: Fetcher
ASSETS: Fetcher;
}

export default {
fetch(request, env) {
const url = new URL(request.url)
const url = new URL(request.url);

if (url.pathname.startsWith('/api/')) {
if (url.pathname.startsWith("/api/")) {
return Response.json({
name: 'Cloudflare',
})
name: "Cloudflare",
});
}

return env.ASSETS.fetch(request)
return env.ASSETS.fetch(request);
},
} satisfies ExportedHandler<Env>
} satisfies ExportedHandler<Env>;
```

The Worker above will be invoked for any request not matching a static asset.
Expand All @@ -211,14 +211,14 @@ Replace the file contents with the following code:
```tsx
// src/App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
const [count, setCount] = useState(0)
const [name, setName] = useState('unknown')
const [count, setCount] = useState(0);
const [name, setName] = useState("unknown");

return (
<>
Expand All @@ -245,9 +245,9 @@ function App() {
<div className="card">
<button
onClick={() => {
fetch('/api/')
fetch("/api/")
.then((res) => res.json() as Promise<{ name: string }>)
.then((data) => setName(data.name))
.then((data) => setName(data.name));
}}
aria-label="get name"
>
Expand All @@ -261,10 +261,10 @@ function App() {
Click on the Vite and React logos to learn more
</p>
</>
)
);
}

export default App
export default App;
```

Now, if you click the button, it will display 'Name from API is: Cloudflare'.
Expand Down Expand Up @@ -310,12 +310,12 @@ The `cloudflare` plugin should be included in the Vite `plugins` array:
```ts
// vite.config.ts

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
plugins: [cloudflare()],
})
});
```

It accepts an optional `PluginConfig` parameter.
Expand Down
Loading