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

sails-generate-reactjs

v0.3.0

Published

Generate a react JS based frontend for Sails.

Downloads

7

Readme

![Gitter](https://badges.gitter.im/Join Chat.svg)

image_squidhome@2x.png

Overview

A frontend ReactJS generator for use with the Sails command-line interface. This bootstraps a full stack site using reactJS / Twitter Bootstrap, that enables you to spin up a modern stack web platform in a few commands. This repo comes bundled with Babel for converting ES6 components into ES5 compatible modules that can run across all browsers. This also ships with Browersify Grunt tasks to wrap all JS dependencies in a single JS file.

Update your .sailsrc file

You'll need to configure Sails to use this extension for creating new Sails sites. This can be achieved by creating a file named .sailsrc in your home directory, or the parent directory of where you are creating projects.

{
    "generators" : {
        "modules" : {
            "frontend" : "sails-generate-reactjs"
        }
    }
}

Installation

Certain generators are installed by default in Sails, but they can be overridden. Check the Sails docs for information on installing generator overrides / custom generators.

Note for Ubuntu environments, you'll need to run all the commands below as sudo(i.e. sudo npm install vs npm install).

On the command line
  1. Install this package globally via NPM, and extends off the SailsJS baseline generator
$ npm install -g sails-generate-reactjs sails grunt-cli
  1. This command will create your React Site
$ sails new <%-yourReactAppName> --force
  1. Install your app's node modules locally
$ cd <%-yourReactAppName>
$ npm install
  1. fire up your web app
$ sails lift

Verifying a successful build

This package comes bundled with a starter Travis CI configuration file. You can use Travis CI to run your tests and build your app whenever a Git commit occurs. Getting started with Travis is as easy as enabling your project on the travis portal, overriding the default .travis.yml config file and committing some code. Travis will automatically run your app's 'npm test' command and handle notifying your team the results of the build.

How to Test

Unit tests are powered by Mocha, and are automatically triggered on every Git commit via Travis and whenever your sails site is lifted. The project comes packaged with ESLint, which can be easily configured and used to enforce valid javascript syntax and coding standards. A Grunt task(called test) runs all Mocha tests within the test folder of the project, while also verifying the site built successfully. You can explicitly run the unit tests by invoking the following command.

By default Mocha runs all tests that are placed in the /test directory. You can change this by modifying the mocha grunt config in /tasks/config/mochaTest.js

$ npm test

Configuring Package.json and Bower.json

This project has a feature where you can configure the bower and package.json template files, that's created when you run 'sails new'.

vi ./templates/bower.ejs
vi /templates/package.ejs

Roadmap

  • Fix grunt tasks for production
  • Integrate Protractor into this generator for front-end control testing, and Istanbul for code coverage reporting

Questions?

Post questions/issues onto Gitter and I'll respond as soon as possible.

More Resources

License

MIT