Adding your newly created Cloudflare app to Github

Cloudflare’s npm create cloudflare script is great but if you use github, almost certainly you’ll want to not only use git version control, but also push it to github. Here’s the question that comes up in that npm create workflow:

Do you want to use git for version control?

This does NOT equate to “use github for version control”.

If you choose “yes” you’ll have a local repo but it’s not connected to github. I have used git and github for years and keep to a pretty narrow path of usage that I know. This combo of a local repo and no remote was new to me, and it might be to you, so here’s my recipe.

Let’s assume you want to create a project called “potato-ice-cream-coach”. (it’s a chatbot coach that helps you live a better life through eating potato ice cream).

Let’s create a potato ice cream chatbot! Yay!

You’ll get a bunch of choices. In our example we’ll create a persistent storage service endpoint (which Cloudflare calls called a Durable Object):

• a Durable Object
• in TypeScript (there is Python but it’s a subset of what runs under pyodide which is pretty limited as of publication)
• using git for version control,
• auto-deployed to Cloudflare.

Here’s a sample workflow as of May 2024:

➜ expts npm create cloudflare
using create-cloudflare version 2.21.1
╭ Create an application with Cloudflare Step 1 of 3
├ In which directory do you want to create your application?
│ dir ./potato-ice-cream-coach
╰ What type of application do you want to create?
● "Hello World" Worker
○ "Hello World" Worker (Python)
○ "Hello World" Durable Object
○ Website or web app
○ Example router & proxy Worker
○ Scheduled Worker (Cron Trigger)
○ Queue consumer & producer Worker
○ API starter (OpenAPI compliant)
○ Worker built from a template hosted in a git repository
│ type "Hello World" Durable Object│
├ Do you want to use TypeScript?
│ yes typescript
├ Copying template files
│ files copied to project directory
├ Updating name in `package.json`
│ updated `package.json`
┌ Installing dependencies …
│ installed via `npm install`
╰ Application created
╭ Configuring your application for Cloudflare Step 2 of 3
├ Installing @cloudflare/workers-types
│ installed via npm
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023–07–01
├ Retrieving current workerd compatibility date
│ compatibility date 2024–05–02
├ Do you want to use git for version control?
│ yes git│
├ Initializing git repo
│ initialized git
├ Committing new files
│ git commit
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account your_cloudflare_account_name_with_email's Account
│
├ Deploying your application
│ deployed via `npm run deploy`
├ SUCCESS View your deployed application at https://potato-ice-cream-coach.your_cloudflare_account_name.workers.dev
│
│ Navigate to the new directory cd potato-ice-cream-coach
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.cloudflare.com
│
├ Waiting for DNS to propagate
│ DNS propagation complete.
│
├ Waiting for deployment to become available
│ deployment is ready at: https://potato-ice-cream-coach.your_cloudflare_account_name.workers.dev
│
├ Opening browser
│
╰ See you again soon!

Finishing the version control piece: creating the remote repo in github

This wizard only creates a local git repo as there are multiple providers who support the git protocol (not just github). To create a new github repo and push it, you need to use the gh command. I find it convenient to tack on the cloudflare wizard with a few steps to create a github repo and push the code there right away. To do this in github we need the gh command.

Make sure gh is installed. E.g. for Mac you use:

brew install gh

Then make sure you’re signed in

if not use the command below. If you have a typical github setup you’ll already have an SSH token set up and you can reuse that, minding you choose ssh for auth:

gh will require special auth even if you have an ssh key for git commands as it’s a separate tool but it’s pretty straightforward. Here’s a sample session on a Mac:

➜ potato-ice-cream-coach git:(main) gh auth login
? What account do you want to log into? GitHub.com
? What is your preferred protocol for Git operations on this host? SSH
? Upload your SSH public key to your GitHub account? /Users/local_username/.ssh/id_ed25519.pub
? Title for your SSH key: GitHub CLI
? How would you like to authenticate GitHub CLI? Login with a web browser
! First copy your one-time code: XXXX-XXXX
Press Enter to open github.com in your browser…
✓ Authentication complete.
- gh config set -h github.com git_protocol ssh
✓ Configured git protocol
✓ SSH key already existed on your GitHub account: /Users/local_username/.ssh/id_ed25519.pub
✓ Logged in as your_github_username

Now you can create the remote repo in github.

cd potato-ice-cream-coach
gh repo create "$(basename "$PWD")" --source=. --private --push
➜ potato-ice-cream-coach git:(main) gh repo create potato-ice-cream-coach - source=. - public - push
✓ Created repository your_github_username/potato-ice-cream-coach on GitHub
https://github.com/your_github_username/potato-ice-cream-coach
✓ Added remote git@github.com:your_github_username/potato-ice-cream-coach.git
Enumerating objects: 12, done.
Counting objects: 100% (12/12), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (12/12), 19.53 KiB | 4.88 MiB/s, done.
Total 12 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:your_github_username/potato-ice-cream-coach.git
* [new branch] HEAD -> main
branch 'main' set up to track 'origin/main'.
✓ Pushed commits to git@github.com:your_github_username/potato-ice-cream-coach.git

Done! It’s now in Github. Happy coaching!