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

swoop-boilerplate

v0.2.0

Published

Presets for setting up webpack with hotloading and ES6(2015) using Babel and Flow.

Downloads

4

Readme

#Swoop-boilerplate

I really dislike setting up build scripts. Most of the time I want to do the exact same thing:

While developing:

  • easy to setup and run dev server
  • transpile ES6+, JSX, code
  • hotload (a.k.a. live reload) modules when changed

When ready to ship:

  • minify and bundle all the things
  • output minfied, uniquely named static files into public directory
  • be able to generate/customized static HTML file(s) used to deliver my JS app

webpack and the webpack-dev-server can do most of those things pretty well out of the box. But, it sure is a pain to set it all up.

So, this is just a simplified, opinionated way to configure webpack for development and then build for production. That also supports easily generating more files.

If no one uses it but me, it will have still served its purpose.

Usage

Step 1. Create/install it into your project

npm init
npm install -g webpack webpack-dev-server
npm install swoopcmi/swoop-boilerplate
mkdir static && mkdir source

Step 2. Create a webpack.config.js

Put it at the root of your project, a typical config looks something like this:

var getConfig = require("swoop-boilerplate");
var env = process.env.NODE_ENV || "development";

module.exports = getConfig({
    // a boolean specifying whether to minify, output files, etc
    isDev: env === "development",
    // entry point for the app
    in: "source/app.js"
});

Step 3. Configure scripts section of package.json

I usually add something like the following scripts:

"scripts": {
  "start": "webpack-dev-server"
}

Assuming you've got some JS written that you've set as your in in the webpack.config.js you can run npm start and open a browser to http://localhost:3000 and you everything should Just Work™.

When you're wanting to do a build, just run npm run build. The build will generate your files into public.

Now there's a static site in public

note about peerDependencies

swoop-boilerplate specifies many of its dependencies as peerDependencies in order to let you decide which version of, say, babel or React that you want to use in your project without us specifying that directly for you.

In npm 3.x.x peerDependencies will no longer be installed by default.

When this happens, you'll want to run the following to install the related dependencies as well.

Included here for your copy/paste enjoyment:

npm i --save webpack-dev-server

Config options

The main export you get when you require("swoop-boilerplate") is simply a pre-configured webpack.config.js. You could take the result of that and add other plugins if you so chose, but shouldn't be necessary for most common tasks.

in

This should just be the path to the file that serves as the main entry point of your application.

out

Path to directory where we're going to put generated files.

isDev

A boolean to indicate whether or not everything is in production mode (minified, etc.) or development mode (everything hotloaded and unminified).

Additional goodies

Developing on multiple devices at once

If you're building an app that you want to look good on all devices it's nice to be able to run them all at once.

Hotloading makes this extremely nice and convenient.

If you're on a mac, this is fairly simple. Just add a hostname option to your config like so:

var getConfig = require("swoop-boilerplate");
var env = process.env.NODE_ENV || "development";

module.exports = getConfig({
    isDev: env === 'development',
    in: 'src/app.js',
    out: 'public',

    // set this to whatever your machine name is
    // plus `.local`
    // my machine is `loki` so I do:
    hostname: 'loki.local'
})

Now when you run the development instead of going to localhost open: http://{{yourmachine}}.local:3000 on any device that's on your local network, they should all connect and all hotload your style and JS changes.

License

MIT

Credits

All this is possible, thanks to the original author @HenrikJoreteg who published the basis for this boilerplate to https://github.com/henrikjoreteg/hjs-webpack