<commit_before># Chat Client
- `$ mkdir chat-client && cd chat-client && npm init`

# Index.html
Lets create our home page on `/public` directory.

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"> </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"> </script>
        <script>
            ReactDOM.render(
                React.createElement('div', null,
                    React.createElement('h1', null, 'Hello, world!'),
                    React.createElement('span', null, '<NAME>!')
                ),
                document.getElementById('root')
            );
        </script>
    </body>
</html>
```

# Get some help to serve our page.
- `$ npm install --save-dev grunt grunt-contrib-connect matchdep`
- Create the following file `tasks/connect.js`

```js
module.exports = function (grunt) {
    var config = {
        connect: {
            server: {
                options: {
                    port: 8080,
                    hostname: 'localhost',
                    base: 'public'
                }
            }
        }
    };

    grunt.config.merge(config);
};
```

# Wake up the web server
- `$ grunt connect:server:keepalive`.
- Open the web browser and navigate to `http://localhost:8080/index.html`.

## Next
3. [Move the code out of the html](ch-03.md) - create independent files and use babel as transpiler.<commit_msg>Update ch-02.md<commit_after># Chat Client
- `$ mkdir chat-client && cd chat-client && npm init`

# Index.html
Lets create our home page on `/public` directory.

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"> </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"> </script>
        <script>
            ReactDOM.render(
                React.createElement('div', null,
                    React.createElement('h1', null, 'Hello, world!'),
                    React.createElement('span', null, '<NAME>!')
                ),
                document.getElementById('root')
            );
        </script>
    </body>
</html>
```

# Get some help to serve our page.
- `$ npm install --save-dev grunt grunt-contrib-connect matchdep`
- Create the following file `tasks/connect.js`

```js
module.exports = function (grunt) {
    var config = {
        connect: {
            server: {
                options: {
                    port: 8080,
                    hostname: 'localhost',
                    base: 'public'
                }
            }
        }
    };

    grunt.config.merge(config);
};
```

# Gruntfile.js
Grunt requires you to have a `Gruntfile.js` on the root in order to load/initialize the tasks it has to execute.
```js
module.exports = function (grunt) {
	// Automatically load in all Grunt npm tasks
	require('matchdep').filterDev(['grunt-*', '!grunt-cli']).forEach(grunt.loadNpmTasks);
    grunt.loadTasks('tasks');
};
```
# Wake up the web server
- `$ grunt connect:server:keepalive`.
- Open the web browser and navigate to `http://localhost:8080/index.html`.

## Next
3. [Move the code out of the html](ch-03.md) - create independent files and use babel as transpiler.
{'fraction_non_alphanumeric': 0.1498923573735199, 'fraction_numerical': 0.011302475780409042, 'mean_word_length': 2.0769867549668874, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5241636', 'n_tokens_mistral': 1182, 'n_tokens_neox': 1108, 'n_words': 279}