Comprehensive Guide to Setting Up an Angular Project Using a Compressed File

This guide will walk you through the process of setting up a project using a compressed file. Please follow the steps below carefully.

danger

Ensure that the package.json file is present in your project.

Compressing the Project

To compress the file on Linux-based operating systems, you can use the following command:

zip -r project.zip project_folder  

caution

Please note that the compressed file format must be zip, and avoid using any other compression formats (such as rar, gz, 7z) when uploading to Kubar.

1. Initial Setup

Application Name

First, choose a suitable name for your application. This name will be used as the identifier in your project's domain.

caution

• Use lowercase letters and only - as a separator between words.
• The application name cannot be changed after creation.

Node Version

Select the Node version used in your project. You can choose from the available list or manually enter the version. Please ensure that the Node version you use is available in the Docker Hub repository or other related Docker repositories.

After completing this step, select the "Next" option.

2. Advanced Settings (Optional)

In this section, you can apply more precise settings for your project:

Build

Sample package.json file:

{  
  "name": "your-angular-project",  
  "version": "0.0.0",  
  "scripts": {  
    "ng": "ng",  
    "start": "ng serve",  
    "build": "ng build",  
    "watch": "ng build --watch --configuration development",  
    "test": "ng test",  
    "lint": "ng lint",  
    "e2e": "ng e2e"  
  },  
  "private": true,  
  "dependencies": {  
    "@angular/animations": "^17.0.0",  
    "@angular/common": "^17.0.0",  
    "@angular/compiler": "^17.0.0",  
    "@angular/core": "^17.0.0",  
    "@angular/forms": "^17.0.0",  
    "@angular/platform-browser": "^17.0.0",  
    "@angular/platform-browser-dynamic": "^17.0.0",  
    "@angular/router": "^17.0.0",  
    "rxjs": "~7.8.0",  
    "tslib": "^2.6.0",  
    "zone.js": "~0.14.2"  
  },  
  "devDependencies": {  
    "@angular-devkit/build-angular": "^17.0.0",  
    "@angular/cli": "^17.0.0",  
    "@angular/compiler-cli": "^17.0.0",  
    "@types/jasmine": "~4.3.0",  
    "@types/node": "^16.11.35",  
    "jasmine-core": "~4.6.0",  
    "karma": "~6.4.0",  
    "karma-chrome-launcher": "~3.2.0",  
    "karma-coverage": "~2.2.0",  
    "karma-jasmine": "~5.1.0",  
    "karma-jasmine-html-reporter": "~2.1.0",  
    "typescript": "~5.2.2"  
  }  
}  

Build Command

• Specific command(s) for building the project
• Default: npm run build
• To use multiple commands, use ; as a separator (e.g., npm run build;npm run start)

Run Command

• Command to run the project
• For Angular.js, it is better not to enter any command

Output Folder

• Location of the built files
• Default: dist/

Port

Specify the port number on which your application will run. The default port is 3000, but you can change it.

tip

• After the initial setup, the port can be changed
• When specifying the port, always use the address 0.0.0.0.

Resource Scheduling

Disk

Environment Variables

3. Plan Selection

In this step, select your desired plan. You can choose from the available list or configure it manually.

Replica

Specify the number of replicas (executable instances) for your application. This number affects the performance and availability of your application.

Importance of Replica Count

• Scalability: Increase processing power by increasing the number of replicas
• High Availability: Maintain functionality if one instance fails
• Load Distribution: Distribute the load across multiple instances

After selecting the desired plan, choose the Create App option.

4. File Upload

After creating your Angular app, upload the compressed project file by clicking the "Upload File" button and wait for the project to build.

5. Project Management

After the project is built, you can manage your project from the "Project Management" section.
This section provides you with project management capabilities:

• Check project status

• Manage connections and resources

• Manage ports

  info

  The port you defined in your project must also be defined in this section.

• Change Dockerfile name (if needed)

  tip

  If your project requires very specific settings, you can create your own custom Dockerfile. For more information, refer to this link.

• Change build command

  

• Change run command

  

• Specify output folder location

  

tip

If you want to use multiple commands for building the project, use ; as a separator (e.g., npm run build;npm run start).

Using these features, you can effectively manage and maintain your project.