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

@mantocko/example-app

v0.8.0

Published

A basic website

Downloads

2

Readme

An example Express app Build Status

This is a pretty basic webapp that uses @mantocko/express to generate an express runtime.

Configuration

It is not required, but this app has a config.js file to indicate where js and css bundles, static assets, mocha tests, server code, and handlebars templates are. Also included is a service worker config. The gulp pipeline optionally takes a workbox service worker and bundles it into the distribution directory.

Bundles

The first requirement of the bundles is to include a bundleDir in your config.js, however if not provided, it will default to "public".

Bundles as a whole are considered interfaces and should implement a few basic things to be functional. There are three types of bundles jsBundles, cssBundles, and staticFiles. The config.js file should export those three properties. However, it is entirely possible that an app could be built without any extra js or css, using only what is bundled in the dependencies (bootstrap and a few others) with some handlebars.

Bundle Property | Type | Description | Default value | Example Value --- | --- | --- | --- | --- name | String | Name of the bundle. This gets transformed into a <name>.js file in the context directory. | undefined | 'app' src | String\|String[] | The globs/paths for source files in the bundle. | [] | 'src/assets/js/file.js' or ['assets/**/libs/*.js', 'assets/**/presenters/*.js'] context | String | Context directory to put the bundle in within the bundleDir directory. | js for jsBundles, css for cssBundles, static for staticFiles | myjs or js/special babel | Boolean | JS bundle property to allow babel transpilation on assets. | true | false sourcemaps | Boolean | JS and CSS bundle property to allow sourcemaps in bundle write. Additionally, sourcemaps will only be written if environment variable DEVEL is present. | true | false minify | Boolean | JS and CSS bundle property to allow minify of assets. | true | false

Development

This project is heavily dependent on gulp@^4.0.0. You can get a list of top level tasks with npx gulp --tasks, but many build tasks are generated on the fly because of how configurable the stack is. For more info check out the configuration section.

The app is ultimately just a node script, so it can be started by running node on the package.json main file. This particular app starts up express on port 3000.