Save June: A GitHub Codespaces Adventure

Help! We're about to launch our brand new dog-themed haiku app ("Haikus for June"), but it appears to be...broken. Users are supposed to be able to "heart" photos of June (because she's so cute!), but that gesture no longer seems to be persisted in the database 🤔

We really don't want to post-pone our launch, and so we need to get this working on-the-quick. Codespaces to the rescue! 🦸

🕵️ Your Mission (Should you choose to accept it...)

Help save June. To do this, you're going to need to use Codespaces in order to figure out the source of this bug, fix it, and then send a PR back to this repo. All without doing a single ounce of setup!

There's No Place Like $HOME: Don't forget to setup your dotfiles repo, so that your cloud-powered adventures feel ergonomic and immediately familiar. If you want a cool one to try out, then fork this repo before moving on.

Alright, now where were we? To get your investigation started, try the following steps in order to repro the bug:

Repro steps:

1. Open the project in a Codespace 👍
2. Open a terminal, which is your window into a full-blown cloud environment. If you setup a dotfiles repo, you should see your terminal setup fully intact. If you're using the sample one, then check out the awesome PS1 prompt and/or try running l or cls (these are custom aliases!).
3. Spin up the haiku app by running npm run dev 💻
4. Launch the app by cmd+clicking the localhost URL that you see in the terminal output 🚀
5. Try to click the heart button for a photo, and note the number of hearts that it now has ❤️
6. Refresh the browser 🌐

Expected: For the heart count to be persisted Actual: The heart gesture you just performed isn't persisted 😢

---

So now that we've seen the bug, the question is: how do you fix it! To guide you on your journey, and also, make things more enjoyable, here are some interesting things that might be worth trying:

• Live reload: Once you've run the app, try changing code and saving it. The web app should automatically reload! For example, edit the <title> or <h1> element in views/index.ejs and watch the header update once you hit cmd+s 🔥

  ℹ️ Troubleshooting

  If for any reason, you get an error about a port already being in use, run npx kill-port 3000 in a terminal. This isn't a Codespaces bug, but can sometimes happen as a result of the Node process being reloaded to fast.

• Debugging: Set a breakpoint in the server code (src/index.js) and press F5 to start a debugging session. You may be able to inspect some state that helps point at the problem.

  ℹ️ Hint

  Set a breakpoint on line 16, try to heart a photo, and then inspect req.body. There may be a typo somewhere...(on line 18!)

• Extensions: Install an extension or two in order to customize your environment. Here are some fun ideas that make your hard-written code look beautiful: Bracket Pair Colorizer, Indent Rainbow 💄

• Uncommitted Changes: After you've made and save some changes to the code, head back to your list of Codespaces and try to delete your Codespace. It will warn you that you have uncommitted changes. Data loss prevention FTW! 🙌

• Version control: Once you've fixed the bug, go ahead and commit and push that change. Your git credentials are automatically configured for you 👍

• Dev-box-as-code: Check out the .devcontainer/devcontainer.json file to see how this Codespace was configured to be reproducible. Note: This sample makes use of Docker/Docker compose in order to illustrate possibilities. However, none of these files are required to get started with Codespaces.

---

If you made it this far, that means that you helped save June! Go ahead and pat yourself on the back, and take a coffee break. You just moved your development environment to the cloud, and that makes you pretty darn awesome 😎