Goorm IDE Quick Tutorial (for Development Angular)

Goorme IDE is an online integrated development environment service. It supports multiple programming language, including C, C++, PHP, Ruby, Phython, JavaScript, Node.js, and Go.

You can develope any software as do in local do. But when you do make web application requires networking connection for running, you may be trouble if you don’t know Korean. Because it’s documentation are not written in English.

In here I’m going to show you how to run and access the web application in Goorm IDE with building angular development environment.

Create Goorm IDE container

1. Create a new container.

Choose a software stack -> Node.js or Express for Quick Start.

※ You can choose blank and install you own software stack.

2. Click Create button and Wait a moment.

3. Click Run container then you can see workspace of Goorm IDE.

Update Node Using Node Version Manager

Node Version Manager or nvm, is far and away the best method to updating Node.

1. At Terminal of Goorm IDE, to install or update nvm, you can get the install script by using cURL:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash	

2. Restart Goorm Ide Terminal

Just click the Terminal refresh button (Refer to the below Image)

▲ Goorm IDE Terminal & It's refresh button

3. You can verify a successful installation by command. The command will output nvm if everything worked.

$ command -v nvm
nvm

4. Install Stable version (Long Term Support) of Node.js. And verify a version of Node.js

$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v10.15.0...
Downloading https://nodejs.org/dist/v10.15.0/node-v10.15.0-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
manpath: can't set the locale; make sure $LC_* and $LANG are correct
Now using node v10.15.0 (npm v6.4.1)
Creating default alias: default -> lts/* (-> v10.15.0)

$ node -v			# 설치된 버전 재확인
v10.15.0

※ In case that you want to use latest version of Node.js, use node instead of --lts

Install Angular Cli and Create Angular Project

1. Install Angular CLI (with option -g, you can use angular/cli anywhere on the machine.)

$ npm -g install @angular/cli

2. Once complete, you can now access the CLI by simply starting any commands with ng. Create a new project and change into the project path.

$ ng new my-app
$ cd my-app

3. Run this command to run a development server using the Angular CLI.

$ ng serve --host 0.0.0.0 --port 4200 --disable-host-check

4. Open 4200 port to allow external access for our application. Open the Port Forwarding Configuration window via Goorm IDE Menu -> Container -> Port Forwarding Configuration. Add 4200 at Internal Port input box and click Register button. You can See the accessible External Address and Port for your app. (In my case 13.125.52.180:54496)

▲ Port Forwarding Configuration

5. Open a browser to using given application’s access address and port. Now you can see the standard landing page template from your web browser.

▲ App Running Check by IP Address

Checkout the Application running using Goorm IDE Running Command

There is another option for running application and access from external in Goorm IDE. Technically this is same with setting port forwarding but more convenient for using then the former.

1. Configure URL and Port for running application. Open the Running URL and Port window by Goorm IDE Menu -> Project -> Running URL and Port Add any URL as you want to to use. Port number should matched with you spcified in ng serve command with option --port. In this tutorial I used 4200 as internal port number. Select For run also for use this URL as running application.

▲ Project Properties Windows

2. Make a running Command by Goorm IDE Menu -> Project -> Run -> Add run command. Copy the command that used for running angular application and paste it at Script input box.

▲ GoormIDE Run Command Edit Window

3. Open a browser to application URL that you selected before. In my case https://hello-angular.run.goorm.io/ is URL. And you can see that angular template works well.

▲ App Running Check By URL

※ Configure URL and Port menu is applied only, when you run application using Running Commend So, you can’t skip to set both of them up.

Summary

Goorm IDE is just a Linux Virtual Machine. So you can do anything that you usually do with local Linux machine. But some of the functions like external access and port-forwarding are provided with Goorm IDE’s menu. And help or documents for them are written in Korean. So, without knowledge of Korean you may have trouble for using it.

I can’t cover all of the Goorm IDE’s functions, But basic function for using development web application can demonstrated from here. And it is re-written in English for spreading out the good Cloud service to non-Korean speaker.

I hope this quick tutorial is help for using Good Cloud IDE Service.

 

Reference

• Goorm IDE Official Document