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

reforge

v1.0.3

Published

Shared configs and utilities used for influitive front-end projects.

Downloads

56

Readme

Config

Webpack

Reforge provides a default webpack config that SHOULD work with your environment but you can always import the config and modify it as you see if. Currently it makes the following assumptions:

Environment Variables

*NODE_ENV: development or production *CDN_URL: The base url that will be used to find the produced javascript files. *SERVICE_URL: The entry API endpoint. Usually very applciation specific.

CSS

All CSS is in the form of CSS modules and using postcss (albeit with no plugins by default).

PostCSS Configuration

We've provided some basic postcss plugins to use: rucksack, nested, and autoprefixer

To configure your webpack to use postcss, you can modify your webpack config like so:

Your webpack config:

const config = require('reforge/config/webpack.config');

config.postcss = require('reforge/config/postcss-plugins');

module.exports = config;

In order modify the plugins being used, you'll need to concat new plugins to those provided by reforge/config/postcss-plugins. For example, to add partial-import to the end of the postcss plugin chain, you can do the following:

const partialImport = require('postcss-partial-import');

...
config.postcss = config.postcss.concat(partialImport);

Note that order of plugins DOES matter so make sure to be careful how you order these.

Scripts

There are a few scripts available from reforge as well.

Pluginator

This script will use some environment variables (PLUGINATOR_URL, PLUGINATOR_USER, PLUGINATOR_PASS) to publish your project to a pluginator instance. This script also assumes that your build directory is ./build and contains a properly formatted manifest.json file.

Utilities

These are intended to be used to simplify some of the tasks done by reforge clients. To use them, just destructure what you need from the main 'reforge' package like so:

import { connectProvidersToDevTools } from 'reforge';

connectProvidersToDevTools

This function takes an object where the each key/object pair is a provider description, built for use by react-redux-provide. Sets up redux devtools on all the providers included.

Technologies