Setup AngularJS Development Environment on Ubuntu/Debian

Written by Anand Singh on the 30th Aug 2021

Exported on 08-Oct-2021 11:18:58

Install Angular Development Environment On Debian Based Server With AttuneOps

This Blueprint Installs Angular Development Environment On Debian Based Server

AngularJS is a front-end web framework base on Javascript for developing single-page applications. It is maintained mainly by Google and a community of individuals and corporations.

The framework is most suited to your application development. It is fully extensible and works well with other libraries. AngularJS is a JavaScript framework. It can be added to an HTML page with a script tag. AngularJS is maintained mainly by Google, and extends HTML attributes with Directives, and binds data with Expressions.

Pre-Blueprint Attune setup
  1. On the Inputs tab, create a Linux node for the host you wish to install the stack on.
  2. On the Inputs tab, create Linux credentials to connect to the host you wish to install the stack on.
Steps Involved
  • Install Node.js and NPM
  • Setup Angular project
  • Launch Angular Development Server In Background
Supported Operating Systems
  • Ubuntu
  • Debian

Parameters

Name Type Script Reference Default Value Comment
Linux Node Linux / Unix Server linuxNode
Linux User Linux OS Credential linuxUser
s1 Linux / Unix Server s1
s1c Linux OS Credential s1c

1 - Install NodeJS and NPM

Installs NodeJS v16 and NPM

The connection details have changed from the last step.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Refresh repositories
sudo apt update


# Add nodejs 16 ppa (personal package archive) from nodesource
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

# Install nodejs and npm
sudo apt-get install -y nodejs

2 - Setup Angular Project

The connection details have changed from the last step.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Install angular and angular-cli
sudo npm i -g @angular/cli

# Create new project 
echo "y" | ng new angular-project --style css

3 - Install and configure screen

Installs screen package, used to keep the development server running in background

The connection details have changed from the last step.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Install screen
sudo apt -y install screen

# Configure zombie mode
sudo echo "zombie xy" >> ~/.screenrc

4 - Start Development Server

Starts Angular development server on http://YOUR_IP:4200,

To access the server process run: screen -x

The connection details have changed from the last step.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Change directory
cd angular-project

# Start dev server
screen -m -d ng serve --host 0.0.0.0