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

generator-fountain-webapp

v1.0.0

Published

Yeoman Fountain generator to scaffold a webapp with React or Angular written in ES6 (Babel), TypeScript through Webpack or SystemJS including tools Gulp 4, ESLint, Browsersync and Karma

Downloads

61

Readme

Fountain Webapp Generator

Build Status codecov Slack OpenCollective Backers OpenCollective Sponsors

This Yeoman generator allows you to start any Webapp with the best Developer Experience out of the box!

No matter what framework or module management you want to use, we got you covered with a cutting edge working configuration.

We use Gulp 4 as a task manager but we'll ask you questions about:

  • Framework: React, Angular 2, Angular 1, Vue 2
  • Modules management: Webpack, SystemJS, none
  • JS preprocessor: Babel, TypeScript, none
  • CSS preprocessor: Sass, Stylus, Less, none

This generator is the entry point of the Yeoman Fountain generators for webapps. It can be considered as the v2 of generator-gulp-angular.

Generator Fountain Webapp structure

To take profit of the best of the Yeoman infrastructure, we heavily relies on the composability natures of the generators.

Thereby, each needs of your future application will be addressed by a dedicated Yeoman generator (each will be used depending of the options you selected or not).

More informations in DESIGN.md.

Web framework layer

This generators can be used directly to bypass the framework question.

React Angular 1 Angular 2 Vue 2

Web tooling layer

Gulp ESLint BrowserSync Karma

Module management layer

Webpack SystemJS Bower

Usage

Requirement Node 6+ && NPM 3+

This generator is targeted to be used with Node >= 6.0.0 and NPM => 3.0.0. You can check your version number with the command

node --version && npm --version

Install

Install required tools yo:
npm install -g yo
Install generator-fountain-webapp:
npm install -g generator-fountain-webapp

Run

Create a new directory, and go into:
mkdir my-new-project && cd my-new-project
Run yo fountain-webapp, and select desired technologies:
yo fountain-webapp

Use NPM scripts

  • npm run build to build an optimized version of your application in /dist
  • npm run serve to launch a browser sync server on your source files
  • npm run serve:dist to launch a server on your optimized application
  • npm run test to launch your unit tests with Karma
  • npm run test:auto to launch your unit tests with Karma in watch mode

Or Gulp tasks

If you have gulp-cli installed in global packages you can use equivalent:

  • gulp or gulp build
  • gulp serve
  • gulp serve:dist
  • gulp test
  • gulp test:auto

If you don't have gulp-cli installed in global, you should have this error:

/usr/local/lib/node_modules/gulp/bin/gulp.js:121 gulpInst.start.apply(gulpInst, toRun); TypeError: Cannot read property 'apply' of undefined

Sub-generators

If you want to access sub-generators, you have to globally install one of the following generators:

Start development


Backers

Support us with a monthly donation and help us continue our activities.

Backers

Sponsors

Become a sponsor and get your logo on our website fountainjs.io and on our README on Github with a link to your site.

Sponsors

Changelog

Contributing