Cloudflare Developers•6mo ago

Deploy remix app

How do I deploy a built remix app to cloudflare pages? I know to create an app for pages I follow this https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/, but for an app that was built what do I need to add for it to run under Cloudflare pages?
I have tried npm install cloudflare@latest , I created an app using the mentioned guide to compare the files, and add the @remix-run/cloudflare dependencies along with updating the remix.config.js, adding the server.ts, etc... and I always ran npm install after adding these, but nothing seems to work. I saw the old post here, but when creating a remix app it doesn't ask for deployment target and I have my node as 18.0.0. Here is the default config before adding any of this stuff:

"@remix-run/cloudflare": "^2.5.0",
"@remix-run/cloudflare-pages": "^2.5.0",

"@remix-run/cloudflare": "^2.5.0",
"@remix-run/cloudflare-pages": "^2.5.0",

Current:

{
  "name": "my-project",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --manual",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^2.5.0",
    "@remix-run/react": "^2.5.0",
    "@remix-run/serve": "^2.5.0",
    "isbot": "^4.1.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sort-by": "^0.0.2",
    "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.5.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.13.0",
    "@typescript-eslint/parser": "^6.13.0",
    "eslint": "^8.47.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "typescript": "^5.1.6"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

{
  "name": "my-project",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --manual",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^2.5.0",
    "@remix-run/react": "^2.5.0",
    "@remix-run/serve": "^2.5.0",
    "isbot": "^4.1.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sort-by": "^0.0.2",
    "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.5.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.13.0",
    "@typescript-eslint/parser": "^6.13.0",
    "eslint": "^8.47.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "typescript": "^5.1.6"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

14 Replies

Adi•6mo ago

Hey. I've deployed quite a few to production with Cloudflare, so I should be able to help. You can create your remix app with this command

npx create-remix@latest --template remix-run/remix/templates/cloudflare-pages

npx create-remix@latest --template remix-run/remix/templates/cloudflare-pages

From there build the final output bundle using npm run build. Once that's done, you can deploy it with

wrangler pages deploy public/ --project-name=<your-project-name>

wrangler pages deploy public/ --project-name=<your-project-name>

Leavii•6mo ago

Thanks for the reply! I deploy via git, but now all I am getting from Cloudflare is this.

Leavii•6mo ago

I have deleted the project and recreated, but still get this each time. Even with a blank template after running npm run dev and npm install this happens. I will give npm run build a try

Chaika•6mo ago

Right now deployments are a bit broken: https://www.cloudflarestatus.com/incidents/jvn13cvv64fw

Cloudflare Workers KV Issues

Chaika•6mo ago

When that is resolved you should be set to retry

Leavii•6mo ago

Ah.. thanks! Here I am rebuilding over and over... and over... lol This is Workers KV though? That pertain to pages?

Chaika•6mo ago

Indeed, Pages uses KV under the hood for all the asset storage. There's a note on that incident as well

This issue can also lead to failures in Pages deployments.

Leavii•6mo ago

Ah... I suppose I never learned to fully read, and just skim. My mistake. Appreciate it!

Chaika•6mo ago

It seems to be getting better now though, I just had a deployment succeed. You could just wait it out though rather then keep retrying lol, when the status page is resolved you should be set

Leavii•6mo ago

Yeah I am not trying any more. I will try later on when it isn't 2am 😉 Thanks again!

Chaika•6mo ago

and now it's resolved, you have bad timing lol

Leavii•6mo ago

It isn't just my timing. Welcome to my life.

yoyo7001•5mo ago

@Leavii i'am on the same problem as you.... i have a existing project i want to deploy it in pages ..... what new dependencies and files i have to add for successful deployment ?

Leavii•5mo ago

I just created a new project, moved my assets over to it, and where I had imports to @remix-run/react I just changed to @remix-run/cloudflare. I don't remember having to do much else honestly, but it was a small project I was using to test with anyway so I could use D1.

Gaming

Programming

Deploy remix app