feat: migrate to cloudflare pages and vite (Work in progress)

[BhanuNexus]

Migrate to Remix Vite and Cloudflare Pages

Status: Work in progress Issue: #55

[benvinegar]

Wow, awesome – I took a stab at this for a month+ ago and didn't end up finishing.

Let me know how I can help!

[BhanuNexus]

Hi @benvinegar, Whenever you get sometime, could you please checkout this branch and test? I don't have data for my cloudflare account, hence not able to test the dashboard completely.

Apart from collect.test.ts, remaining looks good in my tests. FYI - I did npm package updates as well.

[benvinegar]

@BhanuNexus I think I addressed the tests.

But I don't know how to actually run this. If I try npm run dev it will load the homepage, but /collect 404s and trying to load the dashboard URL crashes the server.

It looks like this is converted to Cloudflare Pages (e.g. the functions dir), so I also tried wrangler pages dev but then I get the following compilation errors:

❯ node_modules/wrangler/bin/wrangler.js pages dev

 ⛅️ wrangler 3.61.0
-------------------

✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.

✘ [ERROR] Could not resolve "../build/server"

    [[page]].ts:3:23:
      3 │ import * as build from "../build/server";
        ╵                        ~~~~~~~~~~~~~~~~~

✘ [ERROR] Build failed with 1 error:

  [[page]].ts:3:23: ERROR: Could not resolve "../build/server"

Maybe I'm missing some steps/instructions?

[BhanuNexus]

@benvinegar could you please try below?

# added prepreview script now
npm run preview

[BhanuNexus]

I think I addressed the tests.

Thank you :)

[benvinegar]

@benvinegar could you please try below?

Yep, this gets the server running -- thank you -- but looks like it's producing a bad query because it can't extract the timezone correctly. Poking at this.

[benvinegar]

Ok, I think it works: the only remaining issue is figuring out how to inject VERSION into the context.

This doesn't seem to ever get a value:

context.cloudflare.env.CF_PAGES_COMMIT_SHA

Any ideas?

[benvinegar]

Here's your PR branch running locally, serving my production dataset:

https://github.com/benvinegar/counterscale/assets/2153/937189e2-c075-42e2-91b9-ca4f88695aef

[benvinegar]

Trying to deploy this and I basically just get 500 Internal Error with no visibility into what's going on / no actual HTML returned or anything.

[BhanuNexus]

Thank you very much for your changes, sorry for trouble with wrong parameter for timezone.

I am assuming there are no secrets set, can you try below?

# for production
npx wrangler pages secret put CF_ACCOUNT_ID --env production
npx wrangler pages secret put CF_BEARER_TOKEN --env production

# for preview
npx wrangler pages secret put CF_ACCOUNT_ID --env preview
npx wrangler pages secret put CF_BEARER_TOKEN --env preview

I'm able to run it here https://counterscaleapp.pages.dev

[BhanuNexus]

This doesn't seem to ever get a value:

context.cloudflare.env.CF_PAGES_COMMIT_SHA

Any ideas?

This value is available with CF build environment (similar to github actions variables) I can see value is available once deployed to pages, sample https://counterscaleapp.pages.dev/

[benvinegar]

I am assuming there are no secrets set, can you try below?

Sorry will try to poke at this tonight. I do wish there was better reporting coming out of pages or a way to capture this without blowing up.

[benvinegar]

Yep, that did it 🎉

# for preview
npx wrangler pages secret put CF_ACCOUNT_ID --env preview
npx wrangler pages secret put CF_BEARER_TOKEN --env preview

^Note I didn't need this I think because (I think) it reads .dev.vars which already had my local secrets.

---

Okay, so my thinking is: this is basically a major version. It's basically a re-architecture of what I'm used to, and I'm not super comfortable just making this main.

So here's my suggestion:

1. I actually tag a 1.0.0 release of Counterscale of HEAD on main
2. I start a v2 branch and merge this PR into that branch
3. Going forward, new feature development happens on the v2 branch
   1. I'll change counterscale.dev to autodeploy from the v2 branch
4. After some time when I feel it's stable, there are no concerns, etc., I'll merge the v2 branch into main and tag a 2.0.0 release

@BhanuNexus Thoughts on this plan?

[BhanuNexus]

Note I didn't need this I think because (I think) it reads .dev.vars which already had my local secrets.

yeah, this is an issue and this also makes me think of using Cloudflare Pages settings instead of considering wrangler.toml. If we remove pages_build_output_dir = "build/client" from wrangler.toml then variables can be set from cloudflare UI, that way it might be easy for people who fork this repo and use.

[BhanuNexus]

Yep, that did it 🎉

# for preview
npx wrangler pages secret put CF_ACCOUNT_ID --env preview
npx wrangler pages secret put CF_BEARER_TOKEN --env preview

^Note I didn't need this I think because (I think) it reads .dev.vars which already had my local secrets.

Okay, so my thinking is: this is basically a major version. It's basically a re-architecture of what I'm used to, and I'm not super comfortable just making this main.

So here's my suggestion:

1. I actually tag a 1.0.0 release of Counterscale of HEAD on main
2. I start a v2 branch and merge this PR into that branch

3. Going forward, new feature development happens on the v2 branch

   1. I'll change counterscale.dev to autodeploy from the v2 branch
4. After some time when I feel it's stable, there are no concerns, etc., I'll merge the v2 branch into main and tag a 2.0.0 release

@BhanuNexus Thoughts on this plan?

Totally agreed. Meanwhile, I can update documentation and need to check posibility of moving cloudflare function /collect to remix, this will help to reduce dependency on CF and devlopment/debugging will be easy in local.

[benvinegar]

Just following up – I've been on vacation, but back now and plan to make these branch changes soon.

Meanwhile, I can update documentation and need to check posibility of moving cloudflare function /collect to remix, this will help to reduce dependency on CF and devlopment/debugging will be easy in local.

👍

[benvinegar]

Closing because this PR has become the v2 branch.

[benvinegar]

@BhanuNexus All your changes are now on main (version is v2.0.0-beta.2).