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-turris

v0.9.0

Published

Yeoman generator for Turris.js applications done with React and ES6

Downloads

28

Readme

generator-turris

Join the chat at https://gitter.im/turrisjs/generator-turris

Yeoman generator for ES6 React web applications

About Turris.js

Turris.js is a combination of existing libraries and tools that allows fast and simple creation of single page web applications using ES6.

Turris.js is built using React.js with react-router and Twitter Bootstrap CSS.
All of the application code is managed and compiled by Webpack and minified using Uglify.js (when not in debug mode).
NPM is used for the dependency management.

Gulp.js is used as a build-tool.
Testing is done using eslint for linting and code-style and mocha.js with should.js for automated testing.

Standalone reusable components for your Turris application can be generated using separate Turris-component generator.

Getting Started

Requirements

For Turris.js to function properly, you'll need to have following things installed:

Alternatively you can use docker environment provided by turris:docker generator.

Installation

$ npm install -g yo generator-turris

Usage

$ yo turris

API

$ yo turris
Creates a new turris.js application.

$ yo turris:component myName
Generates a new inlined React component named myName. If you want to generate standalone/self-contained and more sophisticated components, look into using Turris component generator.

$ yo turris:page myName
Generates a new page named myName and injects it into main app. The only difference between page and component is that page generates and exports a route.

$ yo turris:docker
Generates a docker environment for the project with all the requirements included.

$ yo turris:docker-deploy
Generates a separate docker environment for the project statical deployment via nginx. To deploy the app using it, you will need to:

  1. Compile your app using npm run deploy command
  2. Package it into docker container using docker build -t app-name -f Dockerfile-deploy . command
  3. Run it on docker and forward port 80

Learning Your Way Around

Once installed, you can create a basic application by following the prompts.

$ mkdir HelloWorld
$ cd HelloWorld
$ yo turris

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |    breathtaking Turris   |
    ( _´U`_ )    |        generator!        |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? Your project name: (HelloWorld)
...

To run your application, just type npm start.

Project Structure

Client:

  • /style/ - LESS files
  • /src/index.js - App entry point
  • /src/app.jsx - React app bootstrapper
  • /src/routes.js - Routes for react-router
  • /src/app/ - React app definition with react-router setup
  • /src/components/ - React components folder
  • /src/components/chrome - Application chrome React component
  • /src/components/navigation - Application navigation bar React component
  • /src/pages/ - React pages folder
  • /src/pages/index - Index page that's loaded by default
  • /src/pages/other - Other page that's added for convenience

Components (can be generated with turris:component):

  • /src/components/COMPONENT/index.js - React component definition
  • /src/components/COMPONENT/template.jsx - React template

Pages (can be generated with turris:page):

  • /src/pages/PAGE/index.js - React component and route definition
  • /src/pages/PAGE/template.jsx - React template

Misc:

  • /gulp/ - Custom Gulp tasks
  • /tests/ - Unit and functional tests
  • /buildConfig.js - Build config
  • /gulpfile.js - Gulp bootstrapper
  • /webpack.config.js - Webpack config for development
  • /webpack.config.prod.js - Webpack config for production

Docker

You can as well quickly setup a docker container that includes all the required packages for Turris.js app to work (assuming you have docker installed).
To do so, follow the steps below:

  1. Run yo turris:docker to generate all the required docker files
  2. Run docker build -t appname . to generate new docker container
  3. Run docker run -it -p 8080:8080 appname to launch generated container

TODO

Add more docs, subgenerators and a proper test suite.

License

MIT