Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 3

Here is the previous part of the article: Part 2

In this third part, we address the setup of the Angular 4 project, as we use it as framework for front-end development and with which we will create our Single Page Application.

First, we must have the necessary environment for the creation of a Angular 4 project and then:

  • NodeJS: it’s the JavaScript run-time for running server-side code
  • NPM: it’s the package manager for JavaScript packages, used by default by NodeJS
  • Angular CLI:it’s the Angular Command-Line Interface, that provides us commands to create, test, and run projects
  • TypeScript: it’s the open source language developed by Microsoft as superset of JavaScript to enrich it with, primarily, static type definition and object-oriented prototyping paradigms capabilities. The TypeScript code is then compiled, or transpiled , as it is used to define a compilation that from a source code generates another source code (source-to-source compiler ), in standard JavaScript code

The quickest way to do this is to install the Angular IDE Plugin for Spring Tool Suite . To do so, we access the Eclipse Marketplace from the “Help” menu
14 - Spring Tool Suite Angular IDE pluginand we enter the string “ Angular IDE in the search field. The first of the returned results is what we need to install.
15 - Spring Tool Suite Angular IDE plugin MarketplaceWhen the installation is complete, Spring Tool Suite asks to be restarted. Once we’ve restarted it, we can see that a new Angular perspective appears in the bottom right of the IDE toolbar.
16 - Spring Tool Suite Angular IDE perspectiveIf the icon of the new Angular perspective is not immediately available, it is still possible to activate it from the menu, selecting “Window” -> “Perspective” -> “Open Perspective” -> “Other” and then choosing “Angular”.

In addition to the new perspective, we can also note that the entry “Angular CLI” appeared in the IDE interface in the “Servers” panel at the bottom left. We will see soon, once we have created our first Angular 4 project, what it will be for.

Creating an Angular 4 project

Once positioned in the new Angular perspective of Spring Tool Suite we can create a new Angular project. Selecting from the menu “File” -> “New” we see that now appears among the available choices also “ Angular Project ” which of course is the item that we choose.
17 - Spring Tool Suite create new Angular 4 projectWe give a name to our project, for example “springboot-example-angular4-frontend”, and choose the versions of NodeJS, NPM and the Angular CLI (Command Line Interface) to use.
18 - Spring Tool Suite create new Angular 4 projectOnce we click on “Finish”, it starts the installation and configuration of the environment with everything we need.
19 - Spring Tool Suite new Angular 4 project installing required toolsFollowing this, the project is created by executing the appropriate command of the Angular Command-Line Interface: ng new

As we can see from the following screenshot at some point the command is in fact executed:

ng new springboot-example-angular4-frontend

19b - Spring Tool Suite new Angular 4 project installing required toolsAt the end of the procedure we get a message saying that our project has been correctly created and, consequently, we see it appear in the “Project Explorer” panel of Spring Tool Suite and also in the “Servers” panel at the bottom left, under the heading “Angular CLI”.
20 - Spring Tool Suite new Angular 4 project createdThe structure of the new Angular project created is the one shown in the following figure. For the moment we do not go into the detail of all the folders and files generated with the creation of the project. For a detailed description of each of them you can consult the QuickStart page of the Angular documentation itself.

However, we can see that at the first level there are 3 folders:

  • src: contains all the content of our application, therefore, components, CSS styles, static resources, images, etc.
  • e2e: contains the necessary for the execution of the tests and is in fact for end-to-end
  • node_modules: is the folder created by Node.js for the management of third-party modules used in the project

For the moment we focus only on the “src” folder which, as mentioned, will contain our application. Inside we find:

  • The index.html file: it’s the project homepage, in whose body is inserted the tag related to the “ app-root ” component which constitutes the root component of the page, in which we will add other components. In fact, within the index.html file we find the definition:
    
      	
    
    
  • The app folder: it contains the application root Component, with its TypeScript definition, its html template, and its css stylesheet. This component is the one that will be rendered as “app-root” tag in the homepage.
    The app folder also contains the app.module.ts file which represents the so-called application Root module
  • The assets folder: it is the folder where we will put all the static resources, such as images and other files to be referenced, which will be included in the application.
  • The environments folder: it contains the configuration files of the various environments, such as development, testing, production, etc.

20 - Spring Tool Suite new Angular 4 project structure

Run the Angular project

To launch the Angular project, we must run the following command from the Command Line Interface integrated into the Spring Tool Suite

ng serve


22 - Spring Tool Suite new Angular 4 project started ng serveOnce the bundle build is complete, we can see in the Spring Tool Suite “Servers” panel that our “springboot-example-angular4-frontend” project is in “Running” state and is running locally on the port 4200 .
23 - Spring Tool Suite new Angular 4 project running on port 4200We can now open the browser pointing to the address localhost:4200 and we can see the default welcome page of the newly created Angular project.
24 - Spring Tool Suite new Angular 4 project browser localhosto 4200But, wait a moment. On the 4200 port? So we are saying that we have the Spring Boot application, with our back-end, which runs on port 8080 and the Angular 4 project that run independently on another port?

Yes, for now.

In the next article we will see how to integrate the two parts when we are developing and, above all, how to get, in the build phase, a single package to deploy in the production environment.

So, let’s get back for now to our running Angular application. The content that we see on the browser is that of the root “app” component that contains the tag

Welcome to {{title}}!!

Here we note the typical Angular syntax with the double brace {{ }} indicating that “title” is binded with the value of the homonymous variable defined inside the Component, that is, in the file app.component.ts , and that therefore its value will vary with that of the variable itself. In the Component, in fact, we find the declaration:

export class AppComponent {
  title = 'app';
}

If we now try to change the value of the “title” variable, for example by replacing the string “app” with the string “davismol.net Tutorial”

export class AppComponent {
  title = 'davismol.net Tutorial';
}

We see that, when saving the file, the Angular application is immediately recompiled on the fly and, if there are no errors, the browser page is automatically refreshed showing the updated version with the changes made.
25 - Spring Tool Suite Angular 4 project browser refresh with modification
At this point we have a working basic Angular 4 application in addition to the Spring Boot backend that we implemented in the first part of the article.

This entry was posted in $1$s. Bookmark the permalink.

2 thoughts on “Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 3

  1. Pingback: Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 2 | Dede Blog

Leave a Reply

Your email address will not be published. Required fields are marked *