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

run-js

v2.1.1

Published

A prototyping server that just works.

Downloads

24

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

remixzremixz

Keywords

Readme

run-js

Build Status Coverage Status npm version js-standard-style

A prototyping server that just works.

Click to enlarge image: run-js demo

Installation

Requires Node.js >=4.0.0.

$ npm install run-js --global

Usage

Enter a folder you want to run scripts in, and type run-js.

$ cd your/folder
$ run-js

It will print out the URL it's running on. From there, just visit any of your scripts in the browser, and they'll just work.

For API usage, see the documentation file.

Features

Instantly working scripts

There's no HTML files you have to create, no compile steps for your code to work, and no need to even manually install dependencies. Just start run-js in a folder, write some code, and open it in the browser. run-js supports JavaScript (with ES2015 and JSX enabled via Babel), CoffeeScript, and TypeScript out of the box. When you require a dependency, run-js will automatically install it for you, if it's not installed already. Plus, the default HTML page includes a <div> tag with an id of root, so that you can quickly append elements from a library, such as React.

Scripts as the index file

Creating a file named index.js (or whatever type of file you prefer) will act as the index for the path you specify. For example, creating index.js in the root of where you ran run-js will use that script when you visit http://localhost:60274.

Source maps

No need to go through the hullabaloo of setting up source maps. They're just there, and they just work.

Live reload

When you make a change, the browser will automatically reload. Easy peasy.

Custom HTML pages

By default, run-js will render a page when you visit a file in the browser. However, if you need your own custom page, it's easy to do. Just create a .html file with the same name as your script. For example, if you had foo.js, create a foo.html in the same folder, and it'll use that for the template. It'll automatically insert your compiled script as well. (Make sure to have a <body> tag for this to work.)

Implementation

run-js is powered by Browserify, and various transforms for it. I like Webpack as well, but I enjoy working with Browserify more, and find it easier to use overall, while still being able to do what I want to. I don't think run-js will need to change to Webpack, or some other future bundler, to get the functionality that's wanted. Of course, that could change... :wink:. The transform installify is used automatically install new dependencies. Really cool stuff!

Aside from Browserify, run-js uses Express to power the web server. Nothing too fancy there, really. run-js has an in-memory cache powered by LevelUP and MemDOWN. That could be migrated to a file cache pretty easily, but I'm not sure if it's really needed. It might be in the future, though, which is why I used LevelUP.

Inspiration

  • @vjeux's challenge to create a better JavaScript prototyping environment: http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html
  • @ericclemmons's post about JavaScript fatigue: https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4
  • Modules such as budo, beefy, and wzrd, which all do a lot of what run-js does, but with less defaults, and just for running one file. I like those modules a lot, and I think they definitely work for a different type of workflow. The main difference with run-js is that it's aimed a bit more towards newbies, hence why it runs any file in the directory. Essentially, run-js is a playground: Everything just goes, and it's lots of fun! It's not really meant for serious work, but instead just trying things out.