Hi All, has anyone been through this before ?

Bbernardo.abreu Hi All, has anyone been through this before ?

I

Isaac McFadyen•4/1/24, 1:45 PM

It looks like you're trying to run the JS file directly with Node? If so you'll need to use Wrangler.

I

Isaac McFadyen•4/1/24, 1:45 PM

Or is this something else?

IIsaac McFadyen It looks like you're trying to run the JS file directly with Node? If so you'll ...

B

bernardo.abreuOP•4/1/24, 1:47 PM

this is my

.vscode/launch.json

.vscode/launch.json

.vscode/launch.json

.vscode/launch.json :

{
    "configurations": [
        {
            "name": "hybrid-routing",
            "type": "node",
            "request": "launch",
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/index.ts",
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
            "preLaunchTask": "tsc: build - tsconfig.json",
        }
    ]
}

{
    "configurations": [
        {
            "name": "hybrid-routing",
            "type": "node",
            "request": "launch",
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/index.ts",
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
            "preLaunchTask": "tsc: build - tsconfig.json",
        }
    ]
}

{
    "configurations": [
        {
            "name": "hybrid-routing",
            "type": "node",
            "request": "launch",
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/index.ts",
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
            "preLaunchTask": "tsc: build - tsconfig.json",
        }
    ]
}

{
    "configurations": [
        {
            "name": "hybrid-routing",
            "type": "node",
            "request": "launch",
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/index.ts",
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
            "preLaunchTask": "tsc: build - tsconfig.json",
        }
    ]
}

B

bernardo.abreuOP•4/1/24, 1:48 PM

My

tsconfig

tsconfig

tsconfig

tsconfig

{
  "compilerOptions": {
    "types": [
      "@cloudflare/workers-types",
      "vitest-environment-miniflare/globals",
    ],
    "target": "ES2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["ES2020"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "module": "NodeNext",                                /* Specify what module code is generated. */
    "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "nodenext",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./",                                   /* Specify the base directory to resolve non-relative module names. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./out",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

{
  "compilerOptions": {
    "types": [
      "@cloudflare/workers-types",
      "vitest-environment-miniflare/globals",
    ],
    "target": "ES2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["ES2020"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "module": "NodeNext",                                /* Specify what module code is generated. */
    "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "nodenext",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./",                                   /* Specify the base directory to resolve non-relative module names. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./out",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

{
  "compilerOptions": {
    "types": [
      "@cloudflare/workers-types",
      "vitest-environment-miniflare/globals",
    ],
    "target": "ES2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["ES2020"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "module": "NodeNext",                                /* Specify what module code is generated. */
    "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "nodenext",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./",                                   /* Specify the base directory to resolve non-relative module names. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./out",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

{
  "compilerOptions": {
    "types": [
      "@cloudflare/workers-types",
      "vitest-environment-miniflare/globals",
    ],
    "target": "ES2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["ES2020"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "module": "NodeNext",                                /* Specify what module code is generated. */
    "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "nodenext",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./",                                   /* Specify the base directory to resolve non-relative module names. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./out",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

B

bernardo.abreuOP•4/1/24, 1:48 PM

And my

package.json

package.json

{
    "name": "cxp-uwp2-int",
    "type": "module",
    "private": true,
    "version": "1.0.0",
    "description": "package for creating workers templates",
    "main": "./index.ts",
    "scripts": {
        "test": "vitest --watch",
        "start": "wrangler dev --local --port 3012 --env local",
        "wrangler:tail": "wrangler tail",
        "format": "prettier --write '**/*.{js,css,json,md}'",
        "compile": "tsc"
    },
    "author": "{{ authors }}",
    "license": "ISC",
    "devDependencies": {
        "@cloudflare/workers-types": "^4.20230404.0",
        "@types/jest": "^29.5.0",
        "@vitest/ui": "^0.29.8",
        "msw": "^1.2.1",
        "prettier": "^2.8.7",
        "vite": "^4.5.2",
        "vitest": "^0.29.8",
        "vitest-environment-miniflare": "^2.13.0"
    },
    "dependencies": {
        "itty-router": "^3.0.12",
        "serverless-cloudflare-workers": "^1.2.0",
        "typescript": "^5.0.3",
        "wrangler": "^2.20.2"
    }
}

