Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
vms:webdev:nodejs:riot [2015/09/14 17:28] admin created |
vms:webdev:nodejs:riot [2017/03/31 15:13] (current) admin ↷ Links adapted because of a move operation |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| 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. | 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 | Let's init our project | ||
| Line 10: | Line 13: | ||
| > mkdir /path/to/dev/project | > mkdir /path/to/dev/project | ||
| > cd /apth/to/dev/project | > cd /apth/to/dev/project | ||
| - | > nano package.json | ||
| - | PASTE: | + | > npm init |
| - | { | + | > npm install riot --save |
| - | "name": "hello-world", | + | > npm install babel --save-dev |
| - | "version": "1.0.0", | + | </code> |
| - | "description": "riot.js Hello Word sample with npm and es6", | + | |
| - | "scripts": { | + | This should be the minimum required to allow server side compilation of your tags (that's why babel is required on the dev platform). |
| - | "watch": "riot --type es6 -w app dist", | + | |
| - | "compile": "riot --type es6 app dist" | + | Some npm packages of interest for a dev environment: |
| - | }, | + | <code> |
| - | "keywords": [ | + | > npm install browser-sync --save-dev |
| - | "riot.js", | + | > npm install parallelshell --save-dev |
| - | "hello-world" | + | > 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": { | "dependencies": { | ||
| - | "riot": "^2.2.3" | + | "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> | </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. | ||
