Scaffolder of isomorphic/universal Flux app, backed by Rails API.
Please see this PR for more info: generator-flux-on-rails/pull/6
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
reduxandreact-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,fly& custom tools) - 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
- React @ 0.14.x
- Redux @ 3.x.x as Flux implementation
- React Router @ 1.x.x as... Router
- Express @ 4.x as front-end framework
- Jade @ 1.x as template engine
- SASS as css preprocessor
- CSS Modules as css-life-saver
- Immutable.js as js-life-saver
- Babel as ES Next -> ES5 transpiler
- Webpack as assets bundler
- Fly as build engine
- Eslint as js linter
- Node as is
& bunch of other stuff...
- 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!
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 yoGet generator:
npm install -g generator-flux-on-railsMake 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-blogmyBlog or my_blog will be converted to my-blog for consistency.
Before scaffolder start process, you have to answer following questions:
- Enter app name:
Specify app's name. Or hitEnterif you've already done this withinyocommand. - Choose parts to install:
Choose which parts of app you want to install — Node app & Rails API. Pressspaceto toggle. - Configure remote repo on Github / Bitbucket?
Generator can configure for you remote repo on Github / Bitbucket. HitEnterto accept it. If you'll chooseno, 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 chooseyes, check that you've created 2 repos on chosen service:- Node app repo:
git@github.com:username/my-blog-app.git - Rails app repo:
git@github.com:username/my-blog-api.git
- Node app repo:
After scaffolding is done, 2 repos will be created:
|- /my-blog
|- /my-blog-api # <------- Rails API
|- /my-blog-app # <------- Node appBefore 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.meto your hosts file to get rid of unnecessary roundtrips (lvh.mealready points tolocalhost, but browser have to make roundtrip to DNS servers to get that).
Here is the gist with my local configs.
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":"some@email.com", "password":"123456789"}}'
And we're done.
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.
- [Flux] Add tests
- [Flux] Fix deploy scripts for Node app:
[Flux] remove/publicfolder with generated assets out of repo- [Flux] symlink it to shared folder on production
- [Flux] handle rollbacks
- [Flux]
- [Flux] Fix login form example (move its state from local state to global store)
- [Flux] Add
redux-devtools - [Flux] Improve error handling
- [Flux] Add server-side retina detection
- [Flux] Add I18n
- [Flux, Rails] Switch to JWT authentication
- @gaearon for
redux— awesome flux implementation - @mjackson & @ryanflorence for wonderful
react-router - @erikras & @quangbuule for great
reduxexamples - Rails team for the best backend framework ever.
- And all the OSS contributors, who made the stuff from
Gemfile&package.json.
It's MIT.