posts/hono-pages-stack-weatherapp/

[utterances-bot]

Build Cloudflare Pages Stack Weather App - Kuldeep

https://kuldeep.tech/posts/hono-pages-stack-weatherapp/

[coldter]

Oh, right! hosted at: https://weather.p.kuldeep.tech repo: https://github.com/coldter/hono-cloudflare-pages-stack

[coldter]

@mateusloubach

So for local dev most Cloudflare offering uses Wrangler CLI (installed as dev-deps)

since we're working with Cloudflare pages, we'll utilize wrangler pages dev

for starting our dev environment server, there is a script in package.json called dev::

$( cat secrets.json | jq -r 'keys[] as $k | \"export \\($k)=\\(.[$k])\"') && wrangler pages dev --local --compatibility-date=2023-08-01 --binding OPEN_WEATHER_MAP_API=$OPEN_WEATHER_MAP_API OPEN_WEATHER_MAP_SEARCH_API=$OPEN_WEATHER_MAP_SEARCH_API --kv OpenWeatherMapCache -- pnpm vite:dev

If u ever have worked with Cloudflare workers u might be familiar with wrangler.toml which we use for providing many config and customization option for our local development and deployment. Since wrangler pages doesn't support wrangler.toml, yet we have to provide every option as arguments to wrangler pages dev

to summarized::

• $( cat secrets.json | jq -r 'keys[] as $k | \"export \\($k)=\\(.[$k])\"') what this line is doing is just reading the secrets.json file's content and using a command line utility called jq and setting up the json's key and its value as environment var for other commands, which in our case it's wrangler.

  • this is because I didn't want to hard code open weather's API key
  • u can get yours from here
  • place them in secrets.json { "OPEN_WEATHER_MAP_SEARCH_API": "", "OPEN_WEATHER_MAP_API": "" }

• after setting up the env vars I have used the wrangler pages dev --local along with some config, at last I'm using another npm script to start our vite server with -- pnpm vite:dev, wrangler cli will auto-detect the vite server port and proxies necessary request to vite's dev server.

  • for other option, I'm using --binding this is for setting up the env var that we extracted from secrets.json. --kv which emulates Cloudflare KV in our local environment.

---

So basically u only have to set up settings.json file with your openweathermap's api keys and run pnpm run dev, this will start react dev server with pages function on port 5173.

Make sure u have jq installed on ur system, it should be there if u're using linux, for windows u might have to install it or just hardcode the api keys in the script

for more info, refer https://developers.cloudflare.com/pages/