Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

zeroconf-redux

4.0.1 • Public • Published

zeroconf-redux

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

UPDATES:

Quick start | Usage | Production build | Customization | License

Whatchers Stargazers Forks

NPM version Dependency Status

Quick start

Just run

npm install zeroconf-redux
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
  • index.js

Assuming 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>

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

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

Your index.js looks 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""browserify ${npm_package_main} -t babelify -g [ envify --NODE_ENV production ] -g uglifyify | uglifyjs --compress --mangle > dist/${npm_package_name}.min.js",

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.

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

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

Browserslist

Default .browserslist 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.

Async Redux

Probably you need to call an asynchronous API: the standard way is to use the Redux Thunk middleware, so you need to install

npm install redux-thunk --save

This choice is up to you. For example you could prefer redux-saga. Since there are few alternatives this package does not include a middleware to dispatch async actions. See Async Actions chapter on official Redux documentation for details. In my opinion redux-thunk is a really good choice: it is stable, battle tested, has a very good documentation and a flat learning curve.

Linter

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

npm i pre-commit standard -D

and add the following to your package.json

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

Now on every commit, you will check the code with standard linter. Ok ok, if you like semicolons you can use semistandard.

License

MIT

OS icons provided by icons8.

install

npm i zeroconf-redux

Downloadsweekly downloads

59

version

4.0.1

license

MIT

homepage

g14n.info

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability