`, `<meta/>`, social network sharing) * Webpack "hot reload" * HTTP Cookies * etc # 2.x These are the docs for the latest version `3.x`. For version `2.x` (legacy projects) docs see the [README of the `2.x` branch](https://github.com/catamphetamine/react-website/tree/2.x). # Introduction ## Getting started First, install Redux: ```bash $ npm install redux react-redux@5 --save ``` > Note: `react-redux@6` is incompatible with `found@0.3` and won't work [#69](https://github.com/catamphetamine/react-website/issues/69) Then, install `react-website`: ```bash $ npm install react-website --save ``` Start by creating `react-website` configuration file. #### ./src/react-website.js ```javascript import routes from './routes' // Redux reducers, which will be combined into // a single Redux reducer via `combineReducers()`. import * as reducers from './redux/index' export default { routes, reducers } ``` The routes: #### ./src/routes.js ```js import React from 'react' import { Route } from 'react-website' import App from '../pages/App' import Home from '../pages/Home' import About from '../pages/About' export default ( <Route path="/" component={ App }> <Route component={ Home }/> <Route path="about" component={ About }/> </Route> ) ``` #### ./src/pages/App.js ```js import React from 'react' import { Link } from 'react-website' export default ({ children }) => ( <div> <h1> Web Application </h1> <ul> <li> <Link exact to="/"> Home </Link> </li> <li> <Link to="/about"> About </Link> </li> </ul> { children } </div> ) ``` #### ./src/pages/Home.js ```js import React from 'react' export default () => <div> This is a home page </div> ``` #### ./src/pages/About.js ```js import React from 'react' export default () => <div> Made using `react-website` </div> ``` The reducers: #### ./src/redux/index.js ```js // For those who're unfamiliar with Redux, // a reducer is a function `(state, action) => state`. export { default as reducer1 } from './reducer1' export { default as reducer2 } from './reducer2' ... ``` Then call `render()` in the main client-side javascript file. #### ./src/index.js ```javascript import { render } from 'react-website' import settings from './react-website' // Render the page in web browser render(settings) ``` And the `index.html` would look like this: ```html <html> <head> <title>Example

# react-website [![npm version](https://img.shields.io/npm/v/react-website.svg?style=flat-square)](https://www.npmjs.com/package/react-website) [![npm downloads](https://img.shields.io/npm/dm/react-isomorphic-render.svg?style=flat-square)](https://www.npmjs.com/package/react-website) [![npm downloads](https://img.shields.io/npm/dm/react-website.svg?style=flat-square)](https://www.npmjs.com/package/react-website) A complete solution for building a React/Redux application * Routing * Page preloading * (optional) Code splitting * (optional) Server-side rendering * Asynchronous HTTP requests * Easy and simplified Redux (no boilerplate code) * Document metadata (``, `<meta/>`, social network sharing) * Webpack "hot reload" * HTTP Cookies * etc # 2.x These are the docs for the latest version `3.x`. For version `2.x` (legacy projects) docs see the [README of the `2.x` branch](https://github.com/catamphetamine/react-website/tree/2.x). # Introduction ## Getting started First, install Redux: ```bash $ npm install redux react-redux@5 --save ``` > Note: `react-redux@6` is incompatible with `found@0.3` and won't work [#69](https://github.com/catamphetamine/react-website/issues/69) Then, install `react-website`: ```bash $ npm install react-website --save ``` Start by creating `react-website` configuration file. #### ./src/react-website.js ```javascript import routes from './routes' // Redux reducers, which will be combined into // a single Redux reducer via `combineReducers()`. import * as reducers from './redux/index' export default { routes, reducers } ``` The routes: #### ./src/routes.js ```js import React from 'react' import { Route } from 'react-website' import App from '../pages/App' import Home from '../pages/Home' import About from '../pages/About' export default ( <Route path="/" component={ App }> <Route component={ Home }/> <Route path="about" component={ About }/> </Route> ) ``` #### ./src/pages/App.js ```js import React from 'react' import { Link } from 'react-website' export default ({ children }) => ( <div> <h1> Web Application </h1> <ul> <li> <Link exact to="/"> Home </Link> </li> <li> <Link to="/about"> About </Link> </li> </ul> { children } </div> ) ``` #### ./src/pages/Home.js ```js import React from 'react' export default () => <div> This is a home page </div> ``` #### ./src/pages/About.js ```js import React from 'react' export default () => <div> Made using `react-website` </div> ``` The reducers: #### ./src/redux/index.js ```js // For those who're unfamiliar with Redux, // a reducer is a function `(state, action) => state`. export { default as reducer1 } from './reducer1' export { default as reducer2 } from './reducer2' ... ``` Then call `render()` in the main client-side javascript file. #### ./src/index.js ```javascript import { render } from 'react-website' import settings from './react-website' // Render the page in web browser render(settings) ``` And the `index.html` would look like this: ```html <html> <head> <title>Example ``` Where `bundle.js` is the `./src/index.js` file built with Webpack (or you could use any other javascript bundler). Now, `index.html` and `bundle.js` files must be served over HTTP(S). If you're using Webpack then add [`HtmlWebpackPlugin`](https://webpack.js.org/plugins/html-webpack-plugin/) to generate `index.html`, and run [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/) with [`historyApiFallback`](https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback) to serve the generated `index.html` and `bundle.js` files over HTTP on `localhost:8080`.

See HtmlWebpackPlugin configuration example

#### webpack.config.js ```js const HtmlWebpackPlugin = require('html-webpack-plugin') const buildOutputPath = '...' const devServerPort = 8080 // Any port number. module.exports = { output: { path: buildOutputPath, publicPath: `http://localhost:${devServerPort}`, ... }, ..., plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' // Path to `index.html` file. }), ... ], devServer: { port: devServerPort, contentBase: buildOutputPath, historyApiFallback : true } } ``` #### src/index.html ```html Example ``` ``` webpack-dev-server --hot --config webpack.config.js ```

#### See the [Webpack example project](https://github.com/catamphetamine/react-website-webpack-example). If you're using [Parcel](https://parceljs.org/) then it's much simpler than Webpack: see the [basic example project](https://github.com/catamphetamine/react-website-basic-example) for the setup required in order to generate and serve `index.html` and `bundle.js` files over HTTP on `localhost:1234`. So now the website should be fully working. The website (`index.html`, `bundle.js`, CSS stylesheets and images, etc) can now be deployed as-is in a cloud (e.g. on Amazon S3) and served statically for a very low price. The API can be hosted "serverlessly" in a cloud (e.g. Amazon Lambda) which is also considered cheap. No running Node.js server is required. Yes, it's not a Server-Side Rendered approach because a user is given a blank page first, then `bundle.js` script is loaded by the web browser, then `bundle.js` script is executed fetching some data from the API via an HTTP request, and only when that HTTP request comes back — only then the page is rendered (in the browser). Google won't index such websites, but if searchability is not a requirement (at all or yet) then that would be the way to go (e.g. startup "MVP"s or "internal applications"). Server-Side Rendering can be easily added to such setup should the need arise. ## Server Side Rendering Adding server-side rendering to the setup is quite simple though requiring a Node.js process running which increases hosting costs and maintenance complexity. In case of server-side rendering `index.html` is being generated on-the-fly by page rendering server for each incoming HTTP request, so the `index.html` file may be deleted as it's of no use now. #### ./rendering-server.js ```javascript import webpageServer from 'react-website/server' import settings from './react-website' // Create webpage rendering server const server = webpageServer(settings, { // Pass `secure: true` for HTTPS. // // These are the URLs of the "static" javascript and CSS files // which are injected in the resulting Html webpage // as