Node & Angular on codenvy.io

Having problems with angluar/cli on codenvy? Here are some quick tips on getting it working....

2 months ago

Latest Post Wàn 萬 by Arsalan Lavang

Requirement:  codenvy.io account (free)

I had some problems getting angular setup on codenvy.io, so I thought I would share some information on how to get it going in case you're having similar problems.

notice:  I've decided to call my app ngtest2, and I have a pre-existing ngtest1.  You can call your app whatever you want, the macros I've created are generic.

Once you've logged into your codenvy.io account, create a workspace:

Select a node.js stack:

Run terminal commands on codenvy.io workspace:

In terminal run the following commands to get Angular CLI installed in your workspace.  The default directory you'll be in is /projects, but we want to install angular/cli globally.  You'll need to sudo or it will give you an error.

sudo npm install -g @angular/cli

Create your angular app, you will want to stay in your /projects folder:

ng new NameOfYourApp

Install node modules in your app directory. You may need to do this each time you launch your workspace, as I noticed the node modules directory disappears when you stop your workspace:
This is due to the current implementation, rsync is used to backup and restore workspaces, and it respects .gitignore

cd NameOfYourApp
npm install

Create a run command:

Use the following macros in your run command to get it to run and have access to a preview of your app in a browser.

Macros:
cd ${current.project.path} && ng serve --host 0.0.0.0 --public-host ${server.4200}

Preview pane:
http://${server.port.4200}

Run your app:

Make sure you have your app selected in project directory, or it will tell you that it cannot find your angular directory when you use the run command.  You will notice the address to preview your app will be shown at the top of the output screen.

Preview your app:

You'll notice that even though angular runs the app on port 4200, codenvy forwards a different port for you to preview your app.  Make sure you use the right macro in the previous step so that you can view the app on a public host.

We're done, now you can play with it.

Arsalan Lavang

Published 2 months ago

Subscribe to our newsletter

Recieve news directly to your email.

arsalan.io © 2019.