mohebifar / racket

A complete starting app for developing universal React/Redux web apps with generators, best practices and more

Generators, best practices and a complete starting app for developing universal React/Redux web app

Racket

Racket is a yeoman generator for creating universal/isomorphic web applications. One of the pains for developers who want to use React or want to develop universal apps was knowing which libraries to choose and how tie them up! Racket responds to this issue by giving you the option to choose the tools/technologies that you prefer the most and offering a good structure that you can maintain for years!

No need to copy or fork, just use the command-line generator!

Creating, developing and maintaining a universal react app had never been so easy!

Live running demo

Suggestion: I do recommend to create a simple app with React + Redux yourself, before using Racket.

Installation

First, note that you need to use npm 3. If you have not upgraded to npm 3, run:

npm i -g npm@3

Install yo and generator-racket via npm:

npm i -g yo generator-racket

Create a directory for your app and cd into it:

mkdir my-awesome-app
cd my-awesome-app

Then run the following command to start creating your app.

yo racket

Features

From each item with multiple options, you can choose the one you prefer:

• UI Library: React
• Flux Frameworks: Redux
  • Redux Connect included.
• Async actions: Redux Thunk, Redux Saga
• Stylesheets: Sass, Less, PostCSS, CSS
• CSS Frameworks: Bootstrap
  • Option to include React Bootstrap
• Module Bundler: Webpack + Webpack Isomorphic Tools
• Router: React Router + React Router Redux
• Testing
  • Enzyme
  • Mocha
  • Karma

Generators

Component

To generate a component run:

yo racket:component <component-name> [--stateless]

Route

To generate a new route and component run:

yo racket:route <component-name>

Redux module

To generate a redux module run:

yo racket:redux-module <name>

racket's Issues

Heroku deploy example

Hey, first of all thanks for this yeoman generator, it helps big time developing universal react apps.

Could you please provide some instructions on how you deployed the example app to Heroku.
I've tried deploying to Heroku but I get an error at npm run build regarding not finding webpack.
Thanks.

remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:
remote:        > [email protected] postinstall /tmp/build_5d938f69de6d3c3cbf4ad96f7559dbb3
remote:        > npm run build
remote:
remote:
remote:        > [email protected] build /tmp/build_5d938f69de6d3c3cbf4ad96f7559dbb3
remote:        > webpack --colors --config ./webpack/prod.config.js
remote:
remote:        sh: 1: webpack: not found
remote:
remote:        npm ERR! Linux 3.13.0-91-generic
remote:        npm ERR! argv "/tmp/build_5d938f69de6d3c3cbf4ad96f7559dbb3/.heroku/node/bin/node" "/tmp/build_5d938f69de6d3c3cbf4ad96f7559dbb3/.heroku/node/bin/npm" "run" "build"
remote:        npm ERR! node v4.1.1
remote:        npm ERR! npm  v3.9.0
remote:        npm ERR! file sh
remote:        npm ERR! code ELIFECYCLE
remote:        npm ERR! errno ENOENT
remote:        npm ERR! syscall spawn
remote:        npm ERR! [email protected] build: `webpack --colors --config ./webpack/prod.config.js`
remote:        npm ERR! spawn ENOENT
remote:        npm ERR!
remote:        npm ERR! Failed at the [email protected] build script 'webpack --colors --config ./webpack/prod.config.js'.

removing example preset or making it optional

having racket generate a example app increases the setup time dramatically.

why not just generate the bare minimum?

• the index route
• the App and NotFound container
• the html header component

typo

Rouer instead of Router on the docs

Provide the documentation

Removing bootstrap

Hi @mohebifar! Thank you for the repo! Is there a way or documentation to use this generator without the bootstrap part? I'd like to just use CSS Modules as much as possible?

Styles Load Late

First off thank you for the fantastic tool-set. After working with just about all of them I find yours the most succinct example available right now.

The one issue I've noticed is that there is a brief moment in the page lifecycle that the styles aren't loaded. I was wondering if you had any insight into that? Is this something a user would see in production or is this this just something we devs see because of the way webpack loads things.

I tried the template without bootstrap on the chance that it was due to that and the same thing happened.

Thanks in advance and again thanks for such a great tool kit.

missing support for multiple apis

having the ApiClient helper use a static apiPath limits us to only one API.

the easiest solution is probably to remove the formatUrl function and instead require the use of the full address instead of just the path.

changes would have to be done in

• githubHottest(reduxSaga).js
• githubHottest(reduxThunk).js
• ApiClient.js
• config.js

Hot reload crashes after updating Redux Form to v6

New Redux Form forces us to update react-hot-loader to its new v3 beta and remove it from webpack loaders, after doing so my hot reload doesn't work at all, only styles get hot-reloaded!

How to add Middleware such as react-redux-loading-bar

When I run the CMD 'npm run dev' throw an err on terminal console

When I run the CMD 'npm run dev' throw an err on terminal console:

[1] to be executed: "node bin/server.js" [0] ==> Webpack development server listening on port 8080 [1] [webpack-isomorphic-tools] [error].development()method is now deprecated (for server-side instance only, not for webpack plugin instance) and has no effec t. Set up a properprocess.env.NODE_ENVvariable instead.

It always make the 'webpack-hot-middleware' bad. Is this a bug and how to resolve it?
This is my question, thx!

npm run build FAILED

When I run 'npm run build' , I get the next error.

C:\Projects\pruebas-react\racketApp\node_modules.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,,/,g')")
^^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.runMain (module.js:575:10)
at run (bootstrap_node.js:352:7)
at startup (bootstrap_node.js:144:9)
at bootstrap_node.js:467:3

Choose proper technologies

Scaffolding tool:

• Yeoman

UI Libraries:

• React
• React Native

Flux Libraries:

• Redux

Side effects:

• Redux-thunk
• Redux-saga
• Redux-effects

Build Tool:

• Webpack
• Webpack isomorphic

Styling:

• PostCSS
• Sass
• Radium
• Less
• React-jss

Miscellaneous:

• Redux-form
• isomorphic-fetch

Test:

• Enzyme
• Chai
• Mocha

Adding a new Route does NOT import the container in src/containers/index.js

Create the skeleton

Incompatibility with Windows 7

The command npm run build and thus yo racket as well fails on Win 7.

Here's the error:

C:\Users\Schlaus\Documents\racket\node_modules\.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3

Looking at package.json it seems the C:\Users\Schlaus\Documents\racket\node_modules\.bin\webpack is run via node:

package.json, line 13
"build": "node ./node_modules/.bin/webpack --colors --config ./webpack/prod.config.js"

Is this intentional? Removing node from the start of the line makes the command work.

Besides that, scripts in package.json that use the syntax

NODE_ENV=production NODE_PATH=./src node ./bin/server.js

ie. define a variable at the start wont work on Win 7 without the cross-env package:

cross-env NODE_ENV=production NODE_PATH=./src node ./bin/server.js

Could you consider adding cross-env, or mention in the docs which steps need to be taken for Win 7 compatibility?

Switching to Yeoman

Exception running yo racket

I've just installed yo and generator-racket and I got "Cannot find module 'yeoman-environment'" error after I ran the yo racket.

I'm running it in a linux machine, node version 6.2.2, NPM version 3.10.3

$ yo racket
module.js:442
throw err;
^

Error: Cannot find module 'yeoman-environment'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/usr/lib/node_modules/yo/lib/router.js:9:23)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

A misplaced quote in the redux-module generator

https://github.com/mohebifar/racket/blob/master/src/generators/redux-module/index.js#L31