M-React-Boilerplate

Starter boilerplate app for React/Redux stack with server side rendering. Focused on reaching optimal developer experience.

Installation

yarn   # (or `npm install` if you prefer npm)

Running in developer mode

yarn start   # (or `npm start` if you prefer npm)

Open up http://localhost:3223/ (you can change the port in the envConfig.js file

Technologies and features

React JS

React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Webpack v4

Webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

Code splitting

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time. Look at the gif, when a user clicks go to About page the browser will load a new JS file which contains the code for the new page. In this case, our user will load only the code-chunks that are actually needed for showing the page.

Hot Module Replacement

Hot Module Replacement (HMR) improves the development experience by automatically updating modules in the browser at runtime without needing a whole page refresh. This means that application state can be retained as you change small things. We use React Hot Loader for advanced.

Server Side Rendering

Server Side Rendering (SSR) is the process of taking a client-side JavaScript Framework website and rendering it to static HTML and CSS on the server. Why is this important? We all want fast loading websites and SSR is a tool to help you get your website rendered faster.

Stylus

Stylus - a dynamic stylesheet preprocessor language providing an efficient, dynamic, and expressive way to generate CSS.

react-helmet

react-helmet - a document head manager for React with server sider rendering support.

Compile product build and run server

yarn run prod   # (or `npm run prod` if you prefer npm)