docs/tutorials/nodejs/index.html - gerrit/www.eclipse.org/che - Git at Google



 <!-- jQuery Eclipse IP approval https://dev.eclipse.org/ipzilla/show_bug.cgi?id=10801 -->
 <script type="text/javascript" charset="utf8" src="../../../docs/assets/scripts/jquery-1.8.1.min.js"></script>

 <script type="text/javascript" charset="utf8">
   $(document).ready(function(){
     var images = document.getElementsByTagName('img');
     for (var i = 0; i < images.length; i++) {
       var image = images[i];
       var parentElement = image.parentElement;
       var a = document.createElement('a');
       if (! image.getAttribute('src').includes("logo-codenvy.svg") && ! image.getAttribute('src').includes("codenvy-contribute.svg") ){
           a.href = image.getAttribute('src');
           a.target = "_blank";
           a.appendChild(image);
           parentElement.appendChild(a);
       }
     }
   });
 </script>
 <!DOCTYPE HTML>
 <html lang="en-US">
 <head>
   <title>Node.js -

       Tutorials
      - Eclipse Che</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="generator" content="Jekyll v3.5.1">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="../../../docs/assets/css/screen.css">
   <link rel="icon" type="image/x-icon" href="../../../docs/assets/imgs/favicon.ico">
   <!--[if lt IE 9]>
   <script src="/js/html5shiv.min.js"></script>
   <script src="/js/respond.min.js"></script>
   <![endif]-->
 </head>


 <body class="wrap">


 <header>
   <nav class="mobile-nav show-on-mobiles">
     <ul>

   <li class="">
     <a href="../../../docs/index.html">Docs</a>
   </li>
   <li class="current">
     <a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
   </li>
   <li class="">
     <a href="../../../docs/openshift/config/index.html">OpenShift</a>
   </li>
   <li>
     <a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
   </li>
 </ul>

   </nav>
   <div class="grid">
     <div class="unit one-third center-on-mobiles">
         <a href="https://eclipse.org/che/">
           <span class="sr-only">Eclipse Che</span>
           <img src="../../../docs/assets/imgs/logo-eclipseche.svg" alt="Eclipse Che Logo"  width="249" height="115">
         </a>
     </div>
     <nav class="main-nav unit two-thirds hide-on-mobiles">
       <ul>

   <li class="">
     <a href="../../../docs/index.html">Docs</a>
   </li>
   <li class="current">
     <a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
   </li>
   <li class="">
     <a href="../../../docs/openshift/config/index.html">OpenShift</a>
   </li>
   <li>
     <a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
   </li>
 </ul>

     </nav>
   </div>
 </header>


     <section class="tutorials">
     <div class="grid">

       <div class="docs-nav-mobile unit whole show-on-mobiles">
   <select onchange="if (this.value) window.location.href=this.value">
     <option value="">Navigate the docs…</option>


     <optgroup label="User Tutorials">


 <ul>

 </ul>


 <ul>


     <li class=""><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>


     <li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>


     <li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>


     <li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>


     <li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>


     <li class="current"><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>


     <li class=""><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>


     <li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>


     <li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>


     <li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>


     <li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>


     <li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>


     <li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>


     <li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>


     <li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>


     <li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>


     <li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>


     <li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>


     <li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>


     <li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>


     <li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>


     <li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>


     <li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>


     <li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>


     <li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>


 </ul>


     </optgroup>


   </select>
 </div>


       <div class="unit four-fifths">
         <article>
           <div class="improve right hide-on-mobiles">
             <a href="https://github.com/codenvy/che-docs/blob/master/src/main/_docs/tutorials/tutorial-nodejs.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>
             <!--<a href="https://github.com/eclipse/che/blob/master/docs/_docs/tutorials/tutorial-nodejs.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>-->
           </div>
           <div class="doc-title">
             <h1>Node.js</h1>
             <div class="doc-title-border">
             </div>
           </div>

 <h1 id="1-start-che">1. Start Che</h1>
 <p>Use your SaaS account for the following, or if you have <a href="../../../docs/setup/getting-started/index.html">installed Che</a>, open a terminal and use the Che startup script:</p>

 <div class="language-shell highlighter-rouge"><pre class="highlight"><code><span class="c"># Interactive help</span>
 docker run -it eclipse/che start

 <span class="c"># Or, full start syntax where &lt;path&gt; is a local directory</span>
 docker run -it --rm -v /var/run/docker.sock:/var/run/docker.sock -v &lt;path&gt;:/data eclipse/che start
 </code></pre>
 </div>

 <p>When you execute this command, you’ll see the URL for the user dashboard.</p>

 <p>The Che dashboard will open. It is where you manage your projects and workspaces. If you do not have any projects in Che, you’ll be asked to create a new project.  If you already have projects in Che, click on <code class="highlighter-rouge">New Project</code> button in the menu bar.</p>

 <h1 id="2-create-a-node-project">2. Create a Node Project</h1>
 <p>To start your Node.js project do the following steps:</p>

 <h3 id="select-stack">Select Stack</h3>

 <p>Your project will be inserted into a workspace, which has a provided Docker runtime. Stacks are the recipes or images used to define the runtime environment for the workspace where your project will be placed.</p>

 <p><img src="../../../docs/assets/imgs/node-stack.jpg" alt="node-stack.jpg" /></p>

 <p>You can filter stacks by following types:</p>
 <ol>
   <li><em>Quick Start.</em> Environments that have a large variety of tools already installed optimized for projects of a particular type. For this example, we will select the Node stack which will create a container with Ubuntu git, nodejs, npm, gulp, bower, grunt, yeoman, angular, and karma installed.</li>
   <li><em>Single Machine.</em> Offers stacks that provide environments with one machine inside it.</li>
   <li><em>Multi Machine.</em> Offers stacks that provide environments with several machine inside it (example - application and database).</li>
 </ol>

 <p>Choose the <code class="highlighter-rouge">Quick Start</code> section and <code class="highlighter-rouge">Node</code> stack.</p>

 <h3 id="configure-workspace">Configure Workspace</h3>

 <p><img src="../../../docs/assets/imgs/node-stack-ram.jpg" alt="node-stack-ram.jpg" /></p>

 <p>Paste your workspace name and configure its RAM. RAM will be the memory limit applied to the machines running your workspace environment. Create a new workspace with any name and set its RAM to 1GB.</p>

 <h3 id="select-source">Select Source</h3>
 <p>This informs Che where the source code for your project is going to come from. It is possible to start a new blank, template, sample project or import one from another location. Choosing the first option will present you with a set of samples that are preconfigured. If you already have a project at a valid URL, choose the second option.  Che gives you choices on how to source the project from Git, GitHub, ZIP, etc..</p>

 <p>We will create a project from a provided template.</p>

 <h3 id="select-template">Select Template.</h3>

 <p><img src="../../../docs/assets/imgs/node-stack-sample.jpg" alt="node-stack-sample.jpg" /></p>

 <p>A template is a Che-provided set of code, configuration, and commands that can be imported to operate within Che. Samples have a compilable source tree and embedded commands. The list of templates available are filtered based upon the stack chosen.</p>

 <p>Choose the <code class="highlighter-rouge">web-nodejs-simple</code> template.</p>

 <h3 id="project-metadata">Project Metadata</h3>
 <p>You can set a name and description of your project. The name is what will appear as the root node in the project explorer in the IDE.</p>

 <p><img src="../../../docs/assets/imgs/node-stack-sample-metadata.jpg" alt="node-stack-sample-metadata.jpg" /></p>

 <h3 id="create-the-project">Create the Project</h3>

 <p>Select <code class="highlighter-rouge">Create</code>.  The project construction process goes through a number of steps including creating a new workspace, downloading an image to use for the workspace environment, instantiating that environment, installing Che services into the workspace, and then creating your project.</p>

 <h1 id="3-run-your-project">3. Run Your Project</h1>
 <p>The project explorer gives you navigation to the various files that make up the project. The editor provides a variety of JavaScript, CSS, and HTML intellisense, multiple key bindings, and a sublime-style navigator.</p>

 <p><img src="../../../docs/assets/imgs/tutorial-nodejs-1.png" alt="tutorial-nodejs-1.png" /></p>

 <p>This project has two custom commands (located in the <code class="highlighter-rouge">CMD</code> drop-down selector in the toolbar:</p>
 <ol>
   <li><code class="highlighter-rouge">install dependencies</code>. This will execute a <code class="highlighter-rouge">npm install --no-bin-links &amp;&amp; bower install</code> process in your workspace. There are quite a few dependencies that will be downloaded and installed into your workspace. Be patient as this command runs.</li>
   <li><code class="highlighter-rouge">run</code>. This will start the grunt server.</li>
 </ol>

 <p>Go ahead and run your project. The output will be displayed in the <code class="highlighter-rouge">Consoles</code> panel. If you run the project, the commands have an embedded <code class="highlighter-rouge">Preview URL</code> that will be displayed for your application. It will look something like: <code class="highlighter-rouge">http://192.168.99.100:32768/</code>. After the grunt server has started, your application will load in another browser tab when you click on that link.</p>

 <p><img src="../../../docs/assets/imgs/tutorial-nodejs-2.png" alt="/docs/assets/imgs/" /></p>

 <p>You can change the content of any command by editing it. The option to modify commands is available from the <code class="highlighter-rouge">CMD</code> drop-down in the toolbar.</p>

 <h1 id="4-install-new-npm-modules">4. Install New NPM Modules</h1>
 <p>Now let’s install some new NPM modules, such as <a href="https://www.npmjs.com/package/express">Express</a>.</p>

 <p>Che provides a terminal with access to your machine. In the <code class="highlighter-rouge">Consoles</code> panel, click <code class="highlighter-rouge">New Terminal (+)</code> button.  This will open up a bash terminal.</p>

 <p>Go to projects/{your-project-name} directory and run commands there..</p>

 <div class="language-shell highlighter-rouge"><pre class="highlight"><code><span class="nb">cd</span> /projects/your-project-name

 <span class="c"># Install express</span>
 sudo npm install --no-bin-links express

 <span class="c"># Verify express is working</span>
 express
 </code></pre>
 </div>

 <p>The <code class="highlighter-rouge">--no-bin-links</code> flag is necessary to avoid causing problems if your machine is running on the Windows operating system.</p>

 <p>You can now use the express generator to create a new application with express.</p>
 <div class="language-shell highlighter-rouge"><pre class="highlight"><code><span class="c"># Install the generator</span>
 sudo npm  install -g express-generator@4

 <span class="c"># Create the app</span>
 express /tmp/foo <span class="o">&amp;&amp;</span> <span class="nb">cd</span> /tmp/foo

 <span class="c"># Install app dependencies</span>
 npm install

 <span class="c"># Start the server</span>
 npm start
 </code></pre>
 </div>

 <p>Your express application will be started on port <code class="highlighter-rouge">3000</code>. But how do you reach it?</p>

 <p>Docker exposes your express server port to a random port in the ephemeral range. Each time you launch Che, this port will be different. Switch to <code class="highlighter-rouge">Operations Perspective</code> (button in upper right corner of toolbar). In the Servers tab, look for an entry where the initial exposed port is <code class="highlighter-rouge">3000</code>.  The table will provide for you an appropriate server address such as <code class="highlighter-rouge">192.168.99.100:32787</code>. Copy this address into your browser, and you should see your express app!</p>

 <p>You can add additional exposed ports to an existing workspace. Exposed ports can be defined in stacks dockerfile or compose file. If using ready-to-go node <a href="../../../docs/devops/runtime-stacks/index.html">stack</a> you can view dockerfile <code class="highlighter-rouge">EXPOSE</code> command on github repo <a href="https://github.com/eclipse/che-dockerfiles/blob/master/recipes/node/Dockerfile">eclipse/che-dockerfiles</a> for a list of exposed ports. Additional exposed ports can be added through dashboard <code class="highlighter-rouge">dashboard &gt; select workspace &gt; runtime &gt; &lt;expand machine&gt; &gt; server &gt; add</code>.</p>

 <p><img src="../../../docs/assets/imgs/nodejs-tutorial-add-port.gif" alt="nodejs-tutorial-add-port.gif" /></p>

 <h1 id="5-snapshot-workspace">5. Snapshot Workspace</h1>
 <p>Che synchronizes your projects in and out of your workspace in between executions of the server. Changes made to projects are synchronized to long term storage. However, if your workspace is shut down, the internal state of the environment will not be saved to disk unless you snapshot it. The internal stage of the environment is any file that is not part of your project tree. For example, the express application installed in the previous steps will update the NPM repository within the environment. If the workspace is stopped (by you or the server), then when the workspace is restarted, it is restarted from the originating image that we downloaded when creating the project.</p>

 <p>A snapshot creates a new image that will be used to load the workspace, based upon the current contents of the environment.</p>

 <p>To snapshot the workspace right-click on the workspace in the left nav bar and choose “Snapshot.”  The workspace will be stopped and snapshotted.</p>


         </article>
       </div>

       <div class="unit one-fifth hide-on-mobiles">
   <aside>


     <h4>User Tutorials</h4>


 <ul>


     <li class=""><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>


     <li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>


     <li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>


     <li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>


     <li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>


     <li class="current"><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>


     <li class=""><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>


     <li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>


     <li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>


     <li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>


     <li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>


     <li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>


     <li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>


     <li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>


     <li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>


     <li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>


     <li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>


     <li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>


     <li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>


     <li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>


     <li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>


     <li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>


     <li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>


     <li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>


     <li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>


 </ul>


   </aside>
 </div>


       <div class="clear"></div>

     </div>
   </section>


   <script>
   var anchorForId = function (id) {
     var anchor = document.createElement("a");
     anchor.className = "header-link";
     anchor.href      = "#" + id;
     anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
     anchor.title = "Permalink";
     return anchor;
   };

   var linkifyAnchors = function (level, containingElement) {
     var headers = containingElement.getElementsByTagName("h" + level);
     for (var h = 0; h < headers.length; h++) {
       var header = headers[h];

       if (typeof header.id !== "undefined" && header.id !== "") {
         header.appendChild(anchorForId(header.id));
       }
     }
   };

   document.onreadystatechange = function () {
     if (this.readyState === "complete") {
       var contentBlock = document.getElementsByClassName("artik")[0] || document.getElementsByClassName("openshift")[0] || document.getElementsByClassName("tutorials")[0] || document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
       if (!contentBlock) {
         return;
       }
       for (var level = 1; level <= 6; level++) {
         linkifyAnchors(level, contentBlock);
       }
     }
   };
 </script>


 </body>
 </html>







	<!-- jQuery Eclipse IP approval https://dev.eclipse.org/ipzilla/show_bug.cgi?id=10801 -->
	<script type="text/javascript" charset="utf8" src="../../../docs/assets/scripts/jquery-1.8.1.min.js"></script>

	<script type="text/javascript" charset="utf8">
	$(document).ready(function(){
	var images = document.getElementsByTagName('img');
	for (var i = 0; i < images.length; i++) {
	var image = images[i];
	var parentElement = image.parentElement;
	var a = document.createElement('a');
	if (! image.getAttribute('src').includes("logo-codenvy.svg") && ! image.getAttribute('src').includes("codenvy-contribute.svg") ){
	a.href = image.getAttribute('src');
	a.target = "_blank";
	a.appendChild(image);
	parentElement.appendChild(a);
	}
	}
	});
	</script>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<title>Node.js -

	Tutorials
	- Eclipse Che</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="generator" content="Jekyll v3.5.1">
	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
	<link rel="stylesheet" href="../../../docs/assets/css/screen.css">
	<link rel="icon" type="image/x-icon" href="../../../docs/assets/imgs/favicon.ico">
	<!--[if lt IE 9]>
	<script src="/js/html5shiv.min.js"></script>
	<script src="/js/respond.min.js"></script>
	<![endif]-->
	</head>


	<body class="wrap">








	<header>
	<nav class="mobile-nav show-on-mobiles">
	<ul>

	<li class="">
	<a href="../../../docs/index.html">Docs</a>
	</li>
	<li class="current">
	<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
	</li>
	<li class="">
	<a href="../../../docs/openshift/config/index.html">OpenShift</a>
	</li>
	<li>
	<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
	</li>
	</ul>

	</nav>
	<div class="grid">
	<div class="unit one-third center-on-mobiles">
	<a href="https://eclipse.org/che/">
	<span class="sr-only">Eclipse Che</span>
	<img src="../../../docs/assets/imgs/logo-eclipseche.svg" alt="Eclipse Che Logo" width="249" height="115">
	</a>
	</div>
	<nav class="main-nav unit two-thirds hide-on-mobiles">
	<ul>

	<li class="">
	<a href="../../../docs/index.html">Docs</a>
	</li>
	<li class="current">
	<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
	</li>
	<li class="">
	<a href="../../../docs/openshift/config/index.html">OpenShift</a>
	</li>
	<li>
	<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
	</li>
	</ul>

	</nav>
	</div>
	</header>


	<section class="tutorials">
	<div class="grid">

	<div class="docs-nav-mobile unit whole show-on-mobiles">
	<select onchange="if (this.value) window.location.href=this.value">
	<option value="">Navigate the docs…</option>


	<optgroup label="User Tutorials">







	<ul>

	</ul>









	<ul>












	<li class=""><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>














	<li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>














	<li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>














	<li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>














	<li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>














	<li class="current"><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>














	<li class=""><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>














	<li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>














	<li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>














	<li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>














	<li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>














	<li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>














	<li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>














	<li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>














	<li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>














	<li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>














	<li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>














	<li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>














	<li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>














	<li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>














	<li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>














	<li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>














	<li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>














	<li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>














	<li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>



	</ul>


	</optgroup>






	</select>
	</div>


	<div class="unit four-fifths">
	<article>
	<div class="improve right hide-on-mobiles">
	<a href="https://github.com/codenvy/che-docs/blob/master/src/main/_docs/tutorials/tutorial-nodejs.md"><i class="fa fa-pencil"></i>  Improve this page</a>
	<!--<a href="https://github.com/eclipse/che/blob/master/docs/_docs/tutorials/tutorial-nodejs.md"><i class="fa fa-pencil"></i>  Improve this page</a>-->
	</div>
	<div class="doc-title">
	<h1>Node.js</h1>
	<div class="doc-title-border">
	</div>
	</div>

	<h1 id="1-start-che">1. Start Che</h1>
	<p>Use your SaaS account for the following, or if you have <a href="../../../docs/setup/getting-started/index.html">installed Che</a>, open a terminal and use the Che startup script:</p>

	<div class="language-shell highlighter-rouge"><pre class="highlight"><code><span class="c"># Interactive help</span>
	docker run -it eclipse/che start

	<span class="c"># Or, full start syntax where <path> is a local directory</span>
	docker run -it --rm -v /var/run/docker.sock:/var/run/docker.sock -v <path>:/data eclipse/che start
	</code></pre>
	</div>

	<p>When you execute this command, you’ll see the URL for the user dashboard.</p>

	<p>The Che dashboard will open. It is where you manage your projects and workspaces. If you do not have any projects in Che, you’ll be asked to create a new project. If you already have projects in Che, click on <code class="highlighter-rouge">New Project</code> button in the menu bar.</p>

	<h1 id="2-create-a-node-project">2. Create a Node Project</h1>
	<p>To start your Node.js project do the following steps:</p>

	<h3 id="select-stack">Select Stack</h3>

	<p>Your project will be inserted into a workspace, which has a provided Docker runtime. Stacks are the recipes or images used to define the runtime environment for the workspace where your project will be placed.</p>

	<p><img src="../../../docs/assets/imgs/node-stack.jpg" alt="node-stack.jpg" /></p>

	<p>You can filter stacks by following types:</p>
	<ol>
	<li><em>Quick Start.</em> Environments that have a large variety of tools already installed optimized for projects of a particular type. For this example, we will select the Node stack which will create a container with Ubuntu git, nodejs, npm, gulp, bower, grunt, yeoman, angular, and karma installed.</li>
	<li><em>Single Machine.</em> Offers stacks that provide environments with one machine inside it.</li>
	<li><em>Multi Machine.</em> Offers stacks that provide environments with several machine inside it (example - application and database).</li>
	</ol>

	<p>Choose the <code class="highlighter-rouge">Quick Start</code> section and <code class="highlighter-rouge">Node</code> stack.</p>

	<h3 id="configure-workspace">Configure Workspace</h3>

	<p><img src="../../../docs/assets/imgs/node-stack-ram.jpg" alt="node-stack-ram.jpg" /></p>

	<p>Paste your workspace name and configure its RAM. RAM will be the memory limit applied to the machines running your workspace environment. Create a new workspace with any name and set its RAM to 1GB.</p>

	<h3 id="select-source">Select Source</h3>
	<p>This informs Che where the source code for your project is going to come from. It is possible to start a new blank, template, sample project or import one from another location. Choosing the first option will present you with a set of samples that are preconfigured. If you already have a project at a valid URL, choose the second option. Che gives you choices on how to source the project from Git, GitHub, ZIP, etc..</p>

	<p>We will create a project from a provided template.</p>

	<h3 id="select-template">Select Template.</h3>

	<p><img src="../../../docs/assets/imgs/node-stack-sample.jpg" alt="node-stack-sample.jpg" /></p>

	<p>A template is a Che-provided set of code, configuration, and commands that can be imported to operate within Che. Samples have a compilable source tree and embedded commands. The list of templates available are filtered based upon the stack chosen.</p>

	<p>Choose the <code class="highlighter-rouge">web-nodejs-simple</code> template.</p>

	<h3 id="project-metadata">Project Metadata</h3>
	<p>You can set a name and description of your project. The name is what will appear as the root node in the project explorer in the IDE.</p>

	<p><img src="../../../docs/assets/imgs/node-stack-sample-metadata.jpg" alt="node-stack-sample-metadata.jpg" /></p>

	<h3 id="create-the-project">Create the Project</h3>

	<p>Select <code class="highlighter-rouge">Create</code>. The project construction process goes through a number of steps including creating a new workspace, downloading an image to use for the workspace environment, instantiating that environment, installing Che services into the workspace, and then creating your project.</p>

	<h1 id="3-run-your-project">3. Run Your Project</h1>
	<p>The project explorer gives you navigation to the various files that make up the project. The editor provides a variety of JavaScript, CSS, and HTML intellisense, multiple key bindings, and a sublime-style navigator.</p>

	<p><img src="../../../docs/assets/imgs/tutorial-nodejs-1.png" alt="tutorial-nodejs-1.png" /></p>

	<p>This project has two custom commands (located in the <code class="highlighter-rouge">CMD</code> drop-down selector in the toolbar:</p>
	<ol>
	<li><code class="highlighter-rouge">install dependencies</code>. This will execute a <code class="highlighter-rouge">npm install --no-bin-links && bower install</code> process in your workspace. There are quite a few dependencies that will be downloaded and installed into your workspace. Be patient as this command runs.</li>
	<li><code class="highlighter-rouge">run</code>. This will start the grunt server.</li>
	</ol>

	<p>Go ahead and run your project. The output will be displayed in the <code class="highlighter-rouge">Consoles</code> panel. If you run the project, the commands have an embedded <code class="highlighter-rouge">Preview URL</code> that will be displayed for your application. It will look something like: <code class="highlighter-rouge">http://192.168.99.100:32768/</code>. After the grunt server has started, your application will load in another browser tab when you click on that link.</p>

	<p><img src="../../../docs/assets/imgs/tutorial-nodejs-2.png" alt="/docs/assets/imgs/" /></p>

	<p>You can change the content of any command by editing it. The option to modify commands is available from the <code class="highlighter-rouge">CMD</code> drop-down in the toolbar.</p>

	<h1 id="4-install-new-npm-modules">4. Install New NPM Modules</h1>
	<p>Now let’s install some new NPM modules, such as <a href="https://www.npmjs.com/package/express">Express</a>.</p>

	<p>Che provides a terminal with access to your machine. In the <code class="highlighter-rouge">Consoles</code> panel, click <code class="highlighter-rouge">New Terminal (+)</code> button. This will open up a bash terminal.</p>

	<p>Go to projects/{your-project-name} directory and run commands there..</p>

	<div class="language-shell highlighter-rouge"><pre class="highlight"><code><span class="nb">cd</span> /projects/your-project-name

	<span class="c"># Install express</span>
	sudo npm install --no-bin-links express

	<span class="c"># Verify express is working</span>
	express
	</code></pre>
	</div>

	<p>The <code class="highlighter-rouge">--no-bin-links</code> flag is necessary to avoid causing problems if your machine is running on the Windows operating system.</p>

	<p>You can now use the express generator to create a new application with express.</p>
	<div class="language-shell highlighter-rouge"><pre class="highlight"><code><span class="c"># Install the generator</span>
	sudo npm install -g express-generator@4

	<span class="c"># Create the app</span>
	express /tmp/foo <span class="o">&&</span> <span class="nb">cd</span> /tmp/foo

	<span class="c"># Install app dependencies</span>
	npm install

	<span class="c"># Start the server</span>
	npm start
	</code></pre>
	</div>

	<p>Your express application will be started on port <code class="highlighter-rouge">3000</code>. But how do you reach it?</p>

	<p>Docker exposes your express server port to a random port in the ephemeral range. Each time you launch Che, this port will be different. Switch to <code class="highlighter-rouge">Operations Perspective</code> (button in upper right corner of toolbar). In the Servers tab, look for an entry where the initial exposed port is <code class="highlighter-rouge">3000</code>. The table will provide for you an appropriate server address such as <code class="highlighter-rouge">192.168.99.100:32787</code>. Copy this address into your browser, and you should see your express app!</p>

	<p>You can add additional exposed ports to an existing workspace. Exposed ports can be defined in stacks dockerfile or compose file. If using ready-to-go node <a href="../../../docs/devops/runtime-stacks/index.html">stack</a> you can view dockerfile <code class="highlighter-rouge">EXPOSE</code> command on github repo <a href="https://github.com/eclipse/che-dockerfiles/blob/master/recipes/node/Dockerfile">eclipse/che-dockerfiles</a> for a list of exposed ports. Additional exposed ports can be added through dashboard <code class="highlighter-rouge">dashboard > select workspace > runtime > <expand machine> > server > add</code>.</p>

	<p><img src="../../../docs/assets/imgs/nodejs-tutorial-add-port.gif" alt="nodejs-tutorial-add-port.gif" /></p>

	<h1 id="5-snapshot-workspace">5. Snapshot Workspace</h1>
	<p>Che synchronizes your projects in and out of your workspace in between executions of the server. Changes made to projects are synchronized to long term storage. However, if your workspace is shut down, the internal state of the environment will not be saved to disk unless you snapshot it. The internal stage of the environment is any file that is not part of your project tree. For example, the express application installed in the previous steps will update the NPM repository within the environment. If the workspace is stopped (by you or the server), then when the workspace is restarted, it is restarted from the originating image that we downloaded when creating the project.</p>

	<p>A snapshot creates a new image that will be used to load the workspace, based upon the current contents of the environment.</p>

	<p>To snapshot the workspace right-click on the workspace in the left nav bar and choose “Snapshot.” The workspace will be stopped and snapshotted.</p>








	</article>
	</div>

	<div class="unit one-fifth hide-on-mobiles">
	<aside>


	<h4>User Tutorials</h4>








	<ul>












	<li class=""><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>














	<li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>














	<li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>














	<li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>














	<li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>














	<li class="current"><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>














	<li class=""><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>














	<li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>














	<li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>














	<li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>














	<li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>














	<li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>














	<li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>














	<li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>














	<li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>














	<li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>














	<li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>














	<li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>














	<li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>














	<li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>














	<li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>














	<li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>














	<li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>














	<li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>














	<li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>



	</ul>





	</aside>
	</div>


	<div class="clear"></div>

	</div>
	</section>



	<script>
	var anchorForId = function (id) {
	var anchor = document.createElement("a");
	anchor.className = "header-link";
	anchor.href = "#" + id;
	anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
	anchor.title = "Permalink";
	return anchor;
	};

	var linkifyAnchors = function (level, containingElement) {
	var headers = containingElement.getElementsByTagName("h" + level);
	for (var h = 0; h < headers.length; h++) {
	var header = headers[h];

	if (typeof header.id !== "undefined" && header.id !== "") {
	header.appendChild(anchorForId(header.id));
	}
	}
	};

	document.onreadystatechange = function () {
	if (this.readyState === "complete") {
	var contentBlock = document.getElementsByClassName("artik")[0] \|\| document.getElementsByClassName("openshift")[0] \|\| document.getElementsByClassName("tutorials")[0] \|\| document.getElementsByClassName("docs")[0] \|\| document.getElementsByClassName("news")[0];
	if (!contentBlock) {
	return;
	}
	for (var level = 1; level <= 6; level++) {
	linkifyAnchors(level, contentBlock);
	}
	}
	};
	</script>






	</body>
	</html>