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. |