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

frack-core

v2.15.1

Published

React Stack with semi-automatic route-based code splitting, Hot Module Reloading (HMR), Redux, Apollo GraphQL and more...

Downloads

25

Readme

Front-end Dev Stack Version Downloads Build Status Unix Build Status Windows Dependencies

A Universal React Stack, semi-automatic route-based code splitting, Hot Module Reloading (HMR), Redux, Apollo GraphQL and more...

TOC

Key Benefits

  • No Boilerplate. Just another dependency to include. Easy future updates & maintenance.
  • Route based Code Splitting with Hot Module Reloading (HMR).

More on the selected components of the stack: About

Features

  • Universal / Isomorphic application development.
  • Extreme live development - hot reloading of client/server source with high level of error tolerance.
  • Express server with a basic security configuration using hpp and helmet.
  • ReactJS as the view layer.
  • React Router v4 as the router.
  • React Helmet allowing control of the page title/meta/styles/scripts from within your components. Direct control for your SEO needs.
  • (S)CSS Support with CSS modules and additional flexible full PostCSS chain for advanced transformations e.g. autoprefixer
  • Fully integrated asset support for referencing files in CSS and JavaScript.
  • Full ES2015 support, using Babel to transpile where needed.
  • Bundling of both client and server using Webpack v2. See also: The Cost of Small Modules
  • Client bundle is automatically split by routes.
  • Long term caching of the client bundle works out of the box.
  • Support for development and optimized production configuration.
  • Easy environment configuration via dotenv files.
  • Markdown rendering for Components integrated.
  • Super modular Lodash with Webpack tooling to enable automatic tree shaking
  • Fetch API Polyfill integrated
  • PostCSS Lost Grid integrated
  • Redux and Thunk middleware
  • Apollo Client (GraphQL)
  • Data Loading on Server Side using fetchData static methods where available
  • HardSource pre-configured for unseen rebuild performance.

Overview

This solution uses Webpack 2 to produce bundles for both the client and the server code.

The reasoning for using Webpack to bundle both the client and the server is to bring greater interop and extensibility to the table. This will for instance allowing server bundles to handle React components that introduce things like CSS or Images (as and when you add the respective loaders).

Given that we are bundling our server code I have included the source-map-support module to ensure that we get nice stack traces when executing our code via node.

All the source code is written in ES2015, and I have explicitly kept it to the true specification (bar JSX syntax). As we are following this approach it is unnecessary for us to transpile our source code for the server into ES5, as node v6 has native support for almost all of the ES2015 syntax. Our client (browser) bundle is however transpiled to ES5 code for maximum browser/device support.

The application configuration is supported by the dotenv module and it requires you to create a .env file in the project root (you can use the .env.example as a base). The .env file has been explicitly ignored from git as it will typically contain environment sensitive/specific information. In the usual case your continuous deployment tool of choice should configure the specific .env file that is needed for a target environment.

Prerequisites

Front-end Dev Stack includes a few NodeJS dependencies which rely on native code and requires binary downloads (where possible) or local compilation of source code. This is implemented in NodeJS via Node-Gyp.

Currently the following dependencies are using native code:

  • leveldown: Used by HardSource for caching
  • compression: ExpressJS compression library
  • iltorb: Brotli compression

Mac OS

  1. Install XCode from the Mac App Store
  2. Install Homebrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  3. Install NodeJS v6 or higher using Homebrew (brew install node)
  4. Install Yarn using Homebrew (brew install yarn)

Linux

  1. Install Python 2.7 or higher (but small than 3.x)
  2. Install proper C/C++ compiler toolchain, like gcc, make, etc.
  3. Install NodeJS
  4. Install Yarn

Windows

  1. Install Python 2.7 or higher (but small than 3.x)
  2. Install Windows Build Tools or Visual Studio
  3. Install NodeJS v6 or higher
  4. Install Yarn (using MSI installer)
  5. For some friendlier terminal you might want to use the Ubuntu shell in Windows 10 or Hyper.app

Note: Without admin rights it's best to download NodeJS locally in some accessible folder and extend the PATH using setx to the NodeJS folder. Installation of Yarn seems to work best for this situation when using npm install yarn instead of using the MSI installer.

Note: Windows Build Tools are required for Node-Gyp support: Easiest approach would be installation via npm install --global --production windows-build-tools - alternatively install Visual Studio 2013 or 2015 (be sure to select "Common Tools for Visual C++"). Also have a look here: https://github.com/nodejs/node-gyp#installation

Note: Eventually you have to configure your proxy settings for NPM before any following installation procedures.

License