{
    "name": "cxp-uwp2-int",
    "type": "module",
    "private": true,
    "version": "1.0.0",
    "description": "package for creating workers templates",
    "main": "./index.ts",
    "scripts": {
        "test": "vitest --watch",
        "start": "wrangler dev --local --port 3012 --env local",
        "wrangler:tail": "wrangler tail",
        "format": "prettier --write '**/*.{js,css,json,md}'",
        "compile": "tsc"
    },
    "author": "{{ authors }}",
    "license": "ISC",
    "devDependencies": {
        "@cloudflare/workers-types": "^4.20230404.0",
        "@types/jest": "^29.5.0",
        "@vitest/ui": "^0.29.8",
        "msw": "^1.2.1",
        "prettier": "^2.8.7",
        "vite": "^4.5.2",
        "vitest": "^0.29.8",
        "vitest-environment-miniflare": "^2.13.0"
    },
    "dependencies": {
        "itty-router": "^3.0.12",
        "serverless-cloudflare-workers": "^1.2.0",
        "typescript": "^5.0.3",
        "wrangler": "^2.20.2"
    }
}

{
    "name": "cxp-uwp2-int",
    "type": "module",
    "private": true,
    "version": "1.0.0",
    "description": "package for creating workers templates",
    "main": "./index.ts",
    "scripts": {
        "test": "vitest --watch",
        "start": "wrangler dev --local --port 3012 --env local",
        "wrangler:tail": "wrangler tail",
        "format": "prettier --write '**/*.{js,css,json,md}'",
        "compile": "tsc"
    },
    "author": "{{ authors }}",
    "license": "ISC",
    "devDependencies": {
        "@cloudflare/workers-types": "^4.20230404.0",
        "@types/jest": "^29.5.0",
        "@vitest/ui": "^0.29.8",
        "msw": "^1.2.1",
        "prettier": "^2.8.7",
        "vite": "^4.5.2",
        "vitest": "^0.29.8",
        "vitest-environment-miniflare": "^2.13.0"
    },
    "dependencies": {
        "itty-router": "^3.0.12",
        "serverless-cloudflare-workers": "^1.2.0",
        "typescript": "^5.0.3",
        "wrangler": "^2.20.2"
    }
}

{
    "name": "cxp-uwp2-int",
    "type": "module",
    "private": true,
    "version": "1.0.0",
    "description": "package for creating workers templates",
    "main": "./index.ts",
    "scripts": {
        "test": "vitest --watch",
        "start": "wrangler dev --local --port 3012 --env local",
        "wrangler:tail": "wrangler tail",
        "format": "prettier --write '**/*.{js,css,json,md}'",
        "compile": "tsc"
    },
    "author": "{{ authors }}",
    "license": "ISC",
    "devDependencies": {
        "@cloudflare/workers-types": "^4.20230404.0",
        "@types/jest": "^29.5.0",
        "@vitest/ui": "^0.29.8",
        "msw": "^1.2.1",
        "prettier": "^2.8.7",
        "vite": "^4.5.2",
        "vitest": "^0.29.8",
        "vitest-environment-miniflare": "^2.13.0"
    },
    "dependencies": {
        "itty-router": "^3.0.12",
        "serverless-cloudflare-workers": "^1.2.0",
        "typescript": "^5.0.3",
        "wrangler": "^2.20.2"
    }
}

