Magic Window

This is a JavaScript tool that turns any folder on your computer into a pretty online file viewer (and editor in the future).

See live demo here (⌐■_■) — this is magic-window presenting itself → Hey!.

** NOTICE **

ngrok was removed as a dependency for now, so this project only works on LAN or via forwarded external ports. Still useful but not (wan) p2p anymore for now... Ngrok was a temporary solution, wasn't secure enough and it currently doesn't compile on some Linux OS instances.

Why is magic-window cool?

• Built in the spirit of Open Source.
• Need to share audio, books and video quickly with friends?
• Need to easily show code to someone so that they can help you?
• You will find other use cases when you start using it...

Features:

• Share your code easily with anyone in the world.
• Easy to install and use.
• Beautiful design, responsive and retina-ready.
• Syntax highlighting for 150+ computer languages.
• Font ligatures via FiraCode font.
• Instant file search.
• Mount inside an existing express.js app so it can show its own source.
• If the local port you're trying to use it on is taken, it will choose the first available one.

Planned:

• Breadcrumbs on file view.
• Automatic reloading of source code on change.
• Diff view of last change pushed to the client via socket.io.
• Ability to share just one file or some files from the folder.
• Editing functionality with a view of passing tests / live css preview.

Installation

This utility is available on npm, so installation is a breeze. Use the -g flag:

npm install -g magic-window

Usage

To use it, cd into a directory, and run

magic

Magic window (⌐■_■) is now running on localhost:3000 and ngrok url is produced for public sharing.

Help

magic --help

Examples

Make the current folder available on <yourip>:3000 on the local network:

magic

Don't copy ngrok url to clipboard:

magic --nocopy

Without public access:

magic --private

Make the current folder available on <yourip>:12345 on the local network:

magic --port 12345

If port you are trying to use is already used, magic-window will try the next available one.

Mount inside an existing express.js app to reveal its own source

npm install --save magic-window

app.use('/source', require('magic-window')('/source', { ignore: ['config'] }))

Then visit http://example.com/source to see all the source code for easy presentation or discussion.

Known issues

• When used as a mounted app and served with pm2 behind nginx (possibly Apache as well), there are issues because of incompatibility between config package and pm2. Use forever or Phusion Passenger instead in production.
• There will be infinite recursion and stack overflow when trying to share a folder that has a symlink back to itself.

Notes

Files starting with a dot are assumed to be private and are not served.

Design and inspiration

Design is based on martinaglv/cute-files which is based on tutorialzine's file browser tutorial.

Info

Project Home: NpmJs