Discover Cloudflare preset for Nitro!
Preset: cloudflare
(switch to this preset)
Login to your Cloudflare Workers account and obtain your account_id
from the sidebar.
Create a wrangler.toml
in your root directory:
name = "playground"main = "./.output/server/index.mjs"workers_dev = truecompatibility_date = "2022-09-10"account_id = "<the account_id you obtained (optional)>"route = "<mainly useful when you want to setup custom domains (optional too)>"[site]bucket = ".output/public"
You can use wrangler2, to test your app locally:
NITRO_PRESET=cloudflare yarn build# If you have added a 'wrangler.toml' file like above in the root of your project:npx wrangler dev --local# If you don't have a 'wrangler.toml', directly use:npx wrangler dev .output/server/index.mjs --site .output/public --local
Install wrangler2 and login to your Cloudflare account:
npm i wrangler -gwrangler login
Generate website with cloudflare
preset:
NITRO_PRESET=cloudflare yarn build
You can preview locally:
# If you have a 'wrangler.toml' like above:wrangler dev# If you don't have a 'wrangler.toml':wrangler dev .output/server/index.mjs --site .output/public
Publish:
wrangler publish
Create a token according to the wrangler action docs and set CF_API_TOKEN
in your repository config on GitHub.
Create .github/workflows/cloudflare.yml
:
name: cloudflare
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
ci:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ ubuntu-latest ]
node: [ 14 ]
steps:
- uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node }}
- name: Checkout
uses: actions/checkout@master
- name: Cache node_modules
uses: actions/cache@v2
with:
path: node_modules
key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
- name: Install Dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: yarn
- name: Build
run: yarn build
env:
NITRO_PRESET: cloudflare
- name: Publish to Cloudflare
uses: cloudflare/wrangler-action@2.0.0
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
Preset: cloudflare_pages
(switch to this preset)
If you use the GitHub/GitLab integration with Pages, Nitro does not require any configuration. When you push to the repository, Pages will automatically build your project, and Nitro will detect the environment.
Alternatively, you can use wrangler to upload your project to Cloudflare. In this case, you will have to set the preset manually:
Install wrangler and login to your Cloudflare account:
npm i wrangler -gwrangler login
Create project:
wrangler pages project create <project-name>
Publish:
wrangler pages publish