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 🙏

© 2025 – Pkg Stats / Ryan Hefner

@jahidul.activity/webpack-demo

v1.0.0

Published

## Cheat sheet

Readme

MessageAPI Definiton and Code Autogenerator

Cheat sheet

  • npm run build-dev compile typescript to js
  • npm run watch watch for changes and compile
  • npm run test perform the jest unit tests

Introduction

This folder defines a simple website that will call the message api defined and autogenerated in the api_definition subdirectory of this project.

Getting Started

Prerequisites

To get started with this api, you will need to have the following items setup:

  1. Software dependencies installed
    1. The current long term support version of node (18.12.0)

To fully set up your local host to interact with your deployed CDK stack, you'll need to do the following

  1. Build and deploy your cdk stack (note: that the website that's deployed won't work yet but that's okay)

  2. Get the api endpoint from the cdk deploy output that looks a bit like this

     Outputs:
     CloudFormationStack.MessageServerAPIEndpoint92232D23 = https://####.execute-api.us-west-2.amazonaws.com/dev/
  3. Take api https://####.execute-api.us-west-2.amazonaws.com/dev/ value and paste it in the file website/dist/config.json file under the "apiEndpoint" option.

Development Process

To locally build the application you'll need to run the following commands with the project subdirectory that contains this readme file.

npm install # Install dependencies if not done so already
npm build-dev # rebuild autogenerated code

Local Testing

To test this code with an observable website locally you'll need a way to run a local server within the website/dist folder. This can be done a number of ways, but I use the VSCode extension LivePreview which will host a mini-server within your local env.

To compile changes to the typescript code as you go, run the command npm run watch which will poll every one second to see if any of the sources have changed. If any sources change, it'll regenerate the code.


Adding New API Call Support

Any autogenerated content will be included within the src/.generated-sources/, with the openapi content stored under openapi. To pick up any changes to the api you'll need to re-run the api autogeneration within the api_definition folder. Once that is done the autogenerated api will include any new api calls.