supnate/rekit

IDE and toolkit for building scalable web applications with React, Redux and React-router

An all-in-one solution for creating modern React apps

Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc.

Rekit creates apps bootstrapped by create-react-app and uses an opinionated way to organize folder and code. It's designed to be scalable, testable and maintainable by using feature oriented architecture, one action per file pattern. This ensures application logic is well grouped and decoupled.

Rekit consists of three pieces:

• Rekit App Download the latest desktop App for Mac. Windows version is coming...
• Rekit Studio: A complete web IDE for React, Redux, and React Router development
• Rekit CLI: A command line tool to create and manage projects, components, actions, etc.

Read more about the new Rekit Studio in the blog post

🎉 Rekit Now Creates Apps By Create-react-app

🔥 Introducing Rekit Studio: a real IDE for React and Redux development

🎉 Using Rekit Studio in an Existing React Project

Demo

Below is a quick demo video of how Rekit Studio works:

You can also see the live demo, but the instructions shown on the intro might be outdated: http://demo.rekit.org

Installation

If you are on Mac you can use the desktop app.

Install with npm:

npm install -g rekit  # Install Rekit CLI
npm install -g rekit-studio  # Install Rekit Studio

This will install the commands rekit and rekit-studio to the system. Rekit is developed and tested on npm 3+ and node 6+, so this is the prerequisite for using Rekit.

Usage

Create a new application

rekit create <app-name> [--sass]

This will create a new app named app-name in the current directory. The --sass flag allows to use sass instead of default less as the CSS transpiler. After creating the app, you need to install dependencies:

cd app-name
npm install

Now, we can start Rekit Studio with:

rekit-studio -p 3040

Finally, you can open Rekit Studio at http://localhost:3040/. At the bottom in the "Scripts" tab you can find buttons to start, build, and test your app.

Key Features

• It's production-ready but not a starter kit.
• Zero additional configuration needed after creating an app.
• Dedicated IDE for Rekit development.
• Command line tools to manage actions, reducers, components and pages.
• Bootstrapped by create-react-app, all your knowledge about it still works.
• Use Webpack 3 for bundling.
• Use Babel for ES2015(ES6)+ support.
• Use React hot loader for hot module replacement.
• Use Redux for application state management.
• Use React-router for routing and it's configured with Redux reducer.
• Use Webpack dll plugin to improve dev-time build performance.
• Use Less or Sass as CSS transpilers.
• Use jest, enzyme for testing.
• Support Redux dev tools.

Packages

The Rekit organization contains a number of packages.

Packages	Description
rekit-core	Provide core APIs such as create components, rename actions, etc...
rekit	CLI wrapper of rekit-core, create apps by cloning repo from rekit-boilerplate-cra
rekit-studio	Dedicated IDE for Rekit development, uses rekit-core to manage project too.
rekit-plugin-redux-saga	Use redux-saga instead of redux-thunk for async actions.
rekit-plugin-selector	Support selectors by Rekit cli.
rekit-plugin-apollo	Support graphql by Apollo.

Documentation

Disclaimer: Some of documentation, particularly around installation, is outdated since the release of 3.0

http://rekit.js.org

License

MIT

rekit's Issues

Using rekit behind corporate firewall

I apologize if this is not the right place or channel to ask this question.

I want to use rekit to create a project at work. When I run the command:

rekit create <project_name>

I get a ETIMEDOUT error on connect.

Is there a setting I can use to set the proxy setting?

Typescript support

Hello there,

your tools look really awesome, but I'm using typescript for all my project right now.
Is it plan to have a typescript support someday?

Enhancement: Move from switch case to literals for Redux

I am 💯 in on Rekit, I love the portal, and the CLI actions. Please keep up the great work.

I would like to make a suggestion for the redux side of things. I am working on a project where we use the 'ducks' paradigm of combined actions and reducers in one file, as well as using literals instead of switch case to perform the reduce. Here is an example reducer for handling when I get the time estimate.

