npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-filebrowser

v0.0.55

Published

Angular filebrowser backed by git repository in the browser

Downloads

5

Readme

Build Status

Offline web application storage using GIT in the browser

Modern browsers have several mechanisms for storing data while disconnected from the network (IndexedDB, localstorage, etc), and there are also serviceworkers that can provide access to a website when offline. But what about synchronizing changes made by the users of your web application while being disconnected for a while? What if one user makes a change in the top of a document while disconnected, and another user makes a change at the bottom of the same document. What should the document look like when both users come online? And how should that process be handled?

Programmers working in teams have bumped into similar questions, but the last few years most programmers have solved this by using a distributed version control system like GIT. We think this could be a solution also for web applications. If the user editable data is stored in a local GIT repository, we can use the powerful features of GIT to pull updates, merge local and remote changes, and push back locally modified data. And we'll also get versioning, so that we have a log of when data was changed and who did it.

This project is exploring the possibilities of compiling the libgit2 library to WebAssembly and use it in the browser to turn it into a git client.

See our efforts to compile libgit2 with emscripten (for WebAssembly) here: https://github.com/fintechneo/libgit2/tree/master/emscripten_hacks

And some video-demonstrations:

A quick video demonstration of what you can expect to see is here: https://youtu.be/rcBluzpUWE4

Here's another video demo showing editing and merging of file changes: https://youtu.be/xfGrMwLy_tw

Getting started

This is work in progress - but if you can't wait to test it you should run:

npm install
npm start

navigate your browser to http://localhost:4200

Click the clone button to clone the selected repository. Access to github is via a proxy that can be configured using proxy.conf.json (change to another organization then fintechneo if you want to test your own repositories).

Large files using git LFS

If you want to upload binaries and large files, it might be a good idea to store contents of these outside the git repository, and instead only commit the pointers to the files in git. This filebrowser may be configured so that uploads will be converted to git LFS pointers, and the contents will be uploaded to an LFS server. A successful LFS commit from the browser can be seen here: https://github.com/fintechneo/browsergittestdata/commit/8e181f3f7800007c56db3150ea4594ce64c78bd8

Read more about git LFS here: https://git-lfs.github.com/

Creating a local git server for testing

This is an example of using git http-backend as a target for CGI through a node http server. First install the cgi package: npm install cgi

    var cgi = require('cgi');
    var http = require('http');
    var path = require('path');
    
    var script = 'git';
    
    http.createServer( cgi(script, {args: ['http-backend'],
        stderr: process.stderr,
        env: {
            'GIT_PROJECT_ROOT': path.resolve(__dirname, 'repos'),
            'GIT_HTTP_EXPORT_ALL': '1',
            'REMOTE_USER': '[email protected]' // Push requires authenticated users by default
        }
    })).listen(5000);

Creating a proxy to github / bitbucket or other git hosting services with CORS restrictions

If you are running this project in the development environment (using npm start), there's already a proxy to github for the repository at https://github.com/fintechneo/browsergittestdata, which have been used for testing.

If you are hosting this on a public webserver you may get issues with CORS restrictions, like if you try cloning from github you may see an error message about no Access-Control-Allow-Origin header present on the resources.

By typing the script below into your terminal a simple proxy server to github.com will be started on http://localhost:5000 - adding the headers to get around CORS restrictions.

echo 'var http=require("http");var https=require("https");function onRequest(request,response){var options={hostname:process.argv[2],port:443,path:request.url,method:request.method};var proxy=https.request(options,function(res){response.setHeader("Access-Control-Allow-Origin","*");response.setHeader("Access-Control-Allow-Headers","*");res.pipe(response,{end:true})});request.pipe(proxy,{end:true})}http.createServer(onRequest).listen(5e3);' | node - github.com

In order for libgit2 to use the proxy you must use call setHost('http://localhost:5000') on the GitBackendService. This again sets Module.jsgithost on the libgit2 library.

So you should then clone from http://localhost:5000/fintechneo/angular-git-filebrowser.git and the requests will be forwarded to github.com