How to deploy an Angular application using Ultim8e Deployer?

While using Ultim8e Deployer, you can create a standard process to be able to automate deployments process of your Angular based applications and websites.

This article assumes you already have a server in place for your Angular application deployment and your application is ready for deployment on that server.

If you haven’t already purchased Ultim8e Deployer, you’ll need to buy now.

Creating user for Ultim8e Deployer

For security reasons, we recommend you to create a separate user for the use of deployments.

sudo adduser ultimate
sudo usermod -a -G apache ultimate

Note: We assume that you are using Apache web service. If you are using any other web service then please change the name of the group accordingly.

Configuring server

Now to connect Ultim8e Deployer with your server, we need to create a server by going to Servers > New Server.

Enter the name that you can easily memorize and select SSH from the list of protocols.
Enter the IP Address of your server into the Hostname field.
The Username should be ultimate as we created in previous step.
Select/Enter information in the rest of the fields accordingly.
Click on Save.

Once you save the see the list of all the servers. From that list click on SSH Key button on the server that you have recently created for this project.

su - ultimate
mkdir ~/.ssh
chmod 700 ~/.ssh
nano ~/.ssh/authorized_keys

Paste Ultim8e Deployer’s public key, then press Ctrl + X, y then Enter to save.

Now set the correct permissions on the authorized_keys file.

chmod 600 ~/.ssh/authorized_keys

Note: We assume that you are using Apache web service and nodejs is installed on the server. If you are using any other web service then please change the name of the group accordingly.

Creating a project

Create a project by going to Projects > New Project.

Enter the name that you can easily memorize for this project
Select the project environment.
Select the repository tool that you have your angular project repository hosted on along with other required fields. (if you need any help with repository settings please visit our support page.
Select the option for Notification and enter relevant information.
Project Base path is the path that will be used for Deployment purpose. Set the deployment path to /var/www/yourproject.com/frontend/.
Check the radio button if you would like to deploy the project automatically once anyone commits to the branch.
Provide the live URL in-case if you would like to monitor it.
Select the server that you have added during previous step of this article.
Click on Save.

If you are planning to use auto deployment then enable the option Need to deploy project automatically. Enabling this options it will inform Ultim8e Deployer to automatically deploy to the provided server.

Setting up Scripts

We need to execute few commands on the server after every deployment.

To do so go to Projects > Select your Project > Click on Scripts Tabs and click New Script File.

Add the below script to rebuild the node_modules folder.

npm install
npm run build --prod

Scripts are run from top to bottom, so make sure they’re in the correct sequence.

If you are using multiple scripts then ensure that those are also in the order. You can review the order sequence of the scripts in the Scripts Tab.

Deploying your Angular Project

So now, its time to deploy!!!

Go to Projects > Select your Project > Click on Deploy button on top right hand side of the screen.

The server you created should be pre-selected, along with the branch you provided in the project setting.
Select the revision that you would like to deploy.
Click on Deploy to begin the deployment.

Now sit back, relax and look to your logs while deployment is happening.