Note the cleanliness of the ACTION_HANDLER.

 const RESET_ESTIMATE = 'RESET_ESTIMATE';
 const SET_ESTIMATION_STATE = 'SET_ESTIMATION_STATE';
 const WORKSPACE_ESTIMATE = 'WORKSPACE_ESTIMATE';

 const initialState = {
  isBusy: false,
  totalTime: '00:00:00'
 };

 export const resetEstimate = () => {
  return {
    type: RESET_ESTIMATE
  };
 };

 export const setEstimationState = (isBusy) => {
  return {
    type: SET_ESTIMATION_STATE,
    isBusy
  };
 };

 export const workspaceEstimate = (totalTime) => {
  return {
    type: WORKSPACE_ESTIMATE,
    totalTime
  };
 };

 const ACTION_HANDLERS = {
  [RESET_ESTIMATE]: () => initialState,

  [SET_ESTIMATION_STATE]: (state, action) => {
    return {
      ...state,
      isBusy: action.isBusy,
    };
  },
  [WORKSPACE_ESTIMATE]: (state, action) => {
    return {
      ...state,
      totalTime: action.totalTime
    };
  }
 };

 export default function reducer (state = initialState, action = {}) {
  const handler = ACTION_HANDLERS[action.type];

  return handler ? handler(state, action) : state;
 }

A slightly more complex action example, here we are simply replacing(updating) an old object from an array of objects, with the new object. We slice out the old one and spread in the new one.

    [REPLACE_OBJECT]: (state, action) => {
    const index = state.findIndex((object) => object.id === action.object.id);
    return [
      ...state.slice(0, index),
      action.object,
      ...state.slice(index + 1)
    ];
  },

Rekit plugin loader seems to break after installing other libraries

I've done this multiple times at this point, so I think I've narrowed the problem down, but it seems that after rekit install redux-saga rekit portal is loading. But, once I try to install reactstrap (a UI library) it busts with this:

Warning: Failed to load plugin: redux-saga, Error: Cannot find module 'C:/Users/surface/Projects/Bootcamp/groups/rekit-01/node_modules/rekit-plugin-redux-saga/config'.
Error: Cannot find module 'C:/Users/surface/Projects/Bootcamp/groups/rekit-01/node_modules/rekit-plugin-redux-saga/config'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at plugins.map (C:\Users\surface\Projects\Bootcamp\groups\rekit-01\node_modules\rekit-core\core\plugin.js:77:22)
    at Array.map (native)
    at Object.loadPlugins (C:\Users\surface\Projects\Bootcamp\groups\rekit-01\node_modules\rekit-core\core\plugin.js:75:21)
    at Object.<anonymous> (C:\Users\surface\Projects\Bootcamp\groups\rekit-01\node_modules\rekit-portal\middleware\index.js:19:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)

Some considerations: Redux first routing and sagas/async/await

Just curious what the next version of Rekit is shaping up to be and wanted to float a balloon on a couple of features:

1. It looks like your boilerplate app has a placeholder for sagas: features/home(andcommon)/redux/sagas.js are you going to implement sagas in the framework? Any thoughts on async/await?
2. I also noticed you have some conflicts with the JSX implementation of React Router here, have you considered a redux first router, e.g.: router5 or redux-little-router?

run test error

node ./tools/run_test.js

Running tests: tests/**/*.test.js ...

module.js:471
throw err;
^

Error: Cannot find module './selectors'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

Error on 'rekit create myApp'

Hi,

I really like the rekit concept. I tried it today without success.

rekit create myApp

Welcome to Rekit, now creating your project...
Copying files...
Getting the latest dependencies versions...
Failed to get dependencies. The project was not created. Please check and retry.
{ Error: getaddrinfo ENOTFOUND supnate.github.io supnate.github.io:443
at errnoException (dns.js:28:10)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:76:26)
code: 'ENOTFOUND',
errno: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'supnate.github.io',
host: 'supnate.github.io',
port: 443 }

