Getting Started With Node.js and Che
The most recent release of Eclipse Che boasts rich Node.js features including IntelliSense, key bindings, and refactoring that make adopting it a seamless process. In this post, we'll provide you with a basic starter's guide for using Che.
Join the DZone community and get the full member experience.
Join For FreeEclipse Che was built with Node.js developers in mind. The most recent release boasts rich Node.js features including IntelliSense, key bindings, and refactoring that make adopting Che a seamless process. In this post, we will walk you through:
- Setting up Che
- Configuring a node.js project
- Running your project
- Installing new NPM modules
- Creating workspace snapshots
Get Started With Node.js and Che
Create a new Node project, install additional NPM modules, and save as a snapshot
1. Start Che
/bin/che run
### Open browser to:
http://localhost:8080
If you do not have any projects in Che, you'll be redirected to a page to create a new project, where you'll find all the options necessary for the successful project start.
2. Create a Node Project
There are several options which you can choose to start your Node.js project:
Select Source
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..
We will create a project from a provided template.
Select Stack
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.
There are three ways to choose a stack:
- Ready-To-Go Stacks. 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.
- Stack Library. Offers finer grained stacks that can be used to create specific technology layers needed for a project. Ubuntu and Debian stacks, for example, are minimal stacks with only an operating system and Che tools installed.
- Custom Stack. You can provide your own custom stack.
Choose the Ready-To-Go Node
stack.
Configure Workspace
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.
Select Template
A template is a Che-provided set of code, configuration, and commands that can be imported to operate within Che. There are two types of templates:
- Ready-to-run project samples. These samples have a compilable source tree and embedded commands. The list of templates available are filtered based upon the stack chosen.
- Wizard-driven project configuration. This creates a blank project and then opens the IDE's project configuration wizard to let you scaffold a new project based upon a set of configurable parameters. This option is only available if there an appropriate project type available for the stack chosen.
Choose the web-nodejs-simple
template.
Project Metadata
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.
Create the Project
Select Create Project
. 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.
Click the Open in IDE
button to open your project in the IDE.
3. Run Your Project
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.
This project has two custom commands (located in the CMD
drop-down selector in the toolbar:
install dependencies
. This will execute anpm install --no-bin-links && bower install
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.run
. This will start the grunt server.
Go ahead and run your project. The output will be displayed in the Consoles
panel. If you run the project, the commands have an embedded Preview URL
that will be displayed for your application. It will look something like: http://192.168.99.100:32768/
. After the grunt server has started, your application will load in another browser tab when you click on that link.
You can change the content of any command by editing it. The option to modify commands is available from the CMD
drop-down in the toolbar.
4. Install New NPM Modules
Now, let’s install some new NPM modules, such as Express.
Che provides a terminal with access to your machine. In the Consoles
panel, click New Terminal (+)
button. This will open up a bash terminal.
Go to projects/{your-project-name} directory and run commands there...
cd /projects/your-project-name
# Install express
sudo npm install --no-bin-links express
# Verify express is working
express
The --no-bin-links
flag is necessary to avoid causing problems if your machine is running on the Windows operating system.
You can now use the express generator to create a new application with express.
# Install the generator
sudo npm install -g express-generator@4
# Create the app
express /tmp/foo && cd /tmp/foo
# Install app dependencies
npm install
# Start the server
npm start
Your express application will be started on port 3000
. But how do you reach it?
Your express server port is mapped to a random port on the machine instance. Each time you launch Che, this port will be different. Switch to Operations Perspective
(button in upper right corner of toolbar). In the Servers tab, look for an entry where the initial exposed port is 3000
. The table will provide for you an appropriate server address such as 192.168.99.100:32787
. Copy this address into your browser, and you should see your express app!
[SCREEN SHOT OF EXPRESS APP]
[DEMONSTRATE EDITING OF APP IN TREE]
5. Snapshot Workspace
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.
A snapshot creates a new image that will be used to load the workspace, based upon the current contents of the environment.
Setup Docker Registry
Snapshot images are stored in a Docker registry. You can run your own easily, but the registry must be started before Che is started.
# Start a Docker container that has a Docker registry
# https://docs.docker.com/registry/deploying/
docker run -d -p 5000:5000 --restart=always --name registry registry:2
Create Snapshot
Restart Che after the registry has been added. In the Operations Perspective
, choose Machine > Create Snapshot
. This will initiate an image. The first time you create a snapshot, it can take a while. The system is imaging everything in your image. Reloading your workspace from this image will be nearly instant.
Now, let’s check if snapshot has been successfully created. Stop your workspace at Machine > Stop. It will bring a Start Workspace menu, where you'll be able to choose your stopped workspace, click start button and it will bring you to the Workspace recovering option, which will ask you if you want to recover the workspace from snapshot, click OK button, wait till it starts and continue working with your project at the place, where you’ve stopped it.
To download Che, find more technical documentation or to learn more about the all-new Eclipse Che and how Che works, please visit eclipse.org/che.
Download | Contribute | Docs | Features
Published at DZone with permission of Tyler Jewell, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments