Skip to main content

Angular Deployment

On KloudBean, you get a complete production-ready stack to build and host high-performance Angular applications with ease in just a few steps.

You get:

  • Git Integration: Pull your code on the server
  • SSH Access: Access to the server to run commands manually and using ADM tool for quick deployment
  • File Manager Access: Add, update, and manage files with ease

Launch New Angular Application​

note

If you already have a server and wish to launch an app on it, go to Applications → Add Application and add an Angular app on the existing server.

In this example, we will create a brand new server.

In order to launch your first Angular app on a new server, navigate to the server provision page:

  1. Select Cloud Provider (your choice)
  2. Select Application → Angular
  3. Select Datacenter with nearest location
  4. Add Application Name
  5. Add Server Name
  6. Select Server size depending on needs (for Angular build, minimum recommended size is 2-4GB)

Angular Launch Step 1

  1. Click on "Launch" button and proceed with the payment process (trial or payment)

Once payment is completed, server with Angular app provisioning will be initiated.

Wait for a while; it will take 5-7 minutes to create your server, configure, and deploy a high-performance web stack.

By default, on a new server you will get the following stack versions:

  • Node: 20.X+
  • npm: Latest
  • nvm: Latest
  • MariaDB: 10.6+ (optional)

Access Application Administration​

Once your server is ready, in order to access the Angular app, select "Apps" from the header menu to go to the Applications page.

On this page, you will see your application in active status.

Angular Launch Step 2

Click on it to navigate to "Application Administration" → "Access" section.

On this section, you will see:

  1. Application default access URL
  2. Server public address to point your custom domain to it

Angular Launch Step 3

Deploy Your Code​

The next step is to deploy your code.

In order to deploy your code, navigate to the "Code Delivery" tab.

Here, on the first tab → "Git Deployment":

  1. Click on "Enable Git Integration"
  2. Copy SSH public key and add to your SCM provider (GitHub, GitLab)

Angular Deploy Step 1

  1. Copy your repo URL and add here in "Git Repository URL", select branch and "Clone Repository"

Angular Deploy Step 2

In this example, I'm going to deploy an example Angular app:

[email protected]:jack-kloudbean/angular-example-app.git

Read the detailed guide on connecting git.

Once the repo is cloned, the next step is to run the deployment. Click on "Pull & Deploy".

Angular Deploy Step 3

Once you click it, it will initiate the build process automatically by doing the following at the backend:

Angular Deploy Step 4

  • Take latest repo pull
  • Enabling bean.conf for configuration like Node version, app source directory, and build command
  • Setting required Node version
  • Installing packages
  • Making build
  • Deploying it to web root directory

Updating Bean Configuration File​

If you need to make any change in bean.conf, you can access it using File Manager or optionally using shell.

Navigate to the third tab "FileManager" and click the "Launch FileManager" button to open it in a new tab.

Once you are in the file manager, in the angular-src directory you will see the bean.conf file.

Angular Bean Conf Step 1

Updating bean.conf​

  1. Locate the bean.conf file, or create a new one if it doesn't exist.
  2. Double-click to edit it. Once the editor opens, update the required variables.

The file will have the following configuration. This is the default settings, where you can change them as per your project requirement if needed:

NODE_VERSION=20.18.0
INSTALL_CMD=npm install
BUILD_CMD=npm run build

# APP SOURCE CODE DIRECTORY IS CUSTOM HERE
APP_DIR=walk-my-dog

Angular Bean Conf Step 2

  1. Once updated, click on the "Save" icon on the top right corner of the editor, and it will be saved.
note

Important: If your source code directory is not in the root of the repository (i.e., it's in a custom subdirectory), you must update the APP_DIR variable in bean.conf to match your actual source directory path. If this is not configured correctly, the build process will fail to locate the source directory and the build will fail.

After saving this, now when you run Build by CI/CD or by manually triggering "Pull & Deploy", your build process will use this updated configuration from bean.conf.

View Build Logs​

Once the build process starts, you can view build logs in live mode. In order to view logs, click on the row of your deployment.

Angular Logs Step 1

Once you click on it, it will open a prompt with the logs of that particular build.

Angular Logs Step 2

In the logs, you can also get information about:

  • Current branch
  • Latest commit
  • Author
  • Files in latest commit

This information is useful to get the info about the commit.

Deployment Using ADM Tool (Application Deployment Manager)​

Application Deployment Manager (ADM) is one of KloudBean's features which enables you to deploy your app quickly by just executing one command. It supports all Node and Python-based applications.

In order to perform deployment using the ADM tool, you have to access your server using shell.

Read the detailed guide on how to SSH server on KloudBean: Getting Server Access Credentials.

Once you are connected to the server, run the following ADM command:

sudo adm

or

sudo adm <app_system_user>

to directly execute for the required application.

Angular ADM Step 1

If you run this command without app_system_user, then you will have to select the app by providing its number in the prompt and click hit enter.

It will start the deployment process with the logs and progress detail on the shell screen.

Angular ADM Step 2

Next Steps​