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

generator-greedux

v0.6.1

Published

A clean workspace/workflow template supporting React, Redux, JSS, Live Reload as well as non Live Reload express server to create maintainable modular front-end web apps

Downloads

4

Readme

Greedux

A modular, clean and scalable modern workflow template for React/Redux development

"Greedux!"

Requirements

  • NodeJS : 6.x.x - Latest Stable Version
  • NPM : 3.x or higher (Preferably 5.x)

Features

  • Live reloading
  • Easy and declarative folder structure
  • Easily modifiable build code written in gulp; no magical configuration (!)
  • Modular React/Redux architecture which lend themselves well to unit testing
  • Includes simple JSS (via react-jss) for optimal/readable React styling
  • Easy & declarative multi-language support in your app out of the box
  • Minimal deployable Express server which supports easy switching between HTTP/HTTPS
  • Redux and Redux-Router
  • Flags for giving OS notices when builds are successful or fail

Installation

  1. Create a new folder for your new React/Redux project and navigate to that in your terminal/command line.
  2. Install Gulp Client, Yeoman and the generator by running: npm install -g gulp-cli yo generator-greedux
  3. Run yo greedux, which should install all build and server dependencies to get started on your new project!

Deployment

Packaging the app

simply run gulp build , and your server and assets are ready to go.

Optional Flags

  • success_notice : Display an OS-level success notice
  • error_sound : Whether to play an OS error sound when compile error happens
  • build_js_debug : Create a production level build, but do not strip debug messages from console.
  • export_standalone : Automatically generate a build folder corresponding to the time you created your package via a builds/[current_date] folder.

Running the Node/Express Server

Note: You must first build the app by calling gulp build.

Run node app in your root folder after installing; it will list clearly how to specify the proper flags for SSL if needed on your server when booting up as well as which server (default port is 3002).

Or to simply build and run the app, run npm start.

Developing

With Live-Reload Server

In CMD, type gulp to begin a live reload server at localhost:8080. Currently, hot reloading only detects JS changes so server must be reset for other static resource changes.

Typical Node/Express Development Server

If you would like to run without a hot reload server in dev mode, static changes can be detected when refreshing without re-running the dev server . simply run gulp dev and then in another console node app --dev (port can be specified as param but default is 3002).

Optional Flags

  • version_bump : Bump patch version on successful builds (default false)
  • success_notice : Display an OS-level success notice
  • error_sound : Whether to play an OS error sound when compile error happens
  • build_js_debug : Create a production level build, but do not strip debug messages from console.

Build Configuration

Configuring Module Aliases

Modules can be aliased to use as if they were a root npm module by specifying them within the aliases.json located in the build-config folder.

Configuring Build Paths/Folder Structure

Configure the build structure of your app via paths.json located in the build-config folder. This includes where the source files, distribution files and javascript can be found and built to. Defaults are already specified but can be overridden.

Roadmap

For information on the things which are currently being focused on, please visit the ROADMAP.md file.

Contribution and Reporting Issues

PR Requests and issues are always welcome! But before doing so, please be sure to briefly look over the guidelines at laid out CONTRIBUTING.md.

Thanks!