Git + SSH Client Setup

In this article, we shall setup SSH client on Windows machine.

What we need ?
  • Git
  • PowerShell (Optional)
  • Command Prompt (Optional)

Let us get started with the setup.

Silent / UnAttended Install :: Using PowerShell

To download & install git in silent / un-attended mode, execute the below commands

1
2
3
[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
Invoke-WebRequest -Uri https://github.com/git-for-windows/git/releases/download/v2.20.0.windows.1/Git-2.20.0-64-bit.exe -OutFile gitbin.exe
cmd "/C .\gitbin.exe /SP- /SILENT /NOCANCEL /NORESTART /COMPONENTS=icons,ext\reg\shellhere,assoc,assoc_sh"

Add git & ssh to your path without closing and re-launching PowerShell.

1
2
$env:Path="$env:Path;C:\Program Files\Git\bin\;"
$env:Path="$env:Path;C:\Program Files\Git\usr\bin\;"

Login to OpenShift Origin

There are quite a few ways to login into openshift through the oc cli. Let us explore them one by one.

1. Interactive Login with Credentials

To Simply login use oc login. This will prompt for username and password, providing which it will authenticate and log you in.

1
2
3
4
5
6
$ oc login
Server[https://localhost:8443]:
username: snmaddula
password:

Login Successful.

You can specify the Server URL in-line:

1
$ oc login https://localhost:8443

2. Non-Interactive Login with Credentials (a.k.a one-liner)

To login by providing username and password in-line :

1
oc login -u=snmaddula -p=secret

To instantly switch to a particular namespace / project on successful login :

1
oc login -u=snmaddula -p=secret -n=project1

In the above examples, -u is short for --username as -p is for --password and -n for --namespace

Wiring Angular with Spring Boot

In this post I am going to share the simplest way to wire an angular front-end to spring boot based back-end application.

STEP 01 : Creating a Spring Boot App

One of the ways that you can get started with Spring Boot is to use the Spring initializer. You can find that at this URL, which is https://start.spring.io
This tool lets you configure and select different options and then generate a full project that can be up and running once you import it into your IDE.

Fill the details as shown in the image and hit Generate Project. The project will get downloaded to your system.

spring-initializer-page with project details

Unzip and import the project into your IDE (STS / Eclipse / IntelliJ).

Your initial project structure would look similar to this image, after importing into STS.

initial project structure

Right click on the NgSpringBootApplication.java and Run As Spring Boot App.

Now navigate to your browser and access the link http://localhost:8080

You should see a white label error page as shown below, indicating that your spring app is configured properly and running just fine.

spring app initial run -- white label error page



STEP 02 : Adding Persistence Layer with a basic model

Create a model class Alpha in the package alpha.ngspring.ngspringboot.model with the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
package alpha.ngspring.ngspringboot.model;

import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

/**
*
* @author snmaddula
*
*/
@Entity
@Table(name = "ALPHA")
public class Alpha {

@Id
private Integer id;
private String name;
private Date dob;
private String region;

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getRegion() {
return region;
}

public void setRegion(String region) {
this.region = region;
}

public Date getDob() {
return dob;
}

public void setDob(Date dob) {
this.dob = dob;
}

}

Create a repository interface AlphaRepo in the package alpha.ngspring.ngspringboot.repo with the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package alpha.ngspring.ngspringboot.repo;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import alpha.ngspring.ngspringboot.model.Alpha;

/**
*
* @author snmaddula
*
*/
@Repository
public interface AlphaRepo extends JpaRepository<Alpha, Integer> {

}


STEP 03 : Adding a REST Controller

Create a class AlphaController in the package alpha.ngspring.ngspringboot.controller with the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package alpha.ngspring.ngspringboot.controller;

import java.util.List;
import java.util.Optional;

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestController;

import alpha.ngspring.ngspringboot.model.Alpha;
import alpha.ngspring.ngspringboot.repo.AlphaRepo;

/**
*
* @author snmaddula
*
*/
@RestController
@RequestMapping("/alpha")
public class AlphaController {

private AlphaRepo alphaRepo;

public AlphaController(AlphaRepo alphaRepo) {
this.alphaRepo = alphaRepo;
}

@GetMapping
public List<Alpha> getAllAlpha() {
return alphaRepo.findAll();
}

@GetMapping("{id}")
public Optional<Alpha> getAlphaById(@PathVariable Integer id) {
return alphaRepo.findById(id);
}

@PostMapping
public Alpha createAlpha(@RequestBody Alpha alpha) {
return alphaRepo.save(alpha);
}

@DeleteMapping("{id}")
@ResponseStatus(HttpStatus.OK)
public void deleteAlpha(@PathVariable Integer id) {
alphaRepo.deleteById(id);
}

}

Update application.properties entries

Update the contents of application.properties as given below.

1
2
3
4
5
6
7
8
##### H2 in-memory datasource configuration #####

spring.datasource.url=jdbc:h2:mem:alpha
spring.datasource.username=sa
spring.datasource.password=

spring.h2.console.enabled=true
spring.h2.console.path=/h2

Using the API Endpoint (/alpha)

Now let us start the application and see how we can use our REST api.

Here I am using Restlet Client extension of Chrome to access our Alpha service.

01 : CREATE ALPHA :: Request & Response


02 : FETCH ALL ALPHA :: Request & Response


03 : DELETE ALPHA :: Request & Response




STEP 04 : Create an Angular App

Now let us develop front-end for our Alpha service using Angular.

You can simply generate an angular app (provided you have angular-cli installed) using the below command.

1
ng new angular-alpha

This command would create a directory ‘angular-alpha’ containing fully-featured angular app.

directory-listing excluding node_modules and cache

You can launch this newly created angular app using the belo command.

1
2
cd angular-alpha
ng serve

launch-log
By default the app will start on port 4200.
In case if you want to specify a different port, you can specifiy it by using –port flag.

1
ng serve --port <custom-port>

Now, launch your favourite browser and go to the below link.

1
https://localhost:4200

You’ll be greeted with the Angular Hello page.

welcome-page of the app


STEP 05 : Configuring Proxy – routing calls to spring boot app

To get our new Angular app to talk to Spring Boot, we need to set up a proxy. The proxy will forward requests from our ng server running on port 4200 to the Spring Boot server running on port 8080. Proxies are great at overcoming the CORS issues where browsers block JavaScript calls to domains that they weren’t served up from.

In the root directory of the angular app, create a file proxy.config.json with the below contents.

1
2
3
4
5
6
7
8
9
10
11
{
"/api":{
"target":"http://localhost:8080",
"secure":false,
"changeOrigin":true,
"logLevel":"debug",
"pathRewrite":{
"^/api":""
}
}
}

This file tells the ng JavaScript server that if it sees any requests that come into it beginning with /api here on line 2, it should forward them on to localhost:8080 (where our spring app would be listening), which is defined as the target on line 3.



The last change we need to make is to tell the Angular server to use the new proxy.

Open package.json file and update the start script as below.

1
"start": "ng serve --proxy-config proxy.config.json"

Now start the app using npm start and navigate to http://localhost:4200/api