When create with --sass, npm build does work, main.js is missing.

94% asset optimization
100%
mv: no such file or directory: .../build/static/main.js
Done: 9662.041ms

Couldn't parse bundle asset "...\build\static\main.js".
Analyzer will use module sizes from stats file.

Webpack Bundle Analyzer saved report to ...\build\static\report.html

Something is wrong when sass project is created..
Dev server and portal work just fine. @supnate Suggestions?

Server Side Rendering

any planes in the roadmap adding server side rendering (isomorphic/universal).
It looked like a totally awesome boilerplate so I'm hoping it can be server rendered

Wrong package.json path

When i run this application on the aws ec2 instance. i get this error
Error: Cannot find module '/Users/i305656/workspace/a2/package.json' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.loadPlugins (/var/app/current/node_modules/rekit-core/core/plugin.js:49:22) at Object.<anonymous> (/var/app/current/node_modules/rekit-portal/middleware/index.js:19:18) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12)

add favicon to created app

And use prj name as title instead of 'My awesome project.".

Re-add webpack dashboard

Readme refers to webpack dashboard, but it looks like it was yanked, according to the change history.

Any specific recommendations or plan for re-adding?

Runing tests problems

I'm getting this error in a clean installation.
Running tests:  tests\features\undefined***.test.js ...
ERROR in ./node_modules/mocha-webpack/lib/webpack/includeFilesLoader.js?{"include":["C://Rafael//rekitTest//tests//before-all.js"]}!./.tmp/mocha-webpack/d1bd938075d032d4118117715de78aa6-entry.js

Nested routing support

In the current rekit architecture, a feature provides only a single layer of routing; common/routeConfig.js combines a flat set of feature routes. Naturally, pages do not have nested routes.

For a complex application, Rekit's modularized approach on managing components and containers is really helpful. If features could be more naturally nested, it would really help managing bigger applications. I imagine features/home/all-about-us/ having a variety of pages, with the routes being nested under the home router. Ideally, those nested routes are lazy-loaded with react-router's getComponent() and webpack's code splitting

@supnate have you done any design thinking along that line?

Sidebar menu highlight bug

when I use NavLink，link this:

<NavLink to={path} activeClassName="active">{item.name || item.path}</NavLink>

when I jump to other menu，other menu cannot highlight，still this menu highlight。。I should do like this:

<NavLink  onClick={()=>{this.forceUpdate()}}  to={path} activeClassName="active">{item.name || item.path}</NavLink>

Is there a better way?

rekit.js.org: "Feature Oriented Architecture" link isn't working

webpack devtool debug 问题

rekit 新建的工程能不能支持chrome下进行源码级别的断点调试. 类似create-react-app的生成的demo, 感觉会方便很多.

run tests 测试 总是报错

Run tests: tests/features/undefined/**/*.test.js

总是报错 如何解决？

rekit clean does not work rekit@next version beta.3

Try running rekit clean command but does not work. Rekit says is an unknown command.
I want to start a new clean project.

Love Ant.D!

Are you using Ant.D for Rekit Portal? It looks amazing! Would you be willing to consider adding ant.d as a plugin for Rekit? Hate to ask for more when what you've already put together looks so great!

Congratulations on your work :)

Any plan for React 16?

Use await/async in the reddit API sample

Use await/async instead of Promise.

rekit cli not work as docs said

1. rekit create hello --clean does not create a clean app, rekit version is v2.0.3.

2. rekit add component home/hello -u hello does not add the route.

I check the source and known that rekit cli send command with url_path param to the rekit-core, but rekit-core is using urlPath as the route param.

Change addCmd.addArgument(['--url-path', '-u'], ...) to addCmd.addArgument(['--urlPath', '-u'], ...) in rekit.js fix the bug.

route is error in Chrome (chrome version is the latest)

