diff --git a/README.md b/README.md
index 5a0bbb26e..4d4b391dc 100644
--- a/README.md
+++ b/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(
-
+ReactDOM.render(
+ ,
+ 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).
diff --git a/bin/server.js b/bin/server.js
index 4c86305df..df59e6663 100644
--- a/bin/server.js
+++ b/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}.`);
diff --git a/server.js b/server.js
deleted file mode 100644
index de1cbd943..000000000
--- a/server.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const path = require('path');
-const express = require('express');
-const webpack = require('webpack');
-const internalIp = require('internal-ip');
-const config = require('./webpack.config');
-
-const app = express();
-const compiler = webpack(config);
-
-app.use(require('webpack-dev-middleware')(compiler, {
- noInfo: true,
- publicPath: config.output.publicPath,
- stats: {
- colors: true
- }
-}));
-
-app.use(require('webpack-hot-middleware')(compiler));
-
-app.get('*', function (req, res) {
- res.sendFile(path.join(__dirname, './spec/index.html'));
-});
-
-const port = 8081;
-const ip = internalIp.v4();
-
-app.listen(port, (err) => {
- if (err) {
- console.log(err);
- return;
- }
-
- console.log(' --------------------------------------');
- console.log(` Local: http://0.0.0.0:${port}`);
- console.log(` External: http://${ip}:${port}`);
- console.log(' --------------------------------------');
-});
diff --git a/server/main.js b/server/main.js
deleted file mode 100644
index 2761ba6f3..000000000
--- a/server/main.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const express = require('express');
-const debug = require('debug')('app:server');
-const webpack = require('webpack');
-const webpackConfig = require('../build/webpack.config');
-const config = require('../config');
-
-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()));
-}
-
-module.exports = app;