Ractive.js tutorial - Setting up your environment (1 of 6)

(Previous step: Tutorial introduction)

I'm glad you decided to get here and I hope I can get your attention all the way down to the end of this tutorial.

So, the first step is to set up your working environment with the tools you will use.
I assume you have NodeJS and NPM installed in your system. If not, please, follow the previous link and come back once you're ready.

Now, you need to create a new empty folder and initialize your project with npm:

$ mkdir notetaker-ractive
$ cd notetaker-ractive
$ npm init

NPM will ask you some questions. You don't need to type anything and just press Enter for every question.
This command has created a new file (package.json) in your folder.
Now we need to install the basic packages:

Webpack: will help us to bundle all our JS code and to use ES2015 import system.
Babel: will help us to use new ES2015 features by transpiling them to ES5 compatible code.
node-static: will serve our files (static server)

You can use this command:

$ npm i webpack babel-core babel-loader node-static --save-dev

UPDATE (24-02-2016): The new version of Babel (v6) requires an extra dependency to be installed and configured. Please, if you're following this tutorial for the first time, also install babel-preset-es2015 dependency.

Let's start coding by creating our main html file.
root-folder/index.html

<!DOCTYPE html>  
<html>  
    <head>
        <meta charset="UTF-8">
        <title>Ractive Github notetaker</title>
        <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">    </head>
    <body>
<div class="container">  
            <div class="starter-template">
                <h1>Bootstrap starter template</h1>
                <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
            </div>
        </div>
    </body>
</html>

In order to easily start a local server, we need to update our package.json file. Look for the scripts attribute and replace the test property with a start one.
root-folder/package.json

{
  "name": "notetaker-ractive",
  "version": "1.0",
  "description": "",
  "main": "index.js",
  "author": "Your name",
  "scripts": {
    "start": "node node_modules/node-static/bin/cli.js"
  },
  "author": "Your name",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^5.8.9",
    "babel-loader": "^5.3.2",
    "bootstrap": "^3.3.5",
    "node-static": "^0.7.7",
    "webpack": "^1.10.5"
  }
}

Now you only need to run this command from the root folder of your project everytime you want to start the server:

$ npm start

If you load this URL (http://localhost:8080/) in your browser, you should see the basic html we've created.

The next step is to configure webpack with the ability to compile modern JS code.

We need to create a new webpack configuration file and populate it with these contents: root-folder/webpack.config.js

module.exports = {  
    entry: './app/js/app.js',
    output: {
        filename: './dist/js/app-bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                // If you're following the tutorial for the first time, 
                // you will be using Babel v6 and thus you need to add this extra configuration
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

We're telling webpack that our main JS file is ./app/js/app.js, that it should create only one bundle file with its contents (and all its dependencies) in ./dist/js/app-bundle.js and that it should filter all files with a javascript extension (.js) with babel loader, which will interpret ES2015 code and convert it to ES5 compatible.

Now let's create a basic app.js file to test everything is working.
root-folder/app/js/app.js

class Foo {  
    constructor(name) {
        this.name = name;
    }

    sayHi() {
        alert(`Hi ${this.name}!!!`);
    }
}

let bar = new Foo('Paquitosoft');

bar.sayHi();

Just a simple code to demonstrate that ES2015 code is compiled by babel to produce ES5 compatible code.

Update the index.html file to load the bundle JS at the end of the body tag:

<!DOCTYPE html>  
<html>  
    <head>
        <meta charset="UTF-8">
        <title>Ractive Github notetaker</title>
        <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">    </head>
    <body>
<div class="container">  
            <div class="starter-template">
                <h1>Bootstrap starter template</h1>
                <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
            </div>
        </div>

        <script src="dist/js/app-bundle.js"></script>
    </body>
</html>

The last step is to update our npm start script to also use webpack in monitoring mode so, everytime you update a file, it updates the generated bundle.
root-folder/package.json

{
  "name": "notetaker-ractive",
  "version": "1.0",
  "description": "",
  "main": "index.js",
  "author": "Your name",
  "scripts": {
    "start": "webpack -w & node_modules/node-static/bin/cli.js"
  },
  "author": "Your name",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^5.8.9",
    "babel-loader": "^5.3.2",
    "bootstrap": "^3.3.5",
    "node-static": "^0.7.7",
    "webpack": "^1.10.5"
  }
}

Now, restart your local server (Ctrl + C and npm start) and you should see something like this in your terminal:

$ npm start

> notetaker-ractive@1.0.0 start /Users/telemaco/Desarrollo/Node/Librerias/notetaker-ractive
> webpack -w & node_modules/node-static/bin/cli.js

serving "." at http://127.0.0.1:8080  
Hash: 5fd031eb3af6c5d592e1  
Version: webpack 1.10.5  
Time: 748ms  
                  Asset     Size  Chunks             Chunk Names
./dist/js/app-bundle.js  2.43 kB       0  [emitted]  main
    + 1 hidden modules

Reload your browser to check that everything is ok.
This is what you should see: