Merge branch 'master' of github.com:teamleadercrm/teamleader-ui

README.md

@@ -1,6 +1,6 @@
 # Teamleader UI
 
-Teamleader UI is a set of [React](http://facebook.github.io/react/) components used in Teamleader.
+Teamleader UI is a set of [React](http://facebook.github.io/react/) components that implement the [Teamleader](https://www.teamleader.eu) design specification.
 
 ## Installation
 
@@ -16,13 +16,32 @@ In this minimal example, we import a `Button` with styles already bundled:
 
 ```js
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Button } from 'teamleader-ui';
 
-render(
-  <Button label="Hello World!" />
+ReactDOM.render(
+  <Button label="Hello World!" />,
+  document.getElementById('app')
 );
 ```
 
+## Contributing
+
+To work in the project you will need a node version supporting ES6 syntax. Although the project is built using the Babel compiler, we use some ES6 features on the development server. Consider using [n](https://github.com/tj/n) or [nvm](https://github.com/creationix/nvm) to handle different node versions!
+
+To start the spec site locally, follow these simple steps:
+
+```bash
+$ git clone https://github.com/teamleadercrm/teamleader-ui
+$ cd teamleader-ui/
+$ npm i
+$ npm start
+```
+
+Open up a browser and the local spec will be available at [http://localhost:3000/](http://localhost:3000/).
+
+
+
 ## License
 
 This project is licensed under the terms of the [MIT license](https://github.com/teamleadercrm/teamleader-ui/blob/master/LICENSE).

bin/server.js

@@ -1,9 +1,56 @@
-const fs = require('fs');
+const express = require('express');
+const webpack = require('webpack');
 const config = require('../config');
-const server = require('../server/main');
+const webpackConfig = require('../build/webpack.config');
 const debug = require('debug')('app:bin:server');
+
 const host = config.server_host;
 const port = config.server_port;
+const app = express();
+const paths = config.utils_paths;
+
+// This rewrites all routes requests to the root /index.html file
+// (ignoring file requests). If you want to implement universal
+// rendering, you'll want to remove this middleware.
+app.use(require('connect-history-api-fallback')());
+
+// ------------------------------------
+// Apply Webpack HMR Middleware
+// ------------------------------------
+if (config.env === 'development') {
+  const compiler = webpack(webpackConfig);
+
+  debug('Enable webpack dev and HMR middleware');
+  app.use(require('webpack-dev-middleware')(compiler, {
+    publicPath: webpackConfig.output.publicPath,
+    contentBase: paths.client(),
+    hot: true,
+    historyApiFallback: true,
+    quiet: config.compiler_quiet,
+    noInfo: config.compiler_quiet,
+    lazy: false,
+    stats: config.compiler_stats,
+  }));
+  app.use(require('webpack-hot-middleware')(compiler));
+
+  // Serve static assets from ~/spec/static since Webpack is unaware of
+  // these files. This middleware doesn't need to be enabled outside
+  // of development since this directory will be copied into ~/dist
+  // when the application is compiled.
+  app.use(express.static(paths.client('static')));
+} else {
+  debug(
+    'Server is being run outside of live development mode, meaning it will ' +
+    'only serve the compiled application bundle in ~/dist. Generally you ' +
+    'do not need an application server for this and can instead use a web ' +
+    'server such as nginx to serve your static files.'
+  );
+
+  // Serving ~/dist by default. Ideally these files should be served by
+  // the web server and not the app server, but this helps to demo the
+  // server in production.
+  app.use(express.static(paths.dist()));
+}
 
-server.listen(port);
+app.listen(port);
 debug(`HTTP server is now running at http://${host}:${port}.`);