Angular.js is a free and open-source JavaScript framework used for building dynamic applications. It allows you to use HTML as your template language to extend HTML's syntax to express your application's components clearly and succinctly. It offers a suite of tools to develop, update, and test code. It has many features, such as forms management, routing, etc.
This tutorial will show you how to install Angular.js with Nginx as a reverse proxy on Ubuntu 22.04.
Prerequisites
- A server running Ubuntu 22.04.
- A root password is configured on the server.
Getting Started
Before starting, updating and upgrading all system packages to the latest version is a good idea. You can update all of them by running the following command:
apt update -y
apt upgrade -y
Once all the packages are updated, you can install other required dependencies with the following command:
apt install curl gnupg2 gnupg git wget -y
Once you are finished, you can proceed to the next step.
Install Node.js
You will also need to install your server's latest stable version of Node.js. First, add the Node.js repository using the following command:
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
You should get the following output:
## Run `sudo apt-get install -y nodejs` to install Node.js 16.x and npm
## You may also need development tools to build native addons:
sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
Next, install the Node.js package with the following command:
apt install nodejs
Once the Node.js is installed, you can verify the Node version using the following command:
node --version
You will get the following output:
v16.17.0
Install Angular CLI
Next, you will need to install the Angular CLI on your server. Angular CLI is a command line tool that allows you to create and manage an Angular app via a command line interface.
First, update the NPM package to the latest version with the following command:
npm install npm@latest -g
Next, install the Angular CLI with the following command:
npm install -g @angular/cli
Once the Angular CLI is installed, you can verify the Angular version with the following command:
ng version
You should get the following output:
Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 14.2.3
Node: 16.17.0
Package Manager: npm 8.19.2
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1402.3 (cli-only)
@angular-devkit/core 14.2.3 (cli-only)
@angular-devkit/schematics 14.2.3 (cli-only)
@schematics/angular 14.2.3 (cli-only)
Create a Sample Angular Application
In this section, we will create a sample Angular application.
Run the following command to create a new application named myapp:
ng new myapp
You will get the following output:
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS CREATE myapp/src/styles.css (80 bytes) CREATE myapp/src/test.ts (749 bytes) CREATE myapp/src/assets/.gitkeep (0 bytes) CREATE myapp/src/environments/environment.prod.ts (51 bytes) CREATE myapp/src/environments/environment.ts (658 bytes) CREATE myapp/src/app/app-routing.module.ts (245 bytes) CREATE myapp/src/app/app.module.ts (393 bytes) CREATE myapp/src/app/app.component.css (0 bytes) CREATE myapp/src/app/app.component.html (23115 bytes) CREATE myapp/src/app/app.component.spec.ts (1070 bytes) CREATE myapp/src/app/app.component.ts (209 bytes) ? Packages installed successfully.
Next, change the directory to the myapp directory and run the application with the following command:
cd myapp
ng serve --host 0.0.0.0 --port 8000
If everything is fine, you will get the following output:
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
? Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.10 MB |
polyfills.js | polyfills | 318.00 kB |
styles.css, styles.js | styles | 210.08 kB |
main.js | main | 49.83 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.67 MB
Build at: 2022-09-18T07:17:07.899Z - Hash: d94baf4d66e9fad0 - Time: 26751ms
** Angular Live Development Server is listening on 0.0.0.0:8000, open your browser on http://localhost:8000/ **
? Compiled successfully.
Press the CTRL + C to stop the application. We will create a systemd service file for Angular application.
Create a Systemd Service File for Angular
You can create a systemd service file to manage the Angular application.
nano /lib/systemd/system/myapp.service
Add the following lines:
[Unit] Description=MyWeb Application After=network-online.target [Service] Restart=on-failure WorkingDirectory=/root/myapp ExecStart=/usr/bin/ng serve --port 8000 CPUAccounting=true CPUQuota=50% MemoryAccounting=true MemoryLimit=1024M [Install] WantedBy=multi-user.target
Save and close the file then reload the systemd daemon to apply the changes:
systemctl daemon-reload
Next, start and enable the Angular service with the following command:
systemctl start myapp
systemctl enable myapp
You can now check the status of the Angular service with the following command:
systemctl status myapp
You will get the following output:
? myapp.service - MyWeb Application
Loaded: loaded (/lib/systemd/system/myapp.service; disabled; vendor preset: enabled)
Active: active (running) since Sun 2022-09-18 07:28:42 UTC; 28s ago
Main PID: 56301 (ng serve --port)
Tasks: 11 (limit: 4579)
Memory: 380.1M (limit: 1.0G)
CPU: 14.152s
CGroup: /system.slice/myapp.service
??56301 "ng serve --port 8000" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Sep 18 07:28:42 ubuntu2204 systemd[1]: Started MyWeb Application.
Sep 18 07:28:49 ubuntu2204 ng[56301]: - Generating browser application bundles (phase: setup)...
You can now easily manage your Angular application via systemd. Once you are finished, you can proceed to the next step.
Configure Nginx as a Reverse Proxy for Angular
At this point, the Angular application is started and listens on port 8000. However, it is a good idea to configure the Nginx as a reverse proxy to access the Angular application via port 80.
First, install the Nginx web server package using the following command:
apt install nginx -y
Once the Nginx is installed, create an Nginx configuration file:
nano /etc/nginx/conf.d/app.conf
Add the following lines:
server {
listen 80;
server_name app.example.com;
location / {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Save and close the file when you are finished then verify the Nginx for any syntax error with the following command:
nginx -t
You will get the following output:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Next, restart the Nginx service to apply the changes:
restart nginx
You can also check the status of the Nginx with the following command:
systemctl status nginx
You should get the following output:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sun 2022-09-18 07:24:51 UTC; 6s ago
Docs: man:nginx(8)
Process: 55161 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 55162 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 55163 (nginx)
Tasks: 3 (limit: 4579)
Memory: 3.3M
CPU: 28ms
CGroup: /system.slice/nginx.service
??55163 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
??55164 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
??55165 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Sep 18 07:24:51 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Sep 18 07:24:51 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.
Access Angular Web UI
At this point, Nginx is configured as a reverse proxy for the Angular application. You can now access it using the URL http://app.example.com. You should see your Angular app on the following screen:
Conclusion
Congratulations! You successfully installed Angular with Nginx as a reverse proxy on Ubuntu 22.04. You can now develop and deploy a dynamic app on the web using the Angular.js framework. Feel free to ask me if you have any questions.