i try the example app in chrome, i click the left navigation, the page does not change,but it runs well in Firefox. the rekit protal is also error, the page cannot open.
the error infomation is 'Cannot assign to read only property 'getDisplayName' of object '#''.

Run test at top level failed

May be thats a small issue:

I tried to run the test from top level (via ... menu) in the portal or from the portal overview diagram
"run tests now". Then you get:

Running tests: tests/features/undefined/**/*.test.js ...
ERROR in ./node_modules/mocha-webpack/lib/webpack/includeFilesLoader.js?{"include":["/Users/doedel/temp/rekit/tests/before-all.js"]}!./.tmp/mocha-webpack/1fc1df50c9192a61e4ea9fd536f08f1b-entry.js
Module not found: Error: Can't resolve '../../tests/features/undefined' in '/Users/doedel/temp/rekit/.tmp/mocha-webpack'
resolve '../../tests/features/undefined' in '/Users/doedel/temp/rekit/.tmp/mocha-webpack'
using description file: /Users/doedel/temp/rekit/package.json (relative path: ./.tmp/mocha-webpack)
after using description file: /Users/doedel/temp/rekit/package.json (relative path: ./.tmp/mocha-webpack)
using description file: /Users/doedel/temp/rekit/package.json (relative path: ./tests/features/undefined)
as directory
/Users/doedel/temp/rekit/tests/features/undefined doesn't exist
[/Users/doedel/temp/rekit/tests/features/undefined]
@ ./node_modules/mocha-webpack/lib/webpack/includeFilesLoader.js?{"include":["/Users/doedel/temp/rekit/tests/before-all.js"]}!./.tmp/mocha-webpack/1fc1df50c9192a61e4ea9fd536f08f1b-entry.js 4:19-75
child_process.js:631
throw err;

beautify welcome page?

env: node\r: No such file or directory

I get the following error when trying to use rekit.
running on MACOS
$ rekit app-name

Tests fail in a brand new Rekit App

I've created a Rekit application using the latest toolkit. After creating the application I've tried to run the in-built tests, but I'm getting the following error (path redacted):

ERROR in ./src/features/home/RedditList.js
Module build failed: Error: C:/.../src/features/home/RedditList.js: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

There are many errors like this one, but they all have more-or-less the same structure

The key string here is We don't know what to do with this node type. We were previously a Statement but we can't fit in here? which appears to be coming from Babel

Some preliminary research suggests that this has something to do with the lines "export default class NAME extends SOMETHING", as splitting them to "class Name extends Something... " and "export default Name" seems to work.

Missing class properties transform

This error is launched when run npm start. some idea?

A typo in README

There is the following typo in README.md:

Command line tools to mange actions, reducers, components and pages.

Changing extension to jsx

As I'm using atom, formatting a component with .js extension will not work properly. I want to change the extension to .jsx.
How is it possible. Any side effects ?

Yarn compatibility for production

Yarn works for dev builds but using yarn build returns the following error:
100% mv: no such file or directory: /Users/leo/work/mysite/build/static/main.js Done: 14065.142ms Couldn't parse bundle asset "/Users/leo/work/mysite/build/static/main.js". Analyzer will use module sizes from stats file.

There's no search results I can find on the matter and report.html has reams and reams of normal-looking results, AFAIK. As Far As I Can Tell, this is an inherent issue with using yarn with rekit.

include button for hide left router navbar and could see the component in full screen

Hi..would be nice could hide the left bar with the routes when I'm building a full site, maybe a button for enable and disable this bar would be great, what do you think?...thanks!!!

lcov-report index.html missing on fresh run

After a fresh install using Yarn, navigating to the portal home page generates the following error in the terminal:

socket disconnected Error: ENOENT: no such file or directory, stat '~/__test-app/app/coverage/lcov-report/index.html'

Hot reload does not work anymore

getting this following error when starting a new project

I can't make hot reloading work at this time (No time to investigate).

add babel-plugin-transform-react-jsx-source

cannot find webpack-bundle-analyzer in package.json

for v2.0, cannot find module 'webpack-bundle-analyzer'

npm i webpack-bundle-analyzer --save-dev

Anyway to create features on terminal?

Sublime plugin is great, but not all of us use Sublime (me), is it possible to generate features/components etc. on terminal ?

how to import npm module?

i'm tired import using onsenui npm module, but that not working!
https://onsen.io/v2/guide/react/#react

Can you make a release

Hey there

great library but you've made some good changes for react 16 and id love to see a release published with recent commits

Thanks

Support for async/generators?

Hi, I think this is pretty neat. Does rekit support async/wait or generator/yield syntax, for async operations (such as axios requests)?

React 15.4.0 breaks npm start

The new React 15.4.0 drop seems to have broken things. It looks like they removed all of ReactDOM from React, but I'm not sure what is breaking. My guess is it is the react-hot-api.

Failed to compile.

Error in ./src/index.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in ...

React router v4

Any plans to migrate the router to v4 ?

[Feature Request] Add support sub-directory in feature.

Hi, Can you add support for sub folders?

e.g.

+ features
    + product
      + component
          - ComponentA.js
          - ComponentB.js
          - ...

Thanks.

how to use isDev in webpack-config , such as dll, test?

type is one of [dev, dll, test, dist]
NOTE: for test, only module property is used.

Can't start newly created rekit project

Context

macOS High Sierra
[email protected]
[email protected]

Created a rekit application like this:

➜ npm i -g rekit
➜ rekit create 12n-frontend
➜ cd 12n-frontend
➜ git init .
➜ git add . && git commit -m "init"
➜ npm i
➜ npm start

Rekit package versions:

➜  npm ls | grep rekit
├─┬ [email protected]
├─┬ [email protected]

Error

Upon running npm start, I get:

> [email protected] start
> node ./tools/server.js

module.js:471
    throw err;
    ^

Error: Cannot find module '/Users/i305656/workspace/a2/package.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.loadPlugins (node_modules/rekit-core/core/plugin.js:49:22)
    at Object.<anonymous> (node_modules/rekit-portal/middleware/index.js:19:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Not quite sure what to make of this. Any pointers?

Update: I worked around this problem by downgrading my rekit-portal to 2.0.5.

can't create app

when i create a rekit app:
rekit create myapp --sass

error show:

Welcome to Rekit, now creating your project...
Copying files...
Getting the latest dependencies versions...
(node:3874) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.
Failed to get dependencies. The project was not created. Please check and retry.
{ Error: connect ETIMEDOUT 151.101.73.147:443
    at Object._errnoException (util.js:1021:11)
    at _exceptionWithHostPort (util.js:1043:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1175:14)
  code: 'ETIMEDOUT',
  errno: 'ETIMEDOUT',
  syscall: 'connect',
  address: '151.101.73.147',
  port: 443 }

"Missing class properties transform" when doing npm start

I just install latest version of rekit, create a sample app (with and without sass), do npm install and when run npm start, I have this error:

If I change the presets for babel in package.json from:

to

It's working normally. Just wondering any intended purpose for those presets? It's quite obvious error for me

some errors in v2.0

switch to sass model rekit create test --sass

• check src/styles/index.scss, not found ../containers/style.scss

// index.less is the entry for all styles.
@import './reset.css';
@import './global.scss'; 
@import '../containers/style.scss';
@import '../features/home/style.scss';
@import '../features/common/style.scss';

• check src/features/home/style.scss, not found TestPage1.scss and TestPage2.scss

@import '../../styles/mixins.scss';
@import './App.scss';
@import './DefaultPage.scss';
@import './Hello.scss';
@import './RedditList.scss';
@import './TestPage1.scss';
@import './TestPage2.scss';
@import './CleanApp.scss';

Costum async-action template

Hi ,

Is there a way that I can create a custom async-action template and hook it in rekit ?