Skip to main content

Comprehensive Guide to Setting Up an Angular Project with Git

This guide will help you through the process of setting up an Angular project using Git. By following these steps, you can quickly and confidently start your project.

1. Initial Setup​

Angular Initial Setup

Application Name​

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

caution
  • Use lowercase letters and only - as a separator between words.
  • You cannot change the application name after creating the app.

Node Version​

Selecting the appropriate Node version for your project is crucial. Choose from the available list or enter your desired version. Make sure the selected version is available in Docker repositories (like DockerHub).

Repository​

Repository Address​

Enter your project's Git repository address. Example: https://github.com/username/repo

danger

Ensure that the package.json file exists in your project.

Repository Type and Access​

  • Public: Enter the address directly.
  • Private: You can connect your private repo to Kubar in two ways:
Connection with Access Token​
Connection with SSH key​

After completing this step, select "Next".

2. Advanced Settings (Optional)​

Angular Advanced Settings

In this section, you can apply more detailed 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
  • For multiple commands, use ; as separator (example: npm run build;npm run start)

Run Command​

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

Output Folder​

  • Location of built files
  • Default: dist/

Port​

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

tip
  • Port can be changed after initial setup
  • Always use 0.0.0.0 address for port configuration

Resource Scheduling​

Disk​

Environment Variables​

4. Plan Selection​

Angular Plan Selection

At this stage, select your desired plan. You can choose from the available list or configure manually.

Replicas​

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

Importance of Replica Count​

  • Scalability: Increase processing power by increasing replica count
  • High Availability: Maintain functionality if one instance fails
  • Load Distribution: Distribute load among multiple instances

After selecting your desired plan, choose Create App

5. Project Management​

Angular Project Management

After setup, various management capabilities are available:

  • Project status monitoring

  • Connection and resource management

  • Port management

    info

    The port defined in your project must also be defined here.

  • Dockerfile name change (if needed)

    tip

    If your project needs very specific configurations, you can create your custom Dockerfile. For more information, visit this link

  • Build command modification

    Angular Project Management

  • Run command modification

    Angular Project Management

  • Output folder location setting

    Angular Project Management

  • Git repository management and rebuild operations

  • Project branch selection

  • Project restart

tip

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

Using these features, you can efficiently and professionally manage your Angular project.