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-flux-on-rails

v0.0.9

Published

Scaffolder of isomorphic/universal Flux app, backed by Rails API

Downloads

12

Readme

generator-flux-on-rails

Scaffolder of isomorphic/universal Flux app, backed by Rails API.

npm version build status dependencies status

LIVE DEMO APP | App sources: Flux App & Rails API

What you'll get with just a few lines in console.

  • Isomorphic/universal SPA based on Flux architecture
  • Running on latest versions of redux and react-router
  • Written on ES6/ES2015 (transpiled by Babel)
  • Multiple bundles ready
  • Simple authentication mechanism
  • <head> generation and <title> updater
  • Development and production builds (using webpack & gulp)
  • Hot reloading in development
  • Google Analytics helpers
  • Rails API — up and running
  • Deployment scripts for Flux app and Rails API (using mina)

If you don't use Rails, you can skip its setup and use whatever JSON API back-end you like. For the Flux app it's just a JSON API somewhere in the outer space.

For further details please follow up this series of posts @medium

Technologies used

Flux app

  • React @ 0.13.3
  • Redux @ 1.0.0-rc as Flux implementation
  • React Router @ 1.0.0-beta3 as... Router
  • Express @ 4.x as front-end framework
  • Jade @ 1.x as template engine
  • Stylus as css preprocessor
  • Babel as ES6 -> ES5 transpiler
  • Webpack as assets bundler
  • Gulp as build engine
  • Eslint as js linter
  • Node as is

Rails API

  • Rails @ 4.x as back-end framework
  • rails_api gem as rails-json-api maker
  • Devise (with simple_token_authentication gem) as authentication engine
  • Postgres as database
  • RVM as rubies manager
  • Unicorn as production server

And

  • Mina as deploy engine
  • Nginx as front-end server

Node & NPM are required for Flux app.
RVM, Ruby & Postgres are required for Rails API.
Nginx is required for both.

Why we need Nginx on localhost — read in my post on @medium.

This generator will install latest versions of dependencies, so if some npm package or ruby gem will be updated to the next major version (and there will be breaking changes in its API) — something can be broken after installation. I think on the project's creation stage it's better to get an error and update code base to start with the newest available versions of libs, rather than locking dependencies and use outdated packages at the beginning. If you'll face such case, please let me know via issue or pull request. Thanks!

Getting Started

Let's create an app called my-blog.

This generator will scaffold 2 separate repos:

  • Flux app
  • Rails API

In case you don't have yo:

npm install -g yo

Get generator:

npm install -g generator-flux-on-rails

Make sure Postgres is up and running (if you plan to install Rails API) and initiate scaffolder:

yo flux-on-rails

# or specify name right here
yo flux-on-rails my-blog

myBlog or my_blog will be converted to my-blog for consistency.

Before scaffolder start process, you have to answer following questions:

Installation

  • Enter app name:
    Specify app's name. Or hit Enter if you've already done this within yo command.
  • Choose parts to install:
    Choose which parts of app you want to install — Node app & Rails API. Press space to toggle.
  • Configure remote repo on Github / Bitbucket?
    Generator can configure for you remote repo on Github / Bitbucket. Hit Enter to accept it. If you'll choose no, scaffolder will start his work.
  • Github or Bitbucket?
    Choose one with arrows keys.
  • Your username:
    Your account on chosen service.
  • Push first commit to remote?
    It can push first commit to remote for you. If you'll choose yes, check that you've created 2 repos on chosen service:

After scaffolding is done, 2 repos will be created:

|- /my-blog
    |- /my-blog-api    # <------- Rails API
    |- /my-blog-app    # <------- Node app

Before we'll spin up these apps, setup your localhost environment. As a result our Flux app will be available at http://lvh.me and our Rails API will be available at http://api.lvh.me.

  • Install and setup Nginx (it's really easy).
  • Add lvh.me & api.lvh.me to your hosts file to get rid of unnecessary roundtrips (lvh.me already points to localhost, but browser have to make roundtrip to DNS servers to get that).

Here is the gist with my local configs.

Spinning up Rails API

Navigate to project folder:

cd my-blog/my-blog-api

We need to create users table in database, so Devise can handle users authentication.

  • Check migration at db/migrate/XXXXXXXXXXXXXX_devise_create_users.rb
  • Configure it and run the migration.
rake db:migrate

Now we can start local Rails server:

bin/rails s

To create a User, make POST request to /signup path, smth like this:

curl http://api.lvh.me/signup \
-X POST \
-H 'Content-type: application/json' \
-d '{"api_user":{"email":"[email protected]", "password":"123456789"}}'

And we're done.

Spinning up Flux app

Navigate to project folder:

cd my-blog/my-blog-app

Run dev server with hot reloading:

npm start

Point your browser to http://lvh.me. That's all!

Also:

# to start local server with production assets
npm run prod

# to compile production assets before deploy
npm run build
# or just
gulp

Further details about Flux app, Rails API, authentication and deployment I'll cover in this series of posts @medium.

If you'll find any errors or have a suggestions — issues and PRs are absolutely welcome. Special thanks to those who'll correct the grammar issues in this README.

TODO

  • [Flux] Add tests
  • [Flux] Remove /public stuff out of repo + symlink it to shared folder on production
  • [Flux] Add immutable.js
  • [Flux] Fix login form example (move its state from local state to global store)
  • [Flux] Switch to babel-node in development & production envs
  • [Flux] Add redux-devtools
  • [Flux] Improve error handling
  • ~~[Flux] Rewrite meta generator: class -> function~~
  • [Flux] Add notifications from webpack server
  • [Flux] Add server-side retina detection
  • [Flux] Add I18n
  • [Flux, Rails] Switch to JWT authentication

Thanks

License

It's MIT.