Setting up Angular in Virtualbox
I am on a project that uses angular 2/4/5 as its front-end. Setting up a Virtualbox environment for this has been a bit trickier than I expected so here is the way to setup angular in Virtualbox for development.
By the end of this article, you will:
- have scripts to build a Virtualbox for angular development
- be able to run the application and run the automated tests
- be able to run the automated tests in a headless manner
My main reasons for setting up angular in Virtualbox:
- sandbox development so it’s easily replicable on other systems
- avoid changing anything of my host system
- have the development environment match the production environment
There are other reasons as well, but these are the most pertinent for me.
- a computer
- Virtualbox / vagrant installed
- an internet connection (system build may require >500MB)
Configuration files discussed in this article can be found here:
As angular is a single page application framework, having direct access to ports the Virtualbox is essential for a single page app. This allows loading of the app to the browser and also testing of the app.
Virtualbox can map ports to local ports and are accesible just by
localhost:port from a browser.
The configuration in the Vagrantfile is:
The guest port number is the port the application uses inside the
Virtualbox. The host port number is the port number you can access
the application using format:
The default port used by angular for serving the app is 4200, so I will map that to the same on the host port:
If there is another application using 4200 on the guest system (say another angular app), changing the host port number to 4201 will avoid port conflicts.
The default port used by angular for testing is 9876, so I will map that to the same on the host port:
If there is another application using 9876 on the guest system (say another angular app), changing the host port number to 9877 will avoid port conflicts.
Install Web Browser
This is optional, but I like to have the Virtualbox to also run the tests instead of connecting a browser to the test port.
Installing Chrome on Ubuntu will require about 500MB.
In the Vagrantfile, add this to the shell provisioning section:
There are two ways to install node, npm, and angular/cli: through the shell provisioner, or through an external script.
Either way is fine. The big difference is which system user is installing the programs. With the shell provisioner, the root user is installing, with an external script, it is the vagrant user.
Install as root
nAdd the following lines to the shell provisioner section of the Vagrantfile:
This will install node, npm, and angular/cli. The major issue with his
is angular/cli may require npm option:
--unsafe-perm for the
installation to fully succeed.
highlights some of the issue. Most revolve around npm compiling native
packages on the system and using the
nobody user… which root
cannot assume the role. There are errors unless we configure npm to
The approach also allows all the installation to occur from one file.
Install as Vagrant User
Installing as vagrant user will require using an external file to load. In an external file, include the following contents:
This file takes a slightly different approach:
- installation of nvm to manage node versioning, which is great for projects with different versions of node.
- creation of a new test-app at the end of installation. Angular still has dependencies online when creating a new project. This guarantees new projects are creatable offline.
With the Virtualbox provisioned, this is the normal workflow:
- logging into the Virtualbox
- create or find the project
- serving the project to the browser
- running the project’s automated tests
Connect through ssh into the Virtualbox by opening a terminal and running:
From here on, all the commands will be from inside the Virtualbox.
Create a new Application:
Create a new project in the shared vagrant folder:
On the host system, look for a folder named
test-app in the same
directory as the Vagrantfile. This application is the same application
created by angular inside the Virtualbox.
Running the Application
In the Virtualbox, find the application and run it. In this case, the
commands create application named:
Open a browser and enter address:
localhost:4200 (or the port
specified by the
host_port_number for guest port 4200.)
Normally, running an angular app just requires running:
ng serve. In
this case, there is a need to set host address to 0.0.0.0 because the
angular application is listening to localhost, which won’t accept
connections outside of the Virtualbox.
Testing the Application
Run tests with commands:
Open a browser and enter address:
localhost:9876 (or the port
specified by the
host_port_number for guest port 9876.) Now the
browser will run all the tests.
You will see this on the command line:
Opening a browser to
localhost:9876, will show:
Testing the Application Headlessly
I like to run tests headless, which means the tests run without a browser.
To run tests without a browser, install Chrome, and the commands to test headless for the test-app are:
Now, to run tests, a browser connection is not required. The system is using Chrome in a headless manner to run the tests.
I have presented a configuration for running angular in Virtualbox. Serving the app, running automated tests, configuring the Virtualbox system.
Having angular in its own environment allows the system to be portable, configured to match production, and avoid messing with the host system configuration.