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

Libby-Client

v0.0.209

Published

Admin Tool V2 Client

Downloads

3

Vulnerabilities

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

Links

Maintainers

cmelioncmelion

Keywords

Readme

Libby Client Application

Project Libby - Admin Tool V2: Read More >

The Libby client application uses a combination of existing libraries and tools that allows fast and simple creation of single page web applications using ES6.

Usage (live editing)

npm install
npm test
npm start
open http://localhost:3000

For a complete list of available commands and to add code completion, run the following commands in a terminal:

$ npm completion >> ~/.bashrc
$ source ~/.bashrc
$ npm run <tab><tab>

which will produce the following output


    build          coverage-open  postbuild      prebuild       start
    clean          deploy         postcoverage   precoverage    test
    coverage       lint           posttest       predeploy      test-debug

Now edit the text Current Lineup in src/pages/index/template.jsx.
Your changes will appear without reloading the browser like in this video.

You can observe the hot-loading process in the browser's debug console. To see hot-loading status without opening the browser's debug console open http://localhost:3000/webpack-dev-server/

Project Structure

Client:

  • /style/ - LESS files (TODO: support for SASS)
  • /src/index.js - App entry point
  • /src/app.jsx - React app bootstrapper
  • /src/routes.js - Routes for react-router
  • /src/app/ - React app definition with react-router setup
  • /src/components/ - React components folder
  • /src/components/chrome - Application chrome React component
  • /src/components/navigation - Application navigation bar React component
  • /src/pages/ - React pages folder
  • /src/pages/index - Index page that's loaded by default
  • /src/pages/other - Other page that's added for convenience

Linting

This project includes React-friendly ESLint configuration.

npm run lint

Using 0.0.0.0 as Host

You may want to change the host in server.js and webpack.config.js from localhost to 0.0.0.0 to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.

Dependencies

Resources