How to use local development

[Mecanik]

Hi guys,

I'm having trouble understanding how to use the local development environment properly. These are defined in package.json:

    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "pages:build": "npx @cloudflare/next-on-pages",
    "pages:deploy": "npm run pages:build && wrangler pages deploy .vercel/output/static",
    "pages:watch": "npx @cloudflare/next-on-pages --watch",
    "pages:dev": "npx wrangler pages dev .vercel/output/static --compatibility-date=2023-11-21 --compatibility-flag=nodejs_compat"

So if I run npm run dev, the site builds and I can see it on localhost:3000, but there is nothing available from wrangler (bindings, etc).

However if I run npm run pages:dev, then wrangler is called and I have access to bindings and so on, but it's not compiling it properly.

And from my tests, pages: commands do not respect NODE_ENV=development (event after adding them in the command line). I also have .dev.vars, .env, etc; it's all a mess.

With that being said, can someone please clarify which command does what exactly in this instance? I am keen to understand how exactly are you developing locally with this project, having access to bindings, etc. Same thing for production.

Thanks

[Mecanik]

To clarify, pages:dev does NOT recompile the project properly. Only after running pages:watch (which again, does nothing from my view?) and then again pages:dev the project WAS recompiled. Total mess in my opinion, sorry.

[james-elicx]

You should be using next dev for local development if you want HMR. You can access bindings in next dev using our next-dev submodule and the setupDevPlatform utility.

[dario-piotrowicz]

@Mecanik yeah I agree that using pages:dev was a total mess 🙂

Now as @james-elicx mentioned you should just use next dev and this would be the recommended workflow: https://github.com/cloudflare/next-on-pages/tree/main/internal-packages/next-dev#recommended-development-workflow

It still feels slightly tedious that a preview phase is needed to validate the app before deployment, but given the technical limitations I think that is the best possible DX we can currently have 🙂