https://github.com/travis-r6s/vite-plugin-ssr-cloudflare-pages

vite-plugin-ssr (SSR mode) + Cloudflare Pages example
https://github.com/travis-r6s/vite-plugin-ssr-cloudflare-pages

Last synced: 26 days ago
JSON representation

vite-plugin-ssr (SSR mode) + Cloudflare Pages example

• Host: GitHub
• URL: https://github.com/travis-r6s/vite-plugin-ssr-cloudflare-pages
• Owner: travis-r6s
• Created: 2021-12-15T15:32:13.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-07T19:15:26.000Z (almost 3 years ago)
• Last Synced: 2023-12-27T13:38:53.362Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://vite-plugin-ssr-cloudflare-pages.pages.dev
• Size: 557 KB
• Stars: 15
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vite-plugin-ssr-cloudflare-pages

This is a demo project showcasing how to use [`vite-plugin-ssr`](https://vite-plugin-ssr.com) and [Cloudflare Pages](https://developers.cloudflare.com/pages/) (with [`wrangler@2`](https://github.com/cloudflare/wrangler2)).

Preview: [https://vite-plugin-ssr-cloudflare-pages.pages.dev](https://vite-plugin-ssr-cloudflare-pages.pages.dev)

### Pages Setup

When adding your site to Cloudflare Pages, make sure to set the **Build command** to `npm run build`, and the **Build output directory** to `/dist/assets`. 

We run a script to bundle any server-side code into a [custom worker](https://developers.cloudflare.com/pages/platform/functions#advanced-mode), so Pages only needs to host the client-side (static) assets.

### Custom Worker

This is the same worker that is used in the `vite-plugin-ssr` demo, but in the module format instead of the service worker format. It passes any `/asset/*` requests to the `env.ASSETS.fetch` worker helper, and any page requests are handled by `vite-plugin-ssr`. It is located in `/worker/index.ts`, and bundled into the required `/dist/_worker.js` file by the [`esbuild`](https://esbuild.github.io) script (located at `./build.js`) - this step is run by the `npm run build` command, _after_ the site has been built by Vite.

### Development

We are using the same setup as the basic `vite-plugin-ssr` template, with an Express server handling our site in development. This is so we can use the Vite middleware, and not have to re-bundle and run the worker everytime we change out code.

### Previewing Locally

You can preview the site locally (as if it were deployed) using `wrangler@2` - this is a new version of the Wrangler CLI that adds support for Pages.

Make sure you have built your site using `pnpm run build`, then start the preview with `pnpm run serve`. 

> You will note that we pass the path to the client-side assets directory, as we did with the Pages setup.

### Potential Issues

Cloudflare workers currently have a limit of 1MB, and a decent sized website will likely go over this limit when bundling the worker (as it bundles all the necessary `vite-plugin-ssr` code as well). Cloudflare have mentioned increasing this limit in the future however, and there is a form you can use to request an increase if needed: https://www.cloudflare.com/en-gb/larger-scripts-on-workers-early-access/