Angular and Git project setup

Angular-CLI, VSCode and Git/GitHub configuration

I will create Angular 4 client application with project setup needed to seamlessly develop and store source code to remote Github repository.

Projects folder structure

I will create client side SPA application as client to Java spring boot server application, created in previous blog article.

Both projects (server & client) are in separate folders, only at the deployment stage they will be combined under java server application. In the simplest micro-service deployment scenario, both applications are served from the same server instance. Embedded Tomcat server  will serve all files needed for angular client side application and to drive java REST services as application back-end.

Generate angular client project

After you have installed all prerequisites for angular you create a new empty application from command line. Command will create application subfolder and all required app files for simple angular app.

You can experiment with some command line switches to add additional generator options like generate routes file for example (–routing).

Dry-Run

If you do not want to actually execute commands then add –dry-run option (“-d”  for short) and inspect generated set of commands.

Open project in Visual Studio Code

You can open project from command line (“code .”) or open folder from inside editor.

Integrate with Git  source control

After angular-cli create a project it will immediately initialize GIT folder and commit initial version of an application.

You can check log of git commits right after generating new app :

and result will be something like this :

We see initial commit was done by @angular/cli tool.

Configure remote Git repository

If you wish to publish code to the Git-Hub server, you need to prepare local windows git to be able to push code to remote server without any username/password interaction.

This type of user identification is used with HTTPS repository address for git communication.

You need to have github repository created (empty project!). When you create new repository, try to not create readme file, because you will not be able to push initial code up without “force” option. This option is not possible inside visual studio code. “Force push” is possible with command line or with github desktop client.

With remote repository created configure “git remote”  localy with correct “https” repository address :

Push code to Github

After adding remote repository to local git configuration you select “Push to…” inside visual studio code Git extension menu (…), select remote repository and push.

SSH key passphrase

You need to setup your ssh-agent correctly to work with remote git repository without constant interruptions with an question for ssh passphrase.

If you use bash terminal inside vscode and you work on windows, add the ssh-agent to the setup script in your home (~) folder (usually c:\Users\your_name\.bash_profile file.

You can check with the command

If you get the question then you probably need to create proper ssh-agent setup.

 

 

Links

Initial code for AngularMyApp is on this github repostory.

 

Java Spring Boot project setup

You can get source code of this project from github repository “SpringBootMyApp” .

Create Spring Boot Maven project

Go to Spring Boot project generator web site and select minimal project definition with dependencies :

  • Web:  dependency for embedded tomcat server
  • jOOQ: integrated SQL query language and data model code generator
  • Flyway: database model migration tool
  • Postgresql JDBC driver

After downloading ZIP project file, unzip it to some folder and open folder in IntelliJ IDE environment.

Startup class

The project will automatically include embedded tomcat server and spring application start will configure whole application at startup.

Setup project properties

Under src/main/resources find file application.properties and add configuration for database access  and flyway configuration. Your application will start migration procedure at every application start and syncronize to the correct version automatically.

Flyway migration files

You need a folder where your SQL migration files will reside:

Add first migration file, for example “create currency table” will be saved in file V1_0_0__currency.sql:

Be extra careful with names , first part (V1_0_0) is version of migration file, second part of the name is a description, separated with two underline characters.

The scripts must be correct SQL! Validate it first in database environment. If script is not valid, migration procedure will break and you will probably have hard time to figure out what was wrong.

Now you run your application and your database must be prepared according to migration script changes automatically. Flyway start automatically with your application.

More information on this video tutorial for flyway and spring boot..

Maven plugin settings

If you want more control around code generation and migration life cycle, you add flyway and jooq plugins:

Add this properties to the properties section in pom.xml file:

  • Database connection settings in pom.xml will be used by jooq code generator and flyway migration maven plugins.

Flyway and Jooq dependency and version

You probably already have it from generated pom.xml, add it if you don’t have it.

Version was not required by spring boot but I put version in because I encounter differences between plugin version and spring boot version of the libraries.

Now you need to define plugin definitions as :

Flyway and Jooq maven commands

After you add plugin definitions to maven pom.xml file you get new lifecycle commands :

When flyway commands are used directly they search for SQL files in the target “classes” folder and not in the source tree (“src”). When project compiled the files, target folder is synchronized with the current version of code in the source tree.

After compiling project you could run “flyway:migrate” command for example. You can always check files in the target folder and delete it if you are not sure you have the latest version of the files.

Jooq code generation

Jooq generate data model code from your database. The code is added to the project in the namespace as you defined in plugin definition.  It’s wise to split plugin definition to properties and plugin definition part.

Every time you compile project, database model code is regenerated. Check here for more information about jooq.

You can check how database model code is regenerated simply by deleting a line from one of generated files and recompile the project again.

More about jooq & spring boot can be found here.

Create JSON service

Now I need to test the environment if everything is set in place as should be. I will create simple currency service as sample application and test basic CRUD operations.

Create simple data container class

To be able to send JSON payload back and forth from client to server we create a simple transport class:

Service class and database interaction with Jooq

Now we create service class with which we will interact with database :

REST controller with router mapping

On the end we need a controller class to expose access points for REST service:

Don’t forget to instantiate services with DI (dependency injection) with @Autowire annotation. This simplify development a lot !

Interactive testing

The service should in this point work as expected, just run application and navigate to “localhost:8080/api/currency”.

You can search for a specific currency with added path variable appended to Url address:

Postman application for Http API testing

To inspect service in more details on the client side, you can use Postman application.

Look at example ofadding a currency with a POST message:

In the headar I add “content-type” variable with value “application/json” and in the payload a json message with a new currency json structure. On the right side I received “200-OK” and a currency record with a record and new row identifier registered in the database.

 

PowerShell startup script

PowerShell on windows 10

To allow script files execution on your machine, you need to change security policy and allow that.  To execute command and change policy you need to run powershell console as administrator.

How to create startup script

Create profile.ps1 file and put it into one of default folders (C:\Windows\System32\WindowsPowerShell\v1.0).

Beep on backspace

To disable annoying beep when press on backspace if there is no character left, add next command to the startup script:

 

 

Visual Studio Code – customization

How to customize your visual studio code

Custom settings are saved in “settings.json” file, you can open it with Ctrol+Shift+P,  search for Preference: Open user settings .

Custom terminal shell – BASH

If you wish to change shell from default windows powershell to cygwin bash terminal for example, use next setting:


Of course you will need to set proper folder where your cygwin is installed on your machine.

Change size of fonts and window appearance

GIT integration enable/disable

If you do not won’t GIT integration (doesn’t work good with cygwin git version on windows for example) use :

But, you will need to type git commands manually if you do that.

Angular v4 Typescript Snippets

The Visual Studio Code plugin for code snippets from JohnPapa.

Angular Language Service

The Visual Studio Code plugin for Html editor intellisense from Angular team.

 GIT History

Plugin for GIT file compare and history/log checking.

Install :

Use: