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

trailpack-treefrog

v2.0.0

Published

Structured frontends in Angular 2 or React for Trailsjs apps

Downloads

5

Readme

trailpack-treefrog

Treefrog

NPM version Build status Dependency Status Code Climate

Structured frontends in Angular2, React, or whatever for Trailsjs Apps.

The beauty of Javascript is the ability to build isomorphic apps. Treefrog is focused on that concept.

Looking for the Style Library? Checkout https://github.com/CaliStyle/treefrog

Looking for the generator? Checkout https://github.com/CaliStyle/trailpack-treefrog.

##Isomorphic Apps For a great explanation of what an Isomorphic app is, check out https://www.lullabot.com/articles/what-is-an-isomorphic-application.

Why Isopmorphic apps? If your app has a frontend, then you can save time by reusing code. On top of that, Search Engine Optimzation and Mobile Optimzation aren't going away and Isomorphic apps benefit from the speed boost of having an app fully rendered on demand.

Status

Stability: 1 - Experimental

Install

// Install the Trailpack with NPM
$ npm install --save trailpack-treefrog

// OR Install the Trailpack with Yoeman
$ yo trails:trailpack trailpack-treefrog

//Install the Generator
$ npm install generator-treefrog -g

//Setup the frontend
$ yo treefrog

Configure

Running yo treefrog will prompt you to configure your app like a normal Trails App with some added sugar. It will add trailpack-treefrog to your config/main.js, exports.treefrog = require('./treefrog') to your config/index.js, and create/configure config/treefrog.js. The Generator will also use your configuration to build an archetype and install your packages automatically.

// The result of running `yo treefrog`
// config/main.js
module.exports = {
  packs: [
    // ... other trailpacks
    require('trailpack-treefrog')
  ],

  paths: {
  	// ... other paths

  }
}

This process allows yo to run the generator subsequently with your saved preferences.