How to use gitkit inside the browser?

[samypesse]

How to use gitkit inside the browser?

[SamyPesse]

GitKit works great with browserify or Webpack.

I can also build a dist js to be released on NPM, so that you can use it in webpage (But I think using browserify is a better solution):

<script src="./node_modules/gitkit/dist/gitkit.js"></script>
<script>
    var transport = new GitKit.HTTPTransport('https://github.com/GitbookIO/gitbook.git');
</script>

I'll add a note about this in the readme.

[lukpueh]

I colleague asked me about this today, so I wrote together a little step by step howto, maybe this helps other people too:

# Create a local test directory and cd into it
mkdir gitkit-tests; cd gitkit-tests

# The current npm package does not contain the latest changes
# To have (browser-enabled) Memory filesystem we need to install
# from github
npm install SamyPesse/gitkit-js

# Install a required dependency
npm install mkdirp

# Install browserify globally
npm install browserify -g

# Bundle up gitkit and MemoryFS and wrap them in a require 
# function so that you can use require in the browser
browserify -r gitkit -r gitkit/lib/fs/memory -o bundle.js

# Hack to bypass “same origin” policy
# when you develop a browser extension, this shouldn’t be a problem
# cf. https://developer.chrome.com/extensions/xhr#extension-origin
sed -i.bak 's/cors/no-cors/g' bundle.js

# Create an html file that loads the bundle.js
echo "<script src='bundle.js'></script>" > index.html

Now you can fire up the html page in a browser and use the browser’s
console and use require just like in the node console, e.g.:

# In the browser's developer console
var GitKit = require('gitkit');
var MemoryFS = require('gitkit/lib/fs/memory');
var fs = MemoryFS()
var repo = GitKit.Repository.createWithFS(fs, true);
var transport = new GitKit.HTTPTransport('https://github.com/GitbookIO/gitbook.git');
# And so on ...