Construct React

Construct React is a boilerplate for web development built on top of Express and React, containing modern web development tools such as Webpack and Babel. It will be the good starting point for professionals. You don't need this kit if you don't want SSR, code-splitting and other SEO stuffs.

Main Features!

• Provides Server Side Rendering (SSR). Web application is being served by Express server
• Configures React router which provides the Routing functionality.
• Configures Code Splitting using @loadable/component.
• Configures Material UI which provides React Components that implement Google's Material design.
• Configures styled-components. It allows you to write actual CSS code to style your components.
• Configures React-redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.
• Configures Redux-saga. It is a redux middleware library, that is designed to make handling side effects in your redux app nice and simple.
• Configures redux-saga-test-plan for testing sagas.
• Configures axios. It is Promise based HTTP client for the browser and node.js.
• Configures Enzyme. It is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
• Configures React-Helmet.
• Configures nodemon. It is a utility for auto restarting the express server.
• Configures webpack-dev-middleware and webpack-hot-middleware.
• Configures airbnb for linting.
• Configures Snapshot testing.

Installation

Install the construct-react library

 npm install -g construct-react
            (or)
 yarn global add construct-react

Create a new project with construct-react

 construct-react app-name
 cd app-name

Install the dependencies and devDependencies.

 yarn install

To start the development server

 yarn dev

To start the production server

 yarn prod

By default, it will start the app in the port 3000. If you want to change the port, edit the value in the port.js file.

To build the application in development environment

 yarn build:dev

To build the application in production environment

 yarn build:prod

To run the lint

 yarn lint

To update the components for snapshot testing

 yarn update-snapshot <file-name>

Set up

React - Helmet

If you want to set up your react-helmet, just create helmet files under /app/helmets and use them in you components. The server side setup are already in place.

Error Boundary

Error boundary file is configured. If you want to change the error content, you can change the /app/ErrorBoundary.jsx.

Load date

If you want to load your data during the server side rendering itself, then you can dispatch the actions in componentWillMount lifecycle method of a component.

For Example,

componentWillMount() {
    const { getAllPosts } = this.props;
    getAllPosts();
  }

you can find this example in /app/components/Posts.jsx. If you trigger an action, then saga will take care of calling API and storing data into the redux store. Below saga configuration has been set up to defer the server side rendering till data are loaded.

store.runSaga(sagas).done.then(() => {
   // send the response
  });

you can find this code in the file /server/Renderer.jsx

Note: If you dispatch an action in componentDidMount, data will be loaded only at client side. componentWillMount will be executed at both server and client sides while componentDidMount will be executed only at client side.

Happy hacking!