Welcome! I'm blogging about my learning process to create a Live Git Viewer app using React, Node, ES6, etc. You can read more about the project and the impetus behind it in Getting (re)Started.

The Plan #

So, my general idea is to do as follows:

  • Use Node to read the current state of a local repo.
  • Use React to display a visualization of the current state.
  • Watch for changes to the local repo.
  • Update the visualization with some snazzy animations.

There's a whole lot of little questions embedded in these abstract steps. What kind of data structure should I use to represent the repo state? How will it work to publish changes from the repo to a react app? How do you handle state change animations in React?

But, I think the biggest question I had was:

How on earth am I going to read from a local git repo programmatically? #

Initially I had some vague ideas about reading the files in the .git directory from disk, but this has to be a problem that other people have solved. So time for some googling!

Thankfully my initial search for "accessing git repos programmatically" turned up libgit2 and nodegit (node bindings for libgit2, which is written in C). LibGit2 provides a programmatic interface for interacting with a git repo and it's internal data structures.

Sweet, this seems like just the thing I need, that was easier than I thought.

At this point I got minorly sidetracked into reading more about git internals, but I'll come back to that.

Now it's time to make a React app! #

I've used create-react-app in the past, and it seems to still be the standard, so let's do that! I follow the instructions in the create-react-app docs and after a few minutes of installing, I have a webpage visible at localhost:3000.

That was super easy.

Cool, I have a react frontend, now I need a Node backend - how do you do that? #

Hmm so there's a link to integrating with an api backend from the main create react app docs, that seems promising.

The docs point to this tutorial on Using create react app with a server. It's a great explanation, especially the section called "The Rub", which goes into the issues inherent in making cross-app api calls. Buuuuut the steps are set up so you download from their repo and I've already got a different setup, so let's google some more to make sure I do this right.

Nice, this article is a bit more stepwise & straightforward and starts with installing via create-react-app, so I can pick up from where I am already.

I spend a little time learning more about nodemon.

Success! #

After following the instructions above, I go to localhost:3000 once again and BOOM we have a React app communicating via an API to a Node backend!

Back to git #

Okay, let's turn off all these servers, install nodegit as a dependency of the main project and play around with that. The docs seem to be slightly better for the C version so I'm invisioning a lot of translation back and forth between languages.

I figure out how to open my local repo and thanks to some help from this Nodegit tutorial I have code which will walk backwards from the HEAD commit in a repo and output the hash for each parent commit in sequence.

repo: /Users/ksylormiller/ohshitgit/.git/
head: f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15
f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15
91f6790ab81f36fa5b5088a2b75fb8b863709bcc
4f9a80ff7732f252ffbe7841e96748707da1a78d
8a9796600ee4c18ea11689eca61fa6475cdecc93
97e8858c340644b3a897365e2968e5ec3d1b88af
4875652315d1526a5e8e44215be1768bffeb161a
297c614835e577d24efb45c3c01a97f911ea5a42

Not half bad for two and a half hours' work! You can see the results at the Git Live View repo.

Next up: I will need to figure out how to read the state of the workspace, index, and tracking branches.

Links: #