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

zeroconf-redux

v5.10.0

Published

is a minimal React/Redux dev stack, on top of browserify + budo

Downloads

44

Readme

zeroconf-redux

is a React/Redux dev stack, on top of browserify + budo

NPM version

Quick start | Usage | Production build | Customization

UPDATE latest version 5 replaces UglifyJS with TerserJS.

Quick start

Just run

npm install zeroconf-redux --save-dev
npx zeroconf-redux
# Yay!

Your browser will open and you can start coding your awesome React/Redux web app now!

If it does not exists, a basic index.js file will be created to be used as the entry for your budo dev server.

Read below for more details and instructions about how to create a package and launch your dev server with an npm start.

Usage

If you have no package.json yet, create one now! For instance with npm init or even (for the lazy ones like me :^)

npm init -y

Tip: If it is not a package you want to add to the npm registry, you should add the following attribute to your package.json file.

  "private": true,

Then with npm do

npm install zeroconf-redux --save-dev

The following dependencies will be installed:

On postinstall the following files are created, if they do not exist:

  • .babelrc
  • .browserslistrc
  • .editorconfig

If you run npx zeroconf-redux commmand, a file index.js is created if it does not exists and development server will start in watch mode, with a default index.html (in memory).

Let's assume there is an index.html in the same folder as the package.json with a content like the following

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Then, adding an npm script to your package.json, to run budo dev server, something like

    "start": "budo ${npm_package_main} --dir . --serve bundle.js --open --live --pushstate -- -t babelify",

where:

  • --dir .: serves current folder content statically.
  • --serve bundle.js: set the name of JS bundle produced by browserify.
  • --open: opens default browser on start.
  • --live: enables livereload.
  • --pushstate: needed if you added react-router.

See budo cli docs for more details.

Your index.js should look something like

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>
    You can start coding <em>index.js</em> file.
  </div>,
  document.getElementById('root')
)

Now, running npm start it will

  1. Build your code using index.js as entry.
  2. Open your index.html in your browser.
  3. Start watching HTML, JS and CSS files, with livereload on changes.

In the examples/counter folder there is a copy of the classic Redux counter example. You can run it with this command

npm explore zeroconf-redux npm run example_counter

Production build

Following instructions from official React documentation, suppose your package main attribute points to your entry file, for instance index.js, and your bundle file is dist/NAME.min.js, where NAME is your package name, you could add an npm script like the following

    "browserify": "cross-env NODE_ENV=production browserify ${npm_package_main} -t babelify -g [ envify --NODE_ENV production ] -g uglifyify | terser --compress --mangle > dist/${npm_package_name}.min.js",

Unfortunately at the time of this writing, this may not work on Windows: the environment variables npm_package_main and npm_package_name could be undefined if you launch some npm script from an MSDOS prompt, 'cause npm expects it is running in a bash environment. Hence you need to hardcode file paths if you need cross platform compatibility.

Customization

src folder

You may want to organize your code into a src/ folder, if so, do

mkdir src
mv index.js src/

Then edit your package.json

  "main": "src/index.js"

For sure it is also a good idea to create a src/components/ folder and a Root.js implementing your <Root /> component. By the way, I like to start almost from scratch with the structure I feel more inspiring for that project. For example; if hosted on Heroku I create a public/ folder; if hosted on AWS I like more a bucket/ or (in some cases) buckets/ folder. Programming is a creative process, you know.

Babel preset env

Default .babelrc created on postinstall is the following.

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-react"
  ]
}

You may want to customize it, for more details see @babel/preset-env.

Browserslist

Default .browserslistrc created on postinstall is the following.

> 0.5%
last 2 versions
Firefox ESR
not dead

You may want to edit target browsers, for more details see browserslist.

Linter

It is strongly recommended to lint your code. Do not think it too much, just launch

npm install babel-eslint pre-commit standard --save-dev

and add the following to your package.json

  "scripts": {
    "lint": "standard"
  },
  "pre-commit": [
    "lint"
  ],
  "standard": {
    "parser": "babel-eslint"
  },

Now on every commit, you will check the code with standard linter. If you like semicolons you can go for semistandard.

If you are using React hooks you will need also eslint-plugin-react-hooks, so you need to use standardx linter. Same instructions as above, but substitute standard with standardx, then for example add the following to your package.json

  "eslintConfig": {
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  },

TypeScript

You can use Babel and TypeScript together, I could achieve it in my side project GoSeven. It was tricky but it is worth to use typings and browserslist queries together.

Install additional dependencies

npm install typescript tsify @babel/preset-typescript @types/react @types/react-dom

and edit your .babelrc presets

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "useBuiltIns": "entry"
      }
    ],
+   "@babel/preset-typescript",
    "@babel/preset-react"
  ]
}

Then modify your package.json, notice that -p tsify and -t babelify options order matters.

-    "start": "budo ${npm_package_main} --dir . --serve bundle.js --open --live --pushstate -- -t babelify",
+    "start": "budo ${npm_package_main} --dir . --serve bundle.js --open --live --pushstate -- -p tsify -t babelify",

License

MIT