Full Stack Packages for Front-end Server

Here you can find enhanced redux-bootstrap with TypeScript and Rx under hood.

A bootstrap() function for initializing Redux applications.

This module works by exporting a bootstrap function you can call in your project. It does not generate files for you – it is not a project template or project scaffolding tool. It is not related to the Bootstrap responsive front-end framework.

Note

This is still in work-in-progress.

Why do I need this?

This library handles most of the common application initialization/bootstrapping that takes place every time you create a new Redux project.

When you create a new Redux project you usually need to take care of a few things:

• Install dependencies.
• Integrate React Router with Redux.
• Integrate Rx with redux-observable.
• Create a Root reducer.
• Configure redux-devtools-extension.
• Integrate redux-immutable-state-invariant with Redux.
• Apply middleware.
• Combine reducers into a root reducer.
• Create the store.
• Sync history with store.
• Create the Root component (Provider, Router).
• Set the routes, history and store in the Root component.
• Render the Root component.

The redux-bootstrap package handles all this stuff for you!

This idea is based on the bootstrap functions built into other modern JS frameworks such as Angular 2.0 and Aurelia.

How can I use it?

First you should install learna.

$ npm install --global lerna 

Download packages from repository.

Create your new project in 'packages' directory. In 'package.json' file you need to set dependency

"dependencies": {
    ```
    "@redux-bootstrap/bootstrap": "^0.0.1",
    ```

Then you should go to main directory and bind your new project with '@redux-bootstrap/bootstrap'.

$ learna bootstrap --sort

Install dependencies

$ npm install
$ npm run install

Then use the bootstrap function in your application’s entry point.

All you need to do is import your routes file, your reducers and any additional middleware and pass them to the bootstrap function as configuration:

import { bootstrap, interfaces } from "@redux-bootstrap/bootstrap";
import routes from "./routes";
import usersReducer from "./reducers/usersReducer";
import reposReducer from "./reducers/reposReducer";
// Example middlewares:
import thunk from "redux-thunk";
import * as createLogger from "redux-logger";

bootstrap({
    container: "root",                    // optional
    createHistory: createBrowserHistory,  // optional
    historyOptions: {},                   // optional
    initialState: {},                     // optional
    middlewares: [thunk, createLogger()], // optional
    render: ReactDOM.render,              // optional
    routerProps: interfaces.RouterProps   // optional
    reducers: {
        usersReducer,
        reposReducer,
    },
    routes: routes
});

That’s it – routing, and DevTools are ready and you can start working on your app!

Where can I find an example?

If you are looking for a sample application, you can refer to the packages directory. There you can find examples:

redux-bootstrap-example directory.

redux-fela-example directory.

Also you can see experimental examples:

Redux immutable state

Redux Bootstrap uses redux-immutable-state-invariant automaticaly in development mode. Therefore you will get an error message when you try to mutate your state either inside a dispatch or between dispatches. You don't need to use Immutable.js and redux-immutable.

Accessing the Store, History & Root Component

Sometimes you need to access the store, synched history or root component. The result object returned by the bootstrap function provides access to these.

interface BootstrapResult {
    store: Redux.Store<any>,
    history: History.History, // history for react-router-redux 4.0
    output: any, // value returned by render()
    root: JSX.Element
}

For example, when enabling hot loader:

const result = bootstrap({/* ... */});

if (module.hot) {
    module.hot.accept("../reducers", () => {
        const nextRootReducer = require("../reducers/index").default;
        // If you use module.exports or Babel 5, remove .default:
        // const nextRootReducer = require("../reducers/index");
        result.store.replaceReducer(nextRootReducer);
    });
}

TypeScript inside

All packages were written with TypeScript 2.0 or higher. So you can enjoy the best development experience and build scalable apps.

Development

If you want to develop gitstack locally you must follow the following instructions:

• Fork or Clone this repository

• Install the Redux Stack project in your computer

git clone https://github.com/cdmbase/react-frontend-server-stack.git
cd graphql-server
npm install
npm run install

to run example

cd packages/redux-bootstrap-example
npm start

to run build with watch. Go to main directory and run

npm run build:packages:watch