====== Riot.js ======

You can learn more about the //fantastic// Riot.js minimalistic, yet very powerful javascript MV* framework on [[https://muut.com/|their website]].

We'll start a Riot.js project, once we have Node.js and NPM installed, as well as add a few dev tools that will ease our development efforts. Please note that we'll always use npm to **locally** install all packages, referencing some as "dev-only" so that our package list will include everything that is effectively require for the project production and development usage.

**NOTE for VirtualBox VMs shared folders:**
If you are using a VirtualBox shared folder for your dev files, then you have to “prepare” it for correct symlinks operations from your host computer command line: See [[:vms:webdev:apache#create_the_shared_www_folders|Create VirtualBox shared folder]] and [[vms:python:django#virtualbox_symlinks_inside_shared_folders|Virtualbox: Symlinks inside shared folders]] in this wiki. 

Let's init our project

<code>
> mkdir /path/to/dev/project
> cd /apth/to/dev/project

> npm init
> npm install riot --save
> npm install babel --save-dev
</code>

This should be the minimum required to allow server side compilation of your tags (that's why babel is required on the dev platform).

Some npm packages of interest for a dev environment:
<code>
> npm install browser-sync --save-dev
> npm install parallelshell --save-dev
> npm install rimraf --save-dev
</code>

Basicaly what this will do is write to the //**package.json**// file at the root of your project, also adding a //**node_modules**// directory there. It translates to the following:
<code>
> nano package.json
.
.
  "dependencies": {
    "riot": "^2.2.4"
  },
  "devDependencies": {
    "babel": "^5.8.23"
  }
.
.
</code> 

Once you share your code with others, they'll simply have to issue:
<code>
> npm install
</code>

To make sure all required Node Packages are available to the project.

Refer to [[https://drublic.de/blog/npm-builds/|this great article by Hans Christian Reinl]] for a good starting reference about a setup a modern dev environment using npm.