Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
vms:webdev:nodejs:riot [2015/09/14 17:35]
admin
vms:webdev:nodejs:riot [2017/03/31 15:13] (current)
admin ↷ Links adapted because of a move operation
Line 6: Line 6:
  
 **NOTE for VirtualBox VMs shared folders:** **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]] in this wiki. +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 13: 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 projectalso 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.