Bbernardo.abreu this is my `.vscode/launch.json` : ```json { "configurations": [ { ...

I

Isaac McFadyen•4/1/24, 1:48 PM

So you're trying to run the Javascript file from

tsc

tsc

directly.

I

Isaac McFadyen•4/1/24, 1:48 PM

That won't work.

I

Isaac McFadyen•4/1/24, 1:48 PM

You'll need to run

wrangler dev

wrangler dev

in order to run the JS file.

I

Isaac McFadyen•4/1/24, 1:49 PM

(see your

start

start

start

start script)

B

bernardo.abreuOP•4/1/24, 1:49 PM

I'm able to run the project, but when it comes to using the debugger from vscode it won't work

B

bernardo.abreuOP•4/1/24, 1:49 PM

Running in debug mode is my goal

I

Isaac McFadyen•4/1/24, 1:51 PM

You also cross-posted this in #workerd, please don't do that in the future as I completely missed kian's responses/questions.

IIsaac McFadyen You also cross-posted this in #workerd, please don't do that in the future as I ...

B

bernardo.abreuOP•4/1/24, 1:52 PM

Yeah, sorry, just deleted my post there. Figure this would be a better channel.

IIsaac McFadyen You'll need to run `wrangler dev` in order to run the JS file.

B

bernardo.abreuOP•4/1/24, 1:54 PM

What do you mean here ?

Bbernardo.abreu What do you mean here ?

I

Isaac McFadyen•4/1/24, 1:55 PM

tsc

tsc

outputs a Javascript file. But you can't run that Javascript file directly with Node.js, it's not compatible.

I

Isaac McFadyen•4/1/24, 1:55 PM

You need to run Wrangler, which will then run the JS file for you.

IIsaac McFadyen `tsc` outputs a Javascript file. But you can't run that Javascript file directly...

B

bernardo.abreuOP•4/1/24, 1:56 PM

Where are you seeing this ? I am running with wrangler (package.json)

Bbernardo.abreu Where are you seeing this ? I am running with wrangler (package.json)

I

Isaac McFadyen•4/1/24, 1:58 PM

I'm seeing in the Debug Console the line

<path>/bin/node ./out/index.js

<path>/bin/node ./out/index.js

which makes it seem like you're running it directly with Node.

I

Isaac McFadyen•4/1/24, 1:58 PM

I'm assuming the launch.json isn't properly configured?

I

Isaac McFadyen•4/1/24, 1:59 PM

That's the error you'd see if it was run directly with Node instead of Wrangler.

IIsaac McFadyen I'm assuming the launch.json isn't properly configured?

B

bernardo.abreuOP•4/1/24, 1:59 PM

Yes, my intention is to set it up the right way, but I don't know how.

Bbernardo.abreu Yes, my intention is to set it up the right way, but I don't know how.

I

Isaac McFadyen•4/1/24, 2:00 PM

I don't have much experience with VSCode's launch.json either unfortunately, so I might not be able to help much here.

B

bernardo.abreuOP•4/1/24, 2:00 PM

No a problem, thanks though

B

bernardo.abreuOP•4/1/24, 2:17 PM

Has anyone else had to configure VSCode to run in debug mode for a TS Node project that includes a Cloudflare Worker?

G

Grant Burry•4/1/24, 2:58 PM

Maybe I'm getting a little ahead of myself, but I'm poking around some experimental types and trying to make this new RPC thing work. Just spent the weekend trying to build a Durable Object Proxy thingy, so this is great timing

. Looking forward to an announcement

https://github.com/cloudflare/workerd/blob/f04e5ce5a25df2f394dc420e330946ea3ea8e67e/types/test/types/rpc.ts

Screenshot_2024-04-01_at_10.58.01_AM.png

GitHub

workerd/types/test/types/rpc.ts at f04e5ce5a25df2f394dc420e330946ea...

The JavaScript / Wasm runtime that powers Cloudflare Workers - cloudflare/workerd

S

shaderkyle_ | SolSentryBot•4/1/24, 8:27 PM

Is there anyway to "hotfix" an environment variable's value after deployment? If so, what are the implications of pushing a change?

S

shaderkyle_ | SolSentryBot•4/1/24, 8:27 PM

Use case: authentication key for a 3rd party app changes, you don't want to have to redeploy

Sshaderkyle_ | SolSentryBot Is there anyway to "hotfix" an environment variable's value after deployment? I...

I

Isaac McFadyen•4/1/24, 8:35 PM

You can definitely patch an environment variable. Internally the Worker will be redeployed but I believe it can be done via the API without a full reupload.

IIsaac McFadyen You can definitely patch an environment variable. Internally the Worker will be ...

K

kp1197•4/1/24, 8:38 PM

Will it reload any durable objects? Any docs? Had trouble finding readings on this

K

kp1197•4/1/24, 8:39 PM

Workers im not worried about. Durable.objs getting forcefully evicted is an issue

K

kp1197•4/1/24, 8:40 PM

Also, unrelated, but in v3.18+ miniflare debugging is broken for codebases over 1mb (about 10k lines)

K

kp1197•4/1/24, 8:41 PM

Figured since i got your attention and the GH issues arent getting attention

I

Isaac McFadyen•4/1/24, 8:43 PM

People with green names are just community members who volunteer our time, we can't really triage/prioritize issues, sorry

I

Isaac McFadyen•4/1/24, 8:43 PM

I'm sure it'll eventually get looked at though

K

kp1197•4/1/24, 8:45 PM

I hope so! I downgraded to 3.18 and that comes with its own set of issues.

B

BlackPearl•4/2/24, 3:26 AM

Is @google/generative-ai package work in worker

B

BlackPearl•4/2/24, 3:26 AM

Any?

O

onnimonni•4/2/24, 10:32 AM

Most complete full-stack batteries included framework for CF workers/pages?
What would be the most complete batteries included framework or project starter for full-stack development with background jobs, database and frontend which is supported in Cloudflare workers/pages?

Using eg Ruby on Rails or Python Django or Elixir Phoenix is pretty fantastic experience for the developer because they have great examples and convention over configuration for pretty much everything so one can just focus on building the product instead of selecting between so many JS libraries

. These just have the burden of maintaining separate infrastructure. I'm looking if I could use CF for the next greenfield project I'm going to start.

Oonnimonni **Most complete full-stack batteries included framework for CF workers/pages? 📦...

H

Hello, I’m Allie!•4/2/24, 10:35 AM

I use SvelteKit, but that is by no means the only one

H

Hello, I’m Allie!•4/2/24, 10:36 AM

There is support for a good amount of Next.js, Nuxt should be good too

O

onnimonni•4/2/24, 10:37 AM

That's great to hear but it is quite partial answer and doesn't really take into account how one should use queues or databases in some idiomatic way

K

kian•4/2/24, 10:39 AM

There's https://superflare.dev but I haven't heard of any others.

K

kian•4/2/24, 10:39 AM

All the normal frameworks just expose the bindings to you as-is and it's up to you to wrap them.

O

onnimonni•4/2/24, 10:44 AM

Yeah I saw Superflare and it indeed is something I'm looking for but it doesn't seem to be very widely used and the single developer behind it hasn't really been that active lately.

W

Walshy•4/2/24, 10:46 AM

Astro is a great choice too, they have Astro DB now which is really slick if using Astro

For queues it'd be the standard cf binding way or another service, not something Astro themselves does handling for

W

Walshy•4/2/24, 10:47 AM

But there's no real Ruby on Rails in js land

C

Chromie•4/2/24, 10:47 AM

HELP ME！！！
I am a Chinese and I don't understand CloudFlare at all. I have difficulty editing the Worker code.
How do I select and delete all code in Android?

WWalshy But there's no real Ruby on Rails in js land

O

onnimonni•4/2/24, 10:50 AM

I have noticed that

I have mainly used CF so far for deploying something small in the workers like splitting traffic in the A/B-test or altering page with HTMLRewriter.

It would be just great that one could easily onboard new people into the projects by having certain conventions and not reinventing the wheel

C

Chromie•4/2/24, 10:52 AM

我没办法使用电脑。在手机网页，我该如何全选代码信息复制别人的代码？
I don't have access to a computer. How can I select all code information and copy someone else's code on a mobile web page?

Oonnimonni **Most complete full-stack batteries included framework for CF workers/pages? 📦...

R

rob•4/2/24, 12:51 PM

I'd look into nuxthub also , has really good support for cf

Hi All, has anyone been through this before ?

Similar Threads