Listings Web

This repo is responsible for user experience in the CBRE Dev Listings App. Pages served by this application are pre-rendered by a compute cluster and delivered as static html. We also deliver a client-side bundle of javascript that boots a react.js applicaiton on top of the static html.

Static html is rendered using react-dom-server's renderToString() method on the server. On page load we use react-dom's hydrate() method to boot the application.

Typically devlopers do not have to think about where their code is being executed as the same components are used to render server side and client side.

Build

This project includes a build script which will pre-transpile things that need to be babelized, as well as produce the client side bundle.

To run a build:

1. npm install

2. npm run build

• there is an optional build-id flag that will create the rendered js in a directory names for that build id. usage: npm run build -- -build-id=<my-build-id> (note the wierd syntax)

This will create a /dist folder containing the transpiled version of this code as well as the client side bundle.

FAQ

How do I run this code locally?

Prerequisites:

Install node js TLS release (https://nodejs.org/en/)

Clone this repository

1. npm install

2. npm run build

3. npm start

Hot re-loading

1. touch ./config/local.yaml
2. in local.yaml copy paste: staticAssets: host: localhost port: 8000 path: client bundleFilename: client.bundle.js stylesheetFilename: styles.css
3. start server as above
4. in a seperate terminal run npx webpack-dev-server

Running unit tests

Unit tests expect jest framework.

To run: jest at project root. To run in watch mode:

1. brew update
2. brew install watchman
3. jest --watch

Note: You'll only have to